Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 48658c8

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

File tree

17 files changed

+248
-46
lines changed

17 files changed

+248
-46
lines changed

‎__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)

AltStyle によって変換されたページ (->オリジナル) /