diff --git a/src/app/components/accordion/accordion.spec.ts b/src/app/components/accordion/accordion.spec.ts index 58652aaa707..63dec232e57 100755 --- a/src/app/components/accordion/accordion.spec.ts +++ b/src/app/components/accordion/accordion.spec.ts @@ -3,7 +3,7 @@ import { By } from '@angular/platform-browser'; import { Accordion } from './accordion'; import { AccordionTab } from './accordion'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; +import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; @Component({ template: ` @@ -175,15 +175,61 @@ describe('Accordion', () => { expect(secondAccordionTabHeaderEl.className).toContain('p-highlight'); }); - it('should be closed', () => { - fixture.detectChanges(); - - const secondAccordionTabOpenEl = fixture.debugElement.children[0].children[0].children[1].query(By.css('a')).nativeElement; - let spaceEvent = { which: 32, preventDefault() {} }; - secondAccordionTab.onKeydown(spaceEvent as KeyboardEvent); + it('should be toggle on space and enter keydown event', () => { fixture.detectChanges(); const secondAccordionTabHeaderEl = fixture.debugElement.children[0].children[0].children[1].query(By.css('.p-accordion-header')).nativeElement; + expect(secondAccordionTabHeaderEl.className).not.toContain('p-highlight'); + + //toggle when enter is pressed + const spaceEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter' }); + secondAccordionTab.onKeydown(spaceEvent); + expect(secondAccordionTabHeaderEl.className).toContain('p-highlight'); + + //toggle when space is pressed + const keyDownEvent = new KeyboardEvent('keydown', { key: 'Space', code: 'Space' }); + secondAccordionTab.onKeydown(keyDownEvent); + fixture.detectChanges(); + + expect(secondAccordionTabHeaderEl.className).not.toContain('p-highlight'); + }); + + describe('onKeydown', () => { + let firstAccordionTabEl; + let secondAccordionTabEl; + + beforeEach(() => { + firstAccordionTabEl = fixture.debugElement.children[0].children[0].children[0].query(By.css('a')).nativeElement; + secondAccordionTabEl = fixture.debugElement.children[0].children[0].children[1].query(By.css('a')).nativeElement; + }); + + const testKeyBoardEvent = (keyCode, eventTarget, activeTab) => { + fixture.detectChanges(); + + const keyDownEvent = new KeyboardEvent('keydown', { code: keyCode }); + spyOnProperty(keyDownEvent, 'target', 'get').and.returnValue(eventTarget); + + accordion.onKeydown(keyDownEvent); + fixture.detectChanges(); + + expect(document.activeElement).toEqual(activeTab); + }; + + it('ArrowDown should focus on the next tab', () => { + testKeyBoardEvent('ArrowDown', firstAccordionTabEl, secondAccordionTabEl); + }); + + it('ArrowUp should focus on the next tab', () => { + testKeyBoardEvent('ArrowUp', secondAccordionTabEl, firstAccordionTabEl); + }); + + it('Home should focus on the first tab', () => { + testKeyBoardEvent('Home', secondAccordionTabEl, firstAccordionTabEl); + }); + + it('End should focus on the last tab', () => { + testKeyBoardEvent('End', firstAccordionTabEl, secondAccordionTabEl); + }); }); });