From c36b57d1903c4bdecb92f365827bbc93a7cf2562 Mon Sep 17 00:00:00 2001
From: Deborah <dobanisola@scottlogic.com>
Date: Tue, 28 May 2024 15:46:17 +0100
Subject: [PATCH] fix picklist unit tests

---
 src/app/components/picklist/picklist.spec.ts | 21 +++++++++-----------
 src/app/components/picklist/picklist.ts      |  5 ++---
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/app/components/picklist/picklist.spec.ts b/src/app/components/picklist/picklist.spec.ts
index f813f68639c..3c3bacb4d92 100755
--- a/src/app/components/picklist/picklist.spec.ts
+++ b/src/app/components/picklist/picklist.spec.ts
@@ -251,7 +251,7 @@ describe('PickList', () => {
 
         let event = { ctrlKey: true };
         let callback = new EventEmitter();
-        picklist.onItemClick(event, picklist.source, picklist.selectedItemsSource, picklist.SOURCE_LIST, callback);
+        picklist.onItemClick(event, picklist.selectedItemsSource[0], picklist.selectedItemsSource, picklist.SOURCE_LIST, callback);
         fixture.detectChanges();
 
         picklist.cd.detectChanges();
@@ -756,28 +756,25 @@ describe('PickList', () => {
     it('should change focused item with up and down arrows', () => {
         fixture.detectChanges();
 
+        const itemList = fixture.debugElement.query(By.css('.p-picklist-list'));
         let items = fixture.debugElement.queryAll(By.css('.p-picklist-item'));
         items[0].nativeElement.click();
         fixture.detectChanges();
 
         expect(picklist.selectedItemsSource.length).toEqual(1);
         expect(picklist.selectedItemsSource[0].brand).toBe('VW');
-        const keydownEvent: any = document.createEvent('CustomEvent');
-        keydownEvent.which = 40;
-        keydownEvent.initEvent('keydown', true, true);
-        items[0].nativeElement.dispatchEvent(keydownEvent);
+        itemList.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
         fixture.detectChanges();
 
-        expect(document.activeElement).toEqual(items[1].nativeElement);
-        keydownEvent.which = 38;
-        items[1].nativeElement.dispatchEvent(keydownEvent);
+        expect(items[1].nativeElement.className).toContain('p-focus');
+        itemList.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }));
         fixture.detectChanges();
 
-        expect(document.activeElement).toEqual(items[0].nativeElement);
-        keydownEvent.which = 13;
-        items[1].nativeElement.dispatchEvent(keydownEvent);
+        expect(items[0].nativeElement.className).toContain('p-focus');
+        itemList.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
+        itemList.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
         fixture.detectChanges();
 
-        expect(picklist.selectedItemsSource[0].brand).toBe('Audi');
+        expect(picklist.selectedItemsSource[1].brand).toBe('Audi');
     });
 });
diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
index 158aeecbd48..71c7b5c89cd 100755
--- a/src/app/components/picklist/picklist.ts
+++ b/src/app/components/picklist/picklist.ts
@@ -164,7 +164,6 @@ import {
                 >
                     <ng-template ngFor let-item [ngForOf]="source" [ngForTrackBy]="sourceTrackBy || trackBy" let-i="index" let-l="last">
                         <li
-                            [ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsSource), 'p-disabled': disabled }"
                             pRipple
                             cdkDrag
                             [id]="idSource + '_' + i"
@@ -273,7 +272,6 @@ import {
                 >
                     <ng-template ngFor let-item [ngForOf]="target" [ngForTrackBy]="targetTrackBy || trackBy" let-i="index" let-l="last">
                         <li
-                            [ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsTarget), 'p-disabled': disabled }"
                             pRipple
                             cdkDrag
                             [id]="idTarget + '_' + i"
@@ -1258,7 +1256,8 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         return {
             'p-picklist-item': true,
             'p-highlight': this.isSelected(item, selectedItems),
-            'p-focus': id === this.focusedOptionId
+            'p-focus': id === this.focusedOptionId,
+            'p-disabled': this.disabled
         };
     }