ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.spec.ts

   1 import { HttpClientTestingModule } from '@angular/common/http/testing';
   2 import { ComponentFixture, TestBed } from '@angular/core/testing';
   3 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   4 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   5 import { RouterTestingModule } from '@angular/router/testing';
   6
   7 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
   8 import { ToastrModule } from 'ngx-toastr';
   9
  10 import { InventoryDevice } from '~/app/ceph/cluster/inventory/inventory-devices/inventory-device.model';
  11 import { InventoryDevicesComponent } from '~/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component';
  12 import { CdTableColumnFiltersChange } from '~/app/shared/models/cd-table-column-filters-change';
  13 import { SharedModule } from '~/app/shared/shared.module';
  14 import { configureTestBed, Mocks } from '~/testing/unit-test-helper';
  15 import { OsdDevicesSelectionModalComponent } from './osd-devices-selection-modal.component';
  16
  17 describe('OsdDevicesSelectionModalComponent', () => {
  18   let component: OsdDevicesSelectionModalComponent;
  19   let fixture: ComponentFixture<OsdDevicesSelectionModalComponent>;
  20   let timeoutFn: Function;
  21
  22   const devices: InventoryDevice[] = [Mocks.getInventoryDevice('node0', '1')];
  23
  24   const expectSubmitButton = (enabled: boolean) => {
  25     const nativeElement = fixture.debugElement.nativeElement;
  26     const button = nativeElement.querySelector('.modal-footer .tc_submitButton');
  27     expect(button.disabled).toBe(!enabled);
  28   };
  29
  30   configureTestBed({
  31     imports: [
  32       BrowserAnimationsModule,
  33       FormsModule,
  34       HttpClientTestingModule,
  35       SharedModule,
  36       ReactiveFormsModule,
  37       RouterTestingModule,
  38       ToastrModule.forRoot()
  39     ],
  40     providers: [NgbActiveModal],
  41     declarations: [OsdDevicesSelectionModalComponent, InventoryDevicesComponent]
  42   });
  43
  44   beforeEach(() => {
  45     spyOn(window, 'setTimeout').and.callFake((fn) => (timeoutFn = fn));
  46
  47     fixture = TestBed.createComponent(OsdDevicesSelectionModalComponent);
  48     component = fixture.componentInstance;
  49     component.devices = devices;
  50
  51     // Mocks InventoryDeviceComponent
  52     component.inventoryDevices = {
  53       columns: [
  54         { name: 'Device path', prop: 'path' },
  55         {
  56           name: 'Type',
  57           prop: 'human_readable_type'
  58         },
  59         {
  60           name: 'Available',
  61           prop: 'available'
  62         }
  63       ]
  64     } as InventoryDevicesComponent;
  65     // Mocks the update from the above component
  66     component.filterColumns = ['path', 'human_readable_type'];
  67     fixture.detectChanges();
  68   });
  69
  70   it('should create', () => {
  71     expect(component).toBeTruthy();
  72   });
  73
  74   it('should disable submit button initially', () => {
  75     expectSubmitButton(false);
  76   });
  77
  78   it(
  79     'should update requiredFilters after ngAfterViewInit is called to prevent ' +
  80       'ExpressionChangedAfterItHasBeenCheckedError',
  81     () => {
  82       expect(component.requiredFilters).toEqual([]);
  83       timeoutFn();
  84       expect(component.requiredFilters).toEqual(['Device path', 'Type']);
  85     }
  86   );
  87
  88   it('should enable submit button after filtering some devices', () => {
  89     const event: CdTableColumnFiltersChange = {
  90       filters: [
  91         {
  92           name: 'hostname',
  93           prop: 'hostname',
  94           value: { raw: 'node0', formatted: 'node0' }
  95         },
  96         {
  97           name: 'size',
  98           prop: 'size',
  99           value: { raw: '1024', formatted: '1KiB' }
 100         }
 101       ],
 102       data: devices,
 103       dataOut: []
 104     };
 105     component.onFilterChange(event);
 106     fixture.detectChanges();
 107     expectSubmitButton(true);
 108   });
 109 });