From c0b762bcab4d56fee238c77011e0314e5b750761 Mon Sep 17 00:00:00 2001 From: "dongsu.won" Date: Wed, 6 Apr 2022 16:18:37 +0900 Subject: [PATCH 1/5] test --- docs/testing-components/index.md | 3 +- docs/testing-components/ui-testing/index.md | 93 +++++++++++++++++++++ 2 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 docs/testing-components/ui-testing/index.md diff --git a/docs/testing-components/index.md b/docs/testing-components/index.md index deaaa8822f..3174405b92 100644 --- a/docs/testing-components/index.md +++ b/docs/testing-components/index.md @@ -4,4 +4,5 @@ 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. \ No newline at end of file +we aspire to on the Enact team. +* [Ui Testing](./ui-testing/index.md) - How to start Ui Testing \ No newline at end of file diff --git a/docs/testing-components/ui-testing/index.md b/docs/testing-components/ui-testing/index.md new file mode 100644 index 0000000000..0b07bcac43 --- /dev/null +++ b/docs/testing-components/ui-testing/index.md @@ -0,0 +1,93 @@ +--- +title: Ui Testing +--- + + +## 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", + } +``` + +## Creating tests +Within the UI Library, create an app for testing in `./tests/ui/apps` and create a corresponding test in `./tests/ui/specs`. + + + src + + test + + ui + + apps + +testComponent + testComponent-View.js <-- create app here + + specs + + testComponent + testComponent-specs.js <-- create spec file here + +The Page component from `@enact/ui-test-utils/utils/` Page contains useful methods for loading tests. + +## Running Tests +For a single-run, execute `npm run test-ui`. + +* Filtering UI by Component: + + `npm run test-ui -- --spec ` + +* Re-run tests without building: + + `npm run test-ui -- --skip-build` + +* Running with visible browser: + + `npm run test-ui -- --visible` + +* Running with filtering by component and without building: + + `npm run test-ui -- --spec --skip-build` + +## Viewing Test Results +By default, Test result display on console whether pass or fail. +If fail occurs, fail log display in console and you can see the screenshot about fail in `./test/ui/errorShots/`. +Also, you can see the view you made on chrome. 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 ./test/ui/dist/`. +To open a specific test app, open the URL path for the test. A specific app display as directory in this page. You can see the app as click the app you wanted. + +## Goal of Ui Testing +Manual tests are time consuming and somtimes error occurs. A more efficient approach is to create UI tests so that user tasks are executed in an automated test. With UI test, tests can be executed quickly and reliably in a repeatable way. Simply stated, first priority considering is two things. +* how component handles user actions performed via used input devices. +* whether elements correctly work as intended. \ No newline at end of file From 326393705779529fbb0d652e13d7d7fc8ff1aa18 Mon Sep 17 00:00:00 2001 From: "dongsu.won" Date: Mon, 11 Apr 2022 02:33:23 +0900 Subject: [PATCH 2/5] test --- docs/testing-components/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/testing-components/index.md b/docs/testing-components/index.md index 3174405b92..f806880b29 100644 --- a/docs/testing-components/index.md +++ b/docs/testing-components/index.md @@ -5,4 +5,5 @@ 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 \ No newline at end of file +* [Ui Testing](./ui-testing/index.md) - How to start Ui Testing +* [Screenshot Testing](./screenshot-testing/index.md) - How to start Screenshot Testing \ No newline at end of file From 17d8667b899eab35279f155fc628040e0d66bc30 Mon Sep 17 00:00:00 2001 From: "dongsu.won" Date: Mon, 11 Apr 2022 02:51:50 +0900 Subject: [PATCH 3/5] test --- .../screenshot-testing/index.md | 113 ++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 docs/testing-components/screenshot-testing/index.md diff --git a/docs/testing-components/screenshot-testing/index.md b/docs/testing-components/screenshot-testing/index.md new file mode 100644 index 0000000000..5b705ce5b2 --- /dev/null +++ b/docs/testing-components/screenshot-testing/index.md @@ -0,0 +1,113 @@ +--- +title: Screenshot Testing +--- + + +## 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", + } +``` + +## Creating tests +Within the UI Library, create an app for testing in `./tests/screenshot/apps` and create a corresponding test in `./tests/screenshot/specs`. + + + src + + test + + screenshot + + apps + + component + + testComponent + testComponent.js <-- create app here + + specs + testComponent-specs.js <-- create spec file here + +In screenshot test, create apps to test component. Please refer sample code. +> Button.js +```JS +import Button from '../../../../Button'; + +const ButtonTests = [ + + +; + +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 index f806880b29..deaaa8822f 100644 --- 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 \ No newline at end of file +we aspire to on the Enact team. \ No newline at end of file