zoltantothcom · zoltantothcom · Mar 8, 2019 · Mar 1, 2019 · Mar 6, 2019 · Mar 7, 2019
diff --git a/__tests__/Layout.test.js b/__tests__/Layout.test.js
@@ -65,8 +65,8 @@ describe('Layout', () => {
       expect(tree.find('header h1').text()).toMatch('Design Patterns');
     });
 
-    it('renders 1 link', () => {
-      expect(tree.find('header a')).toHaveLength(1);
+    it('renders 2 links', () => {
+      expect(tree.find('header a')).toHaveLength(2);
     });
 
     it('renders 1 span', () => {
@@ -108,8 +108,8 @@ describe('Layout', () => {
       expect(tree.find('header h1').text()).toMatch('Design Patterns');
     });
 
-    it('renders 1 link', () => {
-      expect(tree.find('header a')).toHaveLength(1);
+    it('renders 2 links', () => {
+      expect(tree.find('header a')).toHaveLength(2);
     });
 
     it('renders 1 span', () => {

diff --git a/__tests__/components/Pattern.test.js b/__tests__/components/Pattern.test.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import 'jest-styled-components';
+import Pattern from '../../src/components/Pattern';
+
+const mockStore = configureMockStore();
+
+describe('REFERENCE - Pattern component', () => {
+  it('renders the individual pattern (Singleton) details in DARK mode', () => {
+    const store = mockStore({
+      mode: 'dark'
+    });
+    const tree = renderer
+      .create(
+        <MemoryRouter initialEntries={['/patterns/singleton']}>
+          <Provider store={store}>
+            <Pattern match={{ params: { id: 'singleton' } }} />
+          </Provider>
+        </MemoryRouter>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  xit('renders the individual pattern (Singleton) details in LIGHT mode', () => {
+    const store = mockStore({
+      mode: 'light'
+    });
+    const tree = renderer
+      .create(
+        <MemoryRouter initialEntries={['/patterns/singleton']}>
+          <Provider store={store}>
+            <Pattern match={{ params: { id: 'singleton' } }} />
+          </Provider>
+        </MemoryRouter>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/__tests__/components/PatternsList.test.js b/__tests__/components/PatternsList.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import 'jest-styled-components';
+import PatternsList from '../../src/components/PatternsList';
+
+describe('REFERENCE - Patterns List', () => {
+  it('renders all the patterns', () => {
+    const tree = renderer
+      .create(
+        <MemoryRouter>
+          <PatternsList />
+        </MemoryRouter>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/__tests__/components/__snapshots__/Code.test.js.snap b/__tests__/components/__snapshots__/Code.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`<Code /> component renders ES5 code in LIGHT mode 1`] = `
 <pre
+  className="fixed"
   style={
     Object {
       "background": "#fafafa",
       "border": "1px solid #d8d8d8",
       "color": "#383a42",
       "display": "block",
-      "height": 375,
       "overflowX": "auto",
       "padding": "1em",
     }
@@ -22,13 +22,13 @@ exports[`<Code /> component renders ES5 code in LIGHT mode 1`] = `
 
 exports[`<Code /> component renders ES6 code in DARK mode 1`] = `
 <pre
+  className="fixed"
   style={
     Object {
       "background": "#282828",
       "border": "1px solid #555",
       "color": "#ebdbb2",
       "display": "block",
-      "height": 375,
       "overflowX": "auto",
       "padding": "1em",
     }

diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap
@@ -147,6 +147,15 @@ exports[`<Header /> component renders with DARK theme 1`] = `
         Game
       </span>
       <a
+        aria-current={null}
+        className="c3"
+        href="/patterns"
+        onClick={[Function]}
+      >
+        Pattern Reference
+      </a>
+      <a
+        aria-current={null}
         className="c3"
         href="/about"
         onClick={[Function]}
@@ -369,6 +378,15 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
         Game
       </span>
       <a
+        aria-current={null}
+        className="c3"
+        href="/patterns"
+        onClick={[Function]}
+      >
+        Pattern Reference
+      </a>
+      <a
+        aria-current={null}
         className="c3"
         href="/about"
         onClick={[Function]}