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)

1 files changed, 26 insertions, 0 deletions

diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.test.tsx b/src/components/organisms/comment/reply-comment-form/reply-comment-form.test.tsx
new file mode 100644
index 0000000..f02dd48
--- /dev/null
+++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.test.tsx
@@ -0,0 +1,26 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
+import { Heading } from '../../../atoms';
+import { ReplyCommentForm } from './reply-comment-form';
+
+describe('ReplyCommentForm', () => {
+  it('renders a form with a heading', () => {
+    const commentId = 5;
+    const heading = 'odio autem voluptas';
+    const headingLvl = 3;
+
+    render(
+      <ReplyCommentForm
+        commentId={commentId}
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+      />
+    );
+
+    expect(
+      rtlScreen.getByRole('heading', { level: headingLvl })
+    ).toHaveTextContent(heading);
+    expect(rtlScreen.getByRole('form')).toHaveAccessibleName(
+      `Leave a reply to comment ${commentId}`
+    );
+  });
+});