From 8a6f09b564d5d2f02d0a2605f6b52070a910aaa3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 25 Apr 2022 12:57:12 +0200
Subject: chore: add a PageLayout component

---
 src/components/templates/page/page-layout.test.tsx | 90 ++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 src/components/templates/page/page-layout.test.tsx

(limited to 'src/components/templates/page/page-layout.test.tsx')

diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
new file mode 100644
index 0000000..b8fff6a
--- /dev/null
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -0,0 +1,90 @@
+import { render, screen } from '@test-utils';
+import PageLayout from './page-layout';
+
+const title = 'Incidunt ad earum';
+const breadcrumb = [
+  { id: 'home', url: '#', name: 'Home' },
+  { id: 'page', url: '#', name: title },
+];
+const children =
+  'Reprehenderit aut quis aperiam magnam quia id. Vero enim animi placeat quia. Laborum sit odio minima. Dolores et debitis eaque iste quidem. Omnis aliquam illum porro ea non. Quaerat totam iste quos ex facilis officia accusantium.';
+
+describe('PageLayout', () => {
+  it('renders the page title', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('heading', { level: 1, name: title })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the page content', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title}>
+        {children}
+      </PageLayout>
+    );
+    expect(screen.getByText(children)).toBeInTheDocument();
+  });
+
+  it('renders the breadcrumb', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('navigation', { name: 'Breadcrumb' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the table of contents', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title} withToC={true}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Table of Contents/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the comment form', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title} allowComments={true}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('form', { name: /Leave a comment/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the comments list', () => {
+    const comments = [
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 1',
+        },
+        content:
+          'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
+        id: 1,
+        publication: '2021-04-03 18:04:11',
+        // @ts-ignore - Needed because of the placeholder image.
+        unoptimized: true,
+      },
+    ];
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title} comments={comments}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Comments/i })
+    ).toBeInTheDocument();
+  });
+});
-- 
cgit v1.2.3