@justeattakeaway/pie-modal 0.11.0 → 0.13.0

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

@@ -1,5 +1,6 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { type Page } from '@playwright/test';
+import { PieButton } from '@justeattakeaway/pie-button';
 import { PieIconButton } from '@justeattakeaway/pie-icon-button';
 import {
     WebComponentTestWrapper,
@@ -7,24 +8,40 @@ import {
 import { renderTestPieModal } from '../helpers/index.ts';
 
 import { PieModal } from '@/index';
-import { headingLevels } from '@/defs';
+import {
+    ON_MODAL_BACK_EVENT,
+    ON_MODAL_CLOSE_EVENT,
+    headingLevels,
+} from '@/defs';
 
+const modalSelector = '[data-test-id="pie-modal"]';
+const backButtonSelector = '[data-test-id="modal-back-button"]';
 const closeButtonSelector = '[data-test-id="modal-close-button"]';
 
-// Mount any components that are used inside of pie-modal so that
+// Mount then unmount 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
 // unblock tests.
-test.beforeEach(async ({ page, mount }) => {
-    await mount(
-        PieIconButton,
-        {},
-    );
-
-    // Removing the element so it's not present in the tests (but is still registered in the DOM)
-    await page.evaluate(() => {
-        const element : Element | null = document.querySelector('pie-icon-button');
-        element?.remove();
+test.beforeEach(async ({ mount }) => {
+    await (await mount(PieButton)).unmount();
+    await (await mount(PieIconButton)).unmount();
+});
+
+test.describe('modal', () => {
+    test('should be visible when opened', async ({ mount, page }) => {
+        // Arrange
+        await mount(PieModal, {
+            props: {
+                heading: 'Modal heading',
+                isOpen: true,
+            },
+        });
+
+        // Act
+        const modal = page.locator(modalSelector);
+
+        // Assert
+        expect(modal).toBeVisible();
     });
 });
 
@@ -62,7 +79,8 @@ 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[] = [];
+            const events : Array<Event> = [];
+
             await mount(
                 PieModal,
                 {
@@ -71,39 +89,98 @@ test.describe('When modal is closed', () => {
                         isDismissible: true,
                     },
                     on: {
-                        click: (event: string) => messages.push(event),
+                        [ON_MODAL_CLOSE_EVENT]: (event: Event) => events.push(event),
                     },
                 },
             );
 
-            await page.locator(closeButtonSelector).click();
+            await page.click(closeButtonSelector);
+
+            // Assert
+            expect(events).toHaveLength(1);
+        });
+
+        test('should close the modal', async ({ mount, page }) => {
+            // Arrange
+            await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: true,
+                },
+            });
+
+            const modal = page.locator(modalSelector);
+
+            // Act
+            await page.click(closeButtonSelector);
 
             // Assert
-            expect(messages).toHaveLength(1);
+            expect(modal).not.toBeVisible();
         });
     });
 
-    test.describe('by clicking the backdrop', () => {
-        test('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+    test.describe('by clicking the back button', () => {
+        test('should dispatch event `pie-modal-back`', async ({ mount, page }) => {
             // Arrange
-            const messages: string[] = [];
+            const events: Event[] = [];
             await mount(
                 PieModal,
                 {
                     props: {
                         isOpen: true,
+                        hasBackButton: true,
                     },
                     on: {
-                        click: (event: string) => messages.push(event),
+                        [ON_MODAL_BACK_EVENT]: (event: Event) => events.push(event),
                     },
                 },
             );
 
+            await page.locator(backButtonSelector).click();
+
+            // Assert
+            expect(events).toHaveLength(1);
+        });
+    });
+
+    test.describe('by clicking the backdrop', () => {
+        test('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            // Arrange
+            const events : Array<Event> = [];
+
+            await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: true,
+                },
+                on: {
+                    [ON_MODAL_CLOSE_EVENT]: (event: Event) => events.push(event),
+                },
+            });
+
             // Act
-            await page.locator('#dialog').click();
+            await page.click(modalSelector, { position: { x: -10, y: -10 } }); // Click outside dialog
 
             // Assert
-            expect(messages).toHaveLength(1);
+            expect(events).toHaveLength(1); // TODO - Event object is null for this test
+        });
+
+        test('should close the modal', async ({ mount, page }) => {
+            // Arrange
+            await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: true,
+                },
+            });
+
+            const modal = await page.locator(modalSelector);
+
+            // Act
+            await modal.click({ position: { x: -10, y: -10 } }); // Click outside dialog
+
+            // Assert
+            expect(modal).not.toBeVisible();
         });
     });
 
@@ -130,7 +207,7 @@ test.describe('When modal is closed', () => {
                 });
 
                 // Act
-                await page.locator(closeButtonSelector).click();
+                await page.click(closeButtonSelector);
 
                 const focusedElement = await page.locator(':focus');
                 const focusedElementId = await focusedElement.getAttribute('id');
@@ -160,7 +237,7 @@ test.describe('When modal is closed', () => {
                 });
 
                 // Act
-                await page.locator(closeButtonSelector).click();
+                await page.click(closeButtonSelector);
 
                 const focusedElement = await page.locator(':focus');
                 const focusedElementId = await focusedElement.getAttribute('id');
@@ -174,7 +251,7 @@ test.describe('When modal is closed', () => {
             [{
                 mechanism: 'close button',
                 modalCloseFunction: async (page : Page) => {
-                    await page.locator(closeButtonSelector).click();
+                    await page.click(closeButtonSelector);
                 },
             }, {
                 mechanism: 'Esc key',
@@ -208,7 +285,7 @@ test.describe('When modal is closed', () => {
                         });
 
                         // Act
-                        await page.locator('[data-test-id="open-modal"]').click();
+                        await page.click('[data-test-id="open-modal"]');
                         await modalCloseFunction(page);
 
                         const focusedElement = await page.locator(':focus');
@@ -237,11 +314,14 @@ test.describe('`isDismissible` prop', () => {
                 },
             );
 
-            // Act & Assert
-            await expect(component.locator(closeButtonSelector)).toBeVisible();
+            // Act
+            const closeButton = component.locator(closeButtonSelector);
+
+            // Assert
+            await expect(closeButton).toBeVisible();
         });
 
-        test('should close the modal when the close button is clicked', async ({ mount }) => {
+        test('should close the modal when the close button is clicked', async ({ mount, page }) => {
             // Arrange
             const component = await mount(
                 PieModal,
@@ -254,7 +334,7 @@ test.describe('`isDismissible` prop', () => {
             );
 
             // Act
-            await component.locator('[data-test-id="modal-close-button"]').click();
+            await page.click('[data-test-id="modal-close-button"]');
 
             // Assert
             await expect(component).not.toBeVisible();
@@ -273,9 +353,9 @@ test.describe('`isDismissible` prop', () => {
             );
 
             // Act
-            await page.locator('body').click();
+            await page.click('body');
 
-            const element = await page.locator('#dialog');
+            const element = await page.locator(modalSelector);
 
             const styles = await element.evaluate((modal) => {
                 const computedStyles = window.getComputedStyle(modal);
@@ -290,39 +370,38 @@ test.describe('`isDismissible` prop', () => {
 
         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,
-                    },
+            await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: true,
                 },
-            );
+            });
+
+            const modal = await page.locator(modalSelector);
 
             // Act
             await page.keyboard.press('Escape');
 
             // Assert
-            await expect(component).not.toBeVisible();
+            await expect(modal).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,
-                    },
+            const component = await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: false,
                 },
-            );
+            });
 
-            // Act & Assert
-            await expect(component.locator(closeButtonSelector)).not.toBeVisible();
+            // Act
+            const closeButton = await component.locator(closeButtonSelector);
+
+            // Assert
+            await expect(closeButton).not.toBeVisible();
         });
 
         test('should NOT close the modal when the backdrop is clicked', async ({ mount, page }) => {
@@ -340,7 +419,7 @@ test.describe('`isDismissible` prop', () => {
             // Act
             await page.locator('body').click();
 
-            const element = await page.locator('#dialog');
+            const element = await page.locator(modalSelector);
 
             const styles = await element.evaluate((modal) => {
                 const computedStyles = window.getComputedStyle(modal);
@@ -350,26 +429,127 @@ test.describe('`isDismissible` prop', () => {
             });
 
             // Assert
-            expect(styles.display).toBe('block');
+            expect(styles.display).toBe('flex');
         });
 
         test('should NOT close the modal when the Escape key is pressed', async ({ mount, page }) => {
+            // Arrange
+            await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: false,
+                },
+            });
+
+            // Act
+            await page.keyboard.press('Escape');
+            const modal = await page.locator(modalSelector);
+
+            // Assert
+            await expect(modal).toBeVisible();
+        });
+    });
+});
+
+test.describe('`hasBackButton` prop', () => {
+    test.describe('when `true`', () => {
+        test('should make the modal contain a back button', async ({ mount }) => {
             // Arrange
             const component = await mount(
                 PieModal,
                 {
                     props: {
                         isOpen: true,
-                        isDismissible: false,
+                        hasBackButton: true,
+                    },
+                },
+            );
+
+            // Act & Assert
+            await expect(component.locator(backButtonSelector)).toBeVisible();
+        });
+
+        test('should close the modal when the back button is clicked', async ({ mount }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        hasBackButton: true,
                     },
                 },
             );
 
             // Act
-            await page.keyboard.press('Escape');
+            await component.locator(backButtonSelector).click();
 
             // Assert
-            await expect(component.locator('dialog')).toBeVisible();
+            await expect(component).not.toBeVisible();
+        });
+    });
+
+    test.describe('when `hasBackButton` is `false`', () => {
+        test('should make the modal NOT contain a back button', async ({ mount }) => {
+            // Arrange
+            const component = await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                        hasBackButton: false,
+                    },
+                },
+            );
+
+            // Act & Assert
+            await expect(component.locator(backButtonSelector)).not.toBeVisible();
+        });
+    });
+});
+
+test.describe('actions', () => {
+    ['leading', 'supporting'].forEach((actionName) => {
+        test.describe(`${actionName} action, when clicked`, () => {
+            const buttonSelector = `[data-test-id="modal-${actionName}-action"]`;
+
+            test('should close the modal', async ({ page, mount }) => {
+                // Arrange
+                await mount(PieModal, {
+                    props: {
+                        heading: 'Modal Header',
+                        isOpen: true,
+                    },
+                });
+
+                const modal = await page.locator(modalSelector);
+
+                // Act
+                await page.click(buttonSelector);
+
+                // Assert
+                expect(modal).not.toBeVisible();
+            });
+
+            test('should submit the correct return value', async ({ page, mount }) => {
+                // Arrange
+                await mount(PieModal, {
+                    props: {
+                        heading: 'Modal Header',
+                        isOpen: true,
+                    },
+                });
+
+                // Act
+                await page.click(buttonSelector);
+                const returnValue = await page.$eval(
+                    modalSelector,
+                    (dialog : HTMLDialogElement) => dialog.returnValue,
+                );
+
+                // Assert
+                expect(returnValue).toBe(actionName);
+            });
         });
     });
 });

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

@@ -151,3 +151,53 @@ test.describe('`isDismissible`', () => {
         });
     });
 });
+
+const directions = ['ltr', 'rtl', 'auto'] as const;
+
+test.describe('`hasBackButton`', () => {
+    directions.forEach((dir) => {
+        test.describe('when true', () => {
+            test(`should display a back button within the modal and dir is ${dir}`, async ({ mount, page }) => {
+                await mount(PieModal, {
+                    props: {
+                        heading: 'This is a modal heading',
+                        hasBackButton: true,
+                        isOpen: true,
+                        dir,
+                    },
+                });
+
+                await percySnapshot(page, `Modal with back button displayed - hasBackButton: ${true} - dir: ${dir}`);
+            });
+        });
+
+        test.describe('when false', () => {
+            test(`should NOT display a back button and dir is ${dir}`, async ({ mount, page }) => {
+                await mount(PieModal, {
+                    props: {
+                        heading: 'This is a modal heading',
+                        hasBackButton: false,
+                        isOpen: true,
+                        dir,
+                    },
+                });
+
+                await percySnapshot(page, `Modal without back button - hasBackButton: ${false} - dir: ${dir}`);
+            });
+        });
+    });
+});
+
+test('Should display loading spinner when `isLoading` is true', async ({ mount, page }) => {
+    await mount(PieModal, {
+        props: {
+            heading: 'This is a modal heading',
+            hasBackButton: true,
+            isDismissible: true,
+            isOpen: true,
+            isLoading: true,
+        },
+    });
+
+    await percySnapshot(page, `Modal displays loading spinner - isLoading: ${true}`);
+});