angular2-testing | 易学教程

Angular 2 and jQuery - how to test?

阅读更多关于 Angular 2 and jQuery - how to test?

I am using Angular-CLI (webpack version) for my Angular 2 project and I also need to use jQuery (sadly. In my case, it's a dependency of Semantic-UI and I am using it for handling menu dropdowns). The way I am using it: npm install jquery --save Then listing in it angular-cli.json file in the scripts array: scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] So it gets included into bundle file and this file is automatically used to root html file: <script type="text/javascript" src="scripts.bundle.js"> Then declare var $: any; in files where I need it and it works well. However there is

The pipe 'translate' could not be found , angular2 component testing

阅读更多关于 The pipe 'translate' could not be found , angular2 component testing

问题 I am working on component testing with angular2. in my html template i use the translate pipe. This is the code of the test : import { ComponentFixture, TestBed ,getTestBed} from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { RightComponent } from './right.component'; import {TranslateService} from 'ng2-translate/ng2-translate'; import {Injector} from "@angular/core"; let comp: RightComponent; let fixture:

Angular2 Component: Testing form input value change

阅读更多关于 Angular2 Component: Testing form input value change

I have a text input and i'm listening for the changes. mycomponent.ts ngOnInit() { this.searchInput = new Control(); this.searchInput.valueChanges .distinctUntilChanged() .subscribe(newValue => this.search(newValue)) } search(query) { // do something to search } mycomponent.html <search-box> <input type="text" [ngFormControl]="searchInput" > </search-box> Running the application everything works fine, but i want to unit-test it. So here's what i tried mycomponent.spec.ts beforeEach(done => { createComponent().then(fix => { cmpFixture = fix mockResponse() instance = cmpFixture.componentInstance

Angular 2 - test for change in route params

阅读更多关于 Angular 2 - test for change in route params

问题 I have a component in angular 2 which responds to changes in the route parameters (the component doesn't reload from scratch because we're not moving out of the main route. Here's the component code: export class MyComponent{ ngOnInit() { this._routeInfo.params.forEach((params: Params) => { if (params['area']){ this._pageToShow =params['area']; } }); } } This works a treat and _pageToShow is set appropriate on navigation. I'm trying to test the behaviour on a change to the route (so a second

How to unit test a FormControl in Angular2

阅读更多关于 How to unit test a FormControl in Angular2

My method under test is the following: /** * Update properties when the applicant changes the payment term value. * @return {Mixed} - Either an Array where the first index is a boolean indicating * that selectedPaymentTerm was set, and the second index indicates whether * displayProductValues was called. Or a plain boolean indicating that there was an * error. */ onPaymentTermChange() { this.paymentTerm.valueChanges.subscribe( (value) => { this.selectedPaymentTerm = value; let returnValue = []; returnValue.push(true); if (this.paymentFrequencyAndRebate) { returnValue.push(true); this

Cannot read property 'subscribe' of undefined after running npm test (Angular 2 unit testing)

阅读更多关于 Cannot read property 'subscribe' of undefined after running npm test (Angular 2 unit testing)

问题 I've created a testing (spec) file for a component I'm testing. But when I run the test, it gives me an error saying Cannot read property 'subscribe' of undefined TypeError: Cannot read property 'subscribe' of undefined at ComponentUndertest.ngOnInit which is obvious because I have subscribed to something in my ngOnInit() method, but can I ignore the subscription during the test? Or can I fake a subscription during testing? I have googled a lot about this issue but couldn't find anything

Angular unit test input value

阅读更多关于 Angular unit test input value

问题 I have been reading official Angular2 documentation for unit testing (https://angular.io/docs/ts/latest/guide/testing.html) but I am struggling with setting a component's input field value so that its reflected in the component property (bound via ngModel). The screen works fine in the browser, but in the unit test I cannot seem to be able to set the fields value. I am using below code. "fixture" is properly initialized as other tests are working fine. "comp" is instance of my component, and

How to test Angular2's router.navigate?

阅读更多关于 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

How to mock Pipe when testing Component

阅读更多关于 How to mock Pipe when testing Component

Currently I am overriding providers to use mocked services like this: beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { tcb.overrideProviders(AddFieldToObjectDropdownComponent, [ provide(ServiceA, { useClass: MockServiceA })), provide(ServiceB, { useClass: MockServiceB })) ])... I want to do same thing for pipes that the component uses. I tried, provide(PipeA, { useClass: MockPipeA }) and provide(PipeA, { useValue: new MockPipeA() }) but both didn't work. You can add your mockpipes in the declarations of the TestBed : TestBed.configureTestingModule({ declarations: [

Angular 2 - test for change in route params

阅读更多关于 Angular 2 - test for change in route params

I have a component in angular 2 which responds to changes in the route parameters (the component doesn't reload from scratch because we're not moving out of the main route. Here's the component code: export class MyComponent{ ngOnInit() { this._routeInfo.params.forEach((params: Params) => { if (params['area']){ this._pageToShow =params['area']; } }); } } This works a treat and _pageToShow is set appropriate on navigation. I'm trying to test the behaviour on a change to the route (so a second trigger of the observable but it's refusing to work for me.) Here's my attempt: it('sets PageToShow to