Running Angular project unit-tests on Stackblitz

I am not a part of Stackblitz team so it is not a promotion article:-) I just think Stackblitz is a great way to present your code for articles readers. But longtime one small feature was escaping me: how I can run an Angular project on stackblitz and then switch the same project to run unit tests. Interested? Keep reading!

Why at all should I run Angular project unit tests in stackblits?

Well, a few times I need unit test running for learning purposes or to create some playground links to refer in the tech articles. So…

Start your GitHub project in stackblitz

Everybody knows how to start your Angular CLI project from GitHub on a stackblitz. Here is a quote from an official doc:

Import from Github

You can run any public repo on Github by providing the username + repo name like so:

stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

For example, here is my repo link:

https://github.com/kievsash/NoSniffOptionTest

And respective stackblitz link will be:

https://stackblitz.com/github/kievsash/NoSniffOptionTest

Here you can see that project with usual run:

<a href="https://medium.com/media/a91ca95e66eba5df53ba5d5813e779ab/href">https://medium.com/media/a91ca95e66eba5df53ba5d5813e779ab/href</a>

Making it run our unit tests

OK, good, I started it. But how to run tests on it? It was not so obvious for me till I found out that

stackblitz just run main.ts file

(one of the things that seem so easy when you know it:-).

So, to start Jasmin tests for your project in a stackblits we need to put all unit tests bootstrapping code into main.ts file. So let's rename our current main.ts to main.bck and create a new main.ts file.

To run our unit tests with Jasmin from main.ts we should do next:

1. Import and initialize jasmine and jasmine for browser modules
2. Import zone.js module for testing
3. Import out .spec.ts files
4. Bootstrap Angular test environment

OK, let's do this:

<a href="https://medium.com/media/f1c7eb59e4e0f2550d2d007988190ff1/href">https://medium.com/media/f1c7eb59e4e0f2550d2d007988190ff1/href</a>

And here is stackblitz example:

<a href="https://medium.com/media/61c0aa4fa0a48294145cb2372a8c3afe/href">https://medium.com/media/61c0aa4fa0a48294145cb2372a8c3afe/href</a>

Conclusion

Now if you need to provide playground with running unit tests for some Angular CLI project from Github repo — you know how to do this!

Plz, leave your stackblitz Angular gotchas in comments!

If you liked this article — follow me on twitter for more Angular and RxJS articles!