Angular Schematics
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.
Angular Schematics: Simple Schematic
So, you looked at the ngMomentum project and decided, “Well
if they can make a custom Angular Schematic, so can I”…
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.
jonbcampos/schematics
GitHub is where people build software. More than 28 million people
use GitHub to discover, fork, and contribute to over…
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.[Source]-https://blog.angular.io/angular-schematics-unit-testing-3a0a9aaab186
62 Hours AngularJs Training includes MongoDB, JavaScript, A62 ngularJS Training, MongoDB,
Node JS and live Project Development. Demo Lect available.
Comments
Post a Comment