Skip to content

Commit 83bb5dd

Browse files
author
Fernando Gonzalez Goncharov
committed
feat(number-input): provide number input as a module
1 parent 73cb1b2 commit 83bb5dd

14 files changed

Lines changed: 435 additions & 410 deletions

‎projects/ng-rocketparts/src/lib/components/number-input/number-input.component.spec.ts‎

Lines changed: 147 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {
2-
ComponentFixture,
3-
TestBed,
4-
fakeAsync,
5-
tick
2+
ComponentFixture,
3+
TestBed,
4+
fakeAsync,
5+
tick
66
} from '@angular/core/testing';
77
import { By } from '@angular/platform-browser';
88
import { Component, Type } from '@angular/core';
@@ -12,157 +12,157 @@ import { typeInElement, dispatchFakeEvent } from '../../../testing';
1212
import { NumberInputComponent } from './number-input.component';
1313

1414
@Component({
15-
template: `<rp-number-input
15+
template: `<ngr-number-input
1616
[formControl]="control"
1717
[placeholder]="'Enter a number'"
1818
[min]="10"
19-
[max]="1000"></rp-number-input>
19+
[max]="1000"></ngr-number-input>
2020
`
2121
})
2222
export class SimpleNumberInputComponent {
23-
control = new FormControl();
23+
control = new FormControl();
2424
}
2525

2626
describe('[Component]: NumberInputComponent', () => {
27-
// Creates a test component fixture.
28-
function createComponent<T>(component: Type<T>) {
29-
TestBed.configureTestingModule({
30-
imports: [FormsModule, ReactiveFormsModule],
31-
declarations: [NumberInputComponent, component]
27+
// Creates a test component fixture.
28+
function createComponent<T>(component: Type<T>) {
29+
TestBed.configureTestingModule({
30+
imports: [FormsModule, ReactiveFormsModule],
31+
declarations: [NumberInputComponent, component]
32+
});
33+
TestBed.compileComponents();
34+
35+
return TestBed.createComponent<T>(component);
36+
}
37+
38+
describe('forms integration', () => {
39+
let fixture: ComponentFixture<SimpleNumberInputComponent>;
40+
let input: HTMLInputElement;
41+
42+
beforeEach(() => {
43+
fixture = createComponent(SimpleNumberInputComponent);
44+
fixture.detectChanges();
45+
input = fixture.debugElement.query(By.css('input')).nativeElement;
46+
});
47+
48+
it('should update control value as user types with input value', () => {
49+
typeInElement('10', input);
50+
fixture.detectChanges();
51+
52+
expect(fixture.componentInstance.control.value).toEqual(
53+
10,
54+
`Expected control value to be updated as user types.`
55+
);
56+
57+
typeInElement('100', input);
58+
fixture.detectChanges();
59+
60+
expect(fixture.componentInstance.control.value).toEqual(
61+
100,
62+
`Expected control value to be updated as user types.`
63+
);
64+
});
65+
66+
it('should format input value on blur', fakeAsync(() => {
67+
typeInElement('300', input);
68+
dispatchFakeEvent(input, 'blur');
69+
fixture.detectChanges();
70+
tick();
71+
72+
expect(input.value).toEqual(
73+
'300.00',
74+
`Expected input value to be formatted on blur.`
75+
);
76+
77+
typeInElement('3000', input);
78+
dispatchFakeEvent(input, 'blur');
79+
fixture.detectChanges();
80+
tick();
81+
82+
expect(input.value).toEqual(
83+
'3,000.00',
84+
`Expected input value to be formatted on blur.`
85+
);
86+
}));
87+
88+
it('should fill input correctly if control value is set programatically', fakeAsync(() => {
89+
fixture.componentInstance.control.setValue(100);
90+
fixture.detectChanges();
91+
tick();
92+
93+
expect(input.value).toEqual(
94+
'100.00',
95+
`Expected input to fill with control current formatted value.`
96+
);
97+
98+
fixture.componentInstance.control.setValue(1000);
99+
fixture.detectChanges();
100+
tick();
101+
102+
expect(input.value).toEqual(
103+
'1,000.00',
104+
`Expected input to fill with control current formatted value.`
105+
);
106+
}));
107+
108+
it('should clear the input value if control value is reset programatically', fakeAsync(() => {
109+
typeInElement('200', input);
110+
fixture.detectChanges();
111+
tick();
112+
113+
fixture.componentInstance.control.reset();
114+
fixture.detectChanges();
115+
tick();
116+
117+
expect(input.value).toEqual(
118+
'',
119+
`Expected input value to be empty after control reset.`
120+
);
121+
}));
122+
123+
it('should mark the control as dirty as user types', () => {
124+
expect(fixture.componentInstance.control.dirty).toBe(
125+
false,
126+
`Expected control to start out pristine.`
127+
);
128+
129+
typeInElement('20', input);
130+
fixture.detectChanges();
131+
132+
expect(fixture.componentInstance.control.dirty).toBe(
133+
true,
134+
`Expected control to become dirty when the user types into the input.`
135+
);
136+
});
137+
138+
it('should not mark the control dirty when the value is set programmatically', () => {
139+
expect(fixture.componentInstance.control.dirty).toBe(
140+
false,
141+
`Expected control to start out pristine.`
142+
);
143+
144+
fixture.componentInstance.control.setValue('200');
145+
fixture.detectChanges();
146+
147+
expect(fixture.componentInstance.control.dirty).toBe(
148+
false,
149+
`Expected control to stay pristine if value is set programmatically.`
150+
);
151+
});
152+
153+
it('should clear input value on blur if invalid input was provided', fakeAsync(() => {
154+
typeInElement('invalid', input);
155+
fixture.detectChanges();
156+
tick();
157+
158+
dispatchFakeEvent(input, 'blur');
159+
fixture.detectChanges();
160+
tick();
161+
162+
expect(input.value).toEqual(
163+
'',
164+
`Expected input value to be cleared on blur.`
165+
);
166+
}));
32167
});
33-
TestBed.compileComponents();
34-
35-
return TestBed.createComponent<T>(component);
36-
}
37-
38-
describe('forms integration', () => {
39-
let fixture: ComponentFixture<SimpleNumberInputComponent>;
40-
let input: HTMLInputElement;
41-
42-
beforeEach(() => {
43-
fixture = createComponent(SimpleNumberInputComponent);
44-
fixture.detectChanges();
45-
input = fixture.debugElement.query(By.css('input')).nativeElement;
46-
});
47-
48-
it('should update control value as user types with input value', () => {
49-
typeInElement('10', input);
50-
fixture.detectChanges();
51-
52-
expect(fixture.componentInstance.control.value).toEqual(
53-
10,
54-
`Expected control value to be updated as user types.`
55-
);
56-
57-
typeInElement('100', input);
58-
fixture.detectChanges();
59-
60-
expect(fixture.componentInstance.control.value).toEqual(
61-
100,
62-
`Expected control value to be updated as user types.`
63-
);
64-
});
65-
66-
it('should format input value on blur', fakeAsync(() => {
67-
typeInElement('300', input);
68-
dispatchFakeEvent(input, 'blur');
69-
fixture.detectChanges();
70-
tick();
71-
72-
expect(input.value).toEqual(
73-
'300.00',
74-
`Expected input value to be formatted on blur.`
75-
);
76-
77-
typeInElement('3000', input);
78-
dispatchFakeEvent(input, 'blur');
79-
fixture.detectChanges();
80-
tick();
81-
82-
expect(input.value).toEqual(
83-
'3,000.00',
84-
`Expected input value to be formatted on blur.`
85-
);
86-
}));
87-
88-
it('should fill input correctly if control value is set programatically', fakeAsync(() => {
89-
fixture.componentInstance.control.setValue(100);
90-
fixture.detectChanges();
91-
tick();
92-
93-
expect(input.value).toEqual(
94-
'100.00',
95-
`Expected input to fill with control current formatted value.`
96-
);
97-
98-
fixture.componentInstance.control.setValue(1000);
99-
fixture.detectChanges();
100-
tick();
101-
102-
expect(input.value).toEqual(
103-
'1,000.00',
104-
`Expected input to fill with control current formatted value.`
105-
);
106-
}));
107-
108-
it('should clear the input value if control value is reset programatically', fakeAsync(() => {
109-
typeInElement('200', input);
110-
fixture.detectChanges();
111-
tick();
112-
113-
fixture.componentInstance.control.reset();
114-
fixture.detectChanges();
115-
tick();
116-
117-
expect(input.value).toEqual(
118-
'',
119-
`Expected input value to be empty after control reset.`
120-
);
121-
}));
122-
123-
it('should mark the control as dirty as user types', () => {
124-
expect(fixture.componentInstance.control.dirty).toBe(
125-
false,
126-
`Expected control to start out pristine.`
127-
);
128-
129-
typeInElement('20', input);
130-
fixture.detectChanges();
131-
132-
expect(fixture.componentInstance.control.dirty).toBe(
133-
true,
134-
`Expected control to become dirty when the user types into the input.`
135-
);
136-
});
137-
138-
it('should not mark the control dirty when the value is set programmatically', () => {
139-
expect(fixture.componentInstance.control.dirty).toBe(
140-
false,
141-
`Expected control to start out pristine.`
142-
);
143-
144-
fixture.componentInstance.control.setValue('200');
145-
fixture.detectChanges();
146-
147-
expect(fixture.componentInstance.control.dirty).toBe(
148-
false,
149-
`Expected control to stay pristine if value is set programmatically.`
150-
);
151-
});
152-
153-
it('should clear input value on blur if invalid input was provided', fakeAsync(() => {
154-
typeInElement('invalid', input);
155-
fixture.detectChanges();
156-
tick();
157-
158-
dispatchFakeEvent(input, 'blur');
159-
fixture.detectChanges();
160-
tick();
161-
162-
expect(input.value).toEqual(
163-
'',
164-
`Expected input value to be cleared on blur.`
165-
);
166-
}));
167-
});
168168
});

0 commit comments

Comments
 (0)