@justeattakeaway/pie-modal 0.8.0 → 0.10.0

package/test/component/pie-modal.spec.ts

@@ -1,8 +1,16 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
+import { type Page } from '@playwright/test';
 import { PieIconButton } from '@justeattakeaway/pie-icon-button';
+import {
+    WebComponentTestWrapper,
+} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+import { renderTestPieModal } from '../helpers/index.ts';
+
 import { PieModal } from '@/index';
 import { headingLevels } from '@/defs';
 
+const closeButtonSelector = '[data-test-id="modal-close-button"]';
+
 // Mount any components that are used inside of pie-modal so that
 // they have been registered with the browser before the tests run.
 // There is likely a nicer way to do this but this will temporarily
@@ -21,40 +29,46 @@ test.beforeEach(async ({ page, mount }) => {
 });
 
 headingLevels.forEach((headingLevel) => test(`should render the correct heading tag based on the value of headingLevel: ${headingLevel}`, async ({ mount }) => {
+    // Arrange
     const props = {
         heading: 'Modal Header',
         headingLevel,
     };
 
+    // Act
     const component = await mount(PieModal, { props });
 
+    // Assert
     await expect(component.locator(`${props.headingLevel}.c-modal-heading`)).toContainText(props.heading);
 }));
 
 ['span', 'section'].forEach((headingLevel) => test(`should render the fallback heading level 'h2' if invalid headingLevel: ${headingLevel} is passed`, async ({ mount }) => {
+    // Arrange
     const props = {
         heading: 'Modal Header',
-        // assert type checking as we purposely provide incorrect value
         headingLevel,
     };
 
+    // Act
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore // Added this as we want to deliberately test with invalid headingLevel (which is an invalid type based on ModalProps)
     const component = await mount(PieModal, { props });
 
-    // h2 is the default / fallback value
+    // Assert
     await expect(component.locator('h2.c-modal-heading')).toContainText(props.heading);
 }));
 
-test.describe('`Pie Modal is closed`', () => {
-    test.describe('when via the close button click', () => {
+test.describe('When modal is closed', () => {
+    test.describe('by clicking the close button', () => {
         test('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            // Arrange
             const messages: string[] = [];
             await mount(
                 PieModal,
                 {
                     props: {
                         isOpen: true,
+                        isDismissible: true,
                     },
                     on: {
                         click: (event: string) => messages.push(event),
@@ -62,14 +76,16 @@ test.describe('`Pie Modal is closed`', () => {
                 },
             );
 
-            await page.locator('.c-modal-closeBtn').click();
+            await page.locator(closeButtonSelector).click();
 
+            // Assert
             expect(messages).toHaveLength(1);
         });
     });
 
-    test.describe('when via the backdrop click', () => {
+    test.describe('by clicking the backdrop', () => {
         test('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            // Arrange
             const messages: string[] = [];
             await mount(
                 PieModal,
@@ -83,10 +99,277 @@ test.describe('`Pie Modal is closed`', () => {
                 },
             );
 
+            // Act
             await page.locator('#dialog').click();
 
+            // Assert
             expect(messages).toHaveLength(1);
         });
     });
+
+    test.describe('`returnFocusAfterCloseSelector` prop', () => {
+        test.describe('when given', () => {
+            test('should return focus to specified element', async ({ mount, page }) => {
+                // Arrange
+                const component = renderTestPieModal({
+                    returnFocusAfterCloseSelector: '#focus-me',
+                });
+
+                await mount(WebComponentTestWrapper, {
+                    props: {
+                        pageMode: true,
+                    },
+                    slots: {
+                        component,
+                        pageMarkup: `<div>
+                            <button id="default"></button>
+                            <button id="focus-me"></button>
+                            <button id="not-me"></button>
+                        </div>`,
+                    },
+                });
+
+                // Act
+                await page.locator(closeButtonSelector).click();
+
+                const focusedElement = await page.locator(':focus');
+                const focusedElementId = await focusedElement.getAttribute('id');
+
+                // Assert
+                expect(focusedElementId).toBe('focus-me');
+            });
+
+            test('should return focus to first matching element', async ({ page, mount }) => {
+                // Arrange
+                const component = renderTestPieModal({
+                    returnFocusAfterCloseSelector: '[data-test-id="focus-me"]',
+                });
+
+                await mount(WebComponentTestWrapper, {
+                    props: {
+                        pageMode: true,
+                    },
+                    slots: {
+                        component,
+                        pageMarkup: `<div>
+                            <button id="default"></button>
+                            <button data-test-id="focus-me" id="actual-focus"></button>
+                            <button data-test-id="focus-me"></button>
+                        </div>`,
+                    },
+                });
+
+                // Act
+                await page.locator(closeButtonSelector).click();
+
+                const focusedElement = await page.locator(':focus');
+                const focusedElementId = await focusedElement.getAttribute('id');
+
+                // Assert
+                expect(focusedElementId).toBe('actual-focus');
+            });
+        });
+
+        test.describe('when not given', () => {
+            [{
+                mechanism: 'close button',
+                modalCloseFunction: async (page : Page) => {
+                    await page.locator(closeButtonSelector).click();
+                },
+            }, {
+                mechanism: 'Esc key',
+                modalCloseFunction: async (page : Page) => {
+                    await page.keyboard.press('Escape');
+                },
+            }].forEach(({ mechanism, modalCloseFunction }) => {
+                test.describe(`and closed by the ${mechanism}`, () => {
+                    test('should return focus to the element that opens the modal', async ({ page, mount }) => {
+                        // Arrange
+                        const component = renderTestPieModal({ isOpen: false });
+
+                        await mount(WebComponentTestWrapper, {
+                            props: {
+                                pageMode: true,
+                            },
+                            slots: {
+                                component,
+                                pageMarkup: `<div>
+                                    <button id="not-me"></button>
+                                    <button data-test-id="open-modal" id="default"></button>
+                                </div>`,
+                            },
+                        });
+
+                        await page.evaluate(() => {
+                            // Set up a button which opens the modal when clicked
+                            document.querySelector('[data-test-id="open-modal"]')?.addEventListener('click', () => {
+                                document.querySelector('pie-modal')?.setAttribute('isOpen', 'true');
+                            });
+                        });
+
+                        // Act
+                        await page.locator('[data-test-id="open-modal"]').click();
+                        await modalCloseFunction(page);
+
+                        const focusedElement = await page.locator(':focus');
+                        const focusedElementId = await focusedElement.getAttribute('id');
+
+                        // Assert
+                        expect(focusedElementId).toBe('default');
+                    });
+                });
+            });
+        });
+    });
 });
 
+test.describe('`isDismissible` prop', () => {
+    test.describe('when `true`', () => {
+        test('should make the modal contain a close button', async ({ mount }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: true,
+                    },
+                },
+            );
+
+            // Act & Assert
+            await expect(component.locator(closeButtonSelector)).toBeVisible();
+        });
+
+        test('should close the modal when the close button is clicked', async ({ mount }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: true,
+                    },
+                },
+            );
+
+            // Act
+            await component.locator('[data-test-id="modal-close-button"]').click();
+
+            // Assert
+            await expect(component).not.toBeVisible();
+        });
+
+        test('should close the modal when the backdrop is clicked', async ({ mount, page }) => {
+            // Arrange
+            await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: true,
+                    },
+                },
+            );
+
+            // Act
+            await page.locator('body').click();
+
+            const element = await page.locator('#dialog');
+
+            const styles = await element.evaluate((modal) => {
+                const computedStyles = window.getComputedStyle(modal);
+                return {
+                    display: computedStyles.getPropertyValue('display'),
+                };
+            });
+
+            // Assert
+            expect(styles.display).toBe('none');
+        });
+
+        test('should close the modal when the Escape key is pressed', async ({ mount, page }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: false,
+                    },
+                },
+            );
+
+            // Act
+            await page.keyboard.press('Escape');
+
+            // Assert
+            await expect(component).not.toBeVisible();
+        });
+    });
+
+    test.describe('when `isDismissible` is `false`', () => {
+        test('should make the modal NOT contain a close button', async ({ mount }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: false,
+                    },
+                },
+            );
+
+            // Act & Assert
+            await expect(component.locator(closeButtonSelector)).not.toBeVisible();
+        });
+
+        test('should NOT close the modal when the backdrop is clicked', async ({ mount, page }) => {
+            // Arrange
+            await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: false,
+                    },
+                },
+            );
+
+            // Act
+            await page.locator('body').click();
+
+            const element = await page.locator('#dialog');
+
+            const styles = await element.evaluate((modal) => {
+                const computedStyles = window.getComputedStyle(modal);
+                return {
+                    display: computedStyles.getPropertyValue('display'),
+                };
+            });
+
+            // Assert
+            expect(styles.display).toBe('block');
+        });
+
+        test('should NOT close the modal when the Escape key is pressed', async ({ mount, page }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        isDismissible: false,
+                    },
+                },
+            );
+
+            // Act
+            await page.keyboard.press('Escape');
+
+            // Assert
+            await expect(component.locator('dialog')).toBeVisible();
+        });
+    });
+});

package/test/helpers/index.ts

@@ -0,0 +1,29 @@
+import { ModalProps } from '@/defs';
+
+// Renders a <pie-modal> HTML string with the given prop values
+export const renderTestPieModal = ({
+    heading = 'This is a modal heading',
+    headingLevel = 'h2',
+    isDismissible = true,
+    isFullWidthBelowMid = false,
+    isOpen = true,
+    returnFocusAfterCloseSelector = undefined,
+    size = 'medium',
+} : Partial<ModalProps> = {}) => `<pie-modal
+        heading="${heading}"
+        headingLevel="${headingLevel}"
+        ${isFullWidthBelowMid ? 'isFullWidthBelowMid' : ''}
+        ${isDismissible ? 'isDismissible' : ''}
+        ${isOpen ? 'isOpen' : ''}
+        ${returnFocusAfterCloseSelector ? `returnFocusAfterCloseSelector=${returnFocusAfterCloseSelector}` : ''}
+        size="${size}">
+    </pie-modal>`;
+
+// Creates some test page markup to test scroll locking
+export const createScrollablePageHTML = () => `<div>
+        <h1>Test Page</h1>
+        <p> Test copy </p>
+        <ol>
+            ${'<li>List item</li>'.repeat(200)}
+        </ol>
+    </div>`;

package/test/visual/pie-modal.spec.ts

@@ -6,19 +6,7 @@ import {
 import { PieIconButton } from '@justeattakeaway/pie-icon-button';
 import { PieModal } from '@/index';
 import { ModalProps, sizes } from '@/defs';
-
-// Renders a <pie-modal> HTML string with the given prop values
-const renderTestPieModal = ({
-    heading = 'This is a modal heading',
-    headingLevel = 'h2',
-    size = 'medium',
-    isOpen = true,
-} : Partial<ModalProps> = {}) => `<pie-modal ${isOpen ? 'isOpen' : ''} heading="${heading}" headingLevel="${headingLevel}" size="${size}"></pie-modal>`;
-
-// Creates a <ol> with a large number of <li> nodes for testing page scrolling
-const createTestPageHTML = () => `<ol>
-        ${'<li>List item</li>'.repeat(200)}
-    </ol>`;
+import { createScrollablePageHTML, renderTestPieModal } from '../helpers/index.ts';
 
 // Mount any components that are used inside of pie-modal so that
 // they have been registered with the browser before the tests run.
@@ -48,7 +36,7 @@ test('Should not be able to scroll when modal is open', async ({ page, mount })
             },
             slots: {
                 component: modalComponent,
-                pageMarkup: createTestPageHTML(),
+                pageMarkup: createScrollablePageHTML(),
             },
         },
     );
@@ -65,9 +53,7 @@ test('should not render when isOpen = false', async ({ page, mount }) => {
     await mount(PieModal, {
         props: {
             heading: 'This is a modal heading',
-            headingLevel: 'h2',
             isOpen: false,
-            size: 'medium',
         },
     });
 
@@ -79,7 +65,6 @@ sizes.forEach((size) => {
         await mount(PieModal, {
             props: {
                 heading: 'This is a modal heading',
-                headingLevel: 'h2',
                 isOpen: true,
                 size,
             },
@@ -88,3 +73,81 @@ sizes.forEach((size) => {
         await percySnapshot(page, `Modal - size = ${size}`);
     });
 });
+
+test.describe('`isFullWidthBelowMid`', () => {
+    test.describe('when true', () => {
+        test('should be full width for a modal with size = medium', async ({ page, mount }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isFullWidthBelowMid: true,
+                    isOpen: true,
+                    size: 'medium',
+                },
+            });
+
+            await percySnapshot(page, 'Modal - isFullWidthBelowMid = true, size = medium');
+        });
+
+        test('should not be full width when size = small', async ({ page, mount }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isFullWidthBelowMid: true,
+                    isOpen: true,
+                    size: 'small',
+                },
+            });
+
+            await percySnapshot(page, 'Modal - isFullWidthBelowMid = true, size = small');
+        });
+    });
+
+    test.describe('when false', () => {
+        (['small', 'medium'] as Array<ModalProps['size']>)
+        .forEach((size) => {
+            test(`should not be full width for a modal with size = ${size}`, async ({ page, mount }) => {
+                await mount(PieModal, {
+                    props: {
+                        heading: 'This is a modal heading',
+                        isFullWidthBelowMid: false,
+                        isOpen: true,
+                        size,
+                    },
+                });
+
+                await percySnapshot(page, `Modal - isFullWidthBelowMid = false, size = ${size}`);
+            });
+        });
+    });
+});
+
+test.describe('`isDismissible`', () => {
+    test.describe('when true', () => {
+        test('should display a close button within the modal', async ({ mount, page }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isDismissible: true,
+                    isOpen: true,
+                },
+            });
+
+            await percySnapshot(page, 'Modal with close button displayed - isDismissible: `true`');
+        });
+    });
+
+    test.describe('when false', () => {
+        test('should NOT display a close button', async ({ mount, page }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isDismissible: false,
+                    isOpen: true,
+                },
+            });
+
+            await percySnapshot(page, 'Modal without close button - isDismissible: `false`');
+        });
+    });
+});