How much do you like to write unit tests from the scratch? My guess is “not so much”. The reason behind this guess is that writing the first successful unit test is just a copy/paste/modification job, and it’s not a pleasant task.

What if there is a command that can do this job(copy/paste/modification)?

TL;DR; Yes, there is a command.

Assuming you coded your component, and you want to write a test,

$ npm install ngentest -g # to run this command anywhere

$ ngentest my.component.ts # node_modules/.bin/gentest

This will output your auto-generated unit test, and it’s guaranteed to work.

Test requires more coding, and it’s true :(

Writing a component is one thing and testing it is another thing. To make your test to work, you need to know and code more the following;

Import statements

Classes to mock

Window objects to mock

Create TestBed and configure it before each tests

and configure it before each tests Setup providers using mocks

Etc

The above is just for a component. When it comes to a directive it requires even more for you to code;

Create a component to test a directive

Get the directive instance from the component

Setting up @input s and @output s to test

s and s to test and more

It already makes you tired before you write the test. You have been doing this job by copying, pasting and modifying your code, and I am sure you don’t like it. If there were an AI program, then I would ask AI program to do this job rather than I write it by myself.

Generate the first unit test automatically

There is no reason to automate copying/pasting/modifying the test codes for each type; components, directives, services and pipes. It’s just a matter of;

Parsing a Typescript file and find out the proper file type. Building data for unit test from the parsed Typescript.

className

imports

input/output attributes and properties

mocks

providers for TestBed

list of functions to test

3. Finally, generating unit test from a template

That’s how the Angular Test Generator has been created. https://github.com/allenhwkim/ngentest.

By running a ngentest command, more than half of your test will be done. The only thing you have left is to complete each function tests.

(UPDATE), Now, it also generate function tests

$ ngentest my.component.ts # node_modules/.bin/gentest

$ ngentest my.directive.ts -s # output to my.directive.spec.ts

$ ngentest my.pipe.ts > my.pipe.test.ts

$ ngentest my.service.ts

As you see it here from the generated code example, the constructor test is 100% complete, but function tests are not done, and I don’t think even an AI can do this properly(one day, maybe?). You still need to complete each function tests to make the code coverage 100%.

(UPDATE), Now, ngentest also generate function tests

The following is an example of automatically generated tests by ngentest .

The good thing is it generate a way more than half of your unit test. With this help, you can save a lot of time.

These are number of minimal coverage percentage by ngentest for each type.

For simple components and directives, it covers 100% of your time easily.

Component (65%)

Directive (65%)

Service (70%)

Pipe (80%)

In general, with ngentest , you can write more than half of your unit test.

Conclusion

You can find the code here at Github, https://github.com/allenhwkim/ngentest

To try this, all you need to do is to install and run ngentest with your file.

$ npm install ngentest -g # to run this command anywhere

$ ngentest my.component.ts

Happy Coding :)

May 12th, 2018

Allen Kim