Skip to content

Commit

Permalink
Merge pull request primefaces#15602 from robGardiner01/multiselect-te…
Browse files Browse the repository at this point in the history 
…st-fix

Multiselect: Unit Test Fix
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored May 30, 2024
2 parents 5c5b2e9 + 55d39e7 commit 781ad32
Showing 1 changed file with 64 additions and 73 deletions.
137 changes: 64 additions & 73 deletions src/app/components/multiselect/multiselect.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ describe('MultiSelect', () => {
let multiselect: MultiSelect;
let multiselectItem: MultiSelectItem;
let fixture: ComponentFixture<MultiSelect>;
let fixtureItem: ComponentFixture<MultiSelectItem>;

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -23,7 +24,10 @@ describe('MultiSelect', () => {
});

fixture = TestBed.createComponent(MultiSelect);
fixtureItem = TestBed.createComponent(MultiSelectItem);

multiselect = fixture.componentInstance;
multiselectItem = fixtureItem.componentInstance;
});

it('should disabled', () => {
Expand All @@ -42,14 +46,6 @@ describe('MultiSelect', () => {
expect(multiselect.overlayVisible).toEqual(undefined);
});

it('should get a name', () => {
multiselect.name = 'PrimeNG';
fixture.detectChanges();

const inputReadOnlyEl = fixture.debugElement.query(By.css('.p-hidden-accessible')).children[0].nativeElement;
expect(inputReadOnlyEl.name).toContain('PrimeNG');
});

it('should set dropdown icon by default and able to change', () => {
fixture.detectChanges();

Expand Down Expand Up @@ -100,60 +96,50 @@ describe('MultiSelect', () => {
multiselectEl.click();
fixture.detectChanges();

const multiselectPanelEl = fixture.debugElement.query(By.css('.p-multiselect-panel'));
expect(multiselectEl.className).toContain('p-multiselect-open');
expect(multiselect.overlayVisible).toEqual(true);
expect(multiselectPanelEl).toBeTruthy();
const multiselectOverlay = fixture.debugElement.query(By.css('.p-overlay'));
expect(clickSpy).toHaveBeenCalled();
expect(multiselectOverlay).toBeTruthy();
});

it('should open and close with keydown', () => {
fixture.detectChanges();
const onShowSpy = spyOn(multiselect, 'show').and.callThrough();
const onHideSpy = spyOn(multiselect, 'hide').and.callThrough();

const inputEl = fixture.debugElement.query(By.css('input'));
const onKeyDownSpy = spyOn(multiselect, 'onKeyDown').and.callThrough();
const keydownEvent: any = document.createEvent('CustomEvent');
keydownEvent.which = 40;
keydownEvent.altKey = true;
keydownEvent.initEvent('keydown', true, true);
inputEl.nativeElement.dispatchEvent(keydownEvent);
fixture.detectChanges();

const hideSpy = spyOn(multiselect, 'hide').and.callThrough();
let multiselectPanelEl = fixture.debugElement.query(By.css('.p-multiselect-panel'));
expect(multiselect.overlayVisible).toEqual(true);
expect(multiselectPanelEl).toBeTruthy();
expect(onKeyDownSpy).toHaveBeenCalled();
keydownEvent.which = 27;
inputEl.nativeElement.dispatchEvent(keydownEvent);
fixture.detectChanges();
const multiselectEl = fixture.debugElement.query(By.css('input')).nativeElement;

expect(hideSpy).toHaveBeenCalled();
keydownEvent.which = 32;
inputEl.nativeElement.dispatchEvent(keydownEvent);
multiselectEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
multiselectEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
fixture.detectChanges();

multiselectPanelEl = fixture.debugElement.query(By.css('.p-multiselect-panel'));
const multiselectPanelEl = fixture.debugElement.query(By.css('.p-multiselect-panel')).nativeElement;
fixture.detectChanges();
expect(multiselect.overlayVisible).toEqual(true);
expect(multiselectPanelEl).toBeTruthy();

multiselectEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape' }));
fixture.detectChanges();
expect(onShowSpy).toHaveBeenCalled();
expect(onHideSpy).toHaveBeenCalled();
});

it('should close when double click', () => {
fixture.detectChanges();

const multiselectEl = fixture.debugElement.children[0].nativeElement;
const clickSpy = spyOn(multiselect, 'onContainerClick').and.callThrough();
const hideSpy = spyOn(multiselect, 'hide').and.callThrough();
multiselectEl.click();
fixture.detectChanges();
const multiselectEl = fixture.debugElement.query(By.css('.p-multiselect')).nativeElement;

multiselectEl.click();
const showSpy = spyOn(multiselect, 'show').and.callThrough();
multiselectEl.dispatchEvent(new KeyboardEvent('click'));
fixture.detectChanges();
expect(showSpy).toHaveBeenCalled();

expect(multiselectEl.className).not.toContain('p-multiselect-open');
expect(multiselect.overlayVisible).toEqual(false);
expect(clickSpy).toHaveBeenCalled();
expect(hideSpy).toHaveBeenCalled();
setTimeout(() => {
const onHideSpy = spyOn(multiselect, 'hide').and.callThrough();
multiselectEl.dispatchEvent(new KeyboardEvent('click'));
fixture.detectChanges();
expect(onHideSpy).toHaveBeenCalled();
}, 350);
});

it('should select item', () => {
Expand Down Expand Up @@ -200,36 +186,22 @@ describe('MultiSelect', () => {
{ label: 'Volvo', value: 'Volvo' }
];
fixture.detectChanges();
const onArrowDownKeySpy = spyOn(multiselect, 'onArrowDownKey').and.callThrough();
const onArrowUpKeySpy = spyOn(multiselect, 'onArrowUpKey').and.callThrough();

multiselect.writeValue(['BMW']);
const multiselectEl = fixture.debugElement.children[0].nativeElement;
const multiselectEl = fixture.debugElement.query(By.css('.p-multiselect')).nativeElement;
multiselectEl.click();
fixture.detectChanges();
const multiselectFilterEl = fixture.debugElement.query(By.css('input')).nativeElement;
multiselectFilterEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
multiselectFilterEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
multiselectFilterEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }));
fixture.detectChanges();

const keydownEvent: any = document.createEvent('CustomEvent');
keydownEvent.which = 13;
keydownEvent.initEvent('keydown', true, true);
const multiselectItemEl = fixture.debugElement.queryAll(By.css('.p-multiselect-item'));
const bmwEl = multiselectItemEl[1];
expect(multiselectItemEl.length).toEqual(10);
expect(multiselect.value[0]).toEqual('BMW');
expect(multiselect.value.length).toEqual(1);
const onKeyDownSpy = spyOn(multiselect, 'onKeyDown').and.callThrough();
bmwEl.nativeElement.dispatchEvent(keydownEvent);
fixture.detectChanges();

expect(onKeyDownSpy).toBeTruthy();
expect(multiselect.value.length).toEqual(0);
keydownEvent.which = 40;
bmwEl.nativeElement.dispatchEvent(keydownEvent);
fixture.detectChanges();

expect(document.activeElement).toEqual(multiselectItemEl[2].nativeElement);
keydownEvent.which = 38;
bmwEl.nativeElement.dispatchEvent(keydownEvent);
fixture.detectChanges();

expect(document.activeElement).toEqual(multiselectItemEl[0].nativeElement);
expect(onArrowUpKeySpy).toHaveBeenCalledTimes(1);
expect(onArrowDownKeySpy).toHaveBeenCalledTimes(1);
});

it('should unselect item', () => {
Expand Down Expand Up @@ -322,24 +294,35 @@ describe('MultiSelect', () => {
{ label: 'VW', value: 'VW' },
{ label: 'Volvo', value: 'Volvo' }
];
multiselect.value = [];
fixture.detectChanges();

const multiselectEl = fixture.debugElement.children[0].nativeElement;
const multiselectEl = fixture.debugElement.query(By.css('.p-multiselect')).nativeElement;
const onOptionClickSpy = spyOn(multiselectItem, 'onOptionClick').and.callThrough();
fixture.detectChanges();
fixtureItem.detectChanges();

multiselectEl.click();
fixture.detectChanges();

const multiselectItemEl = fixture.debugElement.queryAll(By.css('.p-multiselect-item'));
fixture.detectChanges();

expect(multiselectItemEl.length).toEqual(10);
const bmwEl = multiselectItemEl[1];
const fiatEl = multiselectItemEl[2];
const fordEl = multiselectItemEl[3];
const onOptionClickSpy = spyOn(multiselectItem, 'onOptionClick').and.callThrough();

bmwEl.nativeElement.click();
fiatEl.nativeElement.click();
fordEl.nativeElement.click();

fixture.detectChanges();
fixtureItem.detectChanges();

expect(multiselect.value[0]).toEqual('BMW');
expect(multiselect.value[1]).toEqual('Ford');
expect(onOptionClickSpy).toHaveBeenCalledTimes(2);
expect(multiselect.value[2]).toEqual('Ford');
expect(multiselect.value.length).toEqual(3);
expect(onOptionClickSpy).toBeTruthy();
});

it('should select multiple with selection limit', () => {
Expand All @@ -357,27 +340,35 @@ describe('MultiSelect', () => {
];
multiselect.value = [];
multiselect.selectionLimit = 2;
const multiselectEl = fixture.debugElement.children[0].nativeElement;
fixture.detectChanges();

const multiselectEl = fixture.debugElement.query(By.css('.p-multiselect')).nativeElement;
const onOptionClickSpy = spyOn(multiselectItem, 'onOptionClick').and.callThrough();
fixture.detectChanges();
fixtureItem.detectChanges();

multiselectEl.click();
fixture.detectChanges();

const multiselectItemEl = fixture.debugElement.queryAll(By.css('.p-multiselect-item'));
fixture.detectChanges();

expect(multiselectItemEl.length).toEqual(10);
const bmwEl = multiselectItemEl[1];
const fordEl = multiselectItemEl[3];
const fiatEl = multiselectItemEl[2];

bmwEl.nativeElement.click();
fordEl.nativeElement.click();
fiatEl.nativeElement.click();
fixture.detectChanges();
fixtureItem.detectChanges();

expect(multiselect.value[0]).toEqual('BMW');
expect(multiselect.value[1]).toEqual('Ford');
expect(multiselect.value.length).toEqual(2);
expect(fiatEl.nativeElement.className).not.toContain('p-highlight');
expect(onOptionClickSpy).toHaveBeenCalledTimes(3);
expect(onOptionClickSpy).toBeTruthy();
});

it('should select all', () => {
Expand Down

0 comments on commit 781ad32

Please sign in to comment.