• [Angular Unit Testing] Testing Component methods


    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 increment correctly', () => {
        component.increment()
        expect(component.value).toBe(1);
      });
    
      it('should decrement correctly', () => {
        component.increment()
        expect(component.value).toBe(1);
        component.decrement()
        expect(component.value).toBe(0);
      });
    
      it('should not decrement below the minimum value', () => {
        component.increment()
        expect(component.value).toBe(1);
        component.decrement()
        expect(component.value).toBe(0);
        component.decrement()
        expect(component.value).toBe(0);
      });
    
      it('should not increment below the maximum value', () => {
        for (let i = 0; i < 200; i++) {
          component.increment();
        }
        expect(component.value).toBe(100);
      });
    });

    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();
      }
    
    }
  • 相关阅读:
    C#调用WinAPI(转)
    C++升级到C#,内存数据读取问题
    锦里未成行
    创业用人九招成功法则
    彩霞满天
    特别提醒: 7种不良习惯直接影响你晋升!
    生意大展示:49种简易创业方法大比拼
    阴阳天
    受益无穷的28条职场语录
    哈佛:创业者需具备的素质及培养方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6801976.html
Copyright © 2020-2023  润新知