test: arrow test

RBND-studio · Jan 11, 2024 · d207624 · d207624
1 parent 0b68bb8
commit d207624
Show file tree

Hide file tree

Showing 45 changed files with 145 additions and 48 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,5 @@
 tsup.config.ts
 playwright.config.ts
+vite.config.js
 dist
 examples
diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "tsc": "tsc -p tsconfig.lib.json",
-    "playwright": "playwright test"
+    "playwright": "playwright test",
+    "serve:test": "vite"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
@@ -52,7 +53,8 @@
     "prettier": "^3.1.0",
     "ts-jest": "^29.1.1",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.11"
   },
   "packageManager": "pnpm@8.7.5"
 }
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,16 +1,7 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,31 +11,33 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: "http://localhost:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command: "npm run serve:test",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
@@ -67,11 +60,4 @@ export default defineConfig({
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/arrow/arrow.html b/tests/arrow/arrow.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Arrow</title>
+    <link rel="stylesheet" href="/public/flows.css" />
+  </head>
+  <body style="margin: 0">
+    <div style="display: grid; place-items: center; height: 100vh">
+      <div style="background-color: grey; width: 20px; height: 20px" class="target"></div>
+    </div>
+
+    <script type="module" src="./arrow.ts"></script>
+  </body>
+</html>
diff --git a/tests/arrow/arrow.spec.ts b/tests/arrow/arrow.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+
+const placements = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "top-start",
+  "top-end",
+  "right-start",
+  "right-end",
+  "bottom-start",
+  "bottom-end",
+  "left-start",
+  "left-end",
+];
+
+placements.forEach((placement) => {
+  test(placement, async ({ page }) => {
+    await page.goto(`/arrow/arrow.html?placement=${placement}`);
+
+    expect(await page.screenshot({ scale: "css" })).toMatchSnapshot(`arrow-${placement}.png`);
+  });
+});
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-end-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-end-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-end-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-end-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-end-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-end-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-start-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-start-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-start-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-start-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-start-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-start-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-bottom-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-end-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-end-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-end-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-end-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-end-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-end-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-start-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-start-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-start-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-start-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-start-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-start-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-left-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-left-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-end-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-end-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-end-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-end-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-end-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-end-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-start-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-start-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-start-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-start-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-start-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-start-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-right-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-right-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-end-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-end-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-end-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-end-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-end-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-end-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-start-chromium-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-start-chromium-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-start-firefox-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-start-firefox-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-start-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-start-webkit-darwin.png
diff --git a/tests/arrow/arrow.spec.ts-snapshots/arrow-top-webkit-darwin.png b/tests/arrow/arrow.spec.ts-snapshots/arrow-top-webkit-darwin.png
diff --git a/tests/arrow/arrow.ts b/tests/arrow/arrow.ts
@@ -0,0 +1,19 @@
+import { init } from "../../dist";
+
+void init({
+  flows: [
+    {
+      id: "flow",
+      location: "/",
+      steps: [
+        {
+          title: "Hello",
+          element: ".target",
+          placement: new URLSearchParams(window.location.search).get(
+            "placement",
+          ) as unknown as "top",
+        },
+      ],
+    },
+  ],
+});
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,8 @@
+/** @type {import('vite').UserConfig} */
+export default {
+  server: {
+    port: 3000,
+  },
+  root: "./tests",
+  publicDir: "../",
+};