refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 33 insertions, 0 deletions

diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx
new file mode 100644
index 0000000..6e50562
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@test-utils';
+import MainNav from './main-nav';
+
+const items = [
+  { id: 'home', label: 'Home', href: '/' },
+  { id: 'blog', label: 'Blog', href: '/blog' },
+  { id: 'contact', label: 'Contact', href: '/contact' },
+];
+
+describe('MainNav', () => {
+  it('renders a checkbox to open main nav', () => {
+    render(<MainNav items={items} isActive={false} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open menu');
+  });
+
+  it('renders a checkbox to close main nav', () => {
+    render(<MainNav items={items} isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close menu');
+  });
+
+  it('renders the correct number of items', () => {
+    render(<MainNav items={items} isActive={true} setIsActive={() => null} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(items.length);
+  });
+
+  it('renders some links with the right label', () => {
+    render(<MainNav items={items} isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('link', { name: items[0].label })).toHaveAttribute(
+      'href',
+      items[0].href
+    );
+  });
+});