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, 47 insertions, 0 deletions

diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
new file mode 100644
index 0000000..66003d1
--- /dev/null
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@test-utils';
+import Comment from './comment';
+import {
+  author,
+  data,
+  formattedDate,
+  formattedTime,
+  id,
+} from './comment.fixture';
+
+describe('Comment', () => {
+  it('renders an avatar', () => {
+    render(<Comment canReply={true} {...data} />);
+    expect(
+      screen.getByRole('img', { name: author.avatar.alt })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the author website url', () => {
+    render(<Comment canReply={true} {...data} />);
+    expect(screen.getByRole('link', { name: author.name })).toHaveAttribute(
+      'href',
+      author.website
+    );
+  });
+
+  it('renders a permalink to the comment', () => {
+    render(<Comment canReply={true} {...data} />);
+    expect(
+      screen.getByRole('link', {
+        name: `${formattedDate} at ${formattedTime}`,
+      })
+    ).toHaveAttribute('href', `/#comment-${id}`);
+  });
+
+  it('renders a reply button', () => {
+    render(<Comment canReply={true} {...data} />);
+    expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument();
+  });
+
+  it('does not render a reply button', () => {
+    render(<Comment canReply={false} {...data} />);
+    expect(
+      screen.queryByRole('button', { name: 'Reply' })
+    ).not.toBeInTheDocument();
+  });
+});