ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts

   1 import { ComponentFixture, TestBed } from '@angular/core/testing';
   2 import { ReactiveFormsModule, Validators } from '@angular/forms';
   3
   4 import { PopoverModule } from 'ngx-bootstrap/popover';
   5 import { TooltipModule } from 'ngx-bootstrap/tooltip';
   6
   7 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
   8 import { SelectOption } from './select-option.model';
   9 import { SelectComponent } from './select.component';
  10
  11 describe('SelectComponent', () => {
  12   let component: SelectComponent;
  13   let fixture: ComponentFixture<SelectComponent>;
  14
  15   const selectOption = (filter: string) => {
  16     component.filter.setValue(filter);
  17     component.updateFilter();
  18     component.selectOption();
  19   };
  20
  21   configureTestBed({
  22     declarations: [SelectComponent],
  23     imports: [PopoverModule.forRoot(), TooltipModule, ReactiveFormsModule],
  24     providers: i18nProviders
  25   });
  26
  27   beforeEach(() => {
  28     fixture = TestBed.createComponent(SelectComponent);
  29     component = fixture.componentInstance;
  30     fixture.detectChanges();
  31     component.options = [
  32       { name: 'option1', description: '', selected: false, enabled: true },
  33       { name: 'option2', description: '', selected: false, enabled: true },
  34       { name: 'option3', description: '', selected: false, enabled: true }
  35     ];
  36   });
  37
  38   it('should create', () => {
  39     expect(component).toBeTruthy();
  40   });
  41
  42   it('should add item', () => {
  43     component.data = [];
  44     component.triggerSelection(component.options[1]);
  45     expect(component.data).toEqual(['option2']);
  46   });
  47
  48   it('should update selected', () => {
  49     component.data = ['option2'];
  50     component.ngOnChanges();
  51     expect(component.options[0].selected).toBe(false);
  52     expect(component.options[1].selected).toBe(true);
  53   });
  54
  55   it('should remove item', () => {
  56     component.options.map((option) => {
  57       option.selected = true;
  58       return option;
  59     });
  60     component.data = ['option1', 'option2', 'option3'];
  61     component.removeItem('option1');
  62     expect(component.data).toEqual(['option2', 'option3']);
  63   });
  64
  65   it('should not remove item that is not selected', () => {
  66     component.options[0].selected = true;
  67     component.data = ['option1'];
  68     component.removeItem('option2');
  69     expect(component.data).toEqual(['option1']);
  70   });
  71
  72   describe('filter values', () => {
  73     beforeEach(() => {
  74       component.ngOnInit();
  75     });
  76
  77     it('shows all options with no value set', () => {
  78       expect(component.filteredOptions).toEqual(component.options);
  79     });
  80
  81     it('shows one option that it filtered for', () => {
  82       component.filter.setValue('2');
  83       component.updateFilter();
  84       expect(component.filteredOptions).toEqual([component.options[1]]);
  85     });
  86
  87     it('shows all options after selecting something', () => {
  88       component.filter.setValue('2');
  89       component.updateFilter();
  90       component.selectOption();
  91       expect(component.filteredOptions).toEqual(component.options);
  92     });
  93
  94     it('is not able to create by default with no value set', () => {
  95       component.updateFilter();
  96       expect(component.isCreatable()).toBeFalsy();
  97     });
  98
  99     it('is not able to create by default with a value set', () => {
 100       component.filter.setValue('2');
 101       component.updateFilter();
 102       expect(component.isCreatable()).toBeFalsy();
 103     });
 104   });
 105
 106   describe('automatically add selected options if not in options array', () => {
 107     beforeEach(() => {
 108       component.data = ['option1', 'option4'];
 109       expect(component.options.length).toBe(3);
 110     });
 111
 112     const expectedResult = () => {
 113       expect(component.options.length).toBe(4);
 114       expect(component.options[3]).toEqual(new SelectOption(true, 'option4', ''));
 115     };
 116
 117     it('with no extra settings', () => {
 118       component.ngOnInit();
 119       expectedResult();
 120     });
 121
 122     it('with custom badges', () => {
 123       component.customBadges = true;
 124       component.ngOnInit();
 125       expectedResult();
 126     });
 127
 128     it('with limit higher than selected', () => {
 129       component.selectionLimit = 3;
 130       component.ngOnInit();
 131       expectedResult();
 132     });
 133
 134     it('with limit equal to selected', () => {
 135       component.selectionLimit = 2;
 136       component.ngOnInit();
 137       expectedResult();
 138     });
 139
 140     it('with limit lower than selected', () => {
 141       component.selectionLimit = 1;
 142       component.ngOnInit();
 143       expectedResult();
 144     });
 145   });
 146
 147   describe('sorted array and options', () => {
 148     beforeEach(() => {
 149       component.customBadges = true;
 150       component.customBadgeValidators = [Validators.pattern('[A-Za-z0-9_]+')];
 151       component.data = ['c', 'b'];
 152       component.options = [new SelectOption(true, 'd', ''), new SelectOption(true, 'a', '')];
 153       component.ngOnInit();
 154     });
 155
 156     it('has a sorted selection', () => {
 157       expect(component.data).toEqual(['a', 'b', 'c', 'd']);
 158     });
 159
 160     it('has a sorted options', () => {
 161       const sortedOptions = [
 162         new SelectOption(true, 'a', ''),
 163         new SelectOption(true, 'b', ''),
 164         new SelectOption(true, 'c', ''),
 165         new SelectOption(true, 'd', '')
 166       ];
 167       expect(component.options).toEqual(sortedOptions);
 168     });
 169
 170     it('has a sorted selection after adding an item', () => {
 171       selectOption('block');
 172       expect(component.data).toEqual(['a', 'b', 'block', 'c', 'd']);
 173     });
 174
 175     it('has a sorted options after adding an item', () => {
 176       selectOption('block');
 177       const sortedOptions = [
 178         new SelectOption(true, 'a', ''),
 179         new SelectOption(true, 'b', ''),
 180         new SelectOption(true, 'block', ''),
 181         new SelectOption(true, 'c', ''),
 182         new SelectOption(true, 'd', '')
 183       ];
 184       expect(component.options).toEqual(sortedOptions);
 185     });
 186   });
 187
 188   describe('with custom options', () => {
 189     beforeEach(() => {
 190       component.customBadges = true;
 191       component.customBadgeValidators = [Validators.pattern('[A-Za-z0-9_]+')];
 192       component.ngOnInit();
 193     });
 194
 195     it('is not able to create with no value set', () => {
 196       component.updateFilter();
 197       expect(component.isCreatable()).toBeFalsy();
 198     });
 199
 200     it('is able to create with a valid value set', () => {
 201       component.filter.setValue('2');
 202       component.updateFilter();
 203       expect(component.isCreatable()).toBeTruthy();
 204     });
 205
 206     it('is not able to create with a value set that already exist', () => {
 207       component.filter.setValue('option2');
 208       component.updateFilter();
 209       expect(component.isCreatable()).toBeFalsy();
 210     });
 211
 212     it('adds custom option', () => {
 213       selectOption('customOption');
 214       expect(component.options[0]).toEqual({
 215         name: 'customOption',
 216         description: '',
 217         selected: true,
 218         enabled: true
 219       });
 220       expect(component.options.length).toBe(4);
 221       expect(component.data).toEqual(['customOption']);
 222     });
 223
 224     it('will not add an option that did not pass the validation', () => {
 225       selectOption(' this does not pass ');
 226       expect(component.options.length).toBe(3);
 227       expect(component.data).toEqual([]);
 228       expect(component.filter.invalid).toBeTruthy();
 229     });
 230
 231     it('removes custom item selection by name', () => {
 232       selectOption('customOption');
 233       component.removeItem('customOption');
 234       expect(component.data).toEqual([]);
 235       expect(component.options.length).toBe(4);
 236       expect(component.options[0]).toEqual({
 237         name: 'customOption',
 238         description: '',
 239         selected: false,
 240         enabled: true
 241       });
 242     });
 243
 244     it('will not add an option that is already there', () => {
 245       selectOption('option2');
 246       expect(component.options.length).toBe(3);
 247       expect(component.data).toEqual(['option2']);
 248     });
 249
 250     it('will not add an option twice after each other', () => {
 251       selectOption('onlyOnce');
 252       expect(component.data).toEqual(['onlyOnce']);
 253       selectOption('onlyOnce');
 254       expect(component.data).toEqual([]);
 255       selectOption('onlyOnce');
 256       expect(component.data).toEqual(['onlyOnce']);
 257       expect(component.options.length).toBe(4);
 258     });
 259   });
 260
 261   describe('if the selection limit is reached', function() {
 262     beforeEach(() => {
 263       component.selectionLimit = 2;
 264       component.triggerSelection(component.options[0]);
 265       component.triggerSelection(component.options[1]);
 266     });
 267
 268     it('will not select more options', () => {
 269       component.triggerSelection(component.options[2]);
 270       expect(component.data).toEqual(['option1', 'option2']);
 271     });
 272
 273     it('will unselect options that are selected', () => {
 274       component.triggerSelection(component.options[1]);
 275       expect(component.data).toEqual(['option1']);
 276     });
 277   });
 278 });