]>
Commit | Line | Data |
---|---|---|
f67539c2 TL |
1 | import { Component } from '@angular/core'; |
2 | import { ComponentFixture, TestBed } from '@angular/core/testing'; | |
3 | import { By } from '@angular/platform-browser'; | |
4 | ||
5 | import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'; | |
6 | ||
7 | import { configureTestBed } from '~/testing/unit-test-helper'; | |
8 | import { AlertPanelComponent } from '../components/alert-panel/alert-panel.component'; | |
9 | import { LoadingPanelComponent } from '../components/loading-panel/loading-panel.component'; | |
10 | import { CdForm } from '../forms/cd-form'; | |
11 | import { SharedModule } from '../shared.module'; | |
12 | import { FormLoadingDirective } from './form-loading.directive'; | |
13 | ||
14 | @Component({ selector: 'cd-test-cmp', template: '<span *cdFormLoading="loading">foo</span>' }) | |
15 | class TestComponent extends CdForm { | |
16 | constructor() { | |
17 | super(); | |
18 | } | |
19 | } | |
20 | ||
21 | describe('FormLoadingDirective', () => { | |
22 | let component: TestComponent; | |
23 | let fixture: ComponentFixture<any>; | |
24 | ||
25 | const expectShown = (elem: number, error: number, loading: number) => { | |
26 | expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(elem); | |
27 | expect(fixture.debugElement.queryAll(By.css('cd-alert-panel')).length).toEqual(error); | |
28 | expect(fixture.debugElement.queryAll(By.css('cd-loading-panel')).length).toEqual(loading); | |
29 | }; | |
30 | ||
31 | configureTestBed( | |
32 | { | |
33 | declarations: [TestComponent], | |
34 | imports: [SharedModule, NgbAlertModule] | |
35 | }, | |
36 | [LoadingPanelComponent, AlertPanelComponent] | |
37 | ); | |
38 | ||
39 | afterEach(() => { | |
40 | fixture = null; | |
41 | }); | |
42 | ||
43 | beforeEach(() => { | |
44 | fixture = TestBed.createComponent(TestComponent); | |
45 | component = fixture.componentInstance; | |
46 | fixture.detectChanges(); | |
47 | }); | |
48 | ||
49 | it('should create an instance', () => { | |
39ae355f | 50 | const directive = new FormLoadingDirective(null, null); |
f67539c2 TL |
51 | expect(directive).toBeTruthy(); |
52 | }); | |
53 | ||
54 | it('should show loading component by default', () => { | |
55 | expectShown(0, 0, 1); | |
56 | ||
57 | const alert = fixture.debugElement.nativeElement.querySelector('cd-loading-panel ngb-alert'); | |
58 | expect(alert.textContent).toBe('Loading form data...'); | |
59 | }); | |
60 | ||
61 | it('should show error component when calling loadingError()', () => { | |
62 | component.loadingError(); | |
63 | fixture.detectChanges(); | |
64 | ||
65 | expectShown(0, 1, 0); | |
66 | ||
67 | const alert = fixture.debugElement.nativeElement.querySelector( | |
68 | 'cd-alert-panel .alert-panel-text' | |
69 | ); | |
70 | expect(alert.textContent).toBe('Form data could not be loaded.'); | |
71 | }); | |
72 | ||
73 | it('should show original component when calling loadingReady()', () => { | |
74 | component.loadingReady(); | |
75 | fixture.detectChanges(); | |
76 | ||
77 | expectShown(1, 0, 0); | |
78 | ||
79 | const alert = fixture.debugElement.nativeElement.querySelector('span'); | |
80 | expect(alert.textContent).toBe('foo'); | |
81 | }); | |
82 | ||
83 | it('should show nothing when calling loadingNone()', () => { | |
84 | component.loadingNone(); | |
85 | fixture.detectChanges(); | |
86 | ||
87 | expectShown(0, 0, 0); | |
88 | }); | |
89 | }); |