diff --git a/packages/components/pie-card/test/component/pie-card.spec.ts b/packages/components/pie-card/test/component/pie-card.spec.ts index 6902c3fcae..37cecd4098 100644 --- 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(); }); });