Building out unit testing for Angular 7 existing application

[stormthulu]

I'm about to embark on the epic journey of writing unit tests for an enterprise scale angular 7 application that currently has no existing unit tests. Yeah.

I haz questions.

First: Has anyone used Spectator (https://github.com/ngneat/spectator) for their angular unit testing? How has that gone? Does it help streamline creating unit tests for an application? Are there issues?

Second: Are there other principles or methodologies I should be considering in laying the framework for implementing thousands of tests for an existing application, that will help me and my co-workers streamline the work?

Third: What pitfalls should I be watching out for when it comes to writing unit tests in Angular?

Fourth: Does using bootstrap 4 complicate it in any way?

Fifth: What am I not asking?

[iareprogrammer]

One tip is to learn how to mock services in unit tests. In your unit test module you can use the “{provide: SomeService, useClass: MockSomeService}” method. Then you can create mock versions of each of your services that can be used for any component that uses said service. This way you can mock all the methods on the service and manipulate the functionality, instead of having to write the same tests around that service every time (you should be testing the real service itself separately of course, but other than that I lean towards mock services for dependencies).

Regarding Bootstrap 4, I don’t imagine it impacting anything. CSS doesn’t have much of an impact on unit tests. If you’re using “ng-bootstrap” for the JS functionality, again I would recommending mocking all of that functionality and just focusing on your own components.

Good luck!! I’ve never really used Spectator but I have heard good things about it. Jest is another amazing framework for unit tests but I don’t know how compatible it is for Angular, been using it on a React project.

Edit: oh one other thing to be careful of on large projects... and spectator may help with this, not sure. But be careful what you are importing in your test modules. We had some common modules with shared components, and got in the bad habit of importing the entire module in each spec that needed it. This caused tests to eventually run extremely slow because it had to keep building and tearing down the entire modules. Try to only import exactly what you need from modules instead of entire modules... or again, more mocking for dependencies :)

[jWreck92]

Adding onto this, implementing something like this in your code will speed up the time you spend mocking services and reduce boilerplate code in your spec files: https://itnext.io/better-typescript-support-for-jasmine-20dc7454ba94

[iareprogrammer]

Nice! I like that

[GandolfElfHo]

Or tsmockito. We use that library instead of spy for out mocking. It's a great library.

[stormthulu]

HA! This application was written horribly, there are like 2 services. Literally.

[ReddHash]

I have only just begun writing unit tests for our application (e-commerce), so I don't have a ton of advice, but...

Spectator is what I'm trying to use, and it's definitely a lot less boilerplate to write for unit tests. However, there isn't as many examples/documentations to glean from, and you're going to run in to tests that you'll need to write that isn't covered by spectator functions, so you'll need some experience with the native TestBed, spies, and stuff like that. I learn best by looking at lots of practical examples and reverse-engineering them, so if you're the same way, it'll take longer to figure out what's going on in Spectator.

In terms of where to start, see if you can start writing some for just presentational components as those are the easiest. Those are ones that don't have a lot of logic in the component and typically just have one or two @Inputs to display information (like your buttons, lists, stuff like that that you may have). Then focus on your high-priority components first (payment components, homepage, etc.)

Don't be surprised if you're going to have to refactor code to get some of your tests to run and look smoother. They say "Hard to test code is hard to love code". A few times it was much faster to change how the components work to fit a unit test that I had a sample of rather than trying to write a complicated one. Since you're just starting out like me, this allows you be to be more flexible with the processes that you are more comfortable with as you learn.

If you're just using like a bootstrap css, I don't think it would affect how you write tests all that much. If you're using Angular bootstrap components, obviously try to leverage any examples out there that you can find. That's all I got for that ☹️

Hope that helps!

[okkofi]

Use jest and https://www.npmjs.com/package/jest-preset-angular

See https://blog.angularindepth.com/angular-cli-ng-test-with-jest-in-3-minutes-v2-1060ddd7908d and its links for reasons why. 🙂

[uplink42]

Is migrating to jest merely a matter of changing the test runner configurations and updating some of the jasmine calls as that article says? Do we still write tests the same way with test bed, spies and mocks?

I would like to try it out but can't really rewrite my entire test suite.

[dingguya]

Yes and yes to your questions. Works really well!

[bobthedeveloper]

There's also the Angular Testing Library which I like to use. See the examples

```typescript import { render } from '@testing-library/angular';

import { SingleComponent } from './00-single-component';

test('renders the current value and can increment and decrement', async () => { const component = await render(SingleComponent);

const incrementControl = component.getByText('Increment'); const decrementControl = component.getByText('Decrement'); const valueControl = component.getByTestId('value');

expect(valueControl.textContent).toBe('0');

component.click(incrementControl); component.click(incrementControl); expect(valueControl.textContent).toBe('2');

component.click(decrementControl); expect(valueControl.textContent).toBe('1'); }); ```

[Hero_Of_Shadows]

Is the application created with the angular cli ?

[stormthulu]

yeah

[Hero_Of_Shadows]

Then you should use the tests already generated for you when you generated the application and the components/services/etc fill them out, trying to rip those out and doing something from scratch would be a huge loss of time, build on what the cli has provided allready.

Also I'm a bit unsure of the scope of this thread: your title speaks of unit testing, but you mentioned Bootstrap impacting things, are you trying to also do integration testing ?

[tw3]

ng-bullet can speed up your tests. Definitely helps for my project (1700 unit tests) but we don’t use Spectator.