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!

Switch Stachblitz Angular project to unit test run. (Pic by Mikkel Bech)

This post was originally published on Hackernoon

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 on 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:

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:

	import './polyfills';
	// jasmine staff
	declare var jasmine;
	import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
	window['jasmineRequire'] = jasmineRequire;
	import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
	import 'jasmine-core/lib/jasmine-core/boot.js';
	// zone.js testing imports
	import 'zone.js/dist/zone-testing'; // instead all commented files below
	// import 'zone.js/dist/async-test';
	// import 'zone.js/dist/fake-async-test';
	// import 'zone.js/dist/long-stack-trace-zone';
	// import 'zone.js/dist/proxy.js';
	// import 'zone.js/dist/sync-test';
	// import 'zone.js/dist/jasmine-patch';
	// import testBed and Angular staff
	import { getTestBed } from '@angular/core/testing';
	import {
	BrowserDynamicTestingModule,
	platformBrowserDynamicTesting
	} from '@angular/platform-browser-dynamic/testing';
	// Spec files to include in the Stackblitz tests
	import './app/app.component.spec.ts';
	// get fresh instance of jasmine and load angular test environment
	bootstrap();
	function bootstrap () {
	// I took it from Angular repo examples:
	// https://github.com/angular/angular/blob/master/aio/content/examples/http/src/main-specs.ts#L25
	// this looks like workaround to get 100% fresh clear run.
	// window['jasmineRef'] does nothing - it is just a flag
	// if it is not defined - we have clear run
	// if not - lets reload
	if (window['jasmineRef']) {
	location.reload();
	return;
	} else {
	window.onload(undefined); // overwrited by jasmine, initialize env
	window['jasmineRef'] = jasmine.getEnv();
	}
	// Initialize the Angular testing environment.
	getTestBed().initTestEnvironment(
	BrowserDynamicTestingModule,
	platformBrowserDynamicTesting()
	);
	}

view raw main.ts hosted with ❤ by GitHub

And here is stackblitz example:

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!

---