@dargmuesli/nuxt-vio-testing 13.1.0

package/e2e/utils/tests.ts

@@ -0,0 +1,574 @@
+import { expect, type Page } from '@playwright/test'
+import { joinURL, withoutTrailingSlash } from 'ufo'
+
+import { SITE_URL } from '#src/utils/constants'
+
+export const testMetadata = async ({
+  page,
+  path,
+  title,
+}: {
+  page: Page
+  path: string
+  title: string
+}) => {
+  await page.goto(path)
+
+  expect(await page.title()).toStrictEqual(title)
+
+  const meta = [
+    {
+      tag: 'html',
+      attributes: [
+        { key: 'dir', value: 'ltr' },
+        { key: 'lang', value: 'en' },
+      ],
+    },
+    // {
+    //   tag: 'link',
+    //   attributes: [
+    //     {
+    //       key: 'data-testid',
+    //       value: 'polyfill-preload',
+    //     },
+    //     { key: 'rel', value: 'preload' },
+    //     {
+    //       key: 'href',
+    //       value:
+    //         'https://polyfill.io/v3/polyfill.min.js?features=Promise&flags=gated',
+    //     },
+    //     {
+    //       key: 'crossorigin',
+    //       value: 'anonymous',
+    //     },
+    //     {
+    //       key: 'as',
+    //       value: 'script',
+    //     },
+    //   ],
+    // },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'charset',
+          value: 'utf-8',
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'viewport',
+        },
+        { key: 'content', value: 'width=device-width, initial-scale=1' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:image',
+        },
+        {
+          key: 'content',
+          value: joinURL(SITE_URL, '/__og-image__/image', path, '/og.png'),
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:image:type',
+        },
+        {
+          key: 'content',
+          value: 'image/png',
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:card',
+        },
+        { key: 'content', value: 'summary_large_image' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:image',
+        },
+        {
+          key: 'content',
+          value: joinURL(SITE_URL, '/__og-image__/image', path, '/og.png'),
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:image:src',
+        },
+        {
+          key: 'content',
+          value: joinURL(SITE_URL, '/__og-image__/image', path, '/og.png'),
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:image:width',
+        },
+        { key: 'content', value: '1200' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:image:width',
+        },
+        { key: 'content', value: '1200' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:image:height',
+        },
+        { key: 'content', value: '600' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:image:height',
+        },
+        { key: 'content', value: '600' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:image:alt',
+        },
+        { key: 'content', value: 'Social Preview Image for a Vio webpage.' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:image:alt',
+        },
+        { key: 'content', value: 'Social Preview Image for a Vio webpage.' },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'rel',
+          value: 'icon',
+        },
+        {
+          key: 'href',
+          value: '/favicon.ico',
+        },
+        {
+          key: 'sizes',
+          value: 'any',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'rel',
+          value: 'icon',
+        },
+        {
+          key: 'href',
+          value: '/favicon-16x16.png',
+        },
+        {
+          key: 'type',
+          value: 'image/png',
+        },
+        {
+          key: 'sizes',
+          value: '16x16',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'rel',
+          value: 'icon',
+        },
+        {
+          key: 'href',
+          value: '/favicon-32x32.png',
+        },
+        {
+          key: 'type',
+          value: 'image/png',
+        },
+        {
+          key: 'sizes',
+          value: '32x32',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'rel',
+          value: 'apple-touch-icon',
+        },
+        {
+          key: 'href',
+          value: '/apple-touch-icon.png',
+        },
+        {
+          key: 'type',
+          value: 'image/png',
+        },
+        {
+          key: 'sizes',
+          value: '180x180',
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:type',
+        },
+        { key: 'content', value: 'website' },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'rel',
+          value: 'canonical',
+        },
+        {
+          key: 'href',
+          value: `${SITE_URL}${path}`,
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'robots',
+        },
+        {
+          key: 'content',
+          value:
+            process.env.NODE_ENV === 'production'
+              ? 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'
+              : 'noindex, nofollow',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'href',
+          value: `${SITE_URL}${path}`,
+        },
+        {
+          key: 'hreflang',
+          value: 'en',
+        },
+        {
+          key: 'rel',
+          value: 'alternate',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'href',
+          value: withoutTrailingSlash(`${SITE_URL}/de${path}`),
+        },
+        {
+          key: 'hreflang',
+          value: 'de',
+        },
+        {
+          key: 'rel',
+          value: 'alternate',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'href',
+          value: `${SITE_URL}${path}`,
+        },
+        {
+          key: 'hreflang',
+          value: 'x-default',
+        },
+        {
+          key: 'rel',
+          value: 'alternate',
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:url',
+        },
+        {
+          key: 'content',
+          value: `${SITE_URL}${path}`,
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:locale',
+        },
+        { key: 'content', value: 'en' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:locale:alternate',
+        },
+        { key: 'content', value: 'de' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'msapplication-TileColor',
+        },
+        { key: 'content', value: '#202020' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'theme-color',
+        },
+        { key: 'content', value: '#202020' },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'href',
+          value: '/site.webmanifest?v=bOXMwoKlJr',
+        },
+        {
+          key: 'rel',
+          value: 'manifest',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'color',
+          value: '#202020',
+        },
+        {
+          key: 'href',
+          value: '/assets/static/favicon/safari-pinned-tab.svg?v=bOXMwoKlJr',
+        },
+        {
+          key: 'rel',
+          value: 'mask-icon',
+        },
+      ],
+    },
+    {
+      tag: 'link',
+      attributes: [
+        {
+          key: 'href',
+          value: '/favicon.ico?v=bOXMwoKlJr',
+        },
+        {
+          key: 'rel',
+          value: 'shortcut icon',
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'description',
+        },
+        { key: 'content', value: "Vio is @dargmuesli's Nuxt layer." },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:description',
+        },
+        { key: 'content', value: "Vio is @dargmuesli's Nuxt layer." },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:description',
+        },
+        { key: 'content', value: "Vio is @dargmuesli's Nuxt layer." },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'msapplication-Config',
+        },
+        {
+          key: 'content',
+          value: '/assets/static/favicon/browserconfig.xml?v=bOXMwoKlJr',
+        },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:title',
+        },
+        { key: 'content', value: title },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:title',
+        },
+        { key: 'content', value: title },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'property',
+          value: 'og:site_name',
+        },
+        { key: 'content', value: 'Vio Playground' },
+      ],
+    },
+    {
+      tag: 'meta',
+      attributes: [
+        {
+          key: 'name',
+          value: 'twitter:site',
+        },
+        { key: 'content', value: '@dargmuesli' },
+      ],
+    },
+    {
+      tag: 'script',
+      attributes: [
+        {
+          key: 'id',
+          value: 'schema-org-graph',
+        },
+        { key: 'type', value: 'application/ld+json' },
+      ],
+    },
+  ]
+
+  for (const object of meta) {
+    await expect(
+      page.locator(
+        object.tag +
+          object.attributes
+            ?.map((attribute) => `[${attribute.key}="${attribute.value}"]`)
+            .join(''),
+      ),
+    ).toBeAttached()
+  }
+
+  expect(await page.locator('#schema-org-graph').innerText()).toMatchSnapshot(
+    `schema-org-graph-${process.env.VIO_SERVER || 'dev'}.json`,
+  )
+
+  // if (process.env.VIO_SERVER === 'static') {
+  //   expect(
+  //     await page
+  //       .locator('meta[http-equiv="Content-Security-Policy"]')
+  //       .innerText(),
+  //   ).toMatchSnapshot(`content-security-policy.txt`)
+  // }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "devDependencies": {
+    "@axe-core/playwright": "4.9.1",
+    "@eslint/js": "9.5.0",
+    "@playwright/test": "1.44.1",
+    "@types/node": "20.14.2",
+    "cross-env": "7.0.3",
+    "eslint": "9.5.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "lodash-es": "4.17.21",
+    "typescript": "5.4.5",
+    "typescript-eslint": "7.13.0",
+    "ufo": "1.5.3"
+  },
+  "engines": {
+    "node": "20"
+  },
+  "files": [
+    "e2e/fixtures",
+    "e2e/specs",
+    "e2e/utils",
+    "package.json",
+    "playwright.config.ts"
+  ],
+  "name": "@dargmuesli/nuxt-vio-testing",
+  "peerDependencies": {
+    "playwright-core": "1.44.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dargmuesli/vio.git"
+  },
+  "scripts": {
+    "lint": "pnpm run lint:js && pnpm run lint:ts",
+    "lint:fix": "pnpm run lint:js --fix",
+    "lint:js": "eslint --cache",
+    "lint:ts": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:docker:br": "pnpm run test:e2e:docker:build && pnpm run test:e2e:docker:run",
+    "test:e2e:docker:build": "docker build -t test-e2e_development --build-arg UID=$(id -u) --build-arg GID=$(id -g) --target test-e2e_development ..",
+    "test:e2e:docker:run": "docker run --rm -v \"$PWD/..:/srv/app\" -v \"$(pnpm store path):/srv/.pnpm-store\" test-e2e_development",
+    "test:e2e:docker:server:dev": "pnpm run test:e2e:docker:br pnpm --dir tests run test:e2e:server:dev",
+    "test:e2e:docker:server:dev:update": "pnpm run test:e2e:docker:server:dev --update-snapshots",
+    "test:e2e:docker:server:node": "pnpm run test:e2e:docker:br pnpm --dir tests run test:e2e:server:node",
+    "test:e2e:docker:server:node:update": "pnpm run test:e2e:docker:server:node --update-snapshots",
+    "test:e2e:docker:server:static": "pnpm run test:e2e:docker:br pnpm --dir tests run test:e2e:server:static",
+    "test:e2e:docker:server:static:update": "pnpm run test:e2e:docker:server:static --update-snapshots",
+    "test:e2e:server:dev": "cross-env PORT=3000 SITE_URL=http://localhost:3000 VIO_SERVER=dev pnpm run test:e2e",
+    "test:e2e:server:node": "cross-env NODE_ENV=production NUXT_PUBLIC_I18N_BASE_URL=http://localhost:3001 NUXT_PUBLIC_SITE_URL=http://localhost:3001 PORT=3001 VIO_SERVER=node pnpm run test:e2e",
+    "test:e2e:server:static": "cross-env NODE_ENV=production PORT=\"${PORT:-3002}\" SITE_URL=\"${SITE_URL:-https://localhost:3002}\" VIO_SERVER=static pnpm run test:e2e"
+  },
+  "type": "module",
+  "version": "13.1.0"
+}