diff --git a/packages/wethegit-components/src/components/icon/icon/icon.stories.tsx b/packages/wethegit-components/src/components/icon/icon/icon.stories.tsx index f4e02410..7b770bca 100644 --- a/packages/wethegit-components/src/components/icon/icon/icon.stories.tsx +++ b/packages/wethegit-components/src/components/icon/icon/icon.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react" +import { expect, within } from "@storybook/test" import { Icon, IconDefs, IconSymbol } from "@local/components" @@ -28,4 +29,31 @@ type Story = StoryObj export const Default: Story = { render: (args) => , + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + + const icon = canvas.getByRole("img", { hidden: true }) + + expect(icon).toBeInTheDocument() + + // without an alt prop provided, aria-hidden should be true + expect(icon.getAttribute("aria-hidden")).toEqual("true") + expect(icon.hasAttribute("aria-label")).toBe(false) + }, +} + +export const WithAlt: Story = { + render: (args) => { + return + }, + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement) + if (args.alt) { + const icon = canvas.getByLabelText(args.alt) + + expect(icon).toBeInTheDocument() + expect(icon.getAttribute("aria-label")).toEqual(args.alt) + expect(icon.getAttribute("aria-hidden")).toEqual("false") + } + }, }