feat(pie-toast): DSW-2108 added unit tests for variants

justeattakeaway · Jul 19, 2024 · d276dbd · d276dbd
1 parent 6a48bed
commit d276dbd
Showing 1 changed file with 45 additions and 1 deletion.
diff --git a/packages/components/pie-toast/test/component/pie-toast.spec.ts b/packages/components/pie-toast/test/component/pie-toast.spec.ts
@@ -1,7 +1,7 @@
 
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieToast } from '../../src/index.ts';
-import { type ToastProps } from '../../src/defs.ts';
+import { type ToastProps, variants } from '../../src/defs.ts';
 
 const rootSelector = 'pie-toast';
 const componentSelector = `[data-test-id="${rootSelector}"]`;
@@ -10,6 +10,10 @@ const closeSelector = `[data-test-id="${rootSelector}-close"]`;
 const footerSelector = `[data-test-id="${rootSelector}-footer"]`;
 const leadingActionSelector = `[data-test-id="${rootSelector}-leading-action"]`;
 
+function getToastIconSelectors (variant: string): string {
+    return `[data-test-id="${rootSelector}-heading-icon-${variant}"]`;
+}
+
 test.describe('PieToast - Component tests', () => {
     // IMPORTANT: Mounting and Unmounting the component before each test ensures that any tests that do not explicitly
     // mount the component will still have it available in Playwright's cache (loaded and registered in the test browser)
@@ -192,5 +196,45 @@ test.describe('PieToast - Component tests', () => {
                 expect(actionLeading).toBeVisible();
             });
         });
+
+        test.describe('variant', () => {
+            variants.forEach((variant) => {
+                if (variant !== 'neutral') {
+                    test(`should show the ${variant} icon`, async ({ mount, page }) => {
+                        // Arrange
+                        await mount(PieToast, {
+                            props: {
+                                variant: variant as ToastProps['variant'],
+                            } as ToastProps,
+                        });
+
+                        // Act
+                        const toast = page.locator(componentSelector);
+                        const icon = page.locator(getToastIconSelectors(variant));
+
+                        // Assert
+                        expect(toast).toBeVisible();
+                        expect(icon).toBeVisible();
+                    });
+                } else {
+                    test(`should no show the icon when variant is ${variant}`, async ({ mount, page }) => {
+                        // Arrange
+                        await mount(PieToast, {
+                            props: {
+                                variant: variant as ToastProps['variant'],
+                            } as ToastProps,
+                        });
+
+                        // Act
+                        const toast = page.locator(componentSelector);
+                        const icon = page.locator(getToastIconSelectors(variant));
+
+                        // Assert
+                        expect(toast).toBeVisible();
+                        expect(icon).not.toBeVisible();
+                    });
+                }
+            });
+        });
     });
 });