Merge pull request #273 from wethegit/feature/icon-alt-tests

feature: add tests for aria-hidden and aria-label for icon component

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<typeof Icon>
 
 export const Default: Story = {
   render: (args) => <Icon {...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 <Icon {...args} />
+  },
+  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")
+    }
+  },
 }