Merge pull request #7 from machielsdev/feature/page-tests

Added page and panel tests

Author: EranNL

__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')
+    });
+});

__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);
+    });
+});

src/components/Page/Header.tsx

@@ -24,7 +24,7 @@ const PageHeader = ({
                     'page-header-title'
                 )}
             >
-                <h1>{title}</h1>
+                {title}
             </div>
         )}
         {children}

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);
         }
     }