Skip to content

Commit b501fc7

Browse files
dongsuwondongsuwon
committed
* Move ui/ss test docs into the contributing page.
Enact-DCO-1.0-Signed-off-by: Dongsu Won (dongsu.won@lgepartner.com) * add ui testing sample in docs. Enact-DCO-1.0-Signed-off-by: Dongsu Won (dongsu.won@lgepartner.com) * Fix typo. Enact-DCO-1.0-Signed-off-by: Dongsu Won (dongsu.won@lgepartner.com)
1 parent 444ef2f commit b501fc7

File tree

4 files changed

+77
-96
lines changed

4 files changed

+77
-96
lines changed

‎docs/contributing/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ project. Please read this section carefully if you are interested in contributin
5959
* Please squash pull requests down to a single commit to simplify review and keep history clean.
6060
* Ensure all new features have unit tests that pass and any bug fixes include tests that
6161
fail without the fix applied
62+
[UI Testing](./ui-testing.md) - How to use UI-Test in sandstone source.
63+
[Screenshot Testing](./screenshot-testing.md) - How to use Screenshot-Test in sandstone source.
64+
6265
* Help keep diffs easy to read by not making unnecessary rearrangements to the source code.
6366
* Make sure not to inadvertently change line ending types from Unix to Windows.
6467
* Ensure inline API documentation exists and is up-to-date (minimum: component summary and descriptions of all

‎docs/testing-components/screenshot-testing/index.md‎ renamed to ‎docs/contributing/screenshot-testing.md‎

Lines changed: 21 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,24 @@
11
---
22
title: Screenshot Testing
33
---
4-
<nav role="navigation" class="page-toc">
54

6-
- [Prerequisites](#prerequisites)
7-
- [Setting up a UI Library](#setting-up-a-ui-library)
8-
- [Creating tests](#creating-tests)
9-
- [Running Tests](#running-tests)
10-
- [Viewing Test Results](#viewing-test-results)
11-
- [Reference and Screen](#reference-and-screen)
12-
13-
</nav>
5+
## What is the Screenshot Testing
6+
Screenshot test is visual test that takes a screenshot, then compares it to a reference screenshot file saved. When ui changes, one of the major considerations is whether visual changes exist. Some changes may be easy to check, but some changes are hard to check due to very small change. With Screenshot test, very small changes can easily check due to compare pixel-by-pixel. Additionally, Screenshot testing is the most reliable test for static images.
147

158
## Prerequisites
16-
Created a enact project using the enact cli.
17-
18-
## Setting up a UI Library
19-
1. Add @enact/ui-test-utils as a devDependency: npm i --save-dev @enact/ui-test-utils.
20-
21-
2. Create the tests/screenshot folder structure within the UI library.
22-
23-
3. Add apps and specs folders to tests/screenshot.
24-
25-
4. Add local WebDriver configuration files within tests/screenshot:
26-
27-
- wdio.conf.js
28-
```JS
29-
module.exports = require('@enact/ui-test-utils/screenshot/wdio.conf.js');
30-
```
31-
32-
- wdio.docker.conf.js
33-
```JS
34-
module.exports = require('@enact/ui-test-utils/screenshot/wdio.docker.conf.js');
35-
```
36-
37-
- wdio.tv.conf.js
38-
```JS
39-
module.exports = require('@enact/ui-test-utils/screenshot/wdio.tv.conf.js');
40-
```
41-
42-
5. Add npm scripts for each of the above configuration files. There are likely other scripts already defined so these will be added to the existing scripts.
43-
```JSON
44-
"scripts": {
45-
"test-ss": "start-tests tests/screenshot/wdio.conf.js",
46-
"test-ss-docker": "start-tests tests/screenshot/wdio.docker.conf.js",
47-
}
9+
Clone sandstone from GitHub, install dependencies and connect the modules using Lerna:
10+
11+
```shell
12+
# clone the repo!
13+
git clone git@github.com:enactjs/sandstone.git
14+
# move in
15+
cd sandstone
16+
# we're using git flow so develop is our working branch
17+
git checkout develop
18+
# install lerna
19+
npm install
20+
# link dependencies
21+
enact link
4822
```
4923

5024
## Creating tests
@@ -54,9 +28,9 @@ Within the UI Library, create an app for testing in `./tests/screenshot/apps` an
5428
+ test
5529
+ screenshot
5630
+ apps
57-
+ component
58-
+ testComponent
59-
testComponent.js <-- create app here
31+
+ component
32+
+ testComponent
33+
testComponent.js <-- create app here
6034
+ specs
6135
testComponent-specs.js <-- create spec file here
6236

@@ -103,13 +77,10 @@ For a single-run, execute `npm run test-ss`.
10377
`npm run test-ss -- --component <name-of-component> --skip-build`
10478

10579
## Viewing Test Results
106-
* After a test runs, if new screenshots are generated, a page is created with links to open each of the images. To open this file (on a Mac):
107-
`open tests/screenshot/dist/newFiles.html`
108-
* If there are test failures, a failure log is created that contains links to the sets of images. To open this file (on a Mac):
109-
`open tests/screenshot/dist/failedTests.html`
80+
* After a test runs, if new screenshots are generated, a page is created with links to open each of the images. To open this file (on a Mac): `open tests/screenshot/dist/newFiles.html`
81+
* If there are test failures, a failure log is created that contains links to the sets of images. To open this file (on a Mac): `open tests/screenshot/dist/failedTests.html`
11082
Images can be navigated using the keyboard arrow keys. Click on an image to zoom in. Click out of the image to zoom out.
111-
* In the output, the test case button opens the sample app with the parameters that produced the output. This requires that a server be running on port 5000. If you have globally installed the serve command with npm install -g serve you can start the server like this:
112-
`serve tests/screenshot/dist`
83+
* In the output, the test case button opens the sample app with the parameters that produced the output. This requires that a server be running on port 5000. If you have globally installed the serve command with npm install -g serve you can start the server like this: `serve tests/screenshot/dist`
11384

11485
## Reference and Screen
11586
Screenshot testing is a test that compares and assures two different outputs. For the first test without any criteria, all results are saved in the `tests/screenshot/dist/reference` and they become criteria for later tests. In Second run, all results are saved in the `tests/screenshot/dist/screen` and compares screen with reference.

‎docs/testing-components/ui-testing/index.md‎ renamed to ‎docs/contributing/ui-testing.md‎

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,20 @@
11
---
22
title: Ui Testing
33
---
4-
<nav role="navigation" class="page-toc">
5-
6-
- [Prerequisites](#prerequisites)
7-
- [Setting up a UI Library](#setting-up-a-ui-library)
8-
- [Creating tests](#creating-tests)
9-
- [Running Tests](#running-tests)
10-
- [Viewing Test Results](#viewing-test-results)
11-
- [Goal of Ui Testing](#goal-of-ui-testing)
12-
13-
</nav>
14-
154
## Prerequisites
16-
Created a enact project using the enact cli.
17-
18-
## Setting up a UI Library
19-
1. Add @enact/ui-test-utils as a devDependency: npm i --save-dev @enact/ui-test-utils.
20-
21-
2. Create the tests/ui folder structure within the UI library.
22-
23-
3. Add apps and specs folders to tests/ui.
24-
25-
4. Add local WebDriver configuration files within tests/ui:
26-
27-
- wdio.conf.js
28-
```JS
29-
module.exports = require('@enact/ui-test-utils/ui/wdio.conf.js');
30-
```
31-
32-
- wdio.docker.conf.js
33-
```JS
34-
module.exports = require('@enact/ui-test-utils/ui/wdio.docker.conf.js');
35-
```
36-
37-
- wdio.tv.conf.js
38-
```JS
39-
module.exports = require('@enact/ui-test-utils/ui/wdio.tv.conf.js');
40-
```
41-
42-
5. Add npm scripts for each of the above configuration files. There are likely other scripts already defined so these will be added to the existing scripts.
43-
```JSON
44-
"scripts": {
45-
"test-ui": "start-tests tests/ui/wdio.conf.js",
46-
"test-ui-docker": "start-tests tests/ui/wdio.docker.conf.js",
47-
}
5+
Clone sandstone from GitHub, install dependencies and connect the modules using Lerna:
6+
7+
```shell
8+
# clone the repo!
9+
git clone git@github.com:enactjs/sandstone.git
10+
# move in
11+
cd sandstone
12+
# we're using git flow so develop is our working branch
13+
git checkout develop
14+
# install lerna
15+
npm install
16+
# link dependencies
17+
enact link
4818
```
4919

5020
## Creating tests
@@ -59,6 +29,45 @@ Within the UI Library, create an app for testing in `./tests/ui/apps` and create
5929
+ specs
6030
+ testComponent
6131
testComponent-specs.js <-- create spec file here
32+
In UI test, create apps to test view and specs. Please refer sample code.
33+
* Button.js
34+
35+
```JS
36+
import Button from '../../../../Button';
37+
import ThemeDecorator from '../../../../ThemeDecorator';
38+
39+
const app = (props) => <div {...props}>
40+
<div>
41+
<Button
42+
id="button"
43+
>
44+
Default Button
45+
</Button>
46+
</div>
47+
</div>;
48+
49+
export default ThemeDecorator(app);
50+
```
51+
52+
* Button-specs.js
53+
54+
```JS
55+
const Page = require('@enact/ui-test-utils/utils');
56+
57+
describe('Button', function () {
58+
59+
beforeEach(async function () {
60+
await Page.open();
61+
});
62+
63+
describe('5-way', function () {
64+
it('should focus disabled button on 5-way right', async function () {
65+
await Page.spotlightDown();
66+
await Page.spotlightSelect();
67+
});
68+
});
69+
});
70+
```
6271

6372
The Page component from `@enact/ui-test-utils/utils/` Page contains useful methods for loading tests.
6473

‎docs/testing-components/index.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,4 @@ title: Testing Your Components
44

55
* [Unit Testing](./unit-testing/index.md) - How to start Unit Testing
66
* [Test Driven Development(TDD)](./test-driven-development/index.md) - This document describes the test-first methodology
7-
we aspire to on the Enact team.
8-
* [Ui Testing](./ui-testing/index.md) - How to start Ui Testing
9-
* [Screenshot Testing](./screenshot-testing/index.md) - How to start Screenshot Testing
7+
we aspire to on the Enact team.

0 commit comments

Comments
 (0)