Skip to content

Commit 48658c8

Browse files
zoltantothcomzoltantothcom
authored
Merge pull request zoltantothcom#30 from zoltantothcom/dev
Intro screen
2 parents 2a69e70 + 34b2f72 commit 48658c8

17 files changed

Lines changed: 248 additions & 46 deletions

File tree

‎__tests__/Layout.test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ describe('Layout', () => {
4444
remaining: [patterns[1]],
4545
current: patterns[0]
4646
},
47+
intro: false,
4748
mode: 'light',
4849
js: 'es5'
4950
});
@@ -86,6 +87,7 @@ describe('Layout', () => {
8687
remaining: [patterns[1]],
8788
current: patterns[0]
8889
},
90+
intro: false,
8991
mode: 'dark',
9092
js: 'es5'
9193
});

‎__tests__/actions/actions.test.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { start } from '../../src/actions/start';
12
import { restart } from '../../src/actions/restart';
23
import { submitAnswer } from '../../src/actions/submitAnswer';
34
import { toggle, toggleJS, toggleMode } from '../../src/actions/toggle';
@@ -6,10 +7,17 @@ import {
67
TOGGLE,
78
TOGGLE_JS,
89
TOGGLE_MODE,
10+
START,
911
RESTART
1012
} from '../../src/static/constants/actions';
1113

1214
describe('Action Creators', () => {
15+
it('should dispatch START action', () => {
16+
expect(start('start')).toEqual({
17+
type: START,
18+
payload: 'start'
19+
});
20+
});
1321
it('should dispatch RESTART action', () => {
1422
expect(restart('restart')).toEqual({
1523
type: RESTART,

‎__tests__/pages/Game.test.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { themeDark } from '../../src/styles/themes/theme.dark';
99
import styleLight from '../../src/styles/hljs/hljs.light';
1010
import styleDark from '../../src/styles/hljs/hljs.dark';
1111
import Game from '../../src/pages/Game';
12-
import { RESTART } from '../../src/static/constants/actions';
12+
import { START, RESTART } from '../../src/static/constants/actions';
1313

1414
const patterns = [
1515
{
@@ -43,6 +43,7 @@ const store = mockStore({
4343
remaining: [patterns[1]],
4444
current: patterns[0]
4545
},
46+
intro: false,
4647
mode: 'light',
4748
js: 'es5'
4849
});
@@ -115,6 +116,41 @@ describe('Game page - GAME - DARK style', () => {
115116
});
116117
});
117118

119+
describe('Game page - INTRO', () => {
120+
let tree;
121+
const store = mockStore({
122+
patterns: patterns,
123+
progress: {
124+
answers: patterns,
125+
remaining: [],
126+
current: null
127+
},
128+
intro: true,
129+
mode: 'light',
130+
js: 'es5'
131+
});
132+
133+
beforeEach(() => {
134+
tree = mount(
135+
<Provider store={store}>
136+
<ThemeProvider theme={themeLight}>
137+
<Game style={styleLight} />
138+
</ThemeProvider>
139+
</Provider>
140+
);
141+
});
142+
143+
it('renders a <Button /> component', () => {
144+
expect(tree.find('Button')).toMatchSnapshot();
145+
});
146+
147+
it('reacts to button click', () => {
148+
tree.find('button').simulate('click');
149+
const actions = store.getActions();
150+
expect(actions).toMatchObject([{ type: START }]);
151+
});
152+
});
153+
118154
describe('Game page - RESULTS', () => {
119155
let tree;
120156
const patterns = [
@@ -147,6 +183,7 @@ describe('Game page - RESULTS', () => {
147183
remaining: [],
148184
current: null
149185
},
186+
intro: false,
150187
mode: 'light',
151188
js: 'es5'
152189
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`About page renders with a DARK theme 1`] = `
44
.c0 {
5-
color: #F5F5F5;
5+
color: #C8C8C8;
66
}
77
88
.c0 a {
@@ -71,7 +71,7 @@ exports[`About page renders with a DARK theme 1`] = `
7171

7272
exports[`About page renders with a LIGHT theme 1`] = `
7373
.c0 {
74-
color: #0A000A;
74+
color: #6F256F;
7575
}
7676
7777
.c0 a {

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

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -858,6 +858,119 @@ exports[`Game page - GAME - LIGHT style renders a <ProgressBar /> component 1`]
858858
</ProgressBar>
859859
`;
860860

861+
exports[`Game page - INTRO renders a <Button /> component 1`] = `
862+
.c0 {
863+
background-color: #F2E8F2;
864+
border: 1px solid #EDB8ED;
865+
border-radius: 4px;
866+
cursor: pointer;
867+
font: 400 1rem 'Karla','sans-serif';
868+
height: 48px;
869+
max-width: 240px;
870+
outline: none;
871+
padding: 0 1.5rem;
872+
width: 37.5%;
873+
}
874+
875+
.c0 span {
876+
color: #6F256F;
877+
}
878+
879+
.c0:hover {
880+
background-color: #6F256F;
881+
border-color: #6F256F;
882+
}
883+
884+
.c0:hover span {
885+
color: #FFFFFF;
886+
}
887+
888+
<Button
889+
id="start"
890+
label="Start Game"
891+
onClick={[Function]}
892+
>
893+
<styled.button
894+
id="start"
895+
onClick={[Function]}
896+
>
897+
<StyledComponent
898+
forwardedComponent={
899+
Object {
900+
"$$typeof": Symbol(react.forward_ref),
901+
"attrs": Array [],
902+
"componentStyle": ComponentStyle {
903+
"componentId": "sc-bdVaJa",
904+
"isStatic": false,
905+
"lastClassName": "c0",
906+
"rules": Array [
907+
"
908+
background-color: ",
909+
[Function],
910+
";
911+
border: 1px solid ",
912+
[Function],
913+
";
914+
border-radius: 4px;
915+
cursor: pointer;
916+
font: 400 1rem 'Karla', 'sans-serif';
917+
height: 48px;
918+
max-width: 240px;
919+
outline: none;
920+
padding: 0 1.5rem;
921+
width: 37.5%;
922+
923+
& span {
924+
color: ",
925+
[Function],
926+
";
927+
}
928+
929+
&:hover {
930+
background-color: ",
931+
[Function],
932+
";
933+
border-color: ",
934+
[Function],
935+
";
936+
937+
& span {
938+
color: ",
939+
[Function],
940+
";
941+
}
942+
}
943+
",
944+
],
945+
},
946+
"displayName": "styled.button",
947+
"foldedComponentIds": Array [],
948+
"render": [Function],
949+
"styledComponentId": "sc-bdVaJa",
950+
"target": "button",
951+
"toString": [Function],
952+
"warnTooManyClasses": [Function],
953+
"withComponent": [Function],
954+
}
955+
}
956+
forwardedRef={null}
957+
id="start"
958+
onClick={[Function]}
959+
>
960+
<button
961+
className="c0"
962+
id="start"
963+
onClick={[Function]}
964+
>
965+
<span>
966+
Start Game
967+
</span>
968+
</button>
969+
</StyledComponent>
970+
</styled.button>
971+
</Button>
972+
`;
973+
861974
exports[`Game page - RESULTS renders a <Percentage /> component 1`] = `
862975
.c0 {
863976
border: 4px solid red;
@@ -958,7 +1071,7 @@ exports[`Game page - RESULTS renders a <Restart /> component 1`] = `null`;
9581071

9591072
exports[`Game page - RESULTS renders a <Result /> component 1`] = `
9601073
.c0 {
961-
color: #0A000A;
1074+
color: #6F256F;
9621075
margin: 3rem 0;
9631076
text-align: center;
9641077
}

‎__tests__/reducers/reducers.test.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
TOGGLE,
55
TOGGLE_JS,
66
TOGGLE_MODE,
7+
START,
78
RESTART
89
} from '../../src/static/constants/actions';
910

@@ -38,6 +39,7 @@ const initialState = {
3839
js: 'es5',
3940
mode: 'dark',
4041
patterns: answers,
42+
intro: true,
4143
progress: {
4244
answers: [],
4345
remaining: answers,
@@ -85,6 +87,17 @@ describe('Reducers', () => {
8587
});
8688
});
8789

90+
it('should toggle INTRO', () => {
91+
const action = {
92+
type: START
93+
};
94+
95+
expect(reducer(initialState, action)).toEqual({
96+
...initialState,
97+
intro: false
98+
});
99+
});
100+
88101
it('should handle SUBMIT', () => {
89102
const action = {
90103
type: SUBMIT,

‎__tests__/selectors/selectors.test.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
getMode,
55
getJS,
66
getCurrent,
7-
getAnswers
7+
getAnswers,
8+
getIntro
89
} from '../../src/selectors';
910

1011
describe('Selectors', () => {
@@ -14,6 +15,7 @@ describe('Selectors', () => {
1415
state = {
1516
mode: 'dark',
1617
js: 'es6',
18+
intro: true,
1719
patterns: [0, 1, 2, 3, 4, 5, 6],
1820
progress: {
1921
answers: [0, 1, 2],
@@ -46,4 +48,8 @@ describe('Selectors', () => {
4648
it('should get the JS version', () => {
4749
expect(getJS(state)).toBe('es6');
4850
});
51+
52+
it('should get the intro value', () => {
53+
expect(getIntro(state)).toBe(true);
54+
});
4955
});

‎src/actions/start.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { START } from '../static/constants/actions';
2+
3+
export const start = payload => ({
4+
type: START,
5+
payload
6+
});

‎src/hoc/withThemeProvider.jsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)