fix: Phone playwright adjustment and attachment delete script failure fix (#408)

* fix: Phone playwright adjustment and attachment delete script failure fix

* refactor: Added back download and delete file scenario

Author: tammy-a11y

packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html

@@ -2,26 +2,24 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="bHasForm$; else noEdit">
-    <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
-        <mat-tel-input
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          [preferredCountries]="preferredCountries"
-          [enablePlaceholder]="true"
-          [enableSearch]="true"
-          [placeholder]="placeholder"
-          [required]="bRequired$"
-          [disabled]="bDisabled$ || bReadonly$"
-          (change)="fieldOnChange()"
-          (blur)="fieldOnBlur()"
-        >
-        </mat-tel-input>
-        <mat-label>{{ label$ }}</mat-label>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-      </mat-form-field>
-    </div>
+  <div *ngIf="bHasForm$ && bVisible$; else noEdit">
+    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
+      <mat-tel-input
+        [attr.data-test-id]="testId"
+        [formControl]="fieldControl"
+        [preferredCountries]="preferredCountries"
+        [enablePlaceholder]="true"
+        [enableSearch]="true"
+        [placeholder]="placeholder"
+        [required]="bRequired$"
+        [disabled]="bDisabled$ || bReadonly$"
+        (change)="fieldOnChange()"
+        (blur)="fieldOnBlur()"
+      >
+      </mat-tel-input>
+      <mat-label>{{ label$ }}</mat-label>
+      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+    </mat-form-field>
   </div>
 </ng-template>
 <ng-template #noEdit>

packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.ts

@@ -54,8 +54,7 @@ export class PhoneComponent extends FieldBase {
     const isValueChanged = newVal?.toString() !== oldVal.toString();
 
     if (isValueChanged) {
-      const value = this.formGroup$.controls[this.controlName$].value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, newVal);
     }
   }
 

packages/angular-sdk-components/src/lib/_components/widget/attachment/attachment.component.ts

@@ -245,7 +245,9 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.fileInput.nativeElement.value = '';
+    if (this.fileInput?.nativeElement) {
+      this.fileInput.nativeElement.value = '';
+    }
   }
 
   onFileAdded(event) {

projects/angular-test-app/tests/e2e/DigV2/FormFields/Phone.spec.js

@@ -56,19 +56,19 @@ test.describe('E2E test', () => {
     // /** Disable tests */
     const alwaysDisabledPhone = page.locator('mat-tel-input[data-test-id="d415da67e9764d6e7cdf3d993cb54f51"] >> input');
     attributes = await common.getAttributes(alwaysDisabledPhone);
-    await expect(attributes.includes('disabled')).toBeTruthy();
+    expect(attributes.includes('disabled')).toBeTruthy();
 
     const conditionallyDisabledPhone = page.locator('mat-tel-input[data-test-id="b6cee3728235ed1f6cef7b11ac850ea9"] >> input');
     attributes = await common.getAttributes(conditionallyDisabledPhone);
     if (isDisabled) {
-      await expect(attributes.includes('disabled')).toBeTruthy();
+      expect(attributes.includes('disabled')).toBeTruthy();
     } else {
-      await expect(attributes.includes('disabled')).toBeFalsy();
+      expect(attributes.includes('disabled')).toBeFalsy();
     }
 
     const neverDisabledPhone = page.locator('mat-tel-input[data-test-id="b23e38f877c8a40f18507b39893a8d61"] >> input');
     attributes = await common.getAttributes(neverDisabledPhone);
-    await expect(attributes.includes('disabled')).toBeFalsy();
+    expect(attributes.includes('disabled')).toBeFalsy();
 
     /** Selecting Update from the Sub Category dropdown */
     await common.selectSubCategory('Update', page);
@@ -102,11 +102,14 @@ test.describe('E2E test', () => {
 
     /** Entering a valid Phone number */
     await editablePhoneInput.clear();
+    /** Todo: Modified this script because mat-tel-input doesn't provide blur event and fix need to be implemented in blur callback
+     * Keeping this comment for reference until this control provides blur callback
+     */
+    await editablePhoneInput.fill('6175551212');
+    await editablePhoneInput.blur();
     await countrySelector.click();
     await page.locator('text=United States >> nth=0').click();
-    await editablePhoneInput.fill('6175551212');
 
-    await editablePhoneInput.blur();
     /** Expecting the invalid Phone number error be no longer present */
     await expect(page.locator(`mat-error:has-text("${validationMsg}")`)).toBeHidden();
 

projects/angular-test-app/tests/e2e/DigV2/FormFields/attachment.spec.js

@@ -91,24 +91,19 @@ test.describe('E2E test', () => {
     /** Testing invalid attachment case by uploading an empty file */
     await page.setInputFiles(`#AttachmentList`, [zeroBytesFilePath]);
     await expect(page.locator(`div >> text="Empty file can't be uploaded."`)).toBeVisible();
-
     await page.locator('div[class="psdk-attachment-card"]').filter({ hasText: 'Unable to upload file' }).locator('#delete-attachment').click();
-
     await page.locator('button:has-text("submit")').click();
 
-    // Raised bug BUG-960405
-    // await page.locator('button[id="setting-button"] >> nth=0').click();
-
-    // /** Download attachment */
-    // const menuSelector = await page.locator('div[role="menu"]');
-    // await menuSelector.locator('button >> text="Download"').click();
+    /** Download attachment */
+    await page.locator('button[id="setting-button"] >> nth=0').click();
+    const menuSelector = await page.locator('div[role="menu"]');
+    await menuSelector.locator('button >> text="Download"').click();
 
-    // await page.locator('button[id="setting-button"] >> nth=0').click();
-
-    // /** Delete attachment */
-    // await menuSelector.locator('button >> text="Delete"').click();
-    // await expect(page.locator('div >> text="cableinfo.jpg"')).toBeVisible();
-    // await expect(page.locator('div >> text="cablechat.jpg"')).toBeHidden();
+    /** Delete attachment */
+    await page.locator('button[id="setting-button"] >> nth=0').click();
+    await menuSelector.locator('button >> text="Delete"').click();
+    await expect(page.locator('div >> text="cableinfo.jpg"')).toBeVisible();
+    await expect(page.locator('div >> text="cablechat.jpg"')).toBeHidden();
   }, 10000);
 });
 

projects/angular-test-app/tests/e2e/MediaCo/portal.spec.js

@@ -105,9 +105,10 @@ test.describe('E2E test', () => {
     const todo = await page.locator('div[class="psdk-todo-assignments"]');
     await expect(todo).toBeVisible();
 
-    // Todo: This will be fixed as part of BUG-960405
-    // const attachmentCount = await page.locator('div[id="attachments-count"]').textContent();
-    // await expect(Number(attachmentCount)).toBeGreaterThan(0);
+    await expect(page.locator('button[id="setting-button"] >> nth=0')).toBeVisible();
+
+    const attachmentCount = await page.locator('div[id="attachments-count"]').textContent();
+    expect(Number(attachmentCount)).toBeGreaterThan(0);
   }, 10000);
 
   test('should enter a discount value($) and send to tech', async ({ page }) => {