fix(pie-card): DSW-2425 re arrange tests

justeattakeaway · Sep 24, 2024 · 1a30847 · 1a30847
1 parent da18140
commit 1a30847
Showing 1 changed file with 62 additions and 60 deletions.
diff --git a/packages/components/pie-card/test/component/pie-card.spec.ts b/packages/components/pie-card/test/component/pie-card.spec.ts
@@ -285,79 +285,81 @@ test.describe('PieCard - Component tests', () => {
         });
     });
 
-    test.describe('Prop: `disabled" and tag="button"`', () => {
-        test('should have the correct attributes', async ({ mount, page }) => {
+    test.describe('Prop: disabled', () => {
+        test.describe('when tag="button"', () => {
+            test('should have the correct attributes', async ({ mount, page }) => {
             // Arrange
-            await mount(PieCard, {
-                props: {
-                    tag: 'button',
-                    disabled: true,
-                } as CardProps,
-                slots: {
-                    default: slotContent,
-                },
-            });
+                await mount(PieCard, {
+                    props: {
+                        tag: 'button',
+                        disabled: true,
+                    } as CardProps,
+                    slots: {
+                        default: slotContent,
+                    },
+                });
 
-            // Act
-            const component = page.locator(componentSelector);
+                // Act
+                const component = page.locator(componentSelector);
 
-            // Assert
-            await expect(component).toHaveAttribute('aria-disabled', 'true');
-            await expect(component).toHaveAttribute('tabindex', '-1');
-            await expect(component).toBeDisabled();
-        });
+                // Assert
+                await expect(component).toHaveAttribute('aria-disabled', 'true');
+                await expect(component).toHaveAttribute('tabindex', '-1');
+                await expect(component).toBeDisabled();
+            });
 
-        test('should not trigger the click event when the card is a button and disabled', async ({ mount, page }) => {
+            test('should not trigger the click event when the card is a button and disabled', async ({ mount, page }) => {
             // Arrange
-            const messages: string[] = [];
+                const messages: string[] = [];
 
-            await mount(PieCard, {
-                props: {
-                    tag: 'button',
-                    disabled: true,
-                } as CardProps,
-                slots: {
-                    default: slotContent,
-                },
-                on: {
-                    click: () => messages.push('1'),
-                },
-            });
+                await mount(PieCard, {
+                    props: {
+                        tag: 'button',
+                        disabled: true,
+                    } as CardProps,
+                    slots: {
+                        default: slotContent,
+                    },
+                    on: {
+                        click: () => messages.push('1'),
+                    },
+                });
 
-            // Act
-            const component = page.locator(componentSelector);
-            // using page.evaluate to attach the click event as the playwright click method will time out if the element is disabled.
-            await page.evaluate(() => {
-                const card = document.querySelector('pie-card');
-                card?.shadowRoot?.querySelector('div')?.click();
-            });
+                // Act
+                const component = page.locator(componentSelector);
+                // using page.evaluate to attach the click event as the playwright click method will time out if the element is disabled.
+                await page.evaluate(() => {
+                    const card = document.querySelector('pie-card');
+                    card?.shadowRoot?.querySelector('div')?.click();
+                });
 
-            // Assert
-            await expect(component).toBeDisabled();
-            expect(messages).toHaveLength(0);
+                // Assert
+                await expect(component).toBeDisabled();
+                expect(messages).toHaveLength(0);
+            });
         });
-    });
 
-    test.describe('Prop: `disabled" and tag="a"`', () => {
-        test('should have the correct attributes', async ({ mount, page }) => {
+        test.describe('when tag="a"', () => {
+            test('should have the correct attributes', async ({ mount, page }) => {
             // Arrange
-            await mount(PieCard, {
-                props: {
-                    tag: 'a',
-                    disabled: true,
-                } as CardProps,
-                slots: {
-                    default: slotContent,
-                },
-            });
+                await mount(PieCard, {
+                    props: {
+                        tag: 'a',
+                        disabled: true,
+                    } as CardProps,
+                    slots: {
+                        default: slotContent,
+                    },
+                });
 
-            // Act
-            const component = page.locator(componentSelector);
+                // Act
+                const component = page.locator(componentSelector);
 
-            // Assert
-            await expect(component).toHaveAttribute('aria-disabled', 'true');
-            await expect(component).not.toHaveAttribute('href');
-            await expect(component).toBeDisabled();
+                // Assert
+                await expect(component).toHaveAttribute('aria-disabled', 'true');
+                await expect(component).not.toHaveAttribute('href');
+                await expect(component).toBeDisabled();
+            });
         });
     });
 });