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 ccb1566

Browse files
Add Cypress - integration tests for About page
1 parent a586cf8 commit ccb1566

File tree

6 files changed

+507
-20
lines changed

6 files changed

+507
-20
lines changed

‎.gitignore‎

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

9+
/cypress/fixtures
10+
/cypress/plugins
11+
/cypress/support
12+
/cypress/integration/examples
13+
914
# production
1015
/build
1116

‎cypress.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎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:8081/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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"test": "jest",
2222
"test:watch": "jest --watch",
2323
"test:coverage": "jest --coverage",
24+
"cypress:open": "cypress open",
2425
"storybook": "start-storybook -p 6006",
2526
"storybook:build": "build-storybook"
2627
},
@@ -55,6 +56,7 @@
5556
"babel-preset-env": "^1.7.0",
5657
"babel-preset-react": "^6.24.1",
5758
"coveralls": "^3.0.3",
59+
"cypress": "^3.2.0",
5860
"enzyme": "^3.8.0",
5961
"enzyme-adapter-react-16": "^1.8.0",
6062
"enzyme-to-json": "^3.3.5",

‎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 によって変換されたページ (->オリジナル) /