@rvoh/psychic-spec-helpers 0.7.0 → 0.7.2

package/dist/esm/spec/features/check.spec.js

@@ -11,5 +11,17 @@ describe('check', () => {
             await check('not found checkbox', { timeout: 500 });
         }).rejects.toThrow();
     });
+    it('fails when the label points to an invalid input', async () => {
+        await check('My checkbox', { timeout: 500 });
+        await expect(async () => {
+            await check('My invalid label pointer checkbox', { timeout: 500 });
+        }).rejects.toThrow();
+    });
+    it('fails when the label points to a label with a missing htmlFor statement', async () => {
+        await check('My checkbox', { timeout: 500 });
+        await expect(async () => {
+            await check('My missing htmlFor checkbox', { timeout: 500 });
+        }).rejects.toThrow();
+    });
 });
 export {};

package/dist/esm/spec/features/uncheck.spec.js

@@ -9,6 +9,19 @@ describe('uncheck', () => {
         inputValue = await page.$eval('#my-checkbox', input => input.checked).catch(() => null);
         expect(inputValue).toBe(false);
     });
+    it('succeeds when label has nested elements with text matching', async () => {
+        await check('My other checkbox');
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        let inputValue = await page
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+            .$eval('#my-other-checkbox', input => input.checked)
+            .catch(() => null);
+        expect(inputValue).toBe(true);
+        await uncheck('My other checkbox');
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+        inputValue = await page.$eval('#my-other-checkbox', input => input.checked).catch(() => null);
+        expect(inputValue).toBe(false);
+    });
     it('fails when the selector is not found', async () => {
         await check('My checkbox');
         await uncheck('My checkbox', { timeout: 500 });
@@ -16,5 +29,15 @@ describe('uncheck', () => {
             await uncheck('not found checkbox', { timeout: 500 });
         }).rejects.toThrow();
     });
+    it('fails when the selector is found, but it is not already checked', async () => {
+        await check('My checkbox');
+        await uncheck('My checkbox', { timeout: 500 });
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+        const inputValue = await page.$eval('#my-checkbox', input => input.checked).catch(() => null);
+        expect(inputValue).toBe(false);
+        await expect(async () => {
+            await uncheck('My checkbox', { timeout: 500 });
+        }).rejects.toThrow();
+    });
 });
 export {};

package/dist/esm/src/feature/error-messages/emptyForAttribute.js

@@ -0,0 +1,12 @@
+export default function emptyForAttribute() {
+    return `
+When using our uncheck helpers, we expect you to have the correct semantic layout for a checkbox on your page.
+this includes the following:
+
+1.) a label element with matching text, with a "for" attribute set (or htmlFor, when using react)
+2.) an input with type="checkbox" which has an id that matches the corresponding for tag on the label
+
+We were able to find a label matching the text you gave us, but the for attribute found on it
+was blank. Make sure to add a for attribute, and point it to the id of your corresponding checkbox
+`;
+}

package/dist/esm/src/feature/error-messages/missingInputToMatchForAttribute.js

@@ -0,0 +1,10 @@
+export default function missingForAttribute(forAttributeValue) {
+    return `
+Expected to find an input element matching the "for" attribute on your label, but we could not locate that input element.
+
+for attribute found: "${forAttributeValue}"
+
+Make sure you have an input element with an id matching "${forAttributeValue}", otherwise this label
+will not be able to be properly associated with the corresponding input.
+`;
+}

package/dist/esm/src/feature/internal/captureAttributeFromClosestElementWithType.js

@@ -0,0 +1,26 @@
+export default async function captureAttributeFromClosestElementWithType(cssSelector, type, attribute) {
+    const el = await page.waitForSelector(cssSelector, { timeout: 3000 });
+    const attributeValue = (await el.evaluate((element, type, attribute) => {
+        // Traverse up the DOM tree to find the closest parent label element
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        let currentElement = element;
+        let attrVal = null;
+        let millisDrift = 0;
+        const startMillis = Date.now();
+        while (!attrVal && currentElement && millisDrift < 3000) {
+            const currMillis = Date.now();
+            millisDrift = currMillis - startMillis;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            if (currentElement.tagName === type.toUpperCase()) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                attrVal = Array.from(currentElement.attributes).find(attr => attr.name === attribute)?.['value'];
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+                currentElement = currentElement.parentElement;
+            }
+        }
+        return attrVal;
+    }, type, attribute));
+    return attributeValue;
+}

package/dist/esm/src/feature/matchers/toCheck.js

@@ -1,11 +1,31 @@
 import applyDefaultWaitForOpts from '../helpers/applyDefaultWaitForOpts.js';
+import emptyForAttribute from '../error-messages/emptyForAttribute.js';
+import missingInputToMatchForAttribute from '../error-messages/missingInputToMatchForAttribute.js';
+import captureAttributeFromClosestElementWithType from '../internal/captureAttributeFromClosestElementWithType.js';
 export default async function toCheck(page, expectedText, opts) {
     const failure = {
         pass: false,
         message: () => `Expected page to have checkable element with text: "${expectedText}"`,
     };
+    const labelSelector = `label::-p-text("${expectedText}")`;
     try {
-        await expect(page).toClickSelector(`label::-p-text("${expectedText}")`, applyDefaultWaitForOpts(opts));
+        const forAttributeValue = await captureAttributeFromClosestElementWithType(labelSelector, 'label', 'for');
+        if (!forAttributeValue) {
+            return {
+                pass: false,
+                message: () => emptyForAttribute(),
+            };
+        }
+        try {
+            await page.waitForSelector(`#${forAttributeValue}`, applyDefaultWaitForOpts(opts));
+        }
+        catch {
+            return {
+                pass: false,
+                message: () => missingInputToMatchForAttribute(forAttributeValue),
+            };
+        }
+        await expect(page).toClickSelector(labelSelector, applyDefaultWaitForOpts(opts));
         return {
             pass: true,
             message: () => {

package/dist/esm/src/feature/matchers/toNotMatchTextContent.js

@@ -13,7 +13,7 @@ export default async function toNotMatchTextContent(argumentPassedToExpect, expe
         successText: () => {
             throw new Error('Cannot negate toNotMatchTextContent, use toMatchTextContent instead');
         },
-        failureText: r => `Expected ${r} to match text ${expected}`,
+        failureText: r => `Expected ${r} to not match text ${expected}, but it did`,
         timeout: opts.timeout,
     });
 }

package/dist/esm/src/feature/matchers/toUncheck.js

@@ -1,10 +1,28 @@
 import applyDefaultWaitForOpts from '../helpers/applyDefaultWaitForOpts.js';
+import emptyForAttribute from '../error-messages/emptyForAttribute.js';
+import missingInputToMatchForAttribute from '../error-messages/missingInputToMatchForAttribute.js';
+import captureAttributeFromClosestElementWithType from '../internal/captureAttributeFromClosestElementWithType.js';
 export default async function toUncheck(page, expectedText, opts) {
     try {
         const labelSelector = `label::-p-text("${expectedText}")`;
-        // eslint-disable-next-line
-        const forAttributeValue = await page.$eval(labelSelector, label => label.getAttribute('for'));
-        const inputElement = await page.waitForSelector(`#${forAttributeValue}`, applyDefaultWaitForOpts(opts));
+        const forAttributeValue = await captureAttributeFromClosestElementWithType(labelSelector, 'label', 'for');
+        if (!forAttributeValue) {
+            return {
+                pass: false,
+                message: () => emptyForAttribute(),
+            };
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let inputElement = null;
+        try {
+            inputElement = await page.waitForSelector(`#${forAttributeValue}`, applyDefaultWaitForOpts(opts));
+        }
+        catch {
+            return {
+                pass: false,
+                message: () => missingInputToMatchForAttribute(forAttributeValue),
+            };
+        }
         // eslint-disable-next-line
         const isChecked = await page.evaluate(checkbox => checkbox.checked, inputElement);
         if (!isChecked)

package/dist/types/src/feature/error-messages/emptyForAttribute.d.ts

@@ -0,0 +1 @@
+export default function emptyForAttribute(): string;

package/dist/types/src/feature/error-messages/missingInputToMatchForAttribute.d.ts

@@ -0,0 +1 @@
+export default function missingForAttribute(forAttributeValue: string): string;

package/dist/types/src/feature/internal/captureAttributeFromClosestElementWithType.d.ts

@@ -0,0 +1 @@
+export default function captureAttributeFromClosestElementWithType(cssSelector: string, type: string, attribute: string): Promise<string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@rvoh/psychic-spec-helpers",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "psychic framework spec helpers",
   "author": "RVO Health",
   "repository": {
@@ -65,7 +65,7 @@
     "tsx": "^4.19.3",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.30.1",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.3"
   },
   "dependencies": {
     "cookiejar": "^2.1.4"

package/src/feature/error-messages/emptyForAttribute.ts

@@ -0,0 +1,12 @@
+export default function emptyForAttribute() {
+  return `
+When using our uncheck helpers, we expect you to have the correct semantic layout for a checkbox on your page.
+this includes the following:
+
+1.) a label element with matching text, with a "for" attribute set (or htmlFor, when using react)
+2.) an input with type="checkbox" which has an id that matches the corresponding for tag on the label
+
+We were able to find a label matching the text you gave us, but the for attribute found on it
+was blank. Make sure to add a for attribute, and point it to the id of your corresponding checkbox
+`
+}

package/src/feature/error-messages/missingInputToMatchForAttribute.ts

@@ -0,0 +1,10 @@
+export default function missingForAttribute(forAttributeValue: string) {
+  return `
+Expected to find an input element matching the "for" attribute on your label, but we could not locate that input element.
+
+for attribute found: "${forAttributeValue}"
+
+Make sure you have an input element with an id matching "${forAttributeValue}", otherwise this label
+will not be able to be properly associated with the corresponding input.
+`
+}

package/src/feature/internal/captureAttributeFromClosestElementWithType.ts

@@ -0,0 +1,40 @@
+export default async function captureAttributeFromClosestElementWithType(
+  cssSelector: string,
+  type: string,
+  attribute: string
+) {
+  const el = await page.waitForSelector(cssSelector, { timeout: 3000 })
+
+  const attributeValue = (await el!.evaluate(
+    (element, type, attribute) => {
+      // Traverse up the DOM tree to find the closest parent label element
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      let currentElement = element
+      let attrVal: string | null = null
+      let millisDrift = 0
+      const startMillis = Date.now()
+
+      while (!attrVal && currentElement && millisDrift < 3000) {
+        const currMillis = Date.now()
+        millisDrift = currMillis - startMillis
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (currentElement.tagName === type.toUpperCase()) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          attrVal = Array.from(currentElement.attributes as { name: string; value: string }[]).find(
+            attr => attr.name === attribute
+          )?.['value'] as string
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+          currentElement = currentElement.parentElement
+        }
+      }
+
+      return attrVal
+    },
+    type,
+    attribute
+  )) as string
+
+  return attributeValue
+}

package/src/feature/matchers/toCheck.ts

@@ -1,5 +1,8 @@
 import { Page, WaitForSelectorOptions } from 'puppeteer'
 import applyDefaultWaitForOpts from '../helpers/applyDefaultWaitForOpts.js'
+import emptyForAttribute from '../error-messages/emptyForAttribute.js'
+import missingInputToMatchForAttribute from '../error-messages/missingInputToMatchForAttribute.js'
+import captureAttributeFromClosestElementWithType from '../internal/captureAttributeFromClosestElementWithType.js'
 
 export default async function toCheck(
   page: Page,
@@ -11,11 +14,30 @@ export default async function toCheck(
     message: () => `Expected page to have checkable element with text: "${expectedText}"`,
   }
 
+  const labelSelector = `label::-p-text("${expectedText}")`
   try {
-    await expect(page).toClickSelector(
-      `label::-p-text("${expectedText}")`,
-      applyDefaultWaitForOpts(opts)
+    const forAttributeValue = await captureAttributeFromClosestElementWithType(
+      labelSelector,
+      'label',
+      'for'
     )
+    if (!forAttributeValue) {
+      return {
+        pass: false,
+        message: () => emptyForAttribute(),
+      }
+    }
+
+    try {
+      await page.waitForSelector(`#${forAttributeValue}`, applyDefaultWaitForOpts(opts))
+    } catch {
+      return {
+        pass: false,
+        message: () => missingInputToMatchForAttribute(forAttributeValue),
+      }
+    }
+
+    await expect(page).toClickSelector(labelSelector, applyDefaultWaitForOpts(opts))
     return {
       pass: true,
       message: () => {

package/src/feature/matchers/toNotMatchTextContent.ts

@@ -23,7 +23,7 @@ export default async function toNotMatchTextContent(
       successText: () => {
         throw new Error('Cannot negate toNotMatchTextContent, use toMatchTextContent instead')
       },
-      failureText: r => `Expected ${r} to match text ${expected}`,
+      failureText: r => `Expected ${r} to not match text ${expected}, but it did`,
       timeout: opts.timeout,
     }
   )

package/src/feature/matchers/toUncheck.ts

@@ -1,5 +1,8 @@
-import { Page, WaitForSelectorOptions } from 'puppeteer'
+import { ElementHandle, Page, WaitForSelectorOptions } from 'puppeteer'
 import applyDefaultWaitForOpts from '../helpers/applyDefaultWaitForOpts.js'
+import emptyForAttribute from '../error-messages/emptyForAttribute.js'
+import missingInputToMatchForAttribute from '../error-messages/missingInputToMatchForAttribute.js'
+import captureAttributeFromClosestElementWithType from '../internal/captureAttributeFromClosestElementWithType.js'
 
 export default async function toUncheck(
   page: Page,
@@ -8,13 +11,32 @@ export default async function toUncheck(
 ) {
   try {
     const labelSelector = `label::-p-text("${expectedText}")`
-
-    // eslint-disable-next-line
-    const forAttributeValue = await page.$eval(labelSelector, label => label.getAttribute('for'))
-    const inputElement = await page.waitForSelector(
-      `#${forAttributeValue}`,
-      applyDefaultWaitForOpts(opts)
+    const forAttributeValue = await captureAttributeFromClosestElementWithType(
+      labelSelector,
+      'label',
+      'for'
     )
+    if (!forAttributeValue) {
+      return {
+        pass: false,
+        message: () => emptyForAttribute(),
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let inputElement: ElementHandle<any> | null = null
+    try {
+      inputElement = await page.waitForSelector(
+        `#${forAttributeValue}`,
+        applyDefaultWaitForOpts(opts)
+      )
+    } catch {
+      return {
+        pass: false,
+        message: () => missingInputToMatchForAttribute(forAttributeValue),
+      }
+    }
+
     // eslint-disable-next-line
     const isChecked = await page.evaluate(checkbox => checkbox.checked, inputElement)
     if (!isChecked)