Detailed explanation of unit and E2E testing steps with Angular CLI-JS Tutorial-php.cn

Detailed explanation of unit and E2E testing steps with Angular CLI

php中世界最好的语言

Release： 2018-05-08 16:17:05

Original

2411 people have browsed it

This time I will bring you a detailed explanation of the steps for unit and E2E testing with Angular CLI. What are the precautions for unit and E2E testing with Angular CLI? The following is a practical case, let's take a look.

Unit testing.

angular cli uses karma for unit testing.

First execute ng test --help or ng test -h to view the help.

To execute the test, just execute ng test. It will execute all the .spec.ts files in the project.

And it also It will detect file changes. If the file changes, then it will re-execute the test.

It should be executed in a separate terminal process.

First create an angular project with routing:

ng new sales --routing

Copy after login

After creating the project, directly execute the command test:

ng test

Copy after login

Then a page will pop up, which is the test result data.

Now I will add a few more components and an admin module:

ng g c person
ng g c order
ng g m admin --routing
ng g c admin/user
ng g c admin/email

Copy after login

Then configure the routing, and the most important thing is to get this effect:

At this time I will re- Execute ng test:

#Although the program runs without problems, there is still a problem in the test: router-outlet is not an angular component.

You can see Check the spec list:

At this time, because the admin module runs independently when running the test, the module does not reference the Router. module, so router-outlet cannot be recognized.

So how to solve this problem?

Open admin.component.spec.ts:

Fill in this sentence, and then there will be no errors:

##NO_ERRORS_SCHEMA tells angular to ignore those unrecognized elements or element attributes.

Use ng test -sr or ng test -w false Execute a single test

Test code coverage:

ng test --cc's report is generated in the /coverage folder by default, but it can be modified by modifying .angular- Modify the properties in cli.json.

The code coverage report is generated below: