Merge pull request zoltantothcom#30 from zoltantothcom/dev

Intro screen

Author: zoltantothcom

__tests__/Layout.test.js

@@ -44,6 +44,7 @@ describe('Layout', () => {
         remaining: [patterns[1]],
         current: patterns[0]
       },
+      intro: false,
       mode: 'light',
       js: 'es5'
     });
@@ -86,6 +87,7 @@ describe('Layout', () => {
         remaining: [patterns[1]],
         current: patterns[0]
       },
+      intro: false,
       mode: 'dark',
       js: 'es5'
     });

__tests__/actions/actions.test.js

@@ -1,3 +1,4 @@
+import { start } from '../../src/actions/start';
 import { restart } from '../../src/actions/restart';
 import { submitAnswer } from '../../src/actions/submitAnswer';
 import { toggle, toggleJS, toggleMode } from '../../src/actions/toggle';
@@ -6,10 +7,17 @@ import {
   TOGGLE,
   TOGGLE_JS,
   TOGGLE_MODE,
+  START,
   RESTART
 } from '../../src/static/constants/actions';
 
 describe('Action Creators', () => {
+  it('should dispatch START action', () => {
+    expect(start('start')).toEqual({
+      type: START,
+      payload: 'start'
+    });
+  });
   it('should dispatch RESTART action', () => {
     expect(restart('restart')).toEqual({
       type: RESTART,

__tests__/pages/Game.test.js

@@ -9,7 +9,7 @@ import { themeDark } from '../../src/styles/themes/theme.dark';
 import styleLight from '../../src/styles/hljs/hljs.light';
 import styleDark from '../../src/styles/hljs/hljs.dark';
 import Game from '../../src/pages/Game';
-import { RESTART } from '../../src/static/constants/actions';
+import { START, RESTART } from '../../src/static/constants/actions';
 
 const patterns = [
   {
@@ -43,6 +43,7 @@ const store = mockStore({
     remaining: [patterns[1]],
     current: patterns[0]
   },
+  intro: false,
   mode: 'light',
   js: 'es5'
 });
@@ -115,6 +116,41 @@ describe('Game page - GAME - DARK style', () => {
   });
 });
 
+describe('Game page - INTRO', () => {
+  let tree;
+  const store = mockStore({
+    patterns: patterns,
+    progress: {
+      answers: patterns,
+      remaining: [],
+      current: null
+    },
+    intro: true,
+    mode: 'light',
+    js: 'es5'
+  });
+
+  beforeEach(() => {
+    tree = mount(
+      <Provider store={store}>
+        <ThemeProvider theme={themeLight}>
+          <Game style={styleLight} />
+        </ThemeProvider>
+      </Provider>
+    );
+  });
+
+  it('renders a <Button /> component', () => {
+    expect(tree.find('Button')).toMatchSnapshot();
+  });
+
+  it('reacts to button click', () => {
+    tree.find('button').simulate('click');
+    const actions = store.getActions();
+    expect(actions).toMatchObject([{ type: START }]);
+  });
+});
+
 describe('Game page - RESULTS', () => {
   let tree;
   const patterns = [
@@ -147,6 +183,7 @@ describe('Game page - RESULTS', () => {
       remaining: [],
       current: null
     },
+    intro: false,
     mode: 'light',
     js: 'es5'
   });

__tests__/pages/__snapshots__/About.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`About page renders with a DARK theme 1`] = `
 .c0 {
-  color: #F5F5F5;
+  color: #C8C8C8;
 }
 
 .c0 a {
@@ -71,7 +71,7 @@ exports[`About page renders with a DARK theme 1`] = `
 
 exports[`About page renders with a LIGHT theme 1`] = `
 .c0 {
-  color: #0A000A;
+  color: #6F256F;
 }
 
 .c0 a {

__tests__/pages/__snapshots__/Game.test.js.snap

@@ -858,6 +858,119 @@ exports[`Game page - GAME - LIGHT style renders a <ProgressBar /> component 1`]
 </ProgressBar>
 `;
 
+exports[`Game page - INTRO renders a <Button /> component 1`] = `
+.c0 {
+  background-color: #F2E8F2;
+  border: 1px solid #EDB8ED;
+  border-radius: 4px;
+  cursor: pointer;
+  font: 400 1rem 'Karla','sans-serif';
+  height: 48px;
+  max-width: 240px;
+  outline: none;
+  padding: 0 1.5rem;
+  width: 37.5%;
+}
+
+.c0 span {
+  color: #6F256F;
+}
+
+.c0:hover {
+  background-color: #6F256F;
+  border-color: #6F256F;
+}
+
+.c0:hover span {
+  color: #FFFFFF;
+}
+
+<Button
+  id="start"
+  label="Start Game"
+  onClick={[Function]}
+>
+  <styled.button
+    id="start"
+    onClick={[Function]}
+  >
+    <StyledComponent
+      forwardedComponent={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "lastClassName": "c0",
+            "rules": Array [
+              "
+  background-color: ",
+              [Function],
+              ";
+  border: 1px solid ",
+              [Function],
+              ";
+  border-radius: 4px;
+  cursor: pointer;
+  font: 400 1rem 'Karla', 'sans-serif';
+  height: 48px;
+  max-width: 240px;
+  outline: none;
+  padding: 0 1.5rem;
+  width: 37.5%;
+
+  & span {
+    color: ",
+              [Function],
+              ";
+  }
+
+  &:hover {
+    background-color: ",
+              [Function],
+              ";
+    border-color: ",
+              [Function],
+              ";
+
+    & span {
+      color: ",
+              [Function],
+              ";
+    }
+  }
+",
+            ],
+          },
+          "displayName": "styled.button",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": "button",
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      forwardedRef={null}
+      id="start"
+      onClick={[Function]}
+    >
+      <button
+        className="c0"
+        id="start"
+        onClick={[Function]}
+      >
+        <span>
+          Start Game
+        </span>
+      </button>
+    </StyledComponent>
+  </styled.button>
+</Button>
+`;
+
 exports[`Game page - RESULTS renders a <Percentage /> component 1`] = `
 .c0 {
   border: 4px solid red;
@@ -958,7 +1071,7 @@ exports[`Game page - RESULTS renders a <Restart /> component 1`] = `null`;
 
 exports[`Game page - RESULTS renders a <Result /> component 1`] = `
 .c0 {
-  color: #0A000A;
+  color: #6F256F;
   margin: 3rem 0;
   text-align: center;
 }

__tests__/reducers/reducers.test.js

@@ -4,6 +4,7 @@ import {
   TOGGLE,
   TOGGLE_JS,
   TOGGLE_MODE,
+  START,
   RESTART
 } from '../../src/static/constants/actions';
 
@@ -38,6 +39,7 @@ const initialState = {
   js: 'es5',
   mode: 'dark',
   patterns: answers,
+  intro: true,
   progress: {
     answers: [],
     remaining: answers,
@@ -85,6 +87,17 @@ describe('Reducers', () => {
     });
   });
 
+  it('should toggle INTRO', () => {
+    const action = {
+      type: START
+    };
+
+    expect(reducer(initialState, action)).toEqual({
+      ...initialState,
+      intro: false
+    });
+  });
+
   it('should handle SUBMIT', () => {
     const action = {
       type: SUBMIT,

__tests__/selectors/selectors.test.js

@@ -4,7 +4,8 @@ import {
   getMode,
   getJS,
   getCurrent,
-  getAnswers
+  getAnswers,
+  getIntro
 } from '../../src/selectors';
 
 describe('Selectors', () => {
@@ -14,6 +15,7 @@ describe('Selectors', () => {
     state = {
       mode: 'dark',
       js: 'es6',
+      intro: true,
       patterns: [0, 1, 2, 3, 4, 5, 6],
       progress: {
         answers: [0, 1, 2],
@@ -46,4 +48,8 @@ describe('Selectors', () => {
   it('should get the JS version', () => {
     expect(getJS(state)).toBe('es6');
   });
+
+  it('should get the intro value', () => {
+    expect(getIntro(state)).toBe(true);
+  });
 });

src/actions/start.js

@@ -0,0 +1,6 @@
+import { START } from '../static/constants/actions';
+
+export const start = payload => ({
+  type: START,
+  payload
+});