* 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)
enactjs · May 19, 2022 · b501fc7 · b501fc7
1 parent 444ef2f
commit b501fc7
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 96 deletions.
diff --git a/docs/contributing/index.md b/docs/contributing/index.md
@@ -59,6 +59,9 @@ project. Please read this section carefully if you are interested in contributin
 	*   Please squash pull requests down to a single commit to simplify review and keep history clean.
 	*   Ensure all new features have unit tests that pass and any bug fixes include tests that
 	fail without the fix applied
+	[UI Testing](./ui-testing.md) -  How to use UI-Test in sandstone source.
+	[Screenshot Testing](./screenshot-testing.md) -  How to use Screenshot-Test in sandstone source.
+
 	*   Help keep diffs easy to read by not making unnecessary rearrangements to the source code.
 	*   Make sure not to inadvertently change line ending types from Unix to Windows.
 	*   Ensure inline API documentation exists and is up-to-date (minimum: component summary and descriptions of all

diff --git a/...ng-components/screenshot-testing/index.md → docs/contributing/screenshot-testing.md b/...ng-components/screenshot-testing/index.md → docs/contributing/screenshot-testing.md
@@ -1,50 +1,24 @@
 ---
 title: Screenshot Testing
 ---
-<nav role="navigation" class="page-toc">
 
-- [Prerequisites](#prerequisites)
-- [Setting up a UI Library](#setting-up-a-ui-library)
-- [Creating tests](#creating-tests)
-- [Running Tests](#running-tests)
-- [Viewing Test Results](#viewing-test-results)
-- [Reference and Screen](#reference-and-screen)
-
-</nav>
+## What is the Screenshot Testing
+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.
 
 ## Prerequisites
-Created a enact project using the enact cli.
-
-## Setting up a UI Library
-1. Add @enact/ui-test-utils as a devDependency: npm i --save-dev @enact/ui-test-utils.
-
-2. Create the tests/screenshot folder structure within the UI library.
-
-3. Add apps and specs folders to tests/screenshot.
-
-4. Add local WebDriver configuration files within tests/screenshot:
-
-	- wdio.conf.js 
-	```JS
-	module.exports = require('@enact/ui-test-utils/screenshot/wdio.conf.js');
-	```
-
-	- wdio.docker.conf.js
-	```JS
-	module.exports = require('@enact/ui-test-utils/screenshot/wdio.docker.conf.js');
-	```
-
-	- wdio.tv.conf.js
-	```JS
-    module.exports = require('@enact/ui-test-utils/screenshot/wdio.tv.conf.js');
-	```
-
-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.
-```JSON
-   "scripts": {
-      "test-ss": "start-tests tests/screenshot/wdio.conf.js",
-      "test-ss-docker": "start-tests tests/screenshot/wdio.docker.conf.js",
-   }
+Clone sandstone from GitHub, install dependencies and connect the modules using Lerna:
+
+```shell
+# clone the repo!
+git clone git@github.com:enactjs/sandstone.git
+# move in
+cd sandstone
+# we're using git flow so develop is our working branch
+git checkout develop
+# install lerna
+npm install
+# link dependencies
+enact link
 ```
 
 ## Creating tests
@@ -54,9 +28,9 @@ Within the UI Library, create an app for testing in `./tests/screenshot/apps` an
 		+ test
 			+ screenshot
 				+ apps
-                    + component
-					    + testComponent
-						    testComponent.js		<-- create app here
+					+ component
+						+ testComponent
+							testComponent.js		<-- create app here
 				+ specs
 						testComponent-specs.js		<-- create spec file here
 
@@ -103,13 +77,10 @@ For a single-run, execute `npm run test-ss`.
 	`npm run test-ss -- --component <name-of-component> --skip-build`
 
 ## Viewing Test Results
-* 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`
-* 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`
+* 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`
+* 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`
 Images can be navigated using the keyboard arrow keys. Click on an image to zoom in. Click out of the image to zoom out.
-* 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`
+* 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`
 
 ## Reference and Screen
 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.
diff --git a/docs/testing-components/ui-testing/index.md → docs/contributing/ui-testing.md b/docs/testing-components/ui-testing/index.md → docs/contributing/ui-testing.md
@@ -1,50 +1,20 @@
 ---
 title: Ui Testing
 ---
-<nav role="navigation" class="page-toc">
-
-- [Prerequisites](#prerequisites)
-- [Setting up a UI Library](#setting-up-a-ui-library)
-- [Creating tests](#creating-tests)
-- [Running Tests](#running-tests)
-- [Viewing Test Results](#viewing-test-results)
-- [Goal of Ui Testing](#goal-of-ui-testing)
-
-</nav>
-
 ## Prerequisites
-Created a enact project using the enact cli.
-
-## Setting up a UI Library
-1. Add @enact/ui-test-utils as a devDependency: npm i --save-dev @enact/ui-test-utils.
-
-2. Create the tests/ui folder structure within the UI library.
-
-3. Add apps and specs folders to tests/ui.
-
-4. Add local WebDriver configuration files within tests/ui:
-
-	- wdio.conf.js 
-	```JS
-	module.exports = require('@enact/ui-test-utils/ui/wdio.conf.js');
-	```
-
-	- wdio.docker.conf.js
-	```JS
-	module.exports = require('@enact/ui-test-utils/ui/wdio.docker.conf.js');
-	```
-
-	- wdio.tv.conf.js
-	```JS
-	module.exports = require('@enact/ui-test-utils/ui/wdio.tv.conf.js');
-	```
-
-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.
-```JSON
-   "scripts": {
-	  "test-ui": "start-tests tests/ui/wdio.conf.js",
-	  "test-ui-docker": "start-tests tests/ui/wdio.docker.conf.js",
-   }
+Clone sandstone from GitHub, install dependencies and connect the modules using Lerna:
+
+```shell
+# clone the repo!
+git clone git@github.com:enactjs/sandstone.git
+# move in
+cd sandstone
+# we're using git flow so develop is our working branch
+git checkout develop
+# install lerna
+npm install
+# link dependencies
+enact link
 ```
 
 ## Creating tests
@@ -59,6 +29,45 @@ Within the UI Library, create an app for testing in `./tests/ui/apps` and create
 				+ specs
 					+ testComponent
 						testComponent-specs.js		<-- create spec file here
+ In UI test, create apps to test view and specs. Please refer sample code.
+* Button.js
+
+```JS
+import Button from '../../../../Button';
+import ThemeDecorator from '../../../../ThemeDecorator';
+
+const app = (props) => <div {...props}>
+	<div>
+		<Button
+			id="button"
+		>
+			Default Button
+		</Button>
+	</div>
+</div>;
+
+export default ThemeDecorator(app);
+```
+
+* Button-specs.js
+
+```JS
+const Page = require('@enact/ui-test-utils/utils');
+
+describe('Button', function () {
+
+	beforeEach(async function () {
+		await Page.open();
+	});
+
+	describe('5-way', function () {
+		it('should focus disabled button on 5-way right', async function () {
+			await Page.spotlightDown();
+			await Page.spotlightSelect();
+		});
+	});
+});
+```
 
 The Page component from `@enact/ui-test-utils/utils/` Page contains useful methods for loading tests.
 

diff --git a/docs/testing-components/index.md b/docs/testing-components/index.md
@@ -4,6 +4,4 @@ title: Testing Your Components
 
 *   [Unit Testing](./unit-testing/index.md) - How to start Unit Testing
 *   [Test Driven Development(TDD)](./test-driven-development/index.md) - This document describes the test-first methodology
-we aspire to on the Enact team.
-*   [Ui Testing](./ui-testing/index.md) - How to start Ui Testing
-*   [Screenshot Testing](./screenshot-testing/index.md) - How to start Screenshot Testing
+we aspire to on the Enact team.