ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts

   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', () => {
  50     const directive = new FormLoadingDirective(null, null, null);
  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 });