1
- import { ComponentFixture , TestBed } from '@angular/core/testing' ;
1
+ import { ComponentFixture , fakeAsync , TestBed , tick , waitForAsync } from '@angular/core/testing' ;
2
2
3
+ import { FormsModule } from '@angular/forms' ;
4
+ import { TranslateLoader , TranslateModule } from '@ngx-translate/core' ;
5
+ import { By } from '@angular/platform-browser' ;
3
6
import { NumberValueInputComponent } from './number-value-input.component' ;
7
+ import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock' ;
4
8
5
9
describe ( 'NumberValueInputComponent' , ( ) => {
6
10
let component : NumberValueInputComponent ;
7
11
let fixture : ComponentFixture < NumberValueInputComponent > ;
8
12
9
- beforeEach ( async ( ) => {
10
- await TestBed . configureTestingModule ( {
11
- declarations : [ NumberValueInputComponent ]
13
+ beforeEach ( waitForAsync ( ( ) => {
14
+ TestBed . configureTestingModule ( {
15
+ imports : [
16
+ FormsModule ,
17
+ TranslateModule . forRoot ( {
18
+ loader : {
19
+ provide : TranslateLoader ,
20
+ useClass : TranslateLoaderMock
21
+ }
22
+ } ) ] ,
23
+ declarations : [ NumberValueInputComponent ] ,
24
+ providers : [
25
+ ]
12
26
} )
13
- . compileComponents ( ) ;
14
- } ) ;
27
+ . compileComponents ( ) ;
28
+ } ) ) ;
15
29
16
30
beforeEach ( ( ) => {
17
31
fixture = TestBed . createComponent ( NumberValueInputComponent ) ;
@@ -22,4 +36,37 @@ describe('NumberValueInputComponent', () => {
22
36
it ( 'should create' , ( ) => {
23
37
expect ( component ) . toBeTruthy ( ) ;
24
38
} ) ;
39
+
40
+ it ( 'should not show a validation error if the input field was left untouched but left empty' , ( ) => {
41
+ const validationError = fixture . debugElement . query ( By . css ( '.validation-error' ) ) ;
42
+ expect ( validationError ) . toBeFalsy ( ) ;
43
+ } ) ;
44
+
45
+ it ( 'should show a validation error if the input field was touched but left empty' , fakeAsync ( ( ) => {
46
+ component . value = '' ;
47
+ fixture . detectChanges ( ) ;
48
+ tick ( ) ;
49
+
50
+ const input = fixture . debugElement . query ( By . css ( 'input' ) ) ;
51
+ input . triggerEventHandler ( 'blur' , null ) ;
52
+
53
+ fixture . detectChanges ( ) ;
54
+
55
+ const validationError = fixture . debugElement . query ( By . css ( '.validation-error' ) ) ;
56
+ expect ( validationError ) . toBeTruthy ( ) ;
57
+ } ) ) ;
58
+
59
+ it ( 'should not show a validation error if the input field was touched but not left empty' , fakeAsync ( ( ) => {
60
+ component . value = 'testValue' ;
61
+ fixture . detectChanges ( ) ;
62
+ tick ( ) ;
63
+
64
+ const input = fixture . debugElement . query ( By . css ( 'input' ) ) ;
65
+ input . triggerEventHandler ( 'blur' , null ) ;
66
+
67
+ fixture . detectChanges ( ) ;
68
+
69
+ const validationError = fixture . debugElement . query ( By . css ( '.validation-error' ) ) ;
70
+ expect ( validationError ) . toBeFalsy ( ) ;
71
+ } ) ) ;
25
72
} ) ;
0 commit comments