@lullabot/playwright-testing 1.0.0 → 1.1.0

package/src/pseudo-state.test.ts

@@ -1,83 +1,90 @@
-import {describe, expect, it, vi} from 'vitest'
-import {forcePseudoState} from './pseudo-state'
+import { describe, expect, it, vi } from "vitest";
+import { forcePseudoState } from "./pseudo-state";
 
 function fakePage(nodeId = 2) {
   const session = {
     send: vi.fn(async (method: string) => {
-      if (method === 'DOM.getDocument') {
-        return {root: {nodeId: 1}}
+      if (method === "DOM.getDocument") {
+        return { root: { nodeId: 1 } };
       }
-      if (method === 'DOM.querySelector') {
-        return {nodeId}
+      if (method === "DOM.querySelector") {
+        return { nodeId };
       }
-      return {}
+      return {};
     }),
     detach: vi.fn().mockResolvedValue(undefined),
-  }
+  };
   const context = {
     newCDPSession: vi.fn().mockResolvedValue(session),
-  }
+  };
   const page = {
     context: vi.fn(() => context),
-  }
+  };
 
-  return {context, page, session}
+  return { context, page, session };
 }
 
-describe('forcePseudoState', () => {
-  it('forces pseudo-classes on the first selector match and clears them', async () => {
-    const {context, page, session} = fakePage()
+describe("forcePseudoState", () => {
+  it("forces pseudo-classes on the first selector match and clears them", async () => {
+    const { context, page, session } = fakePage();
 
-    const cleanup = await forcePseudoState(page as any, '.menu-trigger', ['hover', 'focus-visible'])
+    const cleanup = await forcePseudoState(page as any, ".menu-trigger", [
+      "hover",
+      "focus-visible",
+    ]);
 
-    expect(context.newCDPSession).toHaveBeenCalledWith(page)
-    expect(session.send).toHaveBeenNthCalledWith(1, 'DOM.enable')
-    expect(session.send).toHaveBeenNthCalledWith(2, 'CSS.enable')
-    expect(session.send).toHaveBeenNthCalledWith(3, 'DOM.getDocument')
-    expect(session.send).toHaveBeenNthCalledWith(4, 'DOM.querySelector', {
+    expect(context.newCDPSession).toHaveBeenCalledWith(page);
+    expect(session.send).toHaveBeenNthCalledWith(1, "DOM.enable");
+    expect(session.send).toHaveBeenNthCalledWith(2, "CSS.enable");
+    expect(session.send).toHaveBeenNthCalledWith(3, "DOM.getDocument");
+    expect(session.send).toHaveBeenNthCalledWith(4, "DOM.querySelector", {
       nodeId: 1,
-      selector: '.menu-trigger',
-    })
-    expect(session.send).toHaveBeenNthCalledWith(5, 'CSS.forcePseudoState', {
+      selector: ".menu-trigger",
+    });
+    expect(session.send).toHaveBeenNthCalledWith(5, "CSS.forcePseudoState", {
       nodeId: 2,
-      forcedPseudoClasses: ['hover', 'focus-visible'],
-    })
+      forcedPseudoClasses: ["hover", "focus-visible"],
+    });
 
-    await cleanup()
-    await cleanup()
+    await cleanup();
+    await cleanup();
 
-    expect(session.send).toHaveBeenNthCalledWith(6, 'CSS.forcePseudoState', {
+    expect(session.send).toHaveBeenNthCalledWith(6, "CSS.forcePseudoState", {
       nodeId: 2,
       forcedPseudoClasses: [],
-    })
-    expect(session.detach).toHaveBeenCalledOnce()
-  })
+    });
+    expect(session.detach).toHaveBeenCalledOnce();
+  });
 
-  it('fails clearly and detaches when the selector does not match', async () => {
-    const {page, session} = fakePage(0)
+  it("fails clearly and detaches when the selector does not match", async () => {
+    const { page, session } = fakePage(0);
 
-    await expect(forcePseudoState(page as any, '.missing', ['hover']))
-      .rejects.toThrow('could not find an element matching ".missing"')
-    expect(session.detach).toHaveBeenCalledOnce()
-  })
+    await expect(
+      forcePseudoState(page as any, ".missing", ["hover"]),
+    ).rejects.toThrow('could not find an element matching ".missing"');
+    expect(session.detach).toHaveBeenCalledOnce();
+  });
 
-  it('reports that CDP requires Chromium', async () => {
+  it("reports that CDP requires Chromium", async () => {
     const page = {
       context: () => ({
-        newCDPSession: vi.fn().mockRejectedValue(new Error('CDP only supported in Chromium')),
+        newCDPSession: vi
+          .fn()
+          .mockRejectedValue(new Error("CDP only supported in Chromium")),
       }),
-    }
+    };
 
-    await expect(forcePseudoState(page as any, 'button', ['focus']))
-      .rejects.toThrow('requires a Chromium browser project')
-  })
+    await expect(
+      forcePseudoState(page as any, "button", ["focus"]),
+    ).rejects.toThrow("requires a Chromium browser project");
+  });
 
-  it('detaches even when clearing the state fails', async () => {
-    const {page, session} = fakePage()
-    const cleanup = await forcePseudoState(page as any, 'button', ['focus'])
-    session.send.mockRejectedValueOnce(new Error('node disappeared'))
+  it("detaches even when clearing the state fails", async () => {
+    const { page, session } = fakePage();
+    const cleanup = await forcePseudoState(page as any, "button", ["focus"]);
+    session.send.mockRejectedValueOnce(new Error("node disappeared"));
 
-    await expect(cleanup()).rejects.toThrow('node disappeared')
-    expect(session.detach).toHaveBeenCalledOnce()
-  })
-})
+    await expect(cleanup()).rejects.toThrow("node disappeared");
+    expect(session.detach).toHaveBeenCalledOnce();
+  });
+});

package/src/pseudo-state.ts

@@ -1,18 +1,13 @@
-import {Page} from '@playwright/test'
+import { Page } from "@playwright/test";
 
 /** Pseudo-classes supported by Chromium's CSS.forcePseudoState command. */
 export type ForcedPseudoClass =
-  | 'active'
-  | 'focus'
-  | 'focus-visible'
-  | 'focus-within'
-  | 'hover'
-  | 'target'
+  "active" | "focus" | "focus-visible" | "focus-within" | "hover" | "target";
 
 /** A CSS selector and the pseudo-classes to force on its first match. */
 export interface ForcedPseudoState {
-  selector: string
-  pseudoClasses: ForcedPseudoClass[]
+  selector: string;
+  pseudoClasses: ForcedPseudoClass[];
 }
 
 /**
@@ -28,42 +23,52 @@ export async function forcePseudoState(
   selector: string,
   pseudoClasses: ForcedPseudoClass[],
 ): Promise<() => Promise<void>> {
-  let session
+  let session;
   try {
-    session = await page.context().newCDPSession(page)
+    session = await page.context().newCDPSession(page);
   } catch (error) {
-    throw new Error('forcePseudoState() requires a Chromium browser project.', {cause: error})
+    throw new Error("forcePseudoState() requires a Chromium browser project.", {
+      cause: error,
+    });
   }
 
   try {
-    await session.send('DOM.enable')
-    await session.send('CSS.enable')
-    const {root} = await session.send('DOM.getDocument')
-    const {nodeId} = await session.send('DOM.querySelector', {
+    await session.send("DOM.enable");
+    await session.send("CSS.enable");
+    const { root } = await session.send("DOM.getDocument");
+    const { nodeId } = await session.send("DOM.querySelector", {
       nodeId: root.nodeId,
       selector,
-    })
+    });
 
     if (!nodeId) {
-      throw new Error(`forcePseudoState() could not find an element matching "${selector}".`)
+      throw new Error(
+        `forcePseudoState() could not find an element matching "${selector}".`,
+      );
     }
 
-    await session.send('CSS.forcePseudoState', {nodeId, forcedPseudoClasses: pseudoClasses})
+    await session.send("CSS.forcePseudoState", {
+      nodeId,
+      forcedPseudoClasses: pseudoClasses,
+    });
 
-    let cleared = false
+    let cleared = false;
     return async () => {
       if (cleared) {
-        return
+        return;
       }
-      cleared = true
+      cleared = true;
       try {
-        await session.send('CSS.forcePseudoState', {nodeId, forcedPseudoClasses: []})
+        await session.send("CSS.forcePseudoState", {
+          nodeId,
+          forcedPseudoClasses: [],
+        });
       } finally {
-        await session.detach()
+        await session.detach();
       }
-    }
+    };
   } catch (error) {
-    await session.detach()
-    throw error
+    await session.detach();
+    throw error;
   }
 }