From bd9c9ae7e2ae973969569dd434836de9f38b07d4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Nov 2023 16:55:58 +0100
Subject: refactor(components): split Comment component into 3 components

* add ApprovedComment, PendingComment and ReplyCommentForm components
* let consumer handle reply form visibility
* move structured data into article page (each article already has the
comments data and already handle json ltd schema so I prefered to move
the schema in the final consumer instead of adding a script element
foreach comment)
---
 .../approved-comment/approved-comment.test.tsx     | 108 +++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/organisms/comment/approved-comment/approved-comment.test.tsx

(limited to 'src/components/organisms/comment/approved-comment/approved-comment.test.tsx')

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);
+  });
+});
-- 
cgit v1.2.3