From 88949621fb3de048eb33b54c677baf24ba6c6806 Mon Sep 17 00:00:00 2001
From: Wojciech Duda <69160975+wojd0@users.noreply.github.com>
Date: Mon, 12 Aug 2024 17:24:22 +0200
Subject: [PATCH] [MIGRATION] - storybook chips related e2e fails fix, unit
 alignments

---
 .../widgets/group/group-cloud.widget.spec.ts      | 13 -------------
 .../widgets/people/people-cloud.widget.spec.ts    | 15 +++------------
 .../group/components/group-cloud.component.html   |  3 ++-
 .../components/group-cloud.component.spec.ts      | 11 ++++-------
 .../people/components/people-cloud.component.html |  4 ++--
 .../components/people-cloud.component.spec.ts     | 11 ++++-------
 6 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
index 2b31b57d84..e42a94e14d 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
@@ -23,7 +23,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatChipHarness } from '@angular/material/chips/testing';
-import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
 describe('GroupCloudWidgetComponent', () => {
     let fixture: ComponentFixture<GroupCloudWidgetComponent>;
@@ -145,12 +144,6 @@ describe('GroupCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
             const groupChip = await loader.getHarness(MatChipHarness);
             expect(await groupChip.isDisabled()).toBeTrue();
         });
@@ -166,12 +159,6 @@ describe('GroupCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
             const groupChips = await loader.getAllHarnesses(MatChipHarness);
             expect(await groupChips[0].isDisabled()).toBeTrue();
             expect(await groupChips[1].isDisabled()).toBeTrue();
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
index 8302a31482..669088ab7a 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
@@ -24,8 +24,7 @@ import { IdentityUserService } from '../../../../people/services/identity-user.s
 import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatFormFieldHarness } from '@angular/material/form-field/testing';
-import { MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipRowHarness } from '@angular/material/chips/testing';
 
 describe('PeopleCloudWidgetComponent', () => {
     let fixture: ComponentFixture<PeopleCloudWidgetComponent>;
@@ -174,12 +173,8 @@ describe('PeopleCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
+            const peopleChip = await loader.getHarness(MatChipRowHarness);
 
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
-            const peopleChip = await loader.getHarness(MatChipHarness);
             expect(await peopleChip.isDisabled()).toBeTrue();
         });
 
@@ -194,11 +189,7 @@ describe('PeopleCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
-            const peopleChip = await loader.getAllHarnesses(MatChipHarness);
+            const peopleChip = await loader.getAllHarnesses(MatChipRowHarness);
             expect(await peopleChip[0].isDisabled()).toBeTrue();
             expect(await peopleChip[1].isDisabled()).toBeTrue();
         });
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
index 48c1f30994..a1a1e0332e 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
@@ -1,12 +1,13 @@
 <form>
     <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
         <ng-content select="[label]"></ng-content>
-        <mat-chip-grid #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
+        <mat-chip-grid #groupChipList data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
                 [removable]="!(group.readonly)"
                 [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
                 (removed)="onRemove(group)"
+                [disabled]="isReadonly() || isValidationLoading()"
                 title="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{group.name}}
                 <mat-icon
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
index 34164b9cd6..4e05efb860 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
@@ -26,7 +26,7 @@ import { IdentityGroupService } from '../services/identity-group.service';
 import { mockFoodGroups, mockMeatChicken, mockVegetableAubergine } from '../mock/group-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipHarness } from '@angular/material/chips/testing';
 import { MatIconHarness } from '@angular/material/icon/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 
@@ -357,9 +357,7 @@ describe('GroupCloudComponent', () => {
 
             const chips = await loader.getAllHarnesses(MatChipHarness);
             expect(chips.length).toBe(1);
-
-            const chipList = await loader.getHarness(MatChipGridHarness);
-            expect(await chipList.isDisabled()).toBe(true);
+            expect(await chips[0].isDisabled()).toBe(true);
         });
 
         it('should chip list be disabled and show all the chips - multiple mode', async () => {
@@ -372,9 +370,8 @@ describe('GroupCloudComponent', () => {
 
             const chips = await loader.getAllHarnesses(MatChipHarness);
             expect(chips.length).toBe(2);
-
-            const chipList = await loader.getHarness(MatChipGridHarness);
-            expect(await chipList.isDisabled()).toBe(true);
+            expect(await chips[0].isDisabled()).toBe(true);
+            expect(await chips[1].isDisabled()).toBe(true);
         });
     });
 });
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
index fed2536b68..0c47cf0218 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@@ -8,12 +8,13 @@
     >
         <ng-content *ngIf="!title" select="[label]"></ng-content>
         <mat-label *ngIf="title">{{ title | translate }}</mat-label>
-        <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
+        <mat-chip-grid #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
                 [removable]="!(user.readonly)"
                 [attr.data-automation-id]="'adf-people-cloud-chip-' + user.username"
                 (removed)="onRemove(user)"
+                [disabled]="isReadonly() || isValidationLoading()"
                 title="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{user | fullName}}
                 <mat-icon
@@ -35,7 +36,6 @@
                    data-automation-id="adf-people-cloud-search-input" #userInput>
         </mat-chip-grid>
 
-
         <mat-autocomplete autoActiveFirstOption class="adf-people-cloud-list"
                           #auto="matAutocomplete"
                           (optionSelected)="onSelect($event.option.value)"
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
index a8217348b8..b7d1833d77 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
@@ -28,7 +28,7 @@ import { IDENTITY_USER_SERVICE_TOKEN } from '../services/identity-user-service.t
 import { mockFoodUsers, mockKielbasaSausage, mockShepherdsPie, mockYorkshirePudding, mockPreselectedFoodUsers } from '../mock/people-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipHarness } from '@angular/material/chips/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
@@ -406,9 +406,7 @@ describe('PeopleCloudComponent', () => {
 
                 const chips = await loader.getAllHarnesses(MatChipHarness);
                 expect(chips.length).toBe(1);
-
-                const chipList = await loader.getHarness(MatChipGridHarness);
-                expect(await chipList.isDisabled()).toBe(true);
+                expect(await chips[0].isDisabled()).toBe(true);
             });
 
             it('should chip list be disabled and show mat chips for all the preselected users - multiple mode', async () => {
@@ -421,9 +419,8 @@ describe('PeopleCloudComponent', () => {
 
                 const chips = await loader.getAllHarnesses(MatChipHarness);
                 expect(chips.length).toBe(2);
-
-                const chipList = await loader.getHarness(MatChipGridHarness);
-                expect(await chipList.isDisabled()).toBe(true);
+                expect(await chips[0].isDisabled()).toBe(true);
+                expect(await chips[1].isDisabled()).toBe(true);
             });
         });
     });