Merge pull request #15510 from dobanisola-scottlogic/fix-accordion-un…

…it-test Accordion: fix broken unit test
primefaces · May 14, 2024 · 07a81cc · 07a81cc
2 parents eabba55 + 6dc4cc7
commit 07a81cc
Showing 1 changed file with 53 additions and 7 deletions.
diff --git 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: `<p-accordion [collapseIcon]="collapseIcon" [expandIcon]="expandIcon" [styleClass]="styleClass" [style]="style">
@@ -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);
+        });
     });
 });