Skip to content

Commit 7109c7c

Browse files
zoltantothcomzoltantothcom
committed
Merge latest changes into feature/patterns
2 parents 500a6cd + 3d9f1d8 commit 7109c7c

53 files changed

Lines changed: 2051 additions & 1333 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@ after_success:
2020
deploy:
2121
provider: surge
2222
project: ./build
23-
domain: https://javascript-design-patterns.surge.sh
23+
domain: https://design-patterns-javascript.surge.sh
2424
skip_cleanup: true

‎README.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1-
# JavaScript Design Patterns
1+
# Design Patterns _(implemented in JavaScript)_
22

3-
[![Build Status](https://travis-ci.org/zoltantothcom/JavaScript-Design-Patterns.svg?branch=master)](https://travis-ci.org/zoltantothcom/JavaScript-Design-Patterns) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/JavaScript-Design-Patterns/badge.svg)](https://coveralls.io/github/zoltantothcom/JavaScript-Design-Patterns)
3+
[![Build Status](https://travis-ci.org/zoltantothcom/Design-Patterns-JavaScript.svg?branch=master)](https://travis-ci.org/zoltantothcom/Design-Patterns-JavaScript) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/Design-Patterns-JavaScript/badge.svg?branch=master)](https://coveralls.io/github/zoltantothcom/Design-Patterns-JavaScript?branch=master) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/5f4e97b771504e23b0b414d2cbc69506)](https://www.codacy.com/app/zoltantothcom/Design-Patterns-JavaScript) [![Greenkeeper badge](https://badges.greenkeeper.io/zoltantothcom/Design-Patterns-JavaScript.svg)](https://greenkeeper.io/)
44

5-
JavaScript Design Patterns - a game to get familiar with the design patterns, test your knowledge or simply for fun.
5+
Design Patterns - a game to get familiar with the design patterns implemented in JavaScript, test your knowledge or simply for fun.
66

7-
### :zap: [PLAY HERE](http://javascript-design-patterns.surge.sh/)
7+
### :zap: [PLAY HERE](https://design-patterns-javascript.surge.sh/)
88

9-
<img src="https://raw.githubusercontent.com/zoltantothcom/JavaScript-Design-Patterns/master/static/screenshot.png?sanitize=true&raw=true" alt="JavaScript Design Patterns - game results screenshot" />
9+
[<img src="https://raw.githubusercontent.com/zoltantothcom/Design-Patterns-JavaScript/master/static/screenshot.png?sanitize=true&raw=true" alt="Design Patterns - game results screenshot" />](https://design-patterns-javascript.surge.sh/)
10+
11+
- [About](#about)
12+
- [How To Run Locally](#how-to-run-locally)
13+
- [Running the Tests](#running-the-tests)
14+
- [Inspiration and Credits](#inspiration-and-credits)
15+
- [License](#license)
1016

1117
## About
1218

@@ -44,18 +50,18 @@ This is a small game to get you familiar with all the 23 Gang of Four design pat
4450
- Template
4551
- Visitor
4652

47-
## Run it locally
53+
## How To Run Locally
4854

4955
1. Clone this repo
5056

5157
```
52-
git clone git@github.com:zoltantothcom/JavaScript-Design-Patterns.git
58+
git clone git@github.com:zoltantothcom/Design-Patterns-JavaScript.git
5359
```
5460

5561
2. Switch to project folder
5662

5763
```
58-
cd JavaScript-Design-Patterns
64+
cd Design-Patterns-JavaScript
5965
```
6066

6167
3. Install all the dependencies
@@ -70,9 +76,9 @@ yarn
7076
yarn start
7177
```
7278

73-
5. Voila! The project is running on `http://localhost:8080`
79+
5. Voila! The project is running on [http://localhost:8080](http://localhost:8080)
7480

75-
## Tests
81+
## Running the Tests
7682

7783
- To run the tests
7884

@@ -86,13 +92,7 @@ yarn test
8692
yarn test:coverage
8793
```
8894

89-
## TODO
90-
91-
- Write more unit tests
92-
- Add E2E tests (Cypress)
93-
- Add a &laquo;_Reference_&raquo; section where the patterns can be viewed
94-
95-
## Credits
95+
## Inspiration and Credits
9696

9797
- Inpired by the very well-known [JavaScript Guessing Game](https://javascript-game.firebaseapp.com/)
9898

‎__tests__/Layout.test.js‎

Lines changed: 16 additions & 6 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
});
@@ -61,11 +62,15 @@ describe('Layout', () => {
6162
});
6263

6364
it('has the correct title', () => {
64-
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
65+
expect(tree.find('header h1').text()).toMatch('Design Patterns');
6566
});
6667

67-
it('renders 3 links', () => {
68-
expect(tree.find('a')).toHaveLength(3);
68+
it('renders 1 link', () => {
69+
expect(tree.find('header a')).toHaveLength(1);
70+
});
71+
72+
it('renders 1 span', () => {
73+
expect(tree.find('header span')).toHaveLength(1);
6974
});
7075

7176
it('renders 2 toggle buttons', () => {
@@ -82,6 +87,7 @@ describe('Layout', () => {
8287
remaining: [patterns[1]],
8388
current: patterns[0]
8489
},
90+
intro: false,
8591
mode: 'dark',
8692
js: 'es5'
8793
});
@@ -99,11 +105,15 @@ describe('Layout', () => {
99105
});
100106

101107
it('has the correct title', () => {
102-
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
108+
expect(tree.find('header h1').text()).toMatch('Design Patterns');
109+
});
110+
111+
it('renders 1 link', () => {
112+
expect(tree.find('header a')).toHaveLength(1);
103113
});
104114

105-
it('renders 3 links', () => {
106-
expect(tree.find('a')).toHaveLength(3);
115+
it('renders 1 span', () => {
116+
expect(tree.find('header span')).toHaveLength(1);
107117
});
108118

109119
it('renders 2 toggle buttons', () => {

‎__tests__/actions/actions.test.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,54 @@
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';
5+
import {
6+
SUBMIT,
7+
TOGGLE,
8+
TOGGLE_JS,
9+
TOGGLE_MODE,
10+
START,
11+
RESTART
12+
} from '../../src/static/constants/actions';
413

514
describe('Action Creators', () => {
15+
it('should dispatch START action', () => {
16+
expect(start('start')).toEqual({
17+
type: START,
18+
payload: 'start'
19+
});
20+
});
621
it('should dispatch RESTART action', () => {
722
expect(restart('restart')).toEqual({
8-
type: 'RESTART',
23+
type: RESTART,
924
payload: 'restart'
1025
});
1126
});
1227

1328
it('should dispatch SUBMIT action', () => {
1429
expect(submitAnswer('submit')).toEqual({
15-
type: 'SUBMIT',
30+
type: SUBMIT,
1631
payload: 'submit'
1732
});
1833
});
1934

2035
it('should dispatch TOGGLE action', () => {
2136
expect(toggle('toggle')).toEqual({
22-
type: 'TOGGLE',
37+
type: TOGGLE,
2338
payload: 'toggle'
2439
});
2540
});
2641

2742
it('should dispatch TOGGLE_JS action', () => {
2843
expect(toggleJS('toggle js')).toEqual({
29-
type: 'TOGGLE_JS',
44+
type: TOGGLE_JS,
3045
payload: 'toggle js'
3146
});
3247
});
3348

3449
it('should dispatch TOGGLE_MODE action', () => {
3550
expect(toggleMode('toggle mode')).toEqual({
36-
type: 'TOGGLE_MODE',
51+
type: TOGGLE_MODE,
3752
payload: 'toggle mode'
3853
});
3954
});

‎__tests__/components/ButtonContainer.test.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ButtonContainer, {
88
ButtonContainer as NotConnectedButtonContainer
99
} from '../../src/components/ButtonContainer';
1010
import { answers } from '../../src/store';
11+
import { SUBMIT } from '../../src/static/constants/actions';
1112

1213
describe('<ButtonContainer /> connected', () => {
1314
const mockStore = configureMockStore();
@@ -33,7 +34,7 @@ describe('<ButtonContainer /> connected', () => {
3334
.simulate('click');
3435

3536
const actions = store.getActions();
36-
expect(actions).toMatchObject([{ type: 'SUBMIT' }]);
37+
expect(actions).toMatchObject([{ type: SUBMIT }]);
3738
});
3839
});
3940

‎__tests__/components/Toggle.test.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { themeLight } from '../../src/styles/themes/theme.light';
88
import { themeDark } from '../../src/styles/themes/theme.dark';
99
import 'jest-styled-components';
1010
import Toggle from '../../src/components/Toggle';
11+
import { TOGGLE } from '../../src/static/constants/actions';
1112

1213
const mockClick = jest.fn();
1314
const mockStore = configureMockStore();
@@ -90,7 +91,7 @@ describe('<Toggle> actions', () => {
9091
toggle.find('button').simulate('click');
9192

9293
const actions = store.getActions();
93-
expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'mode' }]);
94+
expect(actions).toMatchObject([{ type: TOGGLE, payload: 'mode' }]);
9495
});
9596

9697
it('toggles MODE to DARK', () => {
@@ -111,7 +112,7 @@ describe('<Toggle> actions', () => {
111112
toggle.find('button').simulate('click');
112113

113114
const actions = store.getActions();
114-
expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'mode' }]);
115+
expect(actions).toMatchObject([{ type: TOGGLE, payload: 'mode' }]);
115116
});
116117

117118
it('toggles JS to ES6', () => {
@@ -132,7 +133,7 @@ describe('<Toggle> actions', () => {
132133
toggle.find('button').simulate('click');
133134

134135
const actions = store.getActions();
135-
expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'js' }]);
136+
expect(actions).toMatchObject([{ type: TOGGLE, payload: 'js' }]);
136137
});
137138

138139
it('toggles JS to ES5', () => {
@@ -153,6 +154,6 @@ describe('<Toggle> actions', () => {
153154
toggle.find('button').simulate('click');
154155

155156
const actions = store.getActions();
156-
expect(actions).toMatchObject([{ type: 'TOGGLE', payload: 'js' }]);
157+
expect(actions).toMatchObject([{ type: TOGGLE, payload: 'js' }]);
157158
});
158159
});

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`<Button /> component renders with a DARK theme 1`] = `
44
.c0 {
55
background-color: #484848;
6-
border: 1px solid #707070;
6+
border: 1px solid #484848;
77
border-radius: 4px;
88
cursor: pointer;
99
font: 400 1rem 'Karla','sans-serif';
@@ -15,16 +15,16 @@ exports[`<Button /> component renders with a DARK theme 1`] = `
1515
}
1616
1717
.c0 span {
18-
color: #f5f5f5;
18+
color: #F5F5F5;
1919
}
2020
2121
.c0:hover {
2222
background-color: #888888;
23-
border-color: #c4c4c4;
23+
border-color: #888888;
2424
}
2525
2626
.c0:hover span {
27-
color: #ffffff;
27+
color: #FFFFFF;
2828
}
2929
3030
<button
@@ -40,8 +40,8 @@ exports[`<Button /> component renders with a DARK theme 1`] = `
4040

4141
exports[`<Button /> component renders with a LIGHT theme 1`] = `
4242
.c0 {
43-
background-color: #e8e8e8;
44-
border: 1px solid #cccccc;
43+
background-color: #F2E8F2;
44+
border: 1px solid #EDB8ED;
4545
border-radius: 4px;
4646
cursor: pointer;
4747
font: 400 1rem 'Karla','sans-serif';
@@ -53,16 +53,16 @@ exports[`<Button /> component renders with a LIGHT theme 1`] = `
5353
}
5454
5555
.c0 span {
56-
color: #707070;
56+
color: #6F256F;
5757
}
5858
5959
.c0:hover {
60-
background-color: #e22a23;
61-
border-color: #aaaaaa;
60+
background-color: #6F256F;
61+
border-color: #6F256F;
6262
}
6363
6464
.c0:hover span {
65-
color: #ffffff;
65+
color: #FFFFFF;
6666
}
6767
6868
<button

0 commit comments

Comments
 (0)