1 files changed, 108 insertions, 0 deletions
diff --git a/src/components/organisms/comment/approved-comment/approved-comment.test.tsx b/src/components/organisms/comment/approved-comment/approved-comment.test.tsx
new file mode 100644
index 0000000..2e29b5f
--- /dev/null
+++ b/src/components/organisms/comment/approved-comment/approved-comment.test.tsx
@@ -0,0 +1,108 @@
+import { describe, expect, it } from '@jest/globals';
+import { userEvent } from '@testing-library/user-event';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
+import { ApprovedComment, type CommentAuthor } from './approved-comment';
+
+describe('ApprovedComment', () => {
+  const user = userEvent.setup();
+
+  it('renders the author, the publication date, the comment and a permalink', () => {
+    const author = {
+      name: 'Delbert_Jacobi45',
+    } satisfies CommentAuthor;
+    const content = 'Repellat ab non et.';
+    const id = 1;
+    const publicationDate = '2023';
+
+    render(
+      <ApprovedComment
+        author={author}
+        content={content}
+        id={id}
+        publicationDate={publicationDate}
+      />
+    );
+
+    expect(rtlScreen.getByText(author.name)).toBeInTheDocument();
+    expect(rtlScreen.getByText(content)).toBeInTheDocument();
+    expect(
+      rtlScreen.getByText(new RegExp(publicationDate))
+    ).toBeInTheDocument();
+    expect(rtlScreen.getByRole('link')).toHaveAttribute(
+      'href',
+      `#comment-${id}`
+    );
+  });
+
+  it('can render the author avatar', () => {
+    const author = {
+      avatar: {
+        alt: 'enim ut maiores',
+        src: 'https://picsum.photos/640/480',
+      },
+      name: 'Sandra82',
+    } satisfies CommentAuthor;
+
+    render(
+      <ApprovedComment
+        author={author}
+        content="Ab qui aliquam esse."
+        id={2}
+        publicationDate="2022-11-03"
+      />
+    );
+
+    expect(rtlScreen.getByRole('img')).toHaveAccessibleName(author.avatar.alt);
+  });
+
+  it('can render a link to the author website', () => {
+    const author = {
+      name: 'Esmeralda51',
+      website: 'http://example.net',
+    } satisfies CommentAuthor;
+
+    render(
+      <ApprovedComment
+        author={author}
+        content="Ab qui aliquam esse."
+        id={2}
+        publicationDate="2022-11-03"
+      />
+    );
+
+    expect(rtlScreen.getByRole('link', { name: author.name })).toHaveAttribute(
+      'href',
+      author.website
+    );
+  });
+
+  it('can render a reply button', async () => {
+    const id = 6;
+    const replyBtn = 'dolore recusandae voluptas';
+    const handleReply = jest.fn((_id: number) => {
+      // do nothing
+    });
+
+    render(
+      <ApprovedComment
+        author={{ name: 'Kurtis5' }}
+        content="Ab qui aliquam esse."
+        id={id}
+        onReply={handleReply}
+        publicationDate="2022-11-03"
+        replyBtn={replyBtn}
+      />
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect.assertions(4);
+
+    expect(rtlScreen.getByRole('button')).toHaveTextContent(replyBtn);
+    expect(handleReply).not.toHaveBeenCalled();
+
+    await user.click(rtlScreen.getByRole('button'));
+
+    expect(handleReply).toHaveBeenCalledTimes(1);
+    expect(handleReply).toHaveBeenCalledWith(id);
+  });
+});