Angular 2 unit testing component, mocking ContentChildren - unit-testing

I am implementing a wizard component in Angular 2 RC4, and now I am trying to write som unit tests. Unit testing in Angular 2 is starting to get well documented, but I simply cannot find out how to mock the result of a content query in the component.
The app has 2 components (in addition to the app component), WizardComponent and WizardStepComponent. The app component (app.ts) defines the wizard and the steps in its template:
<div>
<fa-wizard>
<fa-wizard-step stepTitle="First step">step 1 content</fa-wizard-step>
<fa-wizard-step stepTitle="Second step">step 2 content</fa-wizard-step>
<fa-wizard-step stepTitle="Third step">step 3 content</fa-wizard-step>
</fa-wizard>
</div>
The WizardComponent (wizard-component.ts) gets a reference to the steps by using a ContentChildren query.
#Component({
selector: 'fa-wizard',
template: `<div *ngFor="let step of steps">
<ng-content></ng-content>
</div>
<div><button (click)="cycleSteps()">Cycle steps</button></div>`
})
export class WizardComponent implements AfterContentInit {
#ContentChildren(WizardStepComponent) steps: QueryList<WizardStepComponent>;
....
}
The problem is how to mock the steps variable in the unit test:
describe('Wizard component', () => {
it('should set first step active on init', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(WizardComponent)
.then( (fixture) =>{
let nativeElement = fixture.nativeElement;
let testComponent: WizardComponent = fixture.componentInstance;
//how to initialize testComponent.steps with mock data?
fixture.detectChanges();
expect(fixture.componentInstance.steps[0].active).toBe(true);
});
})));
});
I have created a plunker implementing a very simple wizard demonstrating the problem. The wizard-component.spec.ts file contains the unit test.
If anyone can point me in the right direction, I would greatly appreciate it.

Thanks to drewmoore's answer in this question, I have been able to get this working.
The key is to create a wrapper component for testing, which specifies the wizard and the wizard steps in it's template. Angular will then do the content query for you and populate the variable.
Edit: Implementation is for Angular 6.0.0-beta.3
My full test implementation looks like this:
//We need to wrap the WizardComponent in this component when testing, to have the wizard steps initialized
#Component({
selector: 'test-cmp',
template: `<fa-wizard>
<fa-wizard-step stepTitle="step1"></fa-wizard-step>
<fa-wizard-step stepTitle="step2"></fa-wizard-step>
</fa-wizard>`,
})
class TestWrapperComponent { }
describe('Wizard component', () => {
let component: WizardComponent;
let fixture: ComponentFixture<TestWrapperComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
schemas: [ NO_ERRORS_SCHEMA ],
declarations: [
TestWrapperComponent,
WizardComponent,
WizardStepComponent
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestWrapperComponent);
component = fixture.debugElement.children[0].componentInstance;
});
it('should set first step active on init', () => {
expect(component.steps[0].active).toBe(true);
expect(component.steps.length).toBe(3);
});
});
If you have better/other solutions, you are very welcome to add you answer as well. I'll leave the question open for some time.

For anybody coming to this question recently, things have changed slightly and there is a different way to do this, which I find a bit easier. It is different because it uses a template reference and #ViewChild to access the component under test rather than fixture.debugElement.children[0].componentInstance. Also, the syntax has changed.
Let's say we have a select component that requires an option template to be passed in. And we want to test that our ngAfterContentInit method throws an error if that option template is not provided.
Here is a minimal version of that component:
#Component({
selector: 'my-select',
template: `
<div>
<ng-template
*ngFor="let option of options"
[ngTemplateOutlet]="optionTemplate"
[ngOutletContext]="{$implicit: option}">
</ng-template>
</div>
`
})
export class MySelectComponent<T> implements AfterContentInit {
#Input() options: T[];
#ContentChild('option') optionTemplate: TemplateRef<any>;
ngAfterContentInit() {
if (!this.optionTemplate) {
throw new Error('Missing option template!');
}
}
}
First, create a WrapperComponent which contains the component under test, like so:
#Component({
template: `
<my-select [options]="[1, 2, 3]">
<ng-template #option let-number>
<p>{{ number }}</p>
</ng-template>
</my-select>
`
})
class WrapperComponent {
#ViewChild(MySelectComponent) mySelect: MySelectComponent<number>;
}
Note the use of the #ViewChild decorator in the test component. That gives access to MySelectComponent by name as a property on the TestComponent class. Then in the test setup, declare both the TestComponent and the MySelectComponent.
describe('MySelectComponent', () => {
let component: MySelectComponent<number>;
let fixture: ComponentFixture<WrapperComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
/*
Declare both the TestComponent and the component you want to
test.
*/
declarations: [
TestComponent,
MySelectComponent
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WrapperComponent);
/*
Access the component you really want to test via the
ElementRef property on the WrapperComponent.
*/
component = fixture.componentInstance.mySelect;
});
/*
Then test the component as normal.
*/
describe('ngAfterContentInit', () => {
component.optionTemplate = undefined;
expect(() => component.ngAfterContentInit())
.toThrowError('Missing option template!');
});
});

#Component({
selector: 'test-cmp',
template: `<wizard>
<wizard-step [title]="'step1'"></wizard-step>
<wizard-step [title]="'step2'"></wizard-step>
<wizard-step [title]="'step3'"></wizard-step>
</wizard>`,
})
class TestWrapperComponent {
}
describe('Wizard Component', () => {
let component: WizardComponent;
let fixture: ComponentFixture<TestWrapperComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [SharedModule],
schemas: [NO_ERRORS_SCHEMA],
declarations: [TestWrapperComponent]
});
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestWrapperComponent);
component = fixture.debugElement.children[0].componentInstance;
fixture.detectChanges();
});
describe('Wizard component', () => {
it('Should create wizard', () => {
expect(component).toBeTruthy();
});
});
});

Related

Angular2 testing error when using templateUrl

I am writing some tests for my Angular2 application according to the documentation but I have run into a problem which I can't seem to fix. I get the following error when trying to launch the spec runner:
Failed: This test module uses the component CategoriesComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test.
I understand this is happening as I am using a seperate template file for the template within the component but I jhave tried multilpe solutions which don't seem to work.
Here is my component under test:
import { Component } from "#angular/core";
#Component({
selector: 'categories-component',
templateUrl: '/app/views/catalog/categories/categories-dashboard.html',
moduleId: module.id
})
export class CategoriesComponent {
title: 'Categories;
}
The categories-dashboard.html file:
<h1>{{ title }}</h1>
and my testing module for the component:
import {TestBed, ComponentFixture, ComponentFixtureAutoDetect, async} from "#angular/core/testing";
import { By} from "#angular/platform-browser";
import { CategoriesComponent } from "../../../../components/catalog/categories/CategoriesComponent";
import { DebugElement } from "#angular/core";
let comp: CategoriesComponent;
let fixture: ComponentFixture<CategoriesComponent>;
let de: DebugElement;
let el: HTMLElement;
describe('BannerComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CategoriesComponent ],
providers: [
{ provide: ComponentFixtureAutoDetect, useValue: true }
]
});
TestBed.compileComponents();
fixture = TestBed.createComponent(CategoriesComponent);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
}));
it('should display original title', () => {
expect(el.textContent).toContain(comp.title);
});
});
I have tried to implement TestBed.compileComponents() into into the component but wherever I put it it doesn't seem to work.
Can anyone see why this error is occurring or point me in the directoin of a solution?
Thanks!
compileComponents resolves asynchronously (as it makes an XHR for the template), so it returns a promise. You should handle anything requiring the resolution of the promise, inside of the then callback of the promise
TestBed.compileComponents().then(() =>{
fixture = TestBed.createComponent(CategoriesComponent);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});

Unit testing Angular 2 components inside a common library NPM Package no app context

I am kind of stumped on this. I have used the Angular 2 quick start projects as a reference for unit testing Angular 2 but it seems to assume you have an app in play. In my case we have NPM packages that have Angular 2 modules in them that are shared across various projects in our organization. I would like to be able to unit test the code inside these common libraries in isolation (without them being part of an app).
I am looking for examples or a tutorial or something explaining the best approach to this, Google has not provided any help.
Well I am doing in my Karma test something like:
Create a mock component
#Component({
template: "",
selector: 'mock'
})
export class MockComponent implements OnInit {
constructor() { }
ngOnInit() {
console.log("Is loaduing");
}
}
Create a mock service
class MockSomeService {
public subscribe(){}
public inizialize() {}
}
Create ROUTES array
export var ROUTES = [ {path:"/pathexample", component: MockComponent}]
Create DECLARATIONS array
export var DECLARATIONS:Component[] = [
MockComponent, ExampleComponent
];
Create PROVIDERS
const CONSTANTS_PROVIDERS: Provider[] = [
{ provide: SomeService, useClass: MockSomeService }
];
Write a test
describe('Component: example', () => {
beforeEach(() => {
TestBed.configureTestingModule({ declarations: DECLARATIONS, providers: CONSTANTS_PROVIDERS, imports: [RouterTestingModule.withRoutes(ROUTES)] });
});
it('should create an instance', inject([ExampleComponent], (component: ExampleComponent) => {
expect(component).toBeTruthy();
}));
});
If your component is using route.navigate you should use TestBed.overrideComponent and add template: '<router-outlet></router-outlet>' to your component if not have it yet and actually create the component like this TestBed.createComponent(ExampleComponent);

How to test Angular2's router.navigate?

I've run into missing <router-outlet> messages in other unit tests, but just to have a nice isolated example, I created an AuthGuard that checks if a user is logged in for certain actions.
This is the code:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (!this.authService.isLoggedIn()) {
this.router.navigate(['/login']);
return false;
}
return true;
}
Now I want to write a unit test for this.
This is how I start my test:
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([
{
path: 'login',
component: DummyComponent
}
])
],
declarations: [
DummyComponent
],
providers: [
AuthGuardService,
{
provide: AuthService,
useClass: MockAuthService
}
]
});
});
I created a DummyComponent that does nothing.
Now my test. Pretend that the service returns false and that it triggers this.router.navigate(['/login']):
it('should not let users pass when not logged in', (): void => {
expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
});
This will throw an exception with "Cannot find primary outlet to load".
Obviously I can use toThrow() instead of toBe(false), but that doesn't seem like a very sensible solution. Since I'm testing a service here, there is no template where I can put the <router-outlet> tag. I could mock the router and make my own navigate function, but then what's the point of RouterTestingModule? Perhaps you even want to check that navigation worked.
I could mock the router and make my own navigate function, but then what's the point of RouterTestingModule? Perhaps you even want to check that navigation worked.
There's no real point. If his is just a unit test for the auth guard, then just mock and spy on the mock to check that it's navigate method was called with the login argument
let router = {
navigate: jasmine.createSpy('navigate')
}
{ provide: Router, useValue: router }
expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
expect(router.navigate).toHaveBeenCalledWith(['/login']);
This is how unit tests should normally be written. To try to test any actual real navigation, that would probably fall under the umbrella of end-to-end testing.
If you want to test the router without mocking it you can just inject it into your test and then spy directly on the navigate method there. The .and.stub() will make it so the call doesn't do anything.
describe('something that navigates', () => {
it('should navigate', inject([Router], (router: Router) => {
spyOn(router, 'navigate').and.stub();
expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
expect(router.navigate).toHaveBeenCalledWith(['/login']);
}));
});
this worked for me
describe('navigateExample', () => {
it('navigate Example', () => {
const routerstub: Router = TestBed.get(Router);
spyOn(routerstub, 'navigate');
component.navigateExample();
});
});
it(`editTemplate() should navigate to template build module with query params`, inject(
[Router],
(router: Router) => {
let id = 25;
spyOn(router, "navigate").and.stub();
router.navigate(["/template-builder"], {
queryParams: { templateId: id }
});
expect(router.navigate).toHaveBeenCalledWith(["/template-builder"], {
queryParams: { templateId: id }
});
}
));
I came up with something like that:
describe('TestComponent', () => {
let component: TestComponent;
let router: Router;
let fixture: ComponentFixture<TestComponent>;
const routerSpy = jasmine.createSpyObj('Router', ['navigate']); // create a router spy
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
],
declarations: [TestComponent],
providers: [
{ provide: Router, useValue: routerSpy } // use routerSpy against Router
],
}).compileComponents();
}));
beforeEach(() => {
router = TestBed.inject(Router); // get instance of router
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it(`should navigate to 'home' page`, () => {
component.navigateToHome(); // call router.navigate
const spy = router.navigate as jasmine.Spy; // create the navigate spy
const navArgs = spy.calls.first().args[0]; // get the spy values
expect(navArgs[0]).toBe('/home');
});
});
Inspired with angular docs: https://angular.io/guide/testing-components-scenarios#routing-component
I am new to unit testing angular/javascript apps. I needed a way to mock (or spy) for my unit test. The following line is borrowed from Experimenter and helped me TREMENDOUSLY!
const routerSpy = jasmine.createSpyObj('Router', ['navigate']); // create a router spy
I would like to say that I had no idea I could do that with Jasmine. Using that line above, allowed me to then create a spy on that object and verify it was called with the correct route value.
This is a great way to do unit testing without the need to have the testbed and all the ceremony around getting the testing module setup. Its also great because it still allows me to have a fake router object with out the need to stub in all of the parameters, methods, etc etc etc.

Angular2 "Final" Unit Test Override Directive

I am using Angular 2 Final, and using the TestBed for Unit tests
I have an issue when when using "overrideDirective" it seems that the actual directive is being called, as I am getting an error "No provider for Config!" which MyDirective that was replaced is dependent on.
Component View
<div>
<input myDirective>
// some more logic etc...
</div>
Directive to Replace
#Directive({
selector: "myDirective"
})
class MyDirective{
constructor(
private config: Config
) {
}
}
Spec File
#Component({
template: "<my-component></my-component>"
})
class TestComponent{
}
#Directive({
selector: "fake"
})
class FakeDirective {
}
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
MyComponent,
MyDirective,
TestComponent,
FakeDirective
]
});
});
beforeEach(async(() => {
TestBed
.overrideDirective(MyDirective, FakeDirective)
.compileComponents();
fixture = TestBed.createComponent(TestComponent);
}));
Any one encountered the issue and managed to fix it please?
Thanks

Angular2 Testing Component with Provider dependency

I have a simple angular2 component as defined below. And I'm looking to create a unit testing with karma, jasmine to run through this component.
#Component({
selector: 'property',
template: require('./property.component.html'),
directives: [Panel],
providers: [ConfigService]});
export class PropertyComponent {
config:any;
constructor(config:ConfigService) {
this.config = config.getConfig();
}
}
This is my testing spec file.
describe('property component', () => {
it('should have property page title', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(PropertyComponent).then((fixture) => {
let propertyComp = fixture.componentInstance,
element = fixture.nativeElement;
expect(element.querySelector('h1').innerText).toBe('property page');
});
}));
})
However I got a list of weird errors... I'm guessing this is due to the ConfigService Provider in the PropertyComponent, because when I removed the provider dependency, it went through.
Does anyone know how to deal with the dependency Providers?
Thanks!
errors:
_instantiateProvider#angular2-seed/config/spec-bundle.js:23435:38
_new#angular2-seed/config/spec-bundle.js:23424:42
getObjByKeyId#angular2-seed/config/spec-bundle.js:22937:38
_getByKeyDefault#angular2-seed/config/spec-bundle.js:23641:51
_getByKey#angular2-seed/config/spec-bundle.js:23587:42
_getByDependency#angular2-seed/config/spec-bundle.js:23573:35
_instantiate#angular2-seed/config/spec-bundle.js:23463:53
_instantiateProvider#angular2-seed/config/spec-bundle.js:23435:38
_new#angular2-seed/config/spec-bundle.js:23424:42
instantiateProvider#angular2-seed/config/spec-bundle.js:22924:35
init#angular2-seed/config/spec-bundle.js:34694:44
AppElement#angular2-seed/config/spec-bundle.js:34371:33
viewFactory_HostPropertyComponent0
createRootHostView#angular2-seed/config/spec-bundle.js:35741:48
You need to use beforeEachProviders in this case:
import {beforeEachProviders, describe, it, expect} from 'angular2/testing';
//...other imports...
describe('property component', () => {
beforeEachProviders(()=> [
ConfigService, //if you don't need to mock
provide(ConfigService, {useClass:MockConfigService}) // more typical
]);
it('should have property page title', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(PropertyComponent).then((fixture) => {
//expectations...
});
}));
})
Note that you need to import angular's patched describe, it, expect functions along with beforeEachProvidersfrom angular2/testing. I emphasize this because it's easy to forget to do that, and it results in failures with rather unintuitive messages.