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

justeattakeaway · Sep 23, 2024 · da18140 · da18140
1 parent 07e5a1b
commit da18140
Showing 1 changed file with 45 additions and 57 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
@@ -43,66 +43,55 @@ test.describe('PieCard - Component tests', () => {
         await expect(renderedSlotContent).toBeVisible();
     });
 
-    test('should render the card as an anchor tag with the provided href, target and rel attributes if tag = a', async ({ mount, page }) => {
-        // Arrange
-        const tag = 'a';
-        const href = 'foo.com';
-        const rel = 'noopener noreferrer';
-        const target = '_blank';
+    test.describe('PieCard with tag = "button"', () => {
+        test('should handle click events', async ({ mount }) => {
+            // Arrange
+            const tag = 'button';
+            const messages: string[] = [];
+            const expectedEventMessage = 'Native event dispatched';
 
-        await mount(PieCard, {
-            props: {
-                tag,
-                href,
-                rel,
-                target,
-            } as CardProps,
-            slots: {
-                default: slotContent,
-            },
-        });
+            const component = await mount(PieCard, {
+                props: {
+                    tag,
+                } as CardProps,
+                slots: {
+                    default: slotContent,
+                },
+                on: {
+                    click: () => {
+                        messages.push(expectedEventMessage);
+                    },
+                },
+            });
 
-        // Act
-        const component = page.locator(componentSelector);
+            // Act
+            await component.click();
 
-        // Assert
-        await expect(component).toHaveAttribute('href', href);
-        await expect(component).toHaveAttribute('rel', rel);
-        await expect(component).toHaveAttribute('target', target);
-        await expect(component).toHaveAttribute('aria-disabled', 'false');
-        await expect(component).not.toHaveAttribute('role', 'button');
-        await expect(component).not.toHaveAttribute('tabindex', '0');
-    });
+            // Assert
+            expect(messages).toEqual([expectedEventMessage]);
+        });
 
-    test('should render the card as a div that behaves like a button if tag = "button"', async ({ mount, page }) => {
-        // Arrange
-        const tag = 'button';
-        const messages: string[] = [];
-        const expectedEventMessage = 'Native event dispatched';
+        test('should have the correct attributes', async ({ mount, page }) => {
+            // Arrange
+            const tag = 'button';
 
-        await mount(PieCard, {
-            props: {
-                tag,
-            } as CardProps,
-            slots: {
-                default: slotContent,
-            },
-            on: {
-                click: () => {
-                    messages.push(expectedEventMessage);
+            await mount(PieCard, {
+                props: {
+                    tag,
+                } as CardProps,
+                slots: {
+                    default: slotContent,
                 },
-            },
-        });
+            });
 
-        // Act
-        const component = page.locator(componentSelector);
-        await component.click();
+            // Act
+            const component = page.locator(componentSelector);
 
-        // Assert
-        await expect(component).toHaveAttribute('role', 'button');
-        await expect(component).toHaveAttribute('tabindex', '0');
-        await expect(component).toHaveAttribute('aria-disabled', 'false');
-        expect(messages).toEqual([expectedEventMessage]);
+            // Assert
+            await expect(component).toHaveAttribute('role', 'button');
+            await expect(component).toHaveAttribute('tabindex', '0');
+            await expect(component).toHaveAttribute('aria-disabled', 'false');
+        });
     });
 
     tags.forEach((tag) => {
@@ -297,7 +286,7 @@ test.describe('PieCard - Component tests', () => {
     });
 
     test.describe('Prop: `disabled" and tag="button"`', () => {
-        test('should set the necessary disabled attributes', async ({ mount, page }) => {
+        test('should have the correct attributes', async ({ mount, page }) => {
             // Arrange
             await mount(PieCard, {
                 props: {
@@ -314,7 +303,7 @@ test.describe('PieCard - Component tests', () => {
 
             // Assert
             await expect(component).toHaveAttribute('aria-disabled', 'true');
-            await expect(component).toHaveAttribute('tab-index', '-1');
+            await expect(component).toHaveAttribute('tabindex', '-1');
             await expect(component).toBeDisabled();
         });
 
@@ -350,7 +339,7 @@ test.describe('PieCard - Component tests', () => {
     });
 
     test.describe('Prop: `disabled" and tag="a"`', () => {
-        test('should set the necessary disabled attributes', async ({ mount, page }) => {
+        test('should have the correct attributes', async ({ mount, page }) => {
             // Arrange
             await mount(PieCard, {
                 props: {
@@ -367,8 +356,7 @@ test.describe('PieCard - Component tests', () => {
 
             // Assert
             await expect(component).toHaveAttribute('aria-disabled', 'true');
-            await expect(component).toHaveAttribute('tab-index', '-1');
-            await expect(component.getAttribute('href')).toBeUndefined();
+            await expect(component).not.toHaveAttribute('href');
             await expect(component).toBeDisabled();
         });
     });