1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import { Component, ViewChild } from '@angular/core';
import { async, TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebounceClickDirective } from './debounce-click.directive';
interface TestComponent {
clickHandler: () => void;
}
@Component({
selector: 'app-default-test',
template: '<button (appDebounceClick)="clickHandler()"></button>'
})
class DefaultDebounceTimeTestComponent {
@ViewChild(DebounceClickDirective) directive!: DebounceClickDirective;
clickHandler: () => void = () => { };
}
@Component({
selector: 'app-default-test',
template: '<button (appDebounceClick)="clickHandler()" [appDebounceClickTime]="debounceTime"></button>'
})
class CustomDebounceTimeTestComponent {
debounceTime: number | undefined;
@ViewChild(DebounceClickDirective) directive!: DebounceClickDirective;
clickHandler: () => void = () => { };
}
describe('DebounceClickDirective', () => {
let counter: number;
function initComponent(component: TestComponent) {
component.clickHandler = () => counter++;
}
beforeEach(() => {
counter = 0;
});
describe('default debounce time', () => {
let component: DefaultDebounceTimeTestComponent;
let componentFixture: ComponentFixture<DefaultDebounceTimeTestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DebounceClickDirective, DefaultDebounceTimeTestComponent]
}).compileComponents();
}));
beforeEach(() => {
componentFixture = TestBed.createComponent(DefaultDebounceTimeTestComponent);
component = componentFixture.componentInstance;
initComponent(component);
});
it('should create an instance', () => {
componentFixture.detectChanges();
expect(component.directive).toBeTruthy();
});
it('should work well', fakeAsync(() => {
function click() {
(<HTMLButtonElement>componentFixture.debugElement.query(By.css('button')).nativeElement).dispatchEvent(new MouseEvent('click'));
}
componentFixture.detectChanges();
expect(counter).toBe(0);
click();
tick(300);
expect(counter).toBe(0);
click();
tick();
expect(counter).toBe(0);
tick(500);
expect(counter).toBe(1);
}));
});
describe('custom debounce time', () => {
let component: CustomDebounceTimeTestComponent;
let componentFixture: ComponentFixture<CustomDebounceTimeTestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DebounceClickDirective, CustomDebounceTimeTestComponent]
}).compileComponents();
}));
beforeEach(() => {
componentFixture = TestBed.createComponent(CustomDebounceTimeTestComponent);
component = componentFixture.componentInstance;
initComponent(component);
component.debounceTime = 600;
});
it('should create an instance', () => {
componentFixture.detectChanges();
expect(component.directive).toBeTruthy();
});
it('should work well', fakeAsync(() => {
function click() {
(<HTMLButtonElement>componentFixture.debugElement.query(By.css('button')).nativeElement).dispatchEvent(new MouseEvent('click'));
}
componentFixture.detectChanges();
expect(counter).toBe(0);
click();
tick(300);
expect(counter).toBe(0);
click();
tick();
expect(counter).toBe(0);
tick(600);
expect(counter).toBe(1);
}));
});
});
|
