Questions tagged [angular-test]

Questions about testing Angular code, addressing either specific issues ("why is this test failing"), test flows ("how to test this async call of my component") or test setup ("how do I mock router in this component test"), integration tests ("how to bypass a proxy to my backend in this angular test"), or possibly test-related questions, such as ("Why does this component work and the test is failing?").

Angular test suite, running on top of Jasmine testing framework and Angular test framework.

Questions with angular-test tag about testing Angular code should address test code.

It can be related to specific issues ("why is this test failing"), test flows ("how to test this async call of my component") or test setup ("how do I mock router in this component test"), integration tests ("how to bypass a proxy to my backend in this angular test"), or possibly test-code-related questions, such as ("Why does this component work and the test is failing?").

This tag should not be used for generic and overbroad questions such as "How to test an Angular directive?" or questions that have no relation to Angular test suite ("I am testing my code in browsers, why does it not work?"), but rather test code itself. Rule of thumb can be, "does this question include parts of my *.spec.ts file.

A good angular-test question will, as any good test, include your expected results, your actual results, and your attempts so far, if possible with test code included.

More information on Angular Testing can be found on Angular guide on testing.

718 questions
96
votes
2 answers

Angular 2 Testing - Async function call - when to use

When do you use the async function in the TestBed when testing in Angular 2? When do you use this? beforeEach(() => { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], …
xiotee
  • 1,519
  • 2
  • 14
  • 23
90
votes
4 answers

Angular2 unit test with @Input()

I've got a component that uses the @Input() annotation on an instance variable and I'm trying to write my unit test for the openProductPage() method, but I'm a little lost at how I setup my unit test. I could make that instance variable public, but…
hartpdx
  • 2,230
  • 2
  • 15
  • 18
77
votes
3 answers

Angular 6 - NullInjectorError: No provider for HttpClient in unit tests

I am importing and using HttpClient in a service as follows: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root', }) export class MyService { constructor(private…
Kingamere
  • 9,496
  • 23
  • 71
  • 110
41
votes
3 answers

Test pipe with dependencies on services

I have a pipe that sanatises HTML as below: import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'sanitiseHtml' }) export class SanitiseHtmlPipe implements PipeTransform…
38
votes
5 answers

How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular

I have an Angular 6 app and writing some unit tests trying to determine if an element is visible or not based solely on the boolean result of an *ngIf directive. Markup:
...
spec…
J-man
  • 1,743
  • 3
  • 26
  • 50
37
votes
3 answers

How to mock route.snapshot.params?

In my Angular 4 component I have something like: constructor(private route: ActivatedRoute) { } ngOnInit() { this.myId = this.route.snapshot.params['myId']; } And I'm trying to create a mock that suppose to look like follows: class…
and85
  • 1,171
  • 1
  • 9
  • 12
33
votes
2 answers

When to use waitForAsync in angular

From documentation we can read: waitForAsync(fn: Function): (done: any) => any Wraps a test function in an asynchronous test zone. The test will automatically complete when all asynchronous calls within this zone are done. Can be used to wrap an…
Thomas Banderas
  • 1,681
  • 1
  • 21
  • 43
30
votes
4 answers

How do I turn off source maps for Angular 6 ng test?

I am trying to turn off sourcemaps for my tests in Angular 6. I know the sourcemaps switch has been removed, e.g., ng test --sourcemaps=false. I have tried modifying my tsconfig file: { "extends": "../tsconfig.json", "compilerOptions": { ... …
ja6a
  • 416
  • 1
  • 6
  • 10
26
votes
3 answers

Why do I need to call detectChanges / whenStable twice?

First example I have got the following test: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component } from '@angular/core'; @Component({ template: '
26
votes
2 answers

Unit test Angular Material Dialog - How to include MAT_DIALOG_DATA

I am trying to unit test this material dialog to test if the template is rendering the right injected object. The component works fine when used properly Component - The Dialog export class ConfirmationDialogComponent { …
23
votes
13 answers

This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid

In my Angular 9 app, I have an abstract class: export abstract class MyAbstractComponent { constructor( protected readonly cd: ChangeDetectorRef, ) { super(); } // ... } and a Component extending it: @Component({ // ... }) export…
20
votes
1 answer

How to get rid of warning Passing raw CLI options to `new Server(config, done)` is deprecated

I recently upgraded Karma in my Angular app to v6.3.2. I am running Angular v11. When I start my tests, I keep getting the message Passing raw CLI options to new Server(config, done) is deprecated. Use parseConfig(configFilePath, cliOptions,…
Owen Kelvin
  • 14,054
  • 10
  • 41
  • 74
20
votes
3 answers

Karma , Istanbul - code coverage report Unknown% ( 0/0 )

I'm getting this Coverage Summary =============================== Coverage summary =============================== Statements : Unknown% ( 0/0 ) Branches : Unknown% ( 0/0 ) Functions : Unknown% ( 0/0 ) Lines : Unknown% ( 0/0…
18
votes
4 answers

Angular Testing, dynamically change ActivatedRoute params for different test cases

Component: @Component({ selector: 'app-test', templateUrl: './test.component.html' }) export class TestComponent implements OnInit { useCase: string; constructor( private route: ActivatedRoute, ) {} ngOnInit() { …
stack247
  • 5,579
  • 4
  • 41
  • 64
18
votes
2 answers

Equivalent of and.callThrough() in jest-preset-angular

Reading through this link i got to know that the equivalent of and.callFake is mockImplementation and and.returnValue is mockReturnValue. Similarly is there an equivalent of and.callThrough() in jest-preset-angular?
radio_head
  • 1,306
  • 4
  • 13
  • 28
1
2 3
47 48