[Angular] Testing @Input and @Output bindings

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

}

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