diff options
Diffstat (limited to '')
-rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts new file mode 100644 index 000000000..cc7782da7 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts @@ -0,0 +1,89 @@ +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'; + +import { configureTestBed } from '~/testing/unit-test-helper'; +import { AlertPanelComponent } from '../components/alert-panel/alert-panel.component'; +import { LoadingPanelComponent } from '../components/loading-panel/loading-panel.component'; +import { CdForm } from '../forms/cd-form'; +import { SharedModule } from '../shared.module'; +import { FormLoadingDirective } from './form-loading.directive'; + +@Component({ selector: 'cd-test-cmp', template: '<span *cdFormLoading="loading">foo</span>' }) +class TestComponent extends CdForm { + constructor() { + super(); + } +} + +describe('FormLoadingDirective', () => { + let component: TestComponent; + let fixture: ComponentFixture<any>; + + const expectShown = (elem: number, error: number, loading: number) => { + expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(elem); + expect(fixture.debugElement.queryAll(By.css('cd-alert-panel')).length).toEqual(error); + expect(fixture.debugElement.queryAll(By.css('cd-loading-panel')).length).toEqual(loading); + }; + + configureTestBed( + { + declarations: [TestComponent], + imports: [SharedModule, NgbAlertModule] + }, + [LoadingPanelComponent, AlertPanelComponent] + ); + + afterEach(() => { + fixture = null; + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create an instance', () => { + const directive = new FormLoadingDirective(null, null); + expect(directive).toBeTruthy(); + }); + + it('should show loading component by default', () => { + expectShown(0, 0, 1); + + const alert = fixture.debugElement.nativeElement.querySelector('cd-loading-panel ngb-alert'); + expect(alert.textContent).toBe('Loading form data...'); + }); + + it('should show error component when calling loadingError()', () => { + component.loadingError(); + fixture.detectChanges(); + + expectShown(0, 1, 0); + + const alert = fixture.debugElement.nativeElement.querySelector( + 'cd-alert-panel .alert-panel-text' + ); + expect(alert.textContent).toBe('Form data could not be loaded.'); + }); + + it('should show original component when calling loadingReady()', () => { + component.loadingReady(); + fixture.detectChanges(); + + expectShown(1, 0, 0); + + const alert = fixture.debugElement.nativeElement.querySelector('span'); + expect(alert.textContent).toBe('foo'); + }); + + it('should show nothing when calling loadingNone()', () => { + component.loadingNone(); + fixture.detectChanges(); + + expectShown(0, 0, 0); + }); +}); |