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 . Here is a quote from an : stackblitz 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 link will be: stackblitz 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 file main.ts (one of the things that seem so easy when you know it:-). So, to start Jasmin tests for your project in a we need to put all unit tests bootstrapping code into file. So let's rename our current main.ts to main.bck and create a new main.ts file. stackblits main.ts To run our unit tests with Jasmin from main.ts we should do next: Import and initialize jasmine and jasmine for browser modules Import zone.js module for testing Import out files .spec.ts 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 example: stackblitz <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 Angular gotchas in comments! stackblitz If you liked this article — follow me on for more Angular and RxJS articles! twitter

Too Long; Didn't Read

Making security fun one episode at a time

Running Angular project unit-tests on Stackblitz

Too Long; Didn't Read

Alexander Poshtaruk

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Running Angular project unit-tests on Stackblitz

Too Long; Didn't Read

Alexander Poshtaruk

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES