test: basic nuxt3 test

.github/workflows/test-nuxt3.yml

@@ -0,0 +1,64 @@
+name: Nuxt 3 tests
+on:
+ - push
+jobs:
+ build-and-test:
+ runs-on: ubuntu-latest
+ name: Build and test
+
+ env:
+ dir: ./examples/nuxt3
+
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Install node
+ uses: actions/setup-node@v2
+ with:
+ node-version: 16
+
+ - name: Install pnpm
+ uses: pnpm/[email protected]
+ with:
+ version: 7.1.7
+
+ - name: Get pnpm store directory
+ id: pnpm-cache
+ run: |
+ echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+ - name: Cache pnpm modules
+ uses: actions/cache@v2
+ with:
+ path: |
+ ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+ ~/.cache/Cypress
+ key: pnpm-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ pnpm-v1-${{ runner.os }}-
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Build
+ run: pnpm run build
+
+ - name: Build book
+ working-directory: ${{env.dir}}
+ run: pnpm run story:build
+
+ - name: Run tests
+ working-directory: ${{env.dir}}
+ run: pnpm run ci
+
+ - uses: actions/upload-artifact@v2
+ if: failure()
+ with:
+ name: cypress-screenshots
+ path: ${{env.dir}}/cypress/screenshots
+
+ - uses: actions/upload-artifact@v2
+ if: always()
+ with:
+ name: cypress-videos
+ path: ${{env.dir}}/cypress/videos

examples/nuxt3/cypress.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+ viewportWidth: 1280,
+ viewportHeight: 768,
+ chromeWebSecurity: false,
+
+ retries: {
+ runMode: 2,
+ openMode: 0,
+ },
+
+ e2e: {
+ baseUrl: 'http://localhost:4567',
+ setupNodeEvents (on, config) {
+ // implement node event listeners here
+ },
+ },
+})

examples/nuxt3/cypress/e2e/render-story.cy.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+
+describe('Story render', () => {
+ const getIframeBody = () => cy.get('iframe[data-test-id="preview-iframe"]')
+ .its('0.contentDocument.body').should('not.be.empty')
+ .then(cy.wrap)
+
+ it('should display the story content', () => {
+ cy.visit('/story/components-simple-story-vue?variantId=_default')
+ getIframeBody().contains('Simple story in Nuxt NuxtLink')
+ })
+})

examples/nuxt3/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "[email protected]",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}

examples/nuxt3/cypress/support/e2e.js

@@ -0,0 +1 @@
+import './commands'

examples/nuxt3/package.json

@@ -5,12 +5,18 @@
  "scripts": {
  "story:dev": "histoire dev",
  "story:build": "histoire build",
- "story:preview": "histoire preview --port 4567"
+ "story:preview": "histoire preview --port 4567",
+ "ci": "start-server-and-test story:preview http://localhost:4567/ test",
+ "test": "cypress run",
+ "test:dev": "cypress open --config baseUrl=http://localhost:6006",
+ "test:examples": "pnpm run story:build && pnpm run ci"
  },
+ "type": "module",
  "devDependencies": {
  "@histoire/plugin-nuxt": "workspace:*",
  "@histoire/plugin-vue": "workspace:*",
  "@nuxtjs/tailwindcss": "^5.1.2",
+ "cypress": "^10.4.0",
  "histoire": "workspace:*",
  "nuxt": "^3.0.0-rc.8",
  "vue": "^3.2.37"

examples/nuxt3/tailwind.config.cjs

@@ -1 +1 @@
-module.exports = {}
+export default {}