Skip to content

Commit 1c08fc4

Browse files
zoltantothcomzoltantothcom
authored
Merge pull request zoltantothcom#37 from zoltantothcom/dev
Add Cypress
2 parents a586cf8 + 96a617a commit 1c08fc4

File tree

9 files changed

+579
-26
lines changed

9 files changed

+579
-26
lines changed

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
# testing
77
/coverage
88

9+
/cypress/videos
10+
/cypress/fixtures
11+
/cypress/plugins
12+
/cypress/support
13+
/cypress/integration/examples
14+
915
# production
1016
/build
1117

‎.travis.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ script:
1010
- yarn build
1111
- yarn test
1212
- yarn test:coverage
13+
- yarn start:ci
14+
- yarn cypress:run
1315

1416
after_success:
1517
- cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
168168
>
169169
<button
170170
className="c5"
171+
data-cy="js"
171172
onClick={[Function]}
172173
>
173174
<svg
@@ -194,6 +195,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
194195
</button>
195196
<button
196197
className="c5"
198+
data-cy="mode"
197199
onClick={[Function]}
198200
>
199201
<svg
@@ -399,6 +401,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
399401
>
400402
<button
401403
className="c5"
404+
data-cy="js"
402405
onClick={[Function]}
403406
>
404407
<svg
@@ -425,6 +428,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
425428
</button>
426429
<button
427430
className="c5"
431+
data-cy="mode"
428432
onClick={[Function]}
429433
>
430434
<svg

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ exports[`<Toggle /> renders JS toggle in DARK more 1`] = `
3939
<div>
4040
<button
4141
className="c0"
42+
data-cy="js"
4243
onClick={[Function]}
4344
>
4445
<svg
@@ -105,6 +106,7 @@ exports[`<Toggle /> renders JS toggle in LIGHT more 1`] = `
105106
<div>
106107
<button
107108
className="c0"
109+
data-cy="js"
108110
onClick={[Function]}
109111
>
110112
<svg
@@ -171,6 +173,7 @@ exports[`<Toggle /> renders the MODE toggle in DARK mode 1`] = `
171173
<div>
172174
<button
173175
className="c0"
176+
data-cy="mode"
174177
onClick={[Function]}
175178
>
176179
<svg
@@ -231,6 +234,7 @@ exports[`<Toggle /> renders the MODE toggle in LIGHT mode 1`] = `
231234
<div>
232235
<button
233236
className="c0"
237+
data-cy="mode"
234238
onClick={[Function]}
235239
>
236240
<svg

‎cypress.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"projectId": "design-patterns-javascript"
3+
}

‎cypress/integration/about.spec.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/* globals context, cy */
2+
context('About', () => {
3+
beforeEach(() => {
4+
cy.visit('http://localhost:8080/about');
5+
});
6+
7+
describe('Header', () => {
8+
it('should have 2 navigation links', () => {
9+
cy.get('header a').should('have.length', 2);
10+
});
11+
12+
it('should have _Game_ link', () => {
13+
cy.get('header a')
14+
.first()
15+
.should('have.text', 'Game')
16+
.should('have.attr', 'href')
17+
.and('include', '/');
18+
});
19+
20+
it('should have _Pattern Reference_ link', () => {
21+
cy.get('header a:last')
22+
.first()
23+
.should('have.text', 'Pattern Reference')
24+
.should('have.attr', 'href')
25+
.and('include', '/patterns');
26+
});
27+
28+
it('should have the current page title in a span', () => {
29+
cy.get('header span')
30+
.should('exist')
31+
.should('have.text', 'About');
32+
});
33+
34+
it('should have the MODE switch', () => {
35+
cy.get('header button[data-cy=mode]').should('exist');
36+
cy.get('header button[data-cy=mode]').should('be.visible');
37+
});
38+
39+
it('should NOT have the JS switch', () => {
40+
cy.get('header button[data-cy=js]').should('not.exist');
41+
});
42+
});
43+
44+
describe('Content', () => {
45+
it('should have 2 section headers', () => {
46+
cy.get('h3').should('have.length', 2);
47+
48+
cy.get('h3:first').should('have.text', 'The Game');
49+
cy.get('h3:last').should('have.text', 'References');
50+
});
51+
});
52+
53+
describe('Behavior', () => {
54+
it('should switch the mode', () => {
55+
cy.get('body').should('have.css', 'background-color', 'rgb(34, 34, 34)');
56+
cy.get('header button[data-cy=mode]').click();
57+
cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)');
58+
});
59+
});
60+
});

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,15 @@
1515
},
1616
"scripts": {
1717
"start": "webpack-dev-server --mode development",
18+
"start:ci": "npm start & wait-on http://localhost:8080",
1819
"format": "prettier --write \"src/**/*.js\"",
1920
"stats": "webpack-bundle-analyzer stats/stats.json",
2021
"build": "webpack --mode production",
2122
"test": "jest",
2223
"test:watch": "jest --watch",
2324
"test:coverage": "jest --coverage",
25+
"cypress:open": "cypress open",
26+
"cypress:run": "cypress run",
2427
"storybook": "start-storybook -p 6006",
2528
"storybook:build": "build-storybook"
2629
},
@@ -34,7 +37,8 @@
3437
],
3538
"testPathIgnorePatterns": [
3639
"<rootDir>/__tests__/config/",
37-
"<rootDir>/__tests__/helpers/"
40+
"<rootDir>/__tests__/helpers/",
41+
"<rootDir>/cypress/"
3842
]
3943
},
4044
"devDependencies": {
@@ -55,6 +59,7 @@
5559
"babel-preset-env": "^1.7.0",
5660
"babel-preset-react": "^6.24.1",
5761
"coveralls": "^3.0.3",
62+
"cypress": "^3.2.0",
5863
"enzyme": "^3.8.0",
5964
"enzyme-adapter-react-16": "^1.8.0",
6065
"enzyme-to-json": "^3.3.5",
@@ -70,6 +75,7 @@
7075
"redux-mock-store": "^1.5.3",
7176
"storybook-addon-styled-component-theme": "^1.1.1",
7277
"surge": "^0.20.1",
78+
"wait-on": "^3.2.0",
7379
"webpack": "^4.29.0",
7480
"webpack-bundle-analyzer": "^3.0.3",
7581
"webpack-cli": "^3.2.1",

‎src/components/Toggle.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const Toggle = props => {
4949
if (control === 'mode' && mode === 'light') isActive = 'active';
5050

5151
return (
52-
<StyledToggle onClick={() => onToggle(control)} className={isActive}>
52+
<StyledToggle onClick={() => onToggle(control)} className={isActive} data-cy={control}>
5353
<SVG control={control} />
5454
</StyledToggle>
5555
);

0 commit comments

Comments
 (0)