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(
+
+ Hello world
+
+ );
+
+ expect(container.find('.page').length).toBe(1);
+ });
+
+ it('should render page content', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ expect(container.find('.page-content').length).toBe(1);
+ });
+
+ it('should render page header', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ 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(
+
+ Hello world
+
+ );
+
+ expect(container.find('.panel').length).toBe(1);
+ });
+
+ it('should render spaced panel', () => {
+ const container = shallow(
+
+ Hello world
+
+ );
+
+ 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'
)}
>
-
{title}
+ {title}
)}
{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);
}
}