@manufac/general-tests 0.0.2 → 0.1.0

package/README.md

@@ -24,18 +24,38 @@ Then wire it into the app's `playwright.config.ts` using the project-builder hel
 
 ```ts
 import { defineConfig } from "@playwright/test";
-import { createDesktopProject, createMobileProject } from "@manufac/general-tests/config/projects.js";
+import { Breakpoints, createProject } from "@manufac/general-tests/config/projects.js";
 
 export default defineConfig({
   use: {
     baseURL: "http://localhost:8080",
   },
   projects: [
-    createDesktopProject("Desktop Chrome", "Desktop Chrome"),
-    createDesktopProject("Desktop Safari", "Desktop Safari"),
-    createDesktopProject("Desktop Firefox", "Desktop Firefox"),
-    createMobileProject("Mobile Safari", "iPhone 12"),
-    createMobileProject("Mobile Chrome", "Pixel 5"),
+    createProject({
+      name: "Desktop Chrome",
+      device: "Desktop Chrome",
+      configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
+    }),
+    createProject({
+      name: "Desktop Safari",
+      device: "Desktop Safari",
+      configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
+    }),
+    createProject({
+      name: "Desktop Firefox",
+      device: "Desktop Firefox",
+      configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
+    }),
+    createProject({
+      name: "Mobile Safari",
+      device: "iPhone 12",
+      configuration: { projectType: "mobile", breakpoint: Breakpoints.MobileM },
+    }),
+    createProject({
+      name: "Mobile Chrome",
+      device: "Pixel 5",
+      configuration: { projectType: "mobile", breakpoint: Breakpoints.MobileM },
+    }),
   ],
   webServer: {
     command: "npm run start",
@@ -45,14 +65,18 @@ export default defineConfig({
 });
 ```
 
-- `createDesktopProject(name, device, breakpoint?)` runs the `shared` + `desktop-only` specs under the given Playwright device, defaulting to the Desktop breakpoint (1440x900).
-- `createMobileProject(name, device, breakpoint?)` runs the `shared` + `mobile-only` specs, defaulting to the Mobile M breakpoint (390x844).
-- Both accept an optional third `breakpoint` argument — one of `Breakpoints.MobileS/MobileM/Tablet/Laptop/Desktop/Wide` (Section 3 of the test plan) — to test at a different viewport.
+- `createProject({ name, device, configuration })` builds a Playwright project for the given device.
+- `configuration.projectType: "desktop"` runs the `shared` + `desktop-only` specs, and requires `configuration.breakpoint: Breakpoints.Desktop` (1440x900).
+- `configuration.projectType: "mobile"` runs the `shared` + `mobile-only` specs, and requires `configuration.breakpoint: Breakpoints.MobileM` (390x844).
 
 By default every spec runs against `/`. To point a project at a different page, override the `targetPage` fixture option:
 
 ```ts
-createDesktopProject("Desktop Chrome — pricing", "Desktop Chrome"),
+createProject({
+  name: "Desktop Chrome — pricing",
+  device: "Desktop Chrome",
+  configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
+}),
 // then, in that project's `use`:
 use: { targetPage: "/pricing" }
 ```

package/dist/config/projects.d.ts

@@ -37,5 +37,23 @@ export declare const Breakpoints: {
         readonly height: 1080;
     };
 };
-export declare function createDesktopProject(name: string, device: keyof typeof devices, breakpoint?: Breakpoint): Project;
-export declare function createMobileProject(name: string, device: keyof typeof devices, breakpoint?: Breakpoint): Project;
+declare const ProjectTypes: {
+    readonly Mobile: "mobile";
+    readonly Desktop: "desktop";
+};
+export type ProjectType = (typeof ProjectTypes)[keyof typeof ProjectTypes];
+export interface MobileConfig {
+    projectType: typeof ProjectTypes.Mobile;
+    breakpoint: typeof Breakpoints.MobileM;
+}
+export interface DesktopConfig {
+    projectType: typeof ProjectTypes.Desktop;
+    breakpoint: typeof Breakpoints.Desktop;
+}
+export interface CreateProjectParams {
+    name: string;
+    device: keyof typeof devices;
+    configuration: MobileConfig | DesktopConfig;
+}
+export declare function createProject({ configuration, device, name }: CreateProjectParams): Project;
+export {};

package/dist/config/projects.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breakpoints = void 0;
-exports.createDesktopProject = createDesktopProject;
-exports.createMobileProject = createMobileProject;
+exports.createProject = createProject;
 const test_1 = require("@playwright/test");
 const node_path_1 = require("node:path");
 // Section 3 of the Landing Page Test Plan — breakpoints / viewports.
@@ -19,19 +18,21 @@ const SpecsDirectory = (0, node_path_1.join)(__dirname, "..", "specs");
 const SharedTestMatch = "shared/**/*.spec.js";
 const DesktopOnlyTestMatch = "desktop-only/**/*.spec.js";
 const MobileOnlyTestMatch = "mobile-only/**/*.spec.js";
-function createDesktopProject(name, device, breakpoint = exports.Breakpoints.Desktop) {
-    return {
-        name,
-        testDir: SpecsDirectory,
-        testMatch: [SharedTestMatch, DesktopOnlyTestMatch],
-        use: { ...test_1.devices[device], viewport: { width: breakpoint.width, height: breakpoint.height } },
-    };
-}
-function createMobileProject(name, device, breakpoint = exports.Breakpoints.MobileM) {
+const ProjectTypes = {
+    Mobile: "mobile",
+    Desktop: "desktop",
+};
+function createProject({ configuration, device, name }) {
     return {
         name,
         testDir: SpecsDirectory,
-        testMatch: [SharedTestMatch, MobileOnlyTestMatch],
-        use: { ...test_1.devices[device], viewport: { width: breakpoint.width, height: breakpoint.height } },
+        testMatch: [
+            SharedTestMatch,
+            configuration.projectType === ProjectTypes.Desktop ? DesktopOnlyTestMatch : MobileOnlyTestMatch,
+        ],
+        use: {
+            ...test_1.devices[device],
+            viewport: { width: configuration.breakpoint.width, height: configuration.breakpoint.height },
+        },
     };
 }

package/dist/specs/utils.js

@@ -295,7 +295,7 @@ function isCutoffAtViewportEdge(snapshot, viewport) {
             rect.bottom > viewport.height + exports.ResponsiveConfig.CutoffTolerancePX);
     return hasDimensions && (isHorizontallyClipped || isVerticallyClipped);
 }
-async function findElementsCutoffAtViewportEdge(page, containerSelector = "body *") {
+async function findElementsCutoffAtViewportEdge(page, containerSelector) {
     const { elements, viewport } = await page.evaluate((selector) => {
         function isRenderedElement(element) {
             const style = window.getComputedStyle(element);
@@ -328,7 +328,7 @@ async function findElementsCutoffAtViewportEdge(page, containerSelector = "body
             }
             return isClipped;
         }
-        const renderedElements = Array.from(document.querySelectorAll(selector))
+        const renderedElements = Array.from(document.querySelectorAll(selector ?? "body *"))
             .filter(isRenderedElement)
             .filter((element) => {
             return !isClippedByAncestorOverflow(element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manufac/general-tests",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "A library for general tests for landing pages",
   "repository": {
     "type": "git",