Refactor ci test config and add devices

- Use specific ci config files
- add mobile and tablet devices to default test config

packages/dito/package.json

@@ -15,11 +15,11 @@
     "lint:fix": "npm run lint:check -- --fix",
     "test": "vitest",
     "test:e2e": "playwright test tests/e2e --config=tests/playwright.config.ts",
-    "test:e2e-ci": "playwright test tests/e2e --config=tests/playwright.config.ts --project chromium",
+    "test:e2e-ci": "playwright test tests/e2e --config=tests/playwright-ci.config.ts",
     "test:a11y": "playwright test tests/a11y --config=tests/playwright.config.ts",
-    "test:a11y-ci": "playwright test tests/a11y --config=tests/playwright.config.ts --project chromium",
-    "test:snapshots": "playwright test tests/snapshots --config=tests/playwright-snapshots.config.ts",
-    "test:update-snapshots": "playwright test tests/snapshots --config=tests/playwright-snapshots.config.ts --update-snapshots",
+    "test:a11y-ci": "playwright test tests/a11y --config=tests/playwright-ci.config.ts",
+    "test:snapshots": "playwright test tests/snapshots --config=tests/playwright.config.ts",
+    "test:update-snapshots": "playwright test tests/snapshots --config=tests/playwright.config.ts --update-snapshots",
     "tests": "vitest run && npm run test:e2e && npm run test:a11y",
     "tests-ci": "vitest run && npm run test:e2e-ci && npm run test:a11y-ci",
     "test:generate-coverage": "jest --coverage",

packages/dito/tests/playwright-ci.config.ts

@@ -0,0 +1,17 @@
+import { PlaywrightTestConfig } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+import { fileURLToPath } from "url";
+import { projectsCi } from "../../../playwright.config-base";
+import configDefault from "./playwright.config";
+
+// Get the directory name of the current module
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: path.resolve(__dirname, "../", ".env.test") });
+
+const config: PlaywrightTestConfig = {
+  ...configDefault,
+  projects: projectsCi,
+};
+
+export default config;

packages/tool-finder/package.json

@@ -16,9 +16,9 @@
     "lint:fix": "npm run lint:check -- --fix",
     "test": "vitest",
     "test:e2e": "playwright test tests/playwright/e2e --config=tests/playwright/playwright.config.ts",
-    "test:e2e-ci": "playwright test tests/playwright/e2e --config=tests/playwright/playwright.config.ts --project chromium",
+    "test:e2e-ci": "playwright test tests/playwright/e2e --config=tests/playwright/playwright-ci.config.ts",
     "test:a11y": "playwright test tests/playwright/a11y --config=tests/playwright/playwright.config.ts",
-    "test:a11y-ci": "playwright test tests/playwright/a11y --config=tests/playwright/playwright.config.ts  --project chromium",
+    "test:a11y-ci": "playwright test tests/playwright/a11y --config=tests/playwright/playwright-ci.config.ts",
     "tests": "vitest run && npm run test:e2e && npm run test:a11y",
     "tests-ci": "vitest run && npm run test:e2e-ci && npm run test:a11y-ci",
     "typecheck": "tsc"

packages/tool-finder/tests/playwright/playwright-ci.config.ts

@@ -0,0 +1,17 @@
+import { PlaywrightTestConfig } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+import { fileURLToPath } from "url";
+import { projectsCi } from "../../../../playwright.config-base";
+import configDefault from "./playwright.config";
+
+// Get the directory name of the current module
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: path.resolve(__dirname, "../", ".env.test") });
+
+const config: PlaywrightTestConfig = {
+  ...configDefault,
+  projects: projectsCi,
+};
+
+export default config;

playwright.config-base.ts

@@ -1,5 +1,58 @@
 import { devices, PlaywrightTestConfig } from "@playwright/test";
 
+const desktopViewport = { width: 1200, height: 4800 };
+
+const projects = [
+  {
+    name: "Desktop Chrome",
+    use: {
+      ...devices["Desktop Chrome"],
+      channel: "chrome",
+      viewport: desktopViewport,
+    },
+  },
+  {
+    name: "Desktop Firefox",
+    use: { ...devices["Desktop Firefox"], viewport: desktopViewport },
+  },
+  {
+    name: "Desktop Safari",
+    use: { ...devices["Desktop Safari"], viewport: desktopViewport },
+  },
+  {
+    name: "Mobile Chrome",
+    use: {
+      ...devices["Pixel 7"],
+      viewport: { ...devices["Pixel 7"].viewport, height: 3200 },
+    },
+  },
+  {
+    name: "Mobile Safari",
+    use: {
+      ...devices["iPhone 14 Pro"],
+      viewport: { ...devices["iPhone 14 Pro"].viewport, height: 3200 },
+    },
+  },
+  {
+    name: "Tablet Chrome",
+    use: {
+      ...devices["Galaxy Tab S4 landscape"],
+      viewport: { ...devices["Galaxy Tab S4 landscape"].viewport },
+    },
+  },
+  {
+    name: "Tablet Safari",
+    use: {
+      ...devices["iPad Pro 11 landscape"],
+      viewport: { ...devices["iPad Pro 11 landscape"].viewport },
+    },
+  },
+];
+
+export const projectsCi = projects.filter(
+  (project) => project.name === "Desktop Chrome",
+);
+
 const config: PlaywrightTestConfig = {
   fullyParallel: true,
   forbidOnly: !!process.env.CI, // Fail the build on CI if test.only is present
@@ -14,20 +67,7 @@ const config: PlaywrightTestConfig = {
     [process.env.CI ? "github" : "list"],
     ["html", { outputFolder: "./playwright-report" }],
   ],
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"], channel: "chrome" },
-    },
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-  ],
+  projects: projects,
 };
 
 export default config;