• [Angular] Testing @Input and @Output bindings


    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 @Input & @Output:

    import {ComponentFixture, TestBed} from '@angular/core/testing';
    import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
    
    import {StockCounterComponent} from './stock-counter.component';
    
    TestBed.initTestEnvironment(
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting()
    );
    
    describe('StockCounterComponent', () => {
    
      let component: StockCounterComponent;
      let fixture: ComponentFixture<StockCounterComponent>;
    
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [
            StockCounterComponent
          ]
        });
    
        fixture = TestBed.createComponent(StockCounterComponent);
        component = fixture.componentInstance;
    
        component.value = 0;
      });
    
      it('should not increase over the max value', () => {
        component.step = 20;
        component.max = 20;
        component.increment();
        component.increment();
        expect(component.value).toEqual(20);
      });
    
      it('should not decrease below the min value', () => {
        component.step = 20;
        component.min = 0;
        component.value = 20;
        component.decrement();
        expect(component.value).toEqual(0);
        component.decrement();
        expect(component.value).toEqual(0);
      });
    
      it('should call the output on a value change', () => {
        spyOn(component.changed, 'emit').and.callThrough();
        component.step = 10;
        component.increment();
        expect(component.changed.emit).toHaveBeenCalledWith(10)
      });
    });
  • 相关阅读:
    Mysql主键索引、唯一索引、普通索引、全文索引、组合索引的区别
    centos7下安装phpmyadmin
    centos7下apache启动报错记录
    Centos7 升级php版本到php7
    centos7下安装composer和git
    git推送新项目到github
    git使用入门
    laravel5.5学习2-路由系统
    laravel5.5入门-安装和认证
    laravel的monolog使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6815579.html
Copyright © 2020-2023  润新知