test: add breadcrumb tests (#2029)

* test: add breadcrumb tests

* chore: add breadcrumb kitchen sink

* chore: update snaos

Author: anuraghazra

packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx

@@ -0,0 +1,31 @@
+import { composeStories } from '@storybook/react';
+import * as BreadcrumbStories from './Breadcrumb.stories';
+import { Box } from '~components/Box';
+import { Heading } from '~components/Typography';
+
+const allStories = Object.values(composeStories(BreadcrumbStories));
+
+export const Breadcrumb = (): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.4">
+      {allStories.map((Story) => {
+        return (
+          <>
+            <Heading>{Story.storyName}</Heading>
+            <Story />
+          </>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default {
+  title: 'Components/KitchenSink/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    // enable Chromatic's snapshotting only for kitchensink
+    chromatic: { disableSnapshot: false },
+    options: { showPanel: false },
+  },
+};

packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx

@@ -0,0 +1,20 @@
+import { Breadcrumb, BreadcrumbItem } from '../';
+import { HomeIcon } from '~components/Icons';
+import renderWithSSR from '~utils/testing/renderWithSSR.web';
+
+describe('<Breadcrumb />', () => {
+  it('should render breadcrumb', () => {
+    const { container } = renderWithSSR(
+      <Breadcrumb showLastSeparator size="large">
+        <BreadcrumbItem icon={HomeIcon} href="/">
+          Home
+        </BreadcrumbItem>
+        <BreadcrumbItem href="/about">About</BreadcrumbItem>
+        <BreadcrumbItem href="/contact" isCurrentPage>
+          Contact
+        </BreadcrumbItem>
+      </Breadcrumb>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx

@@ -0,0 +1,71 @@
+import userEvent from '@testing-library/user-event';
+import { Breadcrumb, BreadcrumbItem } from '../';
+import renderWithTheme from '~utils/testing/renderWithTheme.web';
+import assertAccessible from '~utils/testing/assertAccessible.web';
+
+describe('<Breadcrumb />', () => {
+  it('should render', () => {
+    const { container } = renderWithTheme(
+      <Breadcrumb>
+        <BreadcrumbItem href="/">Home</BreadcrumbItem>
+        <BreadcrumbItem href="/about">About</BreadcrumbItem>
+        <BreadcrumbItem href="/contact">Contact</BreadcrumbItem>
+      </Breadcrumb>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('current item should have aria-current', () => {
+    const { container, getByText } = renderWithTheme(
+      <Breadcrumb>
+        <BreadcrumbItem href="/">Home</BreadcrumbItem>
+        <BreadcrumbItem href="/about">About</BreadcrumbItem>
+        <BreadcrumbItem href="/contact" isCurrentPage>
+          Contact
+        </BreadcrumbItem>
+      </Breadcrumb>,
+    );
+
+    expect(container).toMatchSnapshot();
+    expect(getByText('Contact').closest('li')).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('should work with showLastSeparator', () => {
+    const { container } = renderWithTheme(
+      <Breadcrumb showLastSeparator>
+        <BreadcrumbItem href="/">Home</BreadcrumbItem>
+        <BreadcrumbItem href="/about">About</BreadcrumbItem>
+        <BreadcrumbItem href="/contact">Contact</BreadcrumbItem>
+      </Breadcrumb>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should work with onClick', async () => {
+    const onClick = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Breadcrumb showLastSeparator>
+        <BreadcrumbItem onClick={onClick} href="/home">
+          Home
+        </BreadcrumbItem>
+      </Breadcrumb>,
+    );
+    const link = getByText('Home');
+    await userEvent.click(link);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should pass a11y render', async () => {
+    const { container } = renderWithTheme(
+      <Breadcrumb>
+        <BreadcrumbItem href="/">Home</BreadcrumbItem>
+        <BreadcrumbItem href="/about">About</BreadcrumbItem>
+        <BreadcrumbItem href="/contact">Contact</BreadcrumbItem>
+      </Breadcrumb>,
+    );
+
+    await assertAccessible(container);
+  });
+});