I am creating my unit tests with Jasmine and I have a question about the branch covered.
Does anyone know why the code part shows that the branches are not covered as we can see below?
This is the unit test:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let myService: MyService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyComponent ],
imports: [ MaterializeModule, FormsModule, ReactiveFormsModule, HttpModule ],
providers: [
MyService,
FormBuilder
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
slotsService = TestBed.get(MyService);
fixture.detectChanges();
});
function updateForm(name, surname) {
component.myForm.controls['name'].setValue(name);
component.myForm.controls['surname'].setValue(name);
}
it('should create', () => {
expect(component).toBeTruthy();
});
}
I've had the same issue for months from the moment I upgraded my projects to angular 4. Unfortunately it is a bug with the angular-cli version 1 and angular 4.
This bug is already logged in the angular-cli project: Test-coverage says that coverage is not 100%, but it truly is! #5871. Unfortunately at the moment, this issue is still open.
This is a snapshot from that logged issue, which matches the one you are asking about:
If you are facing this problem and , nevertheless, want to reach 100% branch coverage, there is at least a workaround available (see https://github.com/angular/angular-cli/issues/5526#issuecomment-324429322).
Simply add /* istanbul ignore next */ after the class export (without any line breaks):
export class InternalComponent {
constructor(private authService: any) {
}
} /* istanbul ignore next */
For Angular 2+ projects, this is now fixed if you upgrade to Angular CLI 1.5.
GitHub post:
https://github.com/angular/angular-cli/issues/5526
Ensure that you don't have any unused imported member in your component.
I was facing the same and I have removed the unused import and it's started working for me.
Related
I am currently working on an Ionic (v3) app and we have several tests to test services, pages and components.
Everything was working fine until I added a new test for a component.
Both tests run fine individually (if started with fdescribe, or if I comment one of them out).
The tests look like this:
verify-key.spec.ts
describe('Component: VerifyKey', () => {
let component: VerifyKeyComponent
let fixture: ComponentFixture<VerifyKeyComponent>
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [VerifyKeyComponent],
imports: [
IonicModule.forRoot(VerifyKeyComponent)
]
})
// create component and test fixture
fixture = TestBed.createComponent(VerifyKeyComponent)
// get test component from the fixture
component = fixture.componentInstance
})
...
})
wallet-select-coins.spec.ts
describe('Wallet-Select-Coin Component', () => {
let fixture: ComponentFixture<WalletSelectCoinsPage>
let component: WalletSelectCoinsPage
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [WalletSelectCoinsPage],
imports: [
IonicModule.forRoot(WalletSelectCoinsPage),
ComponentsModule,
IonicStorageModule.forRoot({
name: '__airgap_storage',
driverOrder: ['localstorage']
})
],
providers: [
SecretsProvider,
{
provide: SecureStorageService,
useFactory: SecureStorageFactory,
deps: [Platform]
},
{ provide: NavController, useClass: NavControllerMock },
{ provide: NavParams, useClass: NavParamsMock },
{ provide: StatusBar, useClass: StatusBarMock },
{ provide: SplashScreen, useClass: SplashScreenMock },
{ provide: Platform, useClass: PlatformMock }
]
})
}))
beforeEach(() => {
fixture = TestBed.createComponent(WalletSelectCoinsPage)
component = fixture.componentInstance
fixture.detectChanges()
})
it('should not show hd-wallet dropdown if currency does not support it', () => {
let el = fixture.debugElement.nativeElement
let ethereumRadio = el.querySelector('#eth')
// click on ethereum
ethereumRadio.click()
fixture.detectChanges()
console.log(component.selectedProtocol)
expect(component.selectedProtocol).toBeDefined() // This fails
expect(component.selectedProtocol.identifier).toEqual('eth')
// eth should not show hd wallets
let hdWalletSelector = el.querySelector('#wallet-type-selector')
expect(hdWalletSelector).toBeFalsy()
})
})
If both tests are enabled, the second one fails at the line expect(component.selectedProtocol).toBeDefined() with the error Expected undefined to be defined.
If I comment out the line fixture = TestBed.createComponent(VerifyKeyComponent) from the first file, then the second test runs without any issues.
My first idea was that the TestBed somehow gets modified in the first test. So I tried adding TestBed.resetTestingModule() after the first test, but that didn't change anything.
Any help would be greatly appreciated.
When writing tests its best practice to clean up everything after every test so that all test can run in random order without effecting any other test.
I would suggest to introduce a afterEach() or afterAll() in every test which clears any data which is produced. Because most test environments run all tests in the same context.
And why would you like that your TestBed.configureTestingModule to be created async()? Your test will run but the async part will probably never get called before the it(..
Hope these ideas will help :)
I have just started with Unit-Testing, and I have been able to mock my own services and some of Angular and Ionic as well, but no matter what I do ChangeDetectorRef stays the same.
I mean which kind of sorcery is this?
beforeEach(async(() =>
TestBed.configureTestingModule({
declarations: [MyComponent],
providers: [
Form, DomController, ToastController, AlertController,
PopoverController,
{provide: Platform, useClass: PlatformMock},
{
provide: NavParams,
useValue: new NavParams({data: new PageData().Data})
},
{provide: ChangeDetectorRef, useClass: ChangeDetectorRefMock}
],
imports: [
FormsModule,
ReactiveFormsModule,
IonicModule
],
})
.overrideComponent(MyComponent, {
set: {
providers: [
{provide: ChangeDetectorRef, useClass: ChangeDetectorRefMock},
],
viewProviders: [
{provide: ChangeDetectorRef, useClass: ChangeDetectorRefMock},
]
}
})
.compileComponents()
.then(() => {
let fixture = TestBed.createComponent(MyComponent);
let cmp = fixture.debugElement.componentInstance;
let cdRef = fixture.debugElement.injector.get(ChangeDetectorRef);
console.log(cdRef); // logs ChangeDetectorRefMock
console.log(cmp.cdRef); // logs ChangeDetectorRef , why ??
})
));
it('fails no matter what', async(() => {
spyOn(cdRef, 'markForCheck');
spyOn(cmp.cdRef, 'markForCheck');
cmp.ngOnInit();
expect(cdRef.markForCheck).toHaveBeenCalled(); // fail, why ??
expect(cmp.cdRef.markForCheck).toHaveBeenCalled(); // success
console.log(cdRef); // logs ChangeDetectorRefMock
console.log(cmp.cdRef); // logs ChangeDetectorRef , why ??
}));
#Component({
...
})
export class MyComponent {
constructor(private cdRef: ChangeDetectorRef){}
ngOnInit() {
// do something
this.cdRef.markForCheck();
}
}
I have tried everything , async, fakeAsync, injector([ChangeDetectorRef], () => {}).
Nothing works.
Update 2020:
I wrote this originally in May 2017, it's a solution that worked great at the time and still works.
We can't configure the injection of a changeDetectorRef mock through the test bed, so this is what I am doing these days:
it('detects changes', () => {
// This is a unique instance here, brand new
const changeDetectorRef = fixture.debugElement.injector.get(ChangeDetectorRef);
// So, I am spying directly on the prototype.
const detectChangesSpy = spyOn(changeDetectorRef.constructor.prototype, 'detectChanges');
component.someMethod(); // Which internally calls the detectChanges.
expect(detectChangesSpy).toHaveBeenCalled();
});
Then you don't care about private attributes or any.
In case anyone runs into this, this is one way that has worked well for me:
As you are injecting the ChangeDetectorRef instance in your constructor:
constructor(private cdRef: ChangeDetectorRef) { }
You have that cdRef as one of the private attributes on the component, which means you can spy on the component, stub that attribute and have it return whatever you want. Also, you can assert its calls and parameters, as needed.
In your spec file, call your TestBed without providing the ChangeDetectorRef as it won't provide what you give it. Set the component that same beforeEach block, so it is reset between specs as it is done in the docs here:
component = fixture.componentInstance;
Then in the tests, spy directly on the attribute
describe('someMethod()', () => {
it('calls detect changes', () => {
const spy = spyOn((component as any).cdRef, 'detectChanges');
component.someMethod();
expect(spy).toHaveBeenCalled();
});
});
With the spy you can use .and.returnValue() and have it return whatever you need.
Notice that (component as any) is used as cdRef is a private attribute. But private doesn't exist in the actual compiled javascript so it is accessible.
It is up to you if you want to access private attributes at runtime that way for your tests.
Not sure if this a new thing or not, but changeDetectorRef can be accessed via fixture.
See docs: https://angular.io/guide/testing#componentfixture-properties
We ran into the same issue with change detector mocking and this is ended up being the solution
Probably one point that needs to be pointed out, is that in essence here you want to test your own code, not unit test the change detector itself (which was tested by the Angular team).
In my opinion this is a good indicator that you should extract the call to the change detector to a local private method (private as it is something you don't want to unit test), e.g.
private detectChanges(): void {
this.cdRef.detectChanges();
}
Then, in your unit test, you will want to verify that your code actually called this function, and thus called the method from the ChangeDetectorRef. For example:
it('should call the change detector',
() => {
const spyCDR = spyOn((cmp as any).cdRef, 'detectChanges' as any);
cmp.ngOnInit();
expect(spyCDR).toHaveBeenCalled();
}
);
I had the exact same situation, and this was suggested to me as a general best practice for unit testing from a senior dev who told me that unit testing is actually forcing you by this pattern to structure your code better. With the proposed restructuring, you make sure your code is flexible to change, e.g. if Angular changes the way they provide us with change detection, then you will only have to adapt the detectChanges method.
For unit testing, if you are mocking ChangeDetectorRef just to satisfy dependency injection for a component to be creation, you can pass in any value.
For my case, I did this:
TestBed.configureTestingModule({
providers: [
FormBuilder,
MyComponent,
{ provide: ChangeDetectorRef, useValue: {} }
]
}).compileComponents()
injector = getTestBed()
myComponent = injector.get(MyComponent)
It will create myComponent successfully. Just make sure test execution path does not need ChangeDetectorRef. If you do, then replace useValue: {} with a proper mock object.
In my case, I just needed to test some form creation stuff using FormBuilder.
// component
constructor(private changeDetectorRef: ChangeDetectorRef) {}
public someHandler() {
this.changeDetectorRef.detectChanges();
}
// spec
const changeDetectorRef = fixture.componentRef.changeDetectorRef;
jest.spyOn(changeDetectorRef, 'detectChanges');
fixture.detectChanges(); // <--- needed!!
component.someHandler();
expect(changeDetectorRef.detectChanges).toHaveBeenCalled();
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);
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.
Got a couple of problems with my unit testing with Jasmine. First one:
I need to test this in a Component called CaseList:
gotoDetail(case: Case){
this._router.navigate(['CaseDetail', {"id": case.id}]);
}
All my attempts at the tests give the error is this._router is undefined, well that's because I haven't defined it in my test, as I can't figure out how! I haven't even come up with any good attempts at the tests, as I have no idea how to proceed. So that's why I haven't posted any attempt here...
Edit: The part in the router-test which is related to to the problem above, but I test all the routing in a separate file! This test works!
it('Should navigate to Case Detail List', (done) => {
router.navigate(['CaseDetail', {id: 'test'}]).then(() => {
expect(location.path()).toEqual('/casedetail/test');
done();
}).catch(e => done.fail(e));
});
Second tests from a Detail Component (where user is navigated after choosing case) :
addStep(){
this.case.getSteps().push(new Step());
}
I also have a remove method I need to test:
removeStep(step: Step){
this.case.removeStep(step);
}
Constructor for this component:
constructor(public _routeParams: RouteParams, public _service: Service) {
this.case = _service.getById(_routeParams.get('id'));
}
So the test I tried doing for the add-method:
it('passes new step to case-class', () => {
spyOn(case, 'addStep')
.and.returnValue(Observable.of({complete: true}))
caseDetail.addStep();
expect(case.addStep).toHaveBeenCalledWith(step);
});
So these methods call the methods that are in a separate class called "Case".
The error I'm getting when testing these are that case is null. I guess the routing and service messes it up, as in the same Component I have a other "identical" methods, and testing those works fine. But they belong to a different class.
Method in same component, referring to a "Step"-class:
addFeedback(step: Step){
step.addFeedback(new Feedback());
}
The testing works perfectly:
it('passes feedback value to Step class', () => {
spyOn(step, 'addFeedback')
.and.returnValue(Observable.of({complete: true}))
caseDetail.addFeedback(step);
expect(step.addFeedback).toHaveBeenCalledWith(feedback);
})
So obviously in testing the component I should have everything defined that is needed, since the testing of the feedback method works. I just need to define the "case" object somehow, so that it doesn't complain about it being null.
Well hopefully you get my problem at hand and hopefully you can help! :)
For your test cases to work, you will have to add router and case as a provider before the test.
Routing Example:
import {RootRouter} from 'angular2/src/router/router';
import {Location, RouteParams, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';
import {SpyLocation} from 'angular2/src/mock/location_mock';
import {provide} from 'angular2/core';
describe('Router', () => {
let location, router;
beforeEachProviders(() => [
RouteRegistry,
provide(Location, {useClass: SpyLocation}),
provide(Router, {useClass: RootRouter}),
provide(ROUTER_PRIMARY_COMPONENT, {useValue: App}),
]);
beforeEach(inject([Router, Location], (_router, _location) => {
router = _router;
location = _location;
}));
it('Should be able to navigate to Home', done => {
router.navigate(['Index']).then(() => {
expect(location.path()).toBe('');
done();
}).catch(e => done.fail(e));
});
});
Case Provider:
import {Case} from '../case';
beforeEachProviders(() => [
provide(case, Case)
]);