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 1c08fc4

Browse files
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)

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