Last active
April 20, 2018 16:04
-
-
Save allenhwkim/42b7388efa9e80a02d8b115aa5d2e2d7 to your computer and use it in GitHub Desktop.
Angular5+ Jest Unit Text examples
This file contains hidden or 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, TestBed } from '@angular/core/testing'; | |
| import { NO_ERRORS_SCHEMA } from '@angular/core'; | |
| // do not import any other than you test. For others, mock it | |
| import { AppComponent } from './app.component'; | |
| import { MockComponent } from '../../test/jest-setup'; | |
| describe('AppComponent', () => { | |
| var fixture, component; | |
| beforeEach(async(() => { | |
| TestBed.configureTestingModule({ | |
| declarations: [ | |
| AppComponent, | |
| MockComponent('my-component-1'), | |
| MockComponent('my-component-2') | |
| ] | |
| // schemas: [NO_ERRORS_SCHEMA] | |
| }).compileComponents(); | |
| fixture = TestBed.createComponent(AppComponent); | |
| component = fixture.debugElement.componentInstance; | |
| })); | |
| it('should create the app', async(() => { | |
| expect(component).toBeTruthy(); | |
| expect(copmponent.title).toEqual('app'); | |
| fixture.detectChanges(); | |
| const compiled = fixture.debugElement.nativeElement; | |
| expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); | |
| })); | |
| }); |
This file contains hidden or 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 { Component, NO_ERRORS_SCHEMA } from '@angular/core'; | |
| // do not import any other than you test. For others, mock it | |
| import { NguiInviewDirective } from './ngui-inview.directive'; | |
| // Ref. https://codecraft.tv/courses/angular/unit-testing/directives/ | |
| @Component({ | |
| template: ` | |
| <div (nguiInview)="a($event)" (nguiOutview)="b($event)">` | |
| }) | |
| class TestComponent { | |
| a(entry): void {/* */} | |
| b(entry): void {/* */} | |
| } | |
| describe('NguiInviewDirective Test', () => { | |
| let fixture: ComponentFixture<TestComponent>; | |
| let component: TestComponent; | |
| beforeEach(async(() => { | |
| TestBed.configureTestingModule({ | |
| declarations: [ NguiInviewDirective, TestComponent ] | |
| // schemas: [NO_ERRORS_SCHEMA] | |
| }).compileComponents(); | |
| fixture = TestBed.createComponent(TestComponent); | |
| component = fixture.componentInstance; | |
| })); | |
| it("should test", async(() => { | |
| expect(component).toBeTruthy(); | |
| fixture.detectChanges(); | |
| const compiled = fixture.debugElement.nativeElement; | |
| expect(compiled.querySelector('p').textContent).toContain('Module Two'); | |
| })); | |
| }); |
This file contains hidden or 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
| /** | |
| * Jest initial setup actions | |
| * | |
| * It also enables the following to all Jest tests | |
| * . window.localStorage | |
| * . window.sessionStorage | |
| * . window.getComputedStyle | |
| * . document.doctype | |
| * . document.body.style.transform | |
| * . MockPipe() | |
| * . MockComponent() | |
| * . MockDirective() | |
| */ | |
| import 'jest-preset-angular'; | |
| // common rxjs imports | |
| import 'rxjs/add/operator/map'; | |
| import 'rxjs/add/operator/switchMap'; | |
| import 'rxjs/add/operator/do'; | |
| import 'rxjs/add/operator/catch'; | |
| // ... | |
| import { Component, Directive, EventEmitter, Pipe, PipeTransform, Type } from '@angular/core'; | |
| Error.stackTraceLimit = 2; | |
| global['CSS'] = undefined; | |
| const mock = () => { | |
| let storage = {}; | |
| return { | |
| getItem: key => key in storage ? storage[key] : undefined, | |
| setItem: (key, value) => storage[key] = value || '', | |
| removeItem: key => delete storage[key], | |
| clear: () => storage = {} | |
| }; | |
| }; | |
| Object.defineProperty(window, 'localStorage', {value: mock()}); | |
| Object.defineProperty(window, 'sessionStorage', {value: mock()}); | |
| Object.defineProperty(document, 'doctype', { | |
| value: '<!DOCTYPE html>' | |
| }); | |
| Object.defineProperty(window, 'getComputedStyle', { | |
| value: () => { | |
| return { | |
| display: 'none', | |
| appearance: ['-webkit-appearance'] | |
| }; | |
| } | |
| }); | |
| /** | |
| * ISSUE: https://github.com/angular/material2/issues/7101 | |
| * Workaround for JSDOM missing transform property | |
| */ | |
| Object.defineProperty(document.body.style, 'transform', { | |
| value: () => { | |
| return { | |
| enumerable: true, | |
| configurable: true | |
| }; | |
| } | |
| }); | |
| /** | |
| * Examples: | |
| * MockPipe('some-pipe'); | |
| * MockPipe('some-pipe', () => 'foo'); | |
| */ | |
| export function MockPipe(name: string, transform?: any): Pipe { | |
| class Mock implements PipeTransform { | |
| transform = transform || (() => undefined); | |
| } | |
| return Pipe({name})(Mock as any); | |
| } | |
| /** | |
| * Examples: | |
| * MockComponent({selector: 'some-component'}); | |
| * MockComponent({selector: 'some-component', inputs: ['some-input', 'some-other-input']}); | |
| */ | |
| export function MockComponent(selector: string, options: Component = {}): Component { | |
| const metadata: Component = { | |
| selector, | |
| template: options.template || '', | |
| inputs: options.inputs || [], | |
| outputs: options.outputs || [], | |
| exportAs: options.exportAs || '' | |
| }; | |
| class Mock { | |
| constructor() { | |
| metadata.outputs.forEach(method => { | |
| this[method] = new EventEmitter<any>(); | |
| }); | |
| } | |
| } | |
| return Component(metadata)(Mock as any); | |
| } | |
| /** | |
| * Examples: | |
| * MockDirective({selector: '[some-directive]'}); | |
| * MockDirective({selector: '[some-directive]', inputs: ['some-input', 'some-other-input']}); | |
| */ | |
| export function MockDirective(selector: string, options: Directive = {}): Directive { | |
| const metadata: Directive = { | |
| selector, | |
| inputs: options.inputs || [], | |
| outputs: options.outputs || [], | |
| providers: options.providers || [], | |
| exportAs: options.exportAs || '' | |
| }; | |
| class Mock { | |
| constructor() { | |
| metadata.outputs.forEach(method => { | |
| this[method] = new EventEmitter<any>(); | |
| }); | |
| } | |
| } | |
| return Directive(metadata)(Mock as any); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment