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/widgets/social-media.test.tsx b/src/components/organisms/widgets/social-media.test.tsx
new file mode 100644
index 0000000..e40db30
--- /dev/null
+++ b/src/components/organisms/widgets/social-media.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@test-utils';
+import SocialMedia, { Media } from './social-media';
+
+const media: Media[] = [
+  { name: 'Github', url: '#' },
+  { name: 'LinkedIn', url: '#' },
+];
+const title = 'Dolores ut ut';
+const titleLevel = 2;
+
+/**
+ * Next.js mock images with next/image component. So for now, I need to mock
+ * the svg files manually.
+ */
+jest.mock('@assets/images/social-media/github.svg', () => 'svg-file');
+jest.mock('@assets/images/social-media/linkedin.svg', () => 'svg-file');
+
+describe('SocialMedia', () => {
+  it('renders the widget title', () => {
+    render(<SocialMedia media={media} title={title} level={titleLevel} />);
+    expect(
+      screen.getByRole('heading', {
+        level: titleLevel,
+        name: new RegExp(title, 'i'),
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct number of items', () => {
+    render(<SocialMedia media={media} title={title} level={titleLevel} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(media.length);
+  });
+});