diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts')
-rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts | 276 |
1 files changed, 276 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts new file mode 100644 index 000000000..c35ec9091 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts @@ -0,0 +1,276 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ReactiveFormsModule, Validators } from '@angular/forms'; + +import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; + +import { configureTestBed } from '~/testing/unit-test-helper'; +import { SelectOption } from './select-option.model'; +import { SelectComponent } from './select.component'; + +describe('SelectComponent', () => { + let component: SelectComponent; + let fixture: ComponentFixture<SelectComponent>; + + const selectOption = (filter: string) => { + component.filter.setValue(filter); + component.updateFilter(); + component.selectOption(); + }; + + configureTestBed({ + declarations: [SelectComponent], + imports: [NgbPopoverModule, NgbTooltipModule, ReactiveFormsModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + component.options = [ + { name: 'option1', description: '', selected: false, enabled: true }, + { name: 'option2', description: '', selected: false, enabled: true }, + { name: 'option3', description: '', selected: false, enabled: true } + ]; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should add item', () => { + component.data = []; + component.triggerSelection(component.options[1]); + expect(component.data).toEqual(['option2']); + }); + + it('should update selected', () => { + component.data = ['option2']; + component.ngOnChanges(); + expect(component.options[0].selected).toBe(false); + expect(component.options[1].selected).toBe(true); + }); + + it('should remove item', () => { + component.options.map((option) => { + option.selected = true; + return option; + }); + component.data = ['option1', 'option2', 'option3']; + component.removeItem('option1'); + expect(component.data).toEqual(['option2', 'option3']); + }); + + it('should not remove item that is not selected', () => { + component.options[0].selected = true; + component.data = ['option1']; + component.removeItem('option2'); + expect(component.data).toEqual(['option1']); + }); + + describe('filter values', () => { + beforeEach(() => { + component.ngOnInit(); + }); + + it('shows all options with no value set', () => { + expect(component.filteredOptions).toEqual(component.options); + }); + + it('shows one option that it filtered for', () => { + component.filter.setValue('2'); + component.updateFilter(); + expect(component.filteredOptions).toEqual([component.options[1]]); + }); + + it('shows all options after selecting something', () => { + component.filter.setValue('2'); + component.updateFilter(); + component.selectOption(); + expect(component.filteredOptions).toEqual(component.options); + }); + + it('is not able to create by default with no value set', () => { + component.updateFilter(); + expect(component.isCreatable()).toBeFalsy(); + }); + + it('is not able to create by default with a value set', () => { + component.filter.setValue('2'); + component.updateFilter(); + expect(component.isCreatable()).toBeFalsy(); + }); + }); + + describe('automatically add selected options if not in options array', () => { + beforeEach(() => { + component.data = ['option1', 'option4']; + expect(component.options.length).toBe(3); + }); + + const expectedResult = () => { + expect(component.options.length).toBe(4); + expect(component.options[3]).toEqual(new SelectOption(true, 'option4', '')); + }; + + it('with no extra settings', () => { + component.ngOnInit(); + expectedResult(); + }); + + it('with custom badges', () => { + component.customBadges = true; + component.ngOnInit(); + expectedResult(); + }); + + it('with limit higher than selected', () => { + component.selectionLimit = 3; + component.ngOnInit(); + expectedResult(); + }); + + it('with limit equal to selected', () => { + component.selectionLimit = 2; + component.ngOnInit(); + expectedResult(); + }); + + it('with limit lower than selected', () => { + component.selectionLimit = 1; + component.ngOnInit(); + expectedResult(); + }); + }); + + describe('sorted array and options', () => { + beforeEach(() => { + component.customBadges = true; + component.customBadgeValidators = [Validators.pattern('[A-Za-z0-9_]+')]; + component.data = ['c', 'b']; + component.options = [new SelectOption(true, 'd', ''), new SelectOption(true, 'a', '')]; + component.ngOnInit(); + }); + + it('has a sorted selection', () => { + expect(component.data).toEqual(['a', 'b', 'c', 'd']); + }); + + it('has a sorted options', () => { + const sortedOptions = [ + new SelectOption(true, 'a', ''), + new SelectOption(true, 'b', ''), + new SelectOption(true, 'c', ''), + new SelectOption(true, 'd', '') + ]; + expect(component.options).toEqual(sortedOptions); + }); + + it('has a sorted selection after adding an item', () => { + selectOption('block'); + expect(component.data).toEqual(['a', 'b', 'block', 'c', 'd']); + }); + + it('has a sorted options after adding an item', () => { + selectOption('block'); + const sortedOptions = [ + new SelectOption(true, 'a', ''), + new SelectOption(true, 'b', ''), + new SelectOption(true, 'block', ''), + new SelectOption(true, 'c', ''), + new SelectOption(true, 'd', '') + ]; + expect(component.options).toEqual(sortedOptions); + }); + }); + + describe('with custom options', () => { + beforeEach(() => { + component.customBadges = true; + component.customBadgeValidators = [Validators.pattern('[A-Za-z0-9_]+')]; + component.ngOnInit(); + }); + + it('is not able to create with no value set', () => { + component.updateFilter(); + expect(component.isCreatable()).toBeFalsy(); + }); + + it('is able to create with a valid value set', () => { + component.filter.setValue('2'); + component.updateFilter(); + expect(component.isCreatable()).toBeTruthy(); + }); + + it('is not able to create with a value set that already exist', () => { + component.filter.setValue('option2'); + component.updateFilter(); + expect(component.isCreatable()).toBeFalsy(); + }); + + it('adds custom option', () => { + selectOption('customOption'); + expect(component.options[0]).toEqual({ + name: 'customOption', + description: '', + selected: true, + enabled: true + }); + expect(component.options.length).toBe(4); + expect(component.data).toEqual(['customOption']); + }); + + it('will not add an option that did not pass the validation', () => { + selectOption(' this does not pass '); + expect(component.options.length).toBe(3); + expect(component.data).toEqual([]); + expect(component.filter.invalid).toBeTruthy(); + }); + + it('removes custom item selection by name', () => { + selectOption('customOption'); + component.removeItem('customOption'); + expect(component.data).toEqual([]); + expect(component.options.length).toBe(4); + expect(component.options[0]).toEqual({ + name: 'customOption', + description: '', + selected: false, + enabled: true + }); + }); + + it('will not add an option that is already there', () => { + selectOption('option2'); + expect(component.options.length).toBe(3); + expect(component.data).toEqual(['option2']); + }); + + it('will not add an option twice after each other', () => { + selectOption('onlyOnce'); + expect(component.data).toEqual(['onlyOnce']); + selectOption('onlyOnce'); + expect(component.data).toEqual([]); + selectOption('onlyOnce'); + expect(component.data).toEqual(['onlyOnce']); + expect(component.options.length).toBe(4); + }); + }); + + describe('if the selection limit is reached', function () { + beforeEach(() => { + component.selectionLimit = 2; + component.triggerSelection(component.options[0]); + component.triggerSelection(component.options[1]); + }); + + it('will not select more options', () => { + component.triggerSelection(component.options[2]); + expect(component.data).toEqual(['option1', 'option2']); + }); + + it('will unselect options that are selected', () => { + component.triggerSelection(component.options[1]); + expect(component.data).toEqual(['option1']); + }); + }); +}); |