translate ui-test #151

yutingzhao1991 · 2018-01-29T06:34:13Z

No description provided.

ddcat1115 · 2018-03-12T07:11:55Z

docs/ui-test.en-US.md

+---
+order: 15
+title: UI Test
+type: 进阶


漏翻了..

ddcat1115 · 2018-03-12T07:23:45Z

docs/ui-test.en-US.md

+type: 进阶
+---
+
+UI testing is an important part of the project development process. Effective test cases can sort out business needs and ensure the quality and progress of development, It make engineers can refactor the code and add new features without trepidation.


it enables developers to refactor the code and add new features safely.

ddcat1115 · 2018-03-12T07:30:25Z

docs/ui-test.en-US.md

+
+UI testing is an important part of the project development process. Effective test cases can sort out business needs and ensure the quality and progress of development, It make engineers can refactor the code and add new features without trepidation.
+
+Ant Design Pro comes packaged with a handy set of easy-to-use React unit tests and E2E test framework to run test cases by running the following command at the project root.


~~easy-to-use~~ 可以删掉

需要断句 -> Ant Design Pro comes packaged with a handy set of React unit tests and E2E test framework, you can run the following command in the root repository to run test cases:

ddcat1115 · 2018-03-12T07:33:14Z

docs/ui-test.en-US.md

+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/bNkhdMosBxuEhhKgnROo.png" width="700" />
+
+Now we start a quick introduction to writing your business test cases in your project.


Now we'll give a brief introduction about how to write a test case.

ddcat1115 · 2018-03-12T07:34:45Z

docs/ui-test.en-US.md

+
+## Unit Tests
+
+Unit tests are used to test the appearance of React UI components。We referenced [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests), using [jest](http://facebook.github.io/jest/) as a test framework.


中文句号

By referencing create-react-app, we take jest as the test framework.

ddcat1115 · 2018-03-12T07:53:00Z

docs/ui-test.en-US.md

+
+Unit tests are used to test the appearance of React UI components。We referenced [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests), using [jest](http://facebook.github.io/jest/) as a test framework.
+
+jest is a node-side test framework that uses jsdom to simulate the DOM environment and is suitable for quick testing of the logical behavior of React components. If requiring a real browser, please refer to the E2E test section.


首字母大写

If you care about the performance in a real browser ...

ddcat1115 · 2018-03-12T07:55:35Z

docs/ui-test.en-US.md

+
+### Write a case
+
+For example, we could create a file `src/routes/Result/Success.test.js` to test the UI appearance of successful page components.


... to test the UI appearance of Result/Success.js.

ddcat1115 · 2018-03-12T08:09:49Z

docs/ui-test.en-US.md

+});
+```
+
+Here [enzyme](http://airbnb.io/enzyme/docs/api/index.html) is used as a test library, which provides a number of useful APIs to help us test React components. Assert part use the jest acquiescence [jasmine2 expect grammar](https://facebook.github.io/jest/docs/en/expect.html#content).


As for the assertion library, we choose jasmine2 expect grammar.

ddcat1115 · 2018-03-12T08:12:51Z

docs/ui-test.en-US.md

+
+### Local execution
+
+Use the following command will be search and execute `* .test.js` format test case file in `src`.


Files with suffix * .test.js in src will be found out and executed by using the following command:

ddcat1115 · 2018-03-12T08:14:25Z

docs/ui-test.en-US.md

+$ npm test .test.js
+```
+
+#### Executes a single or a set of cases


ddcat1115 · 2018-03-12T08:16:01Z

docs/ui-test.en-US.md

+
+### Test dva wrapped components
+
+Components wrapped by dva `connect` can use the following way to test.


We can use the following way to test the components wrapped by dva connect.

ddcat1115 · 2018-03-12T08:19:23Z

docs/ui-test.en-US.md

+});
+```
+
+## e2e test


e2e 部分已替换为 Puppeteer，中文文档需要更新，这里先忽略吧

@valleykid 这部分文档需要更新

好的，我近期提个pr修改下文档

ddcat1115 · 2018-03-12T08:22:00Z

docs/ui-test.en-US.md

+$ npm test -- --watch
+```
+
+Add `--watch` configuration can enter the watch mode, when you modify and save the file, Jest will automatically execute the corresponding test cases. Jest's command line tools also provide a variety of convenient shortcuts to execute the use cases you need.


By adding --watch configuration you can enter the watch mode, in which when you modify and save the file...

Jest -> jest

ddcat1115 · 2018-03-12T08:26:10Z

docs/ui-test.en-US.md

+
+<img src="https://camo.githubusercontent.com/bd0bbda8e44ea747e4c199d0e212d40563ad2fcb/687474703a2f2f692e696d6775722e636f6d2f356246686e54532e706e67" width="700" />
+
+## Focus or ignore use cases


use -> test

ddcat1115 · 2018-03-12T08:31:39Z

docs/ui-test.en-US.md

+
+## Access integration testing services
+
+If you need access to integrated test environment such as travis, CircleCI, Gitlab CI, you can refer to `.travis.yml` provided by this repository.


integrated test -> integration testing

~~provided by this repository.~~ 给个master的文件链接，中文也加下吧

ddcat1115 · 2018-03-12T08:34:13Z

docs/ui-test.en-US.md

+
+If you need access to integrated test environment such as travis, CircleCI, Gitlab CI, you can refer to `.travis.yml` provided by this repository.
+
+Note that the e2e test requires integrated environment support, and if not, you can run unit tests separately using `npm test .test.js`.


support electron 并加个链接

ddcat1115 · 2018-03-12T08:35:07Z

docs/ui-test.en-US.md

+
+## Reference link
+
+For more testing tips and functions, please refer to the following link.


ddcat1115 · 2018-03-14T02:42:17Z

docs/ui-test.en-US.md


-Ant Design Pro comes packaged with a handy set of easy-to-use React unit tests and E2E test framework to run test cases by running the following command at the project root.
+Ant Design Pro comes packaged with a handy set of React unit tests and E2E test framework, you can run the following command in the root repository to run test cases by running the following command at the project root.


~~by running the following command at the project root.~~ 重复了

valleykid · 2018-03-20T03:31:10Z

docs/ui-test.en-US.md

+
+End-to-end testing, also known as smoke testing, is used to test the process and appearance of front-end applications in a real-world browser environment, equivalent to operating application instead of manually.
+
+We import [puppeteer](https://github.com/googlechrome/puppeteer) as a tool for E2E testing, 测试的工具，puppeteer is a headless Chrome tool which created by Google, it use chrome / chromium as the browser environment by default to runing your application, and provides a very semantic API for describing business logic.


测试的工具乱入...

afc163 · 2018-03-23T09:10:57Z

合并后记得删分支

nikogu mentioned this pull request Mar 5, 2018

Document Translation ant-design/ant-design-pro#120

Closed

41 tasks

ddcat1115 reviewed Mar 12, 2018

View reviewed changes

docs/ui-test.en-US.md Outdated

---

order: 15

title: UI Test

type: 进阶

Copy link

Contributor

ddcat1115 Mar 12, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

漏翻了..

ddcat1115 reviewed Mar 12, 2018

View reviewed changes

docs/ui-test.en-US.md Outdated

$ npm test .test.js

```

#### Executes a single or a set of cases

Copy link

Contributor

ddcat1115 Mar 12, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Execute

ddcat1115 reviewed Mar 12, 2018

View reviewed changes

ddcat1115 reviewed Mar 14, 2018

View reviewed changes

valleykid mentioned this pull request Mar 14, 2018

Update ui-test.md for puppeteer #161

Merged

yutingzhao1991 force-pushed the yu-tran-ui-test branch from 56f4487 to 985b249 Compare March 20, 2018 02:27

translate ui-test

ee504a3

yutingzhao1991 force-pushed the yu-tran-ui-test branch from 985b249 to ee504a3 Compare March 20, 2018 02:29

valleykid reviewed Mar 20, 2018

View reviewed changes

fix review issue

2d2f4f3

ddcat1115 merged commit c591ce1 into master Mar 23, 2018

afc163 deleted the yu-tran-ui-test branch March 23, 2018 09:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

translate ui-test #151

translate ui-test #151

yutingzhao1991 commented Jan 29, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

valleykid Mar 12, 2018

ddcat1115 Mar 12, 2018 •

edited

Loading

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018 •

edited

Loading

ddcat1115 Mar 12, 2018

ddcat1115 Mar 12, 2018

ddcat1115 Mar 14, 2018

valleykid Mar 20, 2018

afc163 commented Mar 23, 2018


		UI testing is an important part of the project development process. Effective test cases can sort out business needs and ensure the quality and progress of development, It make engineers can refactor the code and add new features without trepidation.

		Ant Design Pro comes packaged with a handy set of easy-to-use React unit tests and E2E test framework to run test cases by running the following command at the project root.


		<img src="https://gw.alipayobjects.com/zos/rmsportal/bNkhdMosBxuEhhKgnROo.png" width="700" />

		Now we start a quick introduction to writing your business test cases in your project.


		## Unit Tests

		Unit tests are used to test the appearance of React UI components。We referenced [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests), using [jest](http://facebook.github.io/jest/) as a test framework.


		Unit tests are used to test the appearance of React UI components。We referenced [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests), using [jest](http://facebook.github.io/jest/) as a test framework.

		jest is a node-side test framework that uses jsdom to simulate the DOM environment and is suitable for quick testing of the logical behavior of React components. If requiring a real browser, please refer to the E2E test section.


		### Write a case

		For example, we could create a file `src/routes/Result/Success.test.js` to test the UI appearance of successful page components.


		### Local execution

		Use the following command will be search and execute `* .test.js` format test case file in `src`.


		### Test dva wrapped components

		Components wrapped by dva `connect` can use the following way to test.


		<img src="https://camo.githubusercontent.com/bd0bbda8e44ea747e4c199d0e212d40563ad2fcb/687474703a2f2f692e696d6775722e636f6d2f356246686e54532e706e67" width="700" />

		## Focus or ignore use cases


		## Access integration testing services

		If you need access to integrated test environment such as travis, CircleCI, Gitlab CI, you can refer to `.travis.yml` provided by this repository.


		If you need access to integrated test environment such as travis, CircleCI, Gitlab CI, you can refer to `.travis.yml` provided by this repository.

		Note that the e2e test requires integrated environment support, and if not, you can run unit tests separately using `npm test .test.js`.


		## Reference link

		For more testing tips and functions, please refer to the following link.


		End-to-end testing, also known as smoke testing, is used to test the process and appearance of front-end applications in a real-world browser environment, equivalent to operating application instead of manually.

		We import [puppeteer](https://github.com/googlechrome/puppeteer) as a tool for E2E testing, 测试的工具，puppeteer is a headless Chrome tool which created by Google, it use chrome / chromium as the browser environment by default to runing your application, and provides a very semantic API for describing business logic.

translate ui-test #151

translate ui-test #151

Conversation

yutingzhao1991 commented Jan 29, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddcat1115 Mar 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddcat1115 Mar 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Mar 23, 2018

ddcat1115 Mar 12, 2018 •

edited

Loading

ddcat1115 Mar 12, 2018 •

edited

Loading