• [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();
      }
    
    }
  • 相关阅读:
    YARN 多租户资源池配置
    HDFS NameNode HA 部署文档
    MySQL 触发器示例
    Apache ZooKeeper 单机、集群部署文档
    Apache Flume 安装文档、日志收集
    IBM X3650 M4 主板故障
    Apache Hive 安装文档
    Apache Hadoop 集群安装文档
    Cloudera Manger CDH 安装文档
    VMware 克隆网卡无法启动
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6801976.html
Copyright © 2020-2023  润新知