@dargmuesli/nuxt-vio-testing 13.1.0

package/e2e/specs/pages/root/error-404.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test'
+
+import { SITE_URL } from '#src/utils/constants'
+import { COOKIE_CONTROL_DEFAULT, PAGE_READY } from '../../../utils/constants'
+
+test.beforeEach(async ({ context }) => {
+  await context.addCookies([
+    {
+      name: 'ncc_c',
+      value: COOKIE_CONTROL_DEFAULT,
+      url: SITE_URL,
+    },
+  ])
+})
+
+test.describe('page', () => {
+  test('status code', async ({ request }) => {
+    const resp = await request.get('/does-not-exit')
+    expect(resp.status()).toBe(404)
+  })
+})
+
+test.describe('internationalization', () => {
+  const textEnglish = '404 - Not Found'
+  const textGerman = '404 - Nicht gefunden'
+
+  test('English translations', async ({ page }) => {
+    await page.goto('/does-not-exit')
+    await expect(page.getByText(textEnglish)).toBeVisible()
+  })
+
+  test('German translations', async ({ page }) => {
+    await page.goto('/de/does-not-exit')
+    await expect(page.getByText(textGerman)).toBeVisible()
+  })
+})
+
+test.describe('visual regression', () => {
+  test('consistent appearance', async ({ page }) => {
+    await page.goto('/does-not-exit')
+    await PAGE_READY({
+      page,
+      options: {
+        isLoading: false,
+      },
+    })
+    await expect(page).toHaveScreenshot(
+      'visual-regression-consistent-appearance-system.png',
+      {
+        fullPage: true,
+      },
+    )
+  })
+
+  // TODO: enable (https://github.com/harlan-zw/nuxt-og-image/issues/81)
+  // test('generates the open graph image', async ({ page }) => {
+  //   await page.goto('/__og-image__/image/does-not-exist/og.png')
+  //   await expect(page).toHaveScreenshot({ fullPage: true })
+
+  //   await page.goto('/__og-image__/image/de/does-not-exist/og.png')
+  //   await expect(page).toHaveScreenshot({ fullPage: true })
+  // })
+})

package/e2e/specs/pages/root/index.spec.ts

@@ -0,0 +1,114 @@
+import AxeBuilder from '@axe-core/playwright'
+import { test, expect } from '@playwright/test'
+
+import { SITE_URL } from '#src/utils/constants'
+import { COOKIE_CONTROL_DEFAULT, PAGE_READY } from '../../../utils/constants'
+import { testMetadata } from '../../../utils/tests'
+
+test.beforeEach(async ({ context }) => {
+  await context.addCookies([
+    {
+      name: 'ncc_c',
+      value: COOKIE_CONTROL_DEFAULT,
+      url: SITE_URL,
+    },
+  ])
+})
+
+test.describe('accessibility', () => {
+  test('violations', async ({ page }) => {
+    await page.goto('/')
+    await PAGE_READY({ page })
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+    expect(
+      accessibilityScanResults.violations
+        .map(
+          (x) =>
+            `${x.id}\n${x.nodes.map(
+              (y) => `${y.failureSummary}\n(${y.html}\n(${y.target})`,
+            )}`,
+        )
+        .join('\n'),
+    ).toEqual('')
+    // expect(accessibilityScanResults.violations.length).toEqual(0)
+  })
+})
+
+test.describe('page', () => {
+  test('status code', async ({ request }) => {
+    const resp = await request.get('/')
+    expect(resp.status()).toBe(200)
+  })
+  test('metadata', async ({ page }) => {
+    await testMetadata({ page, path: '/', title: 'Vio Playground' })
+  })
+})
+
+test.describe('internationalization', () => {
+  const textEnglish = 'Please check your input 🙈'
+  const textGerman = 'Bitte überprüfe deine Eingaben 🙈'
+
+  test('English translations', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByText(textEnglish)).toBeVisible()
+  })
+
+  test('German translations', async ({ page }) => {
+    await page.goto('/de')
+    await expect(page.getByText(textGerman)).toBeVisible()
+  })
+})
+
+test.describe('visual regression', () => {
+  test('consistent appearance', async ({ page }) => {
+    await page.goto('/')
+    await PAGE_READY({ page })
+    await expect(page).toHaveScreenshot(
+      'visual-regression-consistent-appearance-system.png',
+      {
+        fullPage: true,
+      },
+    )
+
+    await page.emulateMedia({ colorScheme: 'light' })
+    await expect(page).toHaveScreenshot(
+      'visual-regression-consistent-appearance-light.png',
+      {
+        fullPage: true,
+      },
+    )
+
+    await page.emulateMedia({ colorScheme: 'dark' })
+    await expect(page).toHaveScreenshot(
+      'visual-regression-consistent-appearance-dark.png',
+      {
+        fullPage: true,
+      },
+    )
+  })
+
+  test('consistent appearance with cookie banner', async ({
+    context,
+    page,
+  }) => {
+    // TODO: only remove the cookie control cookie (https://github.com/microsoft/playwright/issues/10143)
+    await context.clearCookies()
+
+    await page.goto('/')
+    await PAGE_READY({ page, options: { cookieControl: false } })
+    await expect(page).toHaveScreenshot(
+      'visual-regression-consistent-appearance-with-cookie-banner.png',
+      {
+        fullPage: true,
+      },
+    )
+  })
+
+  test('generates the open graph image', async ({ page }) => {
+    await page.goto('/__og-image__/image/og.png')
+    await expect(page).toHaveScreenshot({ fullPage: true })
+
+    await page.goto('/__og-image__/image/de/og.png')
+    await expect(page).toHaveScreenshot({ fullPage: true })
+  })
+})

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-dev-chromium-linux.json

@@ -0,0 +1,30 @@
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@id": "http://localhost:3000/#website",
+      "@type": "WebSite",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "inLanguage": "en",
+      "name": "Vio Playground",
+      "url": "http://localhost:3000"
+    },
+    {
+      "@id": "http://localhost:3000/#webpage",
+      "@type": "WebPage",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "url": "http://localhost:3000",
+      "isPartOf": {
+        "@id": "http://localhost:3000/#website"
+      },
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            "http://localhost:3000"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-dev-firefox-linux.json

@@ -0,0 +1,30 @@
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@id": "http://localhost:3000/#website",
+      "@type": "WebSite",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "inLanguage": "en",
+      "name": "Vio Playground",
+      "url": "http://localhost:3000"
+    },
+    {
+      "@id": "http://localhost:3000/#webpage",
+      "@type": "WebPage",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "url": "http://localhost:3000",
+      "isPartOf": {
+        "@id": "http://localhost:3000/#website"
+      },
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            "http://localhost:3000"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-dev-webkit-linux.json

@@ -0,0 +1,30 @@
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@id": "http://localhost:3000/#website",
+      "@type": "WebSite",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "inLanguage": "en",
+      "name": "Vio Playground",
+      "url": "http://localhost:3000"
+    },
+    {
+      "@id": "http://localhost:3000/#webpage",
+      "@type": "WebPage",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "url": "http://localhost:3000",
+      "isPartOf": {
+        "@id": "http://localhost:3000/#website"
+      },
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            "http://localhost:3000"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-node-chromium-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"http://localhost:3001/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"http://localhost:3001"},{"@id":"http://localhost:3001/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Vio Playground","url":"http://localhost:3001","isPartOf":{"@id":"http://localhost:3001/#website"},"potentialAction":[{"@type":"ReadAction","target":["http://localhost:3001"]}]}]}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-node-firefox-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"http://localhost:3001/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"http://localhost:3001"},{"@id":"http://localhost:3001/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Vio Playground","url":"http://localhost:3001","isPartOf":{"@id":"http://localhost:3001/#website"},"potentialAction":[{"@type":"ReadAction","target":["http://localhost:3001"]}]}]}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-node-webkit-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"http://localhost:3001/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"http://localhost:3001"},{"@id":"http://localhost:3001/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Vio Playground","url":"http://localhost:3001","isPartOf":{"@id":"http://localhost:3001/#website"},"potentialAction":[{"@type":"ReadAction","target":["http://localhost:3001"]}]}]}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-static-chromium-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"https://localhost:3002/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"https://localhost:3002"},{"@id":"https://localhost:3002/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Vio Playground","url":"https://localhost:3002","isPartOf":{"@id":"https://localhost:3002/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://localhost:3002"]}]}]}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-static-firefox-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"https://localhost:3002/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"https://localhost:3002"},{"@id":"https://localhost:3002/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Vio Playground","url":"https://localhost:3002","isPartOf":{"@id":"https://localhost:3002/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://localhost:3002"]}]}]}

package/e2e/specs/pages/root/index.spec.ts-snapshots/schema-org-graph-static-webkit-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"https://localhost:3002/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"https://localhost:3002"},{"@id":"https://localhost:3002/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Vio Playground","url":"https://localhost:3002","isPartOf":{"@id":"https://localhost:3002/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://localhost:3002"]}]}]}

package/e2e/specs/pages/root/legal-notice.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test'
+
+import { SITE_URL } from '#src/utils/constants'
+import { COOKIE_CONTROL_DEFAULT, PAGE_READY } from '../../../utils/constants'
+import { testMetadata } from '../../../utils/tests'
+
+const PAGE_PATH = '/legal-notice'
+
+test.beforeEach(async ({ context }) => {
+  await context.addCookies([
+    {
+      name: 'ncc_c',
+      value: COOKIE_CONTROL_DEFAULT,
+      url: SITE_URL,
+    },
+  ])
+})
+
+test.describe('page', () => {
+  test('status code', async ({ request }) => {
+    const resp = await request.get(PAGE_PATH)
+    expect(resp.status()).toBe(200)
+  })
+
+  test('metadata', async ({ page }) => {
+    await testMetadata({
+      page,
+      path: PAGE_PATH,
+      title: 'Legal notice · Vio Playground',
+    })
+  })
+})
+
+test.describe('visual regression', () => {
+  test('consistent appearance', async ({ page }) => {
+    await page.goto(PAGE_PATH)
+    await PAGE_READY({ page })
+    await expect(page).toHaveScreenshot({
+      fullPage: true,
+    })
+  })
+
+  test('generates the open graph image', async ({ page }) => {
+    await page.goto('/__og-image__/image/legal-notice/og.png')
+    await expect(page).toHaveScreenshot({ fullPage: true })
+
+    await page.goto('/__og-image__/image/de/legal-notice/og.png')
+    await expect(page).toHaveScreenshot({ fullPage: true })
+  })
+})

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-dev-chromium-linux.json

@@ -0,0 +1,31 @@
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@id": "http://localhost:3000/#website",
+      "@type": "WebSite",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "inLanguage": "en",
+      "name": "Vio Playground",
+      "url": "http://localhost:3000"
+    },
+    {
+      "@id": "http://localhost:3000/legal-notice/#webpage",
+      "@type": "WebPage",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "name": "Legal Notice",
+      "url": "http://localhost:3000/legal-notice",
+      "isPartOf": {
+        "@id": "http://localhost:3000/#website"
+      },
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            "http://localhost:3000/legal-notice"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-dev-firefox-linux.json

@@ -0,0 +1,31 @@
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@id": "http://localhost:3000/#website",
+      "@type": "WebSite",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "inLanguage": "en",
+      "name": "Vio Playground",
+      "url": "http://localhost:3000"
+    },
+    {
+      "@id": "http://localhost:3000/legal-notice/#webpage",
+      "@type": "WebPage",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "name": "Legal Notice",
+      "url": "http://localhost:3000/legal-notice",
+      "isPartOf": {
+        "@id": "http://localhost:3000/#website"
+      },
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            "http://localhost:3000/legal-notice"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-dev-webkit-linux.json

@@ -0,0 +1,31 @@
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@id": "http://localhost:3000/#website",
+      "@type": "WebSite",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "inLanguage": "en",
+      "name": "Vio Playground",
+      "url": "http://localhost:3000"
+    },
+    {
+      "@id": "http://localhost:3000/legal-notice/#webpage",
+      "@type": "WebPage",
+      "description": "Vio is @dargmuesli's Nuxt layer.",
+      "name": "Legal Notice",
+      "url": "http://localhost:3000/legal-notice",
+      "isPartOf": {
+        "@id": "http://localhost:3000/#website"
+      },
+      "potentialAction": [
+        {
+          "@type": "ReadAction",
+          "target": [
+            "http://localhost:3000/legal-notice"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-node-chromium-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"http://localhost:3001/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"http://localhost:3001"},{"@id":"http://localhost:3001/legal-notice/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Legal notice","url":"http://localhost:3001/legal-notice","isPartOf":{"@id":"http://localhost:3001/#website"},"potentialAction":[{"@type":"ReadAction","target":["http://localhost:3001/legal-notice"]}]}]}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-node-firefox-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"http://localhost:3001/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"http://localhost:3001"},{"@id":"http://localhost:3001/legal-notice/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Legal notice","url":"http://localhost:3001/legal-notice","isPartOf":{"@id":"http://localhost:3001/#website"},"potentialAction":[{"@type":"ReadAction","target":["http://localhost:3001/legal-notice"]}]}]}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-node-webkit-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"http://localhost:3001/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"http://localhost:3001"},{"@id":"http://localhost:3001/legal-notice/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Legal notice","url":"http://localhost:3001/legal-notice","isPartOf":{"@id":"http://localhost:3001/#website"},"potentialAction":[{"@type":"ReadAction","target":["http://localhost:3001/legal-notice"]}]}]}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-static-chromium-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"https://localhost:3002/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"https://localhost:3002"},{"@id":"https://localhost:3002/legal-notice/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Legal notice","url":"https://localhost:3002/legal-notice","isPartOf":{"@id":"https://localhost:3002/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://localhost:3002/legal-notice"]}]}]}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-static-firefox-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"https://localhost:3002/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"https://localhost:3002"},{"@id":"https://localhost:3002/legal-notice/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Legal notice","url":"https://localhost:3002/legal-notice","isPartOf":{"@id":"https://localhost:3002/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://localhost:3002/legal-notice"]}]}]}

package/e2e/specs/pages/root/legal-notice.spec.ts-snapshots/schema-org-graph-static-webkit-linux.json

@@ -0,0 +1 @@
+{"@context":"https://schema.org","@graph":[{"@id":"https://localhost:3002/#website","@type":"WebSite","description":"Vio is @dargmuesli's Nuxt layer.","inLanguage":"en","name":"Vio Playground","url":"https://localhost:3002"},{"@id":"https://localhost:3002/legal-notice/#webpage","@type":"WebPage","description":"Vio is @dargmuesli's Nuxt layer.","name":"Legal notice","url":"https://localhost:3002/legal-notice","isPartOf":{"@id":"https://localhost:3002/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://localhost:3002/legal-notice"]}]}]}

package/e2e/specs/pages/root/privacy-policy.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+import { SITE_URL } from '#src/utils/constants'
+import { COOKIE_CONTROL_DEFAULT, PAGE_READY } from '../../../utils/constants'
+
+test.beforeEach(async ({ context }) => {
+  await context.addCookies([
+    {
+      name: 'ncc_c',
+      value: COOKIE_CONTROL_DEFAULT,
+      url: SITE_URL,
+    },
+  ])
+})
+
+test.describe('page', () => {
+  test('status code', async ({ request }) => {
+    const resp = await request.get('/privacy-policy')
+    expect(resp.status()).toBe(200)
+  })
+})
+
+test.describe('visual regression', () => {
+  test('consistent appearance', async ({ page }) => {
+    await page.goto('/privacy-policy')
+    await PAGE_READY({ page })
+    await expect(page).toHaveScreenshot({
+      fullPage: true,
+      timeout: 10000,
+    })
+  })
+
+  test('generates the open graph image', async ({ page }) => {
+    await page.goto('/__og-image__/image/privacy-policy/og.png')
+    await expect(page).toHaveScreenshot({ fullPage: true })
+
+    await page.goto('/__og-image__/image/de/privacy-policy/og.png')
+    await expect(page).toHaveScreenshot({ fullPage: true })
+  })
+})