Skip to content

Commit ce0043a

Browse files
nadvolodnadvolod
committed
fixing to latest linter and visual tests
1 parent 9263553 commit ce0043a

9 files changed

+454
-283
lines changed

‎.eslintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// parser not working w/ react
77
// "parser": "babel-eslint",
88
"parserOptions": {
9-
"ecmaVersion": 6,
9+
"ecmaVersion": "latest",
1010
"sourceType": "module",
1111
"ecmaFeatures": {
1212
"jsx": true,

‎docs/E2E-TESTS.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -168,9 +168,7 @@ Using component tests
168168

169169
✅ We can test that a url opens by checking that `target='_blank'`
170170

171-
## ⏭️Wouldn't it be great to have this tested automatically through CI?
172-
173-
[Let's setup up CI](./CICD.md)
171+
## ⏭️ [Let's continue to expand our coverage](VISUAL.md)
174172

175173
## 🧠Expand your knowledge
176174

‎docs/TEST-COVERAGE.md

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
## 🧪Our Testing Strategy
22

3-
| Expected Behavior | Tested? | Test Type | Technologies |
4-
| ------------------------------------------------------------------- | ------- | ----------------- | ------------ |
5-
| Application renders | 🙅‍♂️ | ui/e2e/functional | |
6-
| Link goes to correct location | 🙅‍♂️ | | |
7-
| Link opens in new tab | 🙅‍♂️ | | |
8-
| App looks as expected on Chrome + Safari on most popular resolution | 🙅‍♂️ | | |
9-
| App is accessibility friendly | 🙅‍♂️ | | |
10-
| Front-end performance is at least a B | 🙅‍♂️ | | |
11-
| App is secure | 🙅‍♂️ | | |
12-
| Multiple other testing types... | 🙅‍♂️ | | |
3+
| Expected Behavior | Tested? | Test Type | Technologies |
4+
| ---------------------------------------------------------- | ------- | ----------------- | ------------ |
5+
| Application renders | 🙅‍♂️ | ui/e2e/functional | |
6+
| Link goes to correct location | 🙅‍♂️ | | |
7+
| Link opens in new tab | 🙅‍♂️ | | |
8+
| App looks as expected on Chrome on most popular resolution | 🙅‍♂️ | | |
9+
| App looks as expected on Safari on most popular resolution | 🙅‍♂️ | | |
10+
| App is accessibility friendly | 🙅‍♂️ | | |
11+
| Front-end performance is at least a B | 🙅‍♂️ | | |
12+
| App is secure | 🙅‍♂️ | | |
13+
| Multiple other testing types... | 🙅‍♂️ | | |

‎docs/VISUAL.md

+20-23
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## 🧠You will learn
44

5-
✅What is visual E2E testing?
5+
✅What is visual E2E testing?
66

77
✅How to implement visual e2e testing for a web app
88

@@ -16,9 +16,7 @@
1616

1717
---
1818

19-
<img src="./../../../graphics/visual-testing.png" alt="visual-testing" width="500"/>
20-
21-
<img src="./../../../graphics/visual-workflow.jpeg" alt="visual-testing" width="500"/>
19+
[Let's take a look](visual-testing.pdf)
2220

2321
### Advantages of visual tests
2422

@@ -32,14 +30,14 @@
3230

3331
✅ Can help reduce the size of e2e suite
3432

35-
[Deeper discussion of visual testing](https://docs.google.com/presentation/d/13jYXXoKb36aFt1HLnNnAmsPqw9yaFhVrB4iFH_5_WkI/edit#slide=id.gcc181d5a54_0_284)
36-
3733
## Our tools
3834

3935
### [WebdriverIO](https://webdriver.io/)
36+
4037
Next-gen browser and mobile automation test framework for Node.js
4138

4239
### [Screener](https://screener.io/)
40+
4341
Automatically detect visual regressions across your UI
4442

4543
## Set up a visual test
@@ -50,22 +48,21 @@ follow along
5048
2. Paste the following code
5149

5250
```javascript
53-
5451
describe('My app', () => {
55-
it('should look correct', async () => {
56-
await browser.url('');
57-
await browser.execute('/*@visual.init*/', 'My React App');
58-
await browser.execute('/*@visual.snapshot*/', 'Home Page');
59-
60-
const result = await browser.execute('/*@visual.end*/');
61-
expect(result.message).toBeNull();
62-
});
52+
it('should look correct', async () => {
53+
await browser.url('');
54+
await browser.execute('/*@visual.init*/', 'My React App');
55+
await browser.execute('/*@visual.snapshot*/', 'Home Page');
56+
57+
const result = await browser.execute('/*@visual.end*/');
58+
expect(result.message).toBeNull();
59+
});
6360
});
64-
6561
```
62+
6663
3. `cd testing-for-charity/my-react-app`
6764
4. `npm run test:visual`
68-
5. View your results in Screener.io
65+
5. View your results in Screener.io
6966

7067
[Let's fill out the Test coverage](./TEST-COVERAGE.md)
7168

@@ -78,12 +75,12 @@ describe('My app', () => {
7875
We're going to update the React image to something better. What tests should break?
7976

8077
1. Drag n drop a new image to the `testing-for-charity/my-react-app/src`
81-
2. In `App.js`, Fix the path of the image to match your new image name `import logo from './mia.jpg';`
82-
2. Save all files
83-
3. Stop the React app `ctrl + C` in the server terminal
84-
4. Restart the app with `npm start`
85-
5. Rerun the visual tests with `npm run test:visual`
86-
6. Analyze the results in Screener dashboard
78+
2. In `App.js`, Fix the path of the image to match your new image name `import logo from './mia.jpg';`
79+
3. Save all files
80+
4. Stop the React app `ctrl + C` in the server terminal
81+
5. Restart the app with `npm start`
82+
6. Rerun the visual tests with `npm run test:visual`
83+
7. Analyze the results in Screener dashboard
8784

8885
## Add a step to CI
8986

‎docs/visual-testing.pdf

1.29 MB
Binary file not shown.

0 commit comments

Comments
 (0)