Created
March 21, 2020 14:18
-
-
Save achimoraites/fc2099ea3e4b244375ea462e60fe9290 to your computer and use it in GitHub Desktop.
Advanced Angular Testing with Jasmine
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
import { HistoryComponent } from './history.component'; | |
fdescribe('HistoryComponent', () => { | |
let component: HistoryComponent; | |
let fixture: ComponentFixture<HistoryComponent>; | |
beforeEach(async(() => { | |
TestBed.configureTestingModule({ | |
declarations: [ HistoryComponent ] | |
}) | |
.compileComponents(); | |
})); | |
beforeEach(() => { | |
fixture = TestBed.createComponent(HistoryComponent); | |
component = fixture.componentInstance; | |
fixture.detectChanges(); | |
}); | |
it('should execute "goBack" as expected when history === 1', () => { | |
// spy on console.log() | |
spyOn(console, 'log'); | |
// here we mock the history length to be 1 | |
spyOnProperty(window.history, 'length', 'get').and.returnValue(1); | |
component.goBack(); | |
expect(console.log).toHaveBeenCalledWith('length 1'); | |
}); | |
it('should execute "goBack" as expected when history > 1', () => { | |
// spy on window.history.back() | |
spyOn(window.history, 'back'); | |
// here we mock the history length to be 2 | |
spyOnProperty(window.history, 'length', 'get').and.returnValue(2); | |
component.goBack(); | |
expect(window.history.back).toHaveBeenCalled(); | |
}); | |
it('should execute "saveFile" as expected on IE', () => { | |
// create a mock navigator | |
const mockNavigator = jasmine.createSpyObj(['msSaveOrOpenBlob']); | |
// here we use the mockNavigator to simulate IE | |
spyOnProperty(window, 'navigator', 'get').and.returnValue(mockNavigator); | |
component.saveFile(); | |
// verify that method has been called :) | |
expect(mockNavigator.msSaveOrOpenBlob).toHaveBeenCalled(); | |
}); | |
it('should execute "saveFile" as expected on browsers other than IE', () => { | |
// spy on console.log() | |
spyOn(console, 'log'); | |
// create a mock navigator | |
const mockNavigator = jasmine.createSpyObj(['']); | |
// here we use the mockNavigator to simulate behavior | |
spyOnProperty(window, 'navigator', 'get').and.returnValue(mockNavigator); | |
component.saveFile(); | |
// verify that method has been called :) | |
expect(console.log).toHaveBeenCalledWith('custom handling'); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// history.component.ts | |
import { Component, OnInit } from '@angular/core'; | |
@Component({ | |
selector: 'app-history', | |
templateUrl: './history.component.html', | |
styleUrls: ['./history.component.css'] | |
}) | |
export class HistoryComponent implements OnInit { | |
constructor() { } | |
ngOnInit() { | |
} | |
goBack() { | |
if (window.history.length === 1) { | |
console.log('length 1'); | |
} else { | |
window.history.back(); | |
} | |
} | |
saveFile() { | |
const blob = new Blob([''], { | |
type: 'text/html' | |
}); | |
// IE | |
if (window.navigator && window.navigator.msSaveOrOpenBlob) { | |
window.navigator.msSaveOrOpenBlob(blob, 'file.txt'); | |
} else { | |
console.log('custom handling'); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment