From 20b65a69ea193f2339b3e30f16cbe90e01b7b286 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 26 Oct 2020 21:00:40 +0100
Subject: [PATCH] Added page and panel tests

---
 __tests__/Page.test.tsx         | 37 +++++++++++++++++++++++++++++++++
 __tests__/Panel.test.tsx        | 25 ++++++++++++++++++++++
 src/components/Page/Header.tsx  |  2 +-
 src/style/components/_page.scss |  6 ++++++
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/Page.test.tsx
 create mode 100644 __tests__/Panel.test.tsx

diff --git a/__tests__/Page.test.tsx b/__tests__/Page.test.tsx
new file mode 100644
index 0000000..7831ba3
--- /dev/null
+++ b/__tests__/Page.test.tsx
@@ -0,0 +1,37 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Page from '@/components/Page';
+
+describe('Page test', () => {
+    it('should render page', () => {
+        const container = shallow(
+            <Page>
+                Hello world
+            </Page>
+        );
+
+        expect(container.find('.page').length).toBe(1);
+    });
+
+    it('should render page content', () => {
+        const container = shallow(
+            <Page.Content>
+                Hello world
+            </Page.Content>
+        );
+
+        expect(container.find('.page-content').length).toBe(1);
+    });
+
+    it('should render page header', () => {
+        const container = shallow(
+            <Page.Header title="Test">
+                Hello world
+            </Page.Header>
+        );
+
+        expect(container.find('.page-header').length).toBe(1);
+        expect(container.find('.page-header > .page-header-title').length).toBe(1);
+        expect(container.find('.page-header > .page-header-title').text()).toContain('Test')
+    });
+});
diff --git a/__tests__/Panel.test.tsx b/__tests__/Panel.test.tsx
new file mode 100644
index 0000000..ac18d47
--- /dev/null
+++ b/__tests__/Panel.test.tsx
@@ -0,0 +1,25 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Panel from '@/components/Panel';
+
+describe('Page test', () => {
+    it('should render panel', () => {
+        const container = shallow(
+            <Panel>
+                Hello world
+            </Panel>
+        );
+
+        expect(container.find('.panel').length).toBe(1);
+    });
+
+    it('should render spaced panel', () => {
+        const container = shallow(
+            <Panel spaced>
+                Hello world
+            </Panel>
+        );
+
+        expect(container.find('.panel.panel-spaced').length).toBe(1);
+    });
+});
diff --git a/src/components/Page/Header.tsx b/src/components/Page/Header.tsx
index b032ef4..ccadb8c 100644
--- a/src/components/Page/Header.tsx
+++ b/src/components/Page/Header.tsx
@@ -24,7 +24,7 @@ const PageHeader = ({
                     'page-header-title'
                 )}
             >
-                <h1>{title}</h1>
+                {title}
             </div>
         )}
         {children}
diff --git a/src/style/components/_page.scss b/src/style/components/_page.scss
index 8e16613..7464431 100644
--- a/src/style/components/_page.scss
+++ b/src/style/components/_page.scss
@@ -1,3 +1,5 @@
+@use "../base/mixins";
+
 .page {
     background: var(--page-background-color);
 
@@ -12,6 +14,10 @@
         }
 
         .page-header-title {
+            font-size: 2rem;
+            color: mixins.color('gray', 900);
+            font-weight: normal;
+            margin: 0;
             padding-bottom: var(--page-gutter);
         }
     }