标签:increase any before tin inpu res inittest dynamic mit
Component:
import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from ‘@angular/core‘; @Component({ selector: ‘stock-counter‘, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="stock-counter"> <div> <div (keydown)="onKeyUp($event)" (blur)="onBlur($event)" (focus)="onFocus($event)" tabindex="0"> <p>{{ value }}</p> <div tabindex="-1"> <button type="button" tabindex="-1" (click)="increment()" [disabled]="value === max"> + </button> <button type="button" tabindex="-1" (click)="decrement()" [disabled]="value === min"> - </button> </div> </div> </div> </div> ` }) export class StockCounterComponent { @Input() step: number = 1; @Input() min: number = 0; @Input() max: number = 100; @Output() changed = new EventEmitter<number>(); value: number = 0; focused: boolean; increment() { if (this.value < this.max) { this.value = this.value + this.step; this.changed.emit(this.value); } } decrement() { if (this.value > this.min) { this.value = this.value - this.step; this.changed.emit(this.value); } } private onBlur(event: FocusEvent) { this.focused = false; event.preventDefault(); event.stopPropagation(); } private onKeyUp(event: KeyboardEvent) { let handlers = { ArrowDown: () => this.decrement(), ArrowUp: () => this.increment() }; if (handlers[event.code]) { handlers[event.code](); event.preventDefault(); event.stopPropagation(); } } private onFocus(event: FocusEvent) { this.focused = true; event.preventDefault(); event.stopPropagation(); } }
Test:
import { ComponentFixture, TestBed } from ‘@angular/core/testing‘; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from ‘@angular/platform-browser-dynamic/testing‘; import { DebugElement } from ‘@angular/core‘; import { StockCounterComponent } from ‘./stock-counter.component‘; import { By } from ‘@angular/platform-browser‘; TestBed.initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); describe(‘StockCounterComponent‘, () => { let component: StockCounterComponent; let fixture: ComponentFixture<StockCounterComponent>; let el: DebugElement; beforeEach(() => { TestBed.configureTestingModule({ declarations: [StockCounterComponent] }); fixture = TestBed.createComponent(StockCounterComponent); component = fixture.componentInstance; el = fixture.debugElement; component.value = 0; }); it(‘should increase the value when + button is clicked‘, () => { el.query(By.css(‘button:first-child‘)).triggerEventHandler(‘click‘, null); expect(component.value).toBe(1); el.query(By.css(‘button:first-child‘)).triggerEventHandler(‘click‘, null); fixture.detectChanges(); expect(component.value).toBe(2); expect(el.query(By.css(‘p‘)).nativeElement.textContent).toBe(‘2‘); }); it(‘should decrease the value when - button is clicked‘, () => { component.value = 2; fixture.detectChanges(); el.query(By.css(‘button:last-child‘)).triggerEventHandler(‘click‘, null); fixture.detectChanges(); expect(component.value).toBe(1); expect(el.query(By.css(‘p‘)).nativeElement.textContent).toBe(‘1‘); }); it(‘should show the right value in p tag when the arrow up key is pressed‘, () => { const event = new Event(‘KeyboardEvent‘) as any; event.code = "ArrowUp"; el.query(By.css(‘.stock-counter > div > div‘)).triggerEventHandler(‘keydown‘, event); fixture.detectChanges(); expect(component.value).toBe(1); expect(el.query(By.css(‘p‘)).nativeElement.textContent).toBe(‘1‘); }); });
[Angular] Test component template
标签:increase any before tin inpu res inittest dynamic mit
原文地址:http://www.cnblogs.com/Answer1215/p/6833285.html