Update dependency pleasantest to v3 (#2038)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Caleb Eby <[email protected]>

Author: renovate[bot]

package-lock.json

@@ -84,7 +84,7 @@
     "ltx": "3.0.0",
     "mini-css-extract-plugin": "1.6.2",
     "npm-run-all": "4.1.5",
-    "pleasantest": "2.2.0",
+    "pleasantest": "3.1.0",
     "postcss": "8.4.20",
     "postcss-inline-svg": "4.1.0",
     "postcss-loader": "4.3.0",

package.json

@@ -1,6 +1,5 @@
 import path from 'path';
 
-import type { ElementHandle } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
 
 import { loadTwigTemplate } from '../../../test-utils.js';
@@ -18,9 +17,7 @@ describe('Alert component', () => {
         })
       );
 
-      const body = await page.evaluateHandle<ElementHandle>(
-        () => document.body
-      );
+      const body = await page.evaluateHandle(() => document.body);
       expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(
         `text "¡Hola!"`
       );
@@ -36,9 +33,7 @@ describe('Alert component', () => {
         })
       );
 
-      const body = await page.evaluateHandle<ElementHandle>(
-        () => document.body
-      );
+      const body = await page.evaluateHandle(() => document.body);
       expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
         status
           text "Hello world!"
@@ -55,9 +50,7 @@ describe('Alert component', () => {
         })
       );
 
-      const body = await page.evaluateHandle<ElementHandle>(
-        () => document.body
-      );
+      const body = await page.evaluateHandle(() => document.body);
       // Nothing to see if the `hidden` attribute is added to the alert
       expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(``);
     })

src/components/alert/alert.test.ts

@@ -1,6 +1,5 @@
 import path from 'path';
 
-import type { ElementHandle } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
 
 import { loadTwigTemplate } from '../../../test-utils.js';
@@ -27,7 +26,7 @@ test(
       })
     );
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       text "By"
       link "Shakira Isabel Mebarak Ripoll"
@@ -81,7 +80,7 @@ test(
       })
     );
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
 
     // Confirm the meta value is rendered and the date is not rendered
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
@@ -109,7 +108,7 @@ test(
       })
     );
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
 
     // Confirm the author name is "text" and not a link
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
@@ -137,7 +136,7 @@ test(
       })
     );
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
 
     // Confirm the author name is "text" and not a link
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`

src/components/author/author.test.ts

@@ -1,6 +1,5 @@
 import path from 'path';
 
-import type { ElementHandle } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
 
 import { loadGlobalCSS, loadTwigTemplate } from '../../../test-utils.js';
@@ -17,7 +16,7 @@ test(
     await loadGlobalCSS(utils);
 
     // Before JS initializes
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       status
         text "Currently unsubscribed from notifications"
@@ -54,7 +53,7 @@ test(
     );
     await loadGlobalCSS(utils);
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       status
         text "Unsubscribed"

src/components/button-swap/button-swap.test.ts

@@ -1,6 +1,5 @@
 import path from 'path';
 
-import type { ElementHandle } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
 
 import { loadTwigTemplate } from '../../../test-utils.js';
@@ -20,9 +19,7 @@ describe('Card component', () => {
         })
       );
 
-      const body = await page.evaluateHandle<ElementHandle>(
-        () => document.body
-      );
+      const body = await page.evaluateHandle(() => document.body);
       expect(await getAccessibilityTree(body, { includeText: false }))
         .toMatchInlineSnapshot(`
           article
@@ -43,9 +40,7 @@ describe('Card component', () => {
         })
       );
 
-      const body = await page.evaluateHandle<ElementHandle>(
-        () => document.body
-      );
+      const body = await page.evaluateHandle(() => document.body);
       expect(
         await getAccessibilityTree(body, { includeText: false })
       ).toMatchInlineSnapshot(`heading "Lorem ipsum dolor sit amet" (level=2)`);

src/components/card/card.test.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import type { ElementHandle, PleasantestUtils } from 'pleasantest';
+import type { PleasantestUtils } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
 
 import { loadGlobalCSS, loadTwigTemplate } from '../../../test-utils.js';
@@ -36,7 +36,7 @@ test(
 
     await initCommentsJS(utils);
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
     expect(await getAccessibilityTree(body, { includeText: false }))
       .toMatchInlineSnapshot(`
         article "Test author name said:"

src/components/comment/comment.test.ts

@@ -10,7 +10,8 @@ const initTextareaJS = (utils: PleasantestUtils, textarea: ElementHandle) =>
   utils.runJS(
     `
     import { createElasticTextArea } from './elastic-textarea'
-    export default (textarea) => createElasticTextArea(textarea);
+    const [textarea] = import.meta.pleasantestArgs
+    createElasticTextArea(textarea);
     `,
     [textarea]
   );

src/components/input/elastic-textarea.test.ts

@@ -13,38 +13,21 @@ const initSkyNavJS = (utils: PleasantestUtils, navButton: ElementHandle) =>
   utils.runJS(
     `
     import { initSkyNav } from './sky-nav'
-    export default (navButton) => initSkyNav(navButton)
+    const [navButton] = import.meta.pleasantestArgs;
+    initSkyNav(navButton)
     `,
     [navButton]
   );
 
 test(
   'can be opened on small screens',
   withBrowser({ device: iPhone }, async ({ utils, screen, user, page }) => {
-    // The rendered markup needs to be captured so we can pass it into the
-    // `page.evaluate` function below
-    const renderedMarkup = await skyNavMarkup({
-      includeMainDemo: true,
-      menu,
-    });
-    // Pleasantest uses `document.innerHTML` to inject the markup into the DOM,
-    // but that means inline scripts are not executed.
-    // @see https://github.com/cloudfour/pleasantest/issues/526
-    //
-    // > HTML5 specifies that a <script> tag inserted with innerHTML should not execute.
-    // @see https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
-    //
-    // This causes this test to fail because the Sky Nav template has an inline
-    // script. To get around that, the code below uses `document.write` instead
-    // which _will_ execute the inline script.
-    //
-    // Using `document.write` is discouraged. For the purposes of this test,
-    // though, it is okay.
-    // @see https://developer.mozilla.org/en-US/docs/Web/API/Document/write
-    await page.evaluate((renderedMarkup) => {
-      document.body.innerHTML = '';
-      document.write(renderedMarkup);
-    }, renderedMarkup);
+    await utils.injectHTML(
+      await skyNavMarkup({
+        includeMainDemo: true,
+        menu,
+      })
+    );
 
     await loadGlobalCSS(utils);
     const navButton = await screen.getByRole('button', {
@@ -55,7 +38,7 @@ test(
     // Initial state: menu is closed
     await expect(navButton).toHaveAttribute('aria-expanded', 'false');
     expect(await screen.queryByRole('list')).toBeNull();
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       link "Skip to main content"
         text "Skip to main content"
@@ -121,7 +104,7 @@ test(
     // Initial state: list is visible, button is hidden
     expect(navButton).not.toBeVisible();
     await expect(await screen.queryByRole('list')).toBeVisible();
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    const body = await page.evaluateHandle(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       link "Skip to main content"
         text "Skip to main content"

src/components/sky-nav/sky-nav.test.ts

@@ -1,10 +1,16 @@
 import path from 'path';
 
 import type { ElementHandle, PleasantestUtils } from 'pleasantest';
-import { getAccessibilityTree, withBrowser } from 'pleasantest';
+import {
+  getAccessibilityTree,
+  makeCallableJSHandle,
+  withBrowser,
+} from 'pleasantest';
 
 import { loadGlobalCSS, loadTwigTemplate } from '../../../test-utils.js';
 
+import type { createSubscribe } from './subscribe.js';
+
 // Helper to load the Twig template file
 const componentMarkup = (args = {}) =>
   loadTwigTemplate(path.join(__dirname, './subscribe.twig'))({
@@ -25,7 +31,7 @@ const demoDestroyInitMarkup = loadTwigTemplate(
 const expectElementToBeVisuallyHidden = async (
   element: ElementHandle<HTMLElement>
 ) => {
-  const { elHeight, elWidth } = await element.evaluate((el: HTMLElement) => ({
+  const { elHeight, elWidth } = await element.evaluate((el) => ({
     elHeight: el.clientHeight,
     elWidth: el.clientWidth,
   }));
@@ -41,7 +47,7 @@ const expectElementToBeVisuallyHidden = async (
 const expectElementNotToBeVisuallyHidden = async (
   form: ElementHandle<HTMLElement>
 ) => {
-  const { elHeight, elWidth } = await form.evaluate((el: HTMLElement) => ({
+  const { elHeight, elWidth } = await form.evaluate((el) => ({
     elHeight: el.clientHeight,
     elWidth: el.clientWidth,
   }));
@@ -277,17 +283,24 @@ describe('Subscription component', () => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscribe.scss');
       await utils.injectHTML(await demoDestroyInitMarkup());
-      await utils.runJS(`
+      const { subscribeComponent } = await utils.runJS<{
+        subscribeComponent: NonNullable<ReturnType<typeof createSubscribe>>;
+      }>(`
         import { createSubscribe } from './subscribe';
-        // We attach it to the window object as a workaround to have access to
-        // the subscribeComponent later in this test.
-        window.subscribeComponent = createSubscribe(
+        export const subscribeComponent = createSubscribe(
           document.querySelector('.js-subscribe')
         );
         // Set it to the "destroyed" state
-        window.subscribeComponent.destroy();
+        subscribeComponent.destroy();
       `);
 
+      const initSubscribe = makeCallableJSHandle(
+        await subscribeComponent.getProperty('init')
+      );
+      const destroySubscribe = makeCallableJSHandle(
+        await subscribeComponent.getProperty('destroy')
+      );
+
       // The form should be active/visible when `destroy()` is called
       const form = await screen.getByRole('form', {
         name: 'Get Weekly Digests',
@@ -312,9 +325,7 @@ describe('Subscription component', () => {
       await expectElementNotToBeVisuallyHidden(form);
 
       // Initialize the Subscribe component
-      await utils.runJS(`
-        window.subscribeComponent.init();
-      `);
+      await initSubscribe();
 
       // The form should be visually hidden after `init()` is called
       await expectElementToBeVisuallyHidden(form);
@@ -355,9 +366,7 @@ describe('Subscription component', () => {
       // Then blur the focus
       await formSubmitBtn.evaluate((btn) => btn.blur());
       // And immediately run the `destroy()`
-      await utils.runJS(`
-        window.subscribeComponent.destroy();
-      `);
+      await destroySubscribe();
       // Wait out the Subscribe component timeout
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);