Angular Schematics: Unit Testing

Building Schematics can be magical. With very little code you can build large structures that can be replicated over multiple projects. As with any coding, you’ll want to create unit tests to ensure that every change you made is exact and many situations are tested with ease. When starting out with Schematics, it might not be terribly obvious how to create tests for the tools you’ve created.

In this article, we are going to look at a method to create unit tests for your Angular Schematics by building off of another post previously posted about creating a Simple Schematic.

The Basic Unit Testing Code

When you are first starting out with a new unit testing file there isn’t much that is necessary to get going. So, just to set the starting point this is what your index_spec.ts file should look like as the Schematics generator spit out.

Right now it doesn’t do anything except for run the schematic in a silo and asserts that the output is an empty file tree. We will need to go further to accurately test your code.

Mimicking The Application Environment

The basic unit test provided by the generator is just that… basic. We need to extend our unit test to more accurately reflect the actual environment that our code will run. This means that we need to run some of the Angular Schematics to build up the Angular project workspace.

To do this we will add a little bit of code to our unit test. First, we need to set the options for our Angular Schematics to run with.

And then, we need to create the application file tree before we run any of our tests. This uses the newer runExternalSchematic to access the Angular Schematic used to generate a workspace and application tree.

Now, before every test, we will run this code to create the Angular project workspace.

Side note: It isn’t always easy to follow along with random code blocks. I recommend checking out the final unit test file to see how this actually looks.

Bonus! There are two ways to setup your Angular workspace, a single project and a multi-project setup. In the final unit test file I show how to setup and test both formats. Again, check it out!

Adding Tests

With our testing environment setup, we just need to start creating a few tests. I am going to create three different tests.

The first, what happens if you run this Schematic without an Angular project tree setup. In this example, I am just testing that ANY error was thrown. This is a nice start to your tests, but in the next example, we will see how can go even further with more detailed tests.

The second, what happens if you run this Schematic without the required parameters. In this example, I went further and showed how we can test for a specific Error Type and message.

And finally, what happens if everything is setup properly.

With these tests ready we just need to focus on asserting our tests for specific values.

Asserting On Files Created

The first assertion that you can write is asserting specific files are created in the application tree. We can do this very specifically by asserting against the entire file list in array format.

Or we can just check to see if the generated files are in the tree.files array. So you don’t have to match the _exact_ content (which can change between versions of the Angular Schematics, for example).

Either option is fine depending on your needs. But what if you specifically need to look at the content of your output and ensure it is exactly what you need? This is asserting on the content created.

Asserting On Content Created

If you need to ensure that the resulting content meets a specific specification then you can also read the content on a file by file basis and assert the content to be or contains the necessary text. This is simple to do as demonstrated in the following code segment.

Easy! I’ve now ensured that a file outputs EXACTLY as I intend.

Conclusion

You should see that writing unit tests for Schematics are fairly easy and can ensure your content outputs just the way you want. The hardest thing to initially figure out for me was how to set up the file structure to include the Angular project workspace, it was downhill after that.

Again, if you want to see the final file check out the following link.