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 =http://www.mamicode.com/== max">              +            </button>            <button type="button" tabindex="-1" (click)="decrement()" [disabled]="value =http://www.mamicode.com/== 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 = http://www.mamicode.com/this.value - this.step;>

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‘);  });});