@dargmuesli/nuxt-vio-testing 20.6.7 → 20.7.0

package/dist/e2e/fixtures/vioTest.d.mts

@@ -0,0 +1,17 @@
+import * as _playwright_test0 from "@playwright/test";
+import { Page } from "@playwright/test";
+
+//#region e2e/fixtures/vioTest.d.ts
+declare const createDefaultPage: (page: Page) => {
+  page: Page;
+  goto: (url: string, options?: {
+    cookieControl?: boolean;
+    isLoading?: boolean;
+  }) => Promise<void>;
+};
+declare const vioTest: _playwright_test0.TestType<_playwright_test0.PlaywrightTestArgs & _playwright_test0.PlaywrightTestOptions & {
+  defaultPage: ReturnType<typeof createDefaultPage>;
+  _autoSnapshotSuffix: unknown;
+}, _playwright_test0.PlaywrightWorkerArgs & _playwright_test0.PlaywrightWorkerOptions>;
+//#endregion
+export { vioTest };

package/dist/e2e/fixtures/vioTest.mjs

@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+//#region e2e/fixtures/vioTest.ts
+const createDefaultPage = (page) => {
+	return {
+		page,
+		goto: async (url, options) => {
+			await page.goto(url);
+			if (!options || options.isLoading !== false) await expect(page.getByTestId("is-loading")).toHaveAttribute("data-is-loading", "false");
+		}
+	};
+};
+const vioTest = test.extend({ defaultPage: async ({ page, context }, use) => {
+	await context.addCookies([
+		{
+			domain: "localhost",
+			name: "vio_is-testing",
+			path: "/",
+			value: "true"
+		},
+		{
+			domain: "localhost",
+			name: "vio_tz",
+			path: "/",
+			value: "Europe/Berlin"
+		},
+		{
+			domain: "localhost",
+			name: "ncc_c",
+			path: "/",
+			value: "ctga"
+		}
+	]);
+	await use(createDefaultPage(page));
+} });
+
+//#endregion
+export { vioTest };

package/dist/e2e/utils/constants.d.mts

@@ -0,0 +1,18 @@
+import { Page } from "playwright-core";
+
+//#region e2e/utils/constants.d.ts
+declare const TIMEOUT = 60000;
+declare const PAGE_READY: ({
+  page,
+  options
+}: {
+  page: Page;
+  options?: {
+    cookieControl?: boolean;
+    devTools?: boolean;
+    isLoading?: boolean;
+  };
+}) => Promise<void>;
+declare const SITE_URL: string;
+//#endregion
+export { PAGE_READY, SITE_URL, TIMEOUT };

package/dist/e2e/utils/constants.mjs

@@ -0,0 +1,12 @@
+import { expect } from "@playwright/test";
+
+//#region e2e/utils/constants.ts
+const TIMEOUT = 6e4;
+const PAGE_READY = async ({ page, options }) => {
+	if (!options || options.cookieControl !== false) await expect(page.getByRole("button", { name: "Cookie control" })).toBeVisible();
+	if (!options || options.isLoading !== false) await expect(page.getByTestId("is-loading")).toHaveAttribute("data-is-loading", "false");
+};
+const SITE_URL = process.env.NUXT_PUBLIC_SITE_URL || `https://${process.env.HOST || "localhost"}:${process.env.PORT || "3000"}`;
+
+//#endregion
+export { PAGE_READY, SITE_URL, TIMEOUT };

package/dist/e2e/utils/tests.d.mts

@@ -0,0 +1,18 @@
+import { Page } from "@playwright/test";
+
+//#region e2e/utils/tests.d.ts
+declare const testA11y: (url: string) => void;
+declare const testMetadata: ({
+  page,
+  path,
+  title
+}: {
+  page: Page;
+  path: string;
+  title: string;
+}) => Promise<void>;
+declare const testOgImage: (url: string) => void;
+declare const testPageLoad: (url: string, status?: number) => void;
+declare const testVisualRegression: (url: string, plain?: boolean) => void;
+//#endregion
+export { testA11y, testMetadata, testOgImage, testPageLoad, testVisualRegression };

package/dist/e2e/utils/tests.mjs

@@ -0,0 +1,464 @@
+import { SITE_URL, TIMEOUT } from "./constants.mjs";
+import { vioTest } from "../fixtures/vioTest.mjs";
+import { expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+import { joinURL, withoutTrailingSlash } from "ufo";
+
+//#region e2e/utils/tests.ts
+const testA11y = (url) => vioTest.describe("a11y", () => {
+	vioTest("should not have any automatically detectable accessibility issues", async ({ defaultPage }) => {
+		await defaultPage.goto(url);
+		expect((await new AxeBuilder({ page: defaultPage.page }).analyze()).violations.map((x) => `${x.id}\n${x.nodes.map((y) => `${y.failureSummary}\n(${y.html}\n(${y.target})`)}`).join("\n")).toEqual("");
+	});
+});
+const testMetadata = async ({ page, path, title }) => {
+	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://cdnjs.cloudflare.com/polyfill/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__/${process.env.VIO_SERVER === "static" ? "static" : "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__/${process.env.VIO_SERVER === "static" ? "static" : "image"}`, path, "/og.png")
+			}]
+		},
+		{
+			tag: "meta",
+			attributes: [{
+				key: "name",
+				value: "twitter:image:src"
+			}, {
+				key: "content",
+				value: joinURL(SITE_URL, `/__og-image__/${process.env.VIO_SERVER === "static" ? "static" : "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?v=zeMtipb6C9"
+				},
+				{
+					key: "sizes",
+					value: "48x48"
+				}
+			]
+		},
+		{
+			tag: "link",
+			attributes: [
+				{
+					key: "rel",
+					value: "icon"
+				},
+				{
+					key: "href",
+					value: "/assets/static/favicon/favicon.svg?v=zeMtipb6C9"
+				},
+				{
+					key: "sizes",
+					value: "any"
+				},
+				{
+					key: "type",
+					value: "image/svg+xml"
+				}
+			]
+		},
+		{
+			tag: "link",
+			attributes: [{
+				key: "rel",
+				value: "apple-touch-icon"
+			}, {
+				key: "href",
+				value: "/assets/static/favicon/apple-touch-icon-180x180.png?v=zeMtipb6C9"
+			}]
+		},
+		{
+			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: withoutTrailingSlash(`${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: withoutTrailingSlash(`${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: "theme-color"
+			}, {
+				key: "content",
+				value: "#202020"
+			}]
+		},
+		{
+			tag: "link",
+			attributes: [{
+				key: "href",
+				value: "/site.webmanifest?v=zeMtipb6C9"
+			}, {
+				key: "rel",
+				value: "manifest"
+			}]
+		},
+		{
+			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: "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: "data-hid",
+				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("script[data-hid=\"schema-org-graph\"]").innerText()).toMatchSnapshot(`schema-org-graph-${process.env.VIO_SERVER || "dev"}.json`);
+};
+const testOgImage = (url) => vioTest.describe("visual regression", () => {
+	vioTest("generates the open graph image", async ({ page }) => {
+		await page.goto(joinURL(`/__og-image__/${process.env.VIO_SERVER === "static" ? "static" : "image"}${url}/og.png`));
+		await expect(page).toHaveScreenshot();
+		await page.goto(joinURL(`/__og-image__/${process.env.VIO_SERVER === "static" ? "static" : "image"}/de${url}/og.png`));
+		await expect(page).toHaveScreenshot();
+	});
+});
+const testPageLoad = (url, status = 200) => vioTest.describe("page load", () => {
+	vioTest("loads the page successfully", async ({ request }) => {
+		expect((await request.get(url, { headers: { Cookie: "vio_is-testing=true" } })).status()).toBe(status);
+	});
+});
+const testVisualRegression = (url, plain) => vioTest.describe("visual regression", () => {
+	vioTest("looks as before", async ({ defaultPage, page }) => {
+		await (plain ? page : defaultPage).goto(url);
+		await expect(plain ? page : defaultPage.page).toHaveScreenshot({ timeout: TIMEOUT });
+	});
+});
+
+//#endregion
+export { testA11y, testMetadata, testOgImage, testPageLoad, testVisualRegression };

package/dist/playwright.config.d.mts

@@ -0,0 +1,13 @@
+import * as _playwright_test0 from "@playwright/test";
+
+//#region playwright.config.d.ts
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+declare const _default: _playwright_test0.PlaywrightTestConfig<{}, {}>;
+//#endregion
+export { _default as default };

package/dist/playwright.config.mjs

@@ -0,0 +1,51 @@
+import { SITE_URL, TIMEOUT } from "./e2e/utils/constants.mjs";
+import { defineConfig, devices } from "@playwright/test";
+
+//#region playwright.config.ts
+/**
+* Read environment variables from file.
+* https://github.com/motdotla/dotenv
+*/
+/**
+* See https://playwright.dev/docs/test-configuration.
+*/
+var playwright_config_default = defineConfig({
+	expect: { toHaveScreenshot: { maxDiffPixelRatio: .01 } },
+	forbidOnly: !!process.env.CI,
+	fullyParallel: true,
+	outputDir: "e2e/results",
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] }
+		},
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] }
+		},
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] }
+		}
+	],
+	reporter: [["html", { outputFolder: "e2e/report" }]],
+	retries: process.env.CI ? 1 : 0,
+	testDir: "./e2e/specs",
+	use: {
+		baseURL: SITE_URL,
+		ignoreHTTPSErrors: true,
+		trace: "on-first-retry"
+	},
+	webServer: {
+		command: `pnpm run --dir ../src certificates && pnpm run --dir ../src start:${process.env.VIO_SERVER || "dev"}`,
+		env: { NUXT_PUBLIC_VIO_IS_TESTING: "true" },
+		ignoreHTTPSErrors: true,
+		timeout: TIMEOUT,
+		url: SITE_URL,
+		reuseExistingServer: !process.env.CI
+	},
+	workers: void 0
+});
+
+//#endregion
+export { playwright_config_default as default };

package/package.json

@@ -9,6 +9,8 @@
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
     "lodash-es": "4.17.23",
+    "playwright-core": "1.58.2",
+    "tsdown": "0.20.3",
     "typescript": "5.9.3",
     "typescript-eslint": "8.54.0",
     "ufo": "1.6.3"
@@ -16,16 +18,34 @@
   "engines": {
     "node": "24"
   },
+  "exports": {
+    "./e2e/fixtures/vioTest": {
+      "default": "./dist/e2e/fixtures/vioTest.mjs",
+      "types": "./dist/e2e/fixtures/vioTest.d.mts"
+    },
+    "./e2e/utils/constants": {
+      "default": "./dist/e2e/utils/constants.mjs",
+      "types": "./dist/e2e/utils/constants.d.mts"
+    },
+    "./e2e/utils/tests": {
+      "default": "./dist/e2e/utils/tests.mjs",
+      "types": "./dist/e2e/utils/tests.d.mts"
+    },
+    "./playwright.config": {
+      "default": "./dist/playwright.config.mjs",
+      "types": "./dist/playwright.config.d.mts"
+    }
+  },
   "files": [
-    "e2e/fixtures",
-    "e2e/utils",
-    "package.json",
-    "playwright.config.ts",
-    "tsconfig.json"
+    "dist"
   ],
   "name": "@dargmuesli/nuxt-vio-testing",
   "peerDependencies": {
-    "playwright-core": "1.58.2"
+    "@axe-core/playwright": "^4.11.1",
+    "@playwright/test": "^1.58.2",
+    "lodash-es": "^4.17.23",
+    "playwright-core": "^1.58.2",
+    "ufo": "^1.6.3"
   },
   "publishConfig": {
     "access": "public"
@@ -35,10 +55,13 @@
     "url": "git+https://github.com/dargmuesli/vio.git"
   },
   "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "lint": "pnpm run lint:js && pnpm run lint:ts",
     "lint:fix": "pnpm run lint:js --fix",
     "lint:js": "eslint --cache",
     "lint:ts": "tsc --noEmit",
+    "prepublishOnly": "pnpm run build",
     "test:e2e": "playwright test",
     "test:e2e:docker:br": "pnpm run test:e2e:docker:build && pnpm run test:e2e:docker:run",
     "test:e2e:docker:build": "sudo docker build -t test-e2e_development --build-arg USER_ID=$(id -u) --build-arg GROUP_ID=$(id -g) --target test-e2e_development ..",
@@ -54,5 +77,5 @@
     "test:e2e:server:static": "cross-env NODE_ENV=production PORT=\"${PORT:-3002}\" NUXT_PUBLIC_SITE_URL=\"${NUXT_PUBLIC_SITE_URL:-https://localhost:3002}\" VIO_SERVER=static pnpm run test:e2e"
   },
   "type": "module",
-  "version": "20.6.7"
+  "version": "20.7.0"
 }