Merge pull request #24 from zoltantothcom/dev

 Refactor themes to use color constants

Author: zoltantothcom

README.md

@@ -11,7 +11,6 @@ JavaScript Design Patterns - a game to get familiar with the design patterns, te
 - [About](#about)
 - [How To Run Locally](#how-to-run-locally)
 - [Running the Tests](#running-the-tests)
-- [ToDo](#todo)
 - [Credits](#credits)
 - [License](#license)
 
@@ -93,12 +92,6 @@ yarn test
 yarn test:coverage
 ```
 
-## ToDo
-
-- Write more unit tests
-- Add E2E tests (Cypress)
-- Add a «_Reference_» section where the patterns can be viewed
-
 ## Credits
 
 - Inpired by the very well-known [JavaScript Guessing Game](https://javascript-game.firebaseapp.com/)

__tests__/actions/actions.test.js

@@ -1,39 +1,46 @@
 import { restart } from '../../src/actions/restart';
 import { submitAnswer } from '../../src/actions/submitAnswer';
 import { toggle, toggleJS, toggleMode } from '../../src/actions/toggle';
+import {
+  SUBMIT,
+  TOGGLE,
+  TOGGLE_JS,
+  TOGGLE_MODE,
+  RESTART
+} from '../../src/static/constants/actions';
 
 describe('Action Creators', () => {
   it('should dispatch RESTART action', () => {
     expect(restart('restart')).toEqual({
-      type: 'RESTART',
+      type: RESTART,
       payload: 'restart'
     });
   });
 
   it('should dispatch SUBMIT action', () => {
     expect(submitAnswer('submit')).toEqual({
-      type: 'SUBMIT',
+      type: SUBMIT,
       payload: 'submit'
     });
   });
 
   it('should dispatch TOGGLE action', () => {
     expect(toggle('toggle')).toEqual({
-      type: 'TOGGLE',
+      type: TOGGLE,
       payload: 'toggle'
     });
   });
 
   it('should dispatch TOGGLE_JS action', () => {
     expect(toggleJS('toggle js')).toEqual({
-      type: 'TOGGLE_JS',
+      type: TOGGLE_JS,
       payload: 'toggle js'
     });
   });
 
   it('should dispatch TOGGLE_MODE action', () => {
     expect(toggleMode('toggle mode')).toEqual({
-      type: 'TOGGLE_MODE',
+      type: TOGGLE_MODE,
       payload: 'toggle mode'
     });
   });

__tests__/components/ButtonContainer.test.js

@@ -8,6 +8,7 @@ import ButtonContainer, {
   ButtonContainer as NotConnectedButtonContainer
 } from '../../src/components/ButtonContainer';
 import { answers } from '../../src/store';
+import { SUBMIT } from '../../src/static/constants/actions';
 
 describe('<ButtonContainer /> connected', () => {
   const mockStore = configureMockStore();
@@ -33,7 +34,7 @@ describe('<ButtonContainer /> connected', () => {
       .simulate('click');
 
     const actions = store.getActions();
-    expect(actions).toMatchObject([{ type: 'SUBMIT' }]);
+    expect(actions).toMatchObject([{ type: SUBMIT }]);
   });
 });
 

__tests__/components/Toggle.test.js

@@ -8,6 +8,7 @@ import { themeLight } from '../../src/styles/themes/theme.light';
 import { themeDark } from '../../src/styles/themes/theme.dark';
 import 'jest-styled-components';
 import Toggle from '../../src/components/Toggle';
+import { TOGGLE } from '../../src/static/constants/actions';
 
 const mockClick = jest.fn();
 const mockStore = configureMockStore();
@@ -90,7 +91,7 @@ describe('<Toggle> actions', () => {
     toggle.find('button').simulate('click');
 
     const actions = store.getActions();
-    expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'mode' }]);
+    expect(actions).toMatchObject([{ type: TOGGLE, payload: 'mode' }]);
   });
 
   it('toggles MODE to DARK', () => {
@@ -111,7 +112,7 @@ describe('<Toggle> actions', () => {
     toggle.find('button').simulate('click');
 
     const actions = store.getActions();
-    expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'mode' }]);
+    expect(actions).toMatchObject([{ type: TOGGLE, payload: 'mode' }]);
   });
 
   it('toggles JS to ES6', () => {
@@ -132,7 +133,7 @@ describe('<Toggle> actions', () => {
     toggle.find('button').simulate('click');
 
     const actions = store.getActions();
-    expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'js' }]);
+    expect(actions).toMatchObject([{ type: TOGGLE, payload: 'js' }]);
   });
 
   it('toggles JS to ES5', () => {
@@ -153,6 +154,6 @@ describe('<Toggle> actions', () => {
     toggle.find('button').simulate('click');
 
     const actions = store.getActions();
-    expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'js' }]);
+    expect(actions).toMatchObject([{ type: TOGGLE, payload: 'js' }]);
   });
 });

__tests__/components/__snapshots__/Button.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Button /> component renders with a DARK theme 1`] = `
 .c0 {
   background-color: #484848;
-  border: 1px solid #707070;
+  border: 1px solid #484848;
   border-radius: 4px;
   cursor: pointer;
   font: 400 1rem 'Karla','sans-serif';
@@ -15,16 +15,16 @@ exports[`<Button /> component renders with a DARK theme 1`] = `
 }
 
 .c0 span {
-  color: #f5f5f5;
+  color: #F5F5F5;
 }
 
 .c0:hover {
   background-color: #888888;
-  border-color: #c4c4c4;
+  border-color: #888888;
 }
 
 .c0:hover span {
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 <button
@@ -40,8 +40,8 @@ exports[`<Button /> component renders with a DARK theme 1`] = `
 
 exports[`<Button /> component renders with a LIGHT theme 1`] = `
 .c0 {
-  background-color: #e8e8e8;
-  border: 1px solid #cccccc;
+  background-color: #F2E8F2;
+  border: 1px solid #EDB8ED;
   border-radius: 4px;
   cursor: pointer;
   font: 400 1rem 'Karla','sans-serif';
@@ -53,16 +53,16 @@ exports[`<Button /> component renders with a LIGHT theme 1`] = `
 }
 
 .c0 span {
-  color: #707070;
+  color: #6F256F;
 }
 
 .c0:hover {
-  background-color: #e22a23;
-  border-color: #aaaaaa;
+  background-color: #6F256F;
+  border-color: #6F256F;
 }
 
 .c0:hover span {
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 <button