chore(isct-63): added attribution to the modal component

ironSource · Oct 8, 2023 · f7e2f51 · f7e2f51
1 parent e81f6de
commit f7e2f51
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 8 deletions.
diff --git a/projects/fusion-ui/components/modal/v3/components/modal-footer/modal-footer.component.html b/projects/fusion-ui/components/modal/v3/components/modal-footer/modal-footer.component.html
@@ -1,13 +1,15 @@
 <div class="modal-footer">
-    <span class="fu-error-message">{{ error }}</span>
+    <span class="fu-error-message" [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL_ERROR">{{ error }}</span>
     <fusion-button class="fu-secondary-button"
+        [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL_CANCEL_BUTTON"
         [class]="cancelButtonClass"
         (click)="onCloseButtonClicked.emit()"
         *ngIf="!cancelButtonHidden"
     >
         {{ cancelButtonText }}
     </fusion-button>
     <fusion-button class="fu-primary-button"
+        [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL_SUBMIT_BUTTON"
         [class]="submitButtonClass"
         [loading]="submitButtonPending"
         [disabled]="submitButtonDisabled || !!error"

diff --git a/projects/fusion-ui/components/modal/v3/components/modal-footer/modal-footer.component.ts b/projects/fusion-ui/components/modal/v3/components/modal-footer/modal-footer.component.ts
@@ -1,4 +1,5 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Injector, Input, Output} from '@angular/core';
+import {ModalTestIdModifiers, TestIdsService} from '@ironsource/fusion-ui';
 
 @Component({
     selector: 'fusion-modal-footer',
@@ -18,10 +19,16 @@ export class ModalFooterComponent {
         this.submitButtonDisabled = config?.submitButtonDisabled;
     }
     @Input() error;
+    @Input() testId: string;
 
     @Output() onSubmit = new EventEmitter();
     @Output() onCloseButtonClicked = new EventEmitter();
 
+    /** @internal */
+    modalTestIdModifiers: typeof ModalTestIdModifiers = ModalTestIdModifiers;
+    /** @internal */
+    testIdsService: TestIdsService = this.injector.get(TestIdsService);
+
     /** @internal */
     submitButtonText: string;
     /** @internal */
@@ -34,4 +41,6 @@ export class ModalFooterComponent {
     cancelButtonClass: string;
     /** @internal */
     cancelButtonHidden: boolean;
+
+    constructor(private injector: Injector) {}
 }
diff --git a/projects/fusion-ui/components/modal/v3/components/modal-header/modal-header.component.html b/projects/fusion-ui/components/modal/v3/components/modal-header/modal-header.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header" *ngIf="headerText">
-    <div>{{ headerText }}</div>
+    <div class="modal-header-title" [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL_TITLE">{{ headerText }}</div>
     <fusion-icon class="fu-info"
                  *ngIf="infoText"
                  [name]="infoIcon"
@@ -8,6 +8,7 @@
     <fusion-icon class="fu-close"
                  *ngIf="showCloseButton"
                  [name]="closeButtonIcon"
+                 [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL_CLOSE_BUTTON"
                  (click)="close.emit()"
     ></fusion-icon>
 </div>
diff --git a/projects/fusion-ui/components/modal/v3/components/modal-header/modal-header.component.ts b/projects/fusion-ui/components/modal/v3/components/modal-header/modal-header.component.ts
@@ -1,5 +1,6 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Injector, Input, Output} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
+import {ModalTestIdModifiers, TestIdsService} from '@ironsource/fusion-ui';
 
 @Component({
     selector: 'fusion-modal-header',
@@ -9,6 +10,7 @@ import {BehaviorSubject} from 'rxjs';
 export class ModalHeaderComponent {
     @Input() headerText: string;
     @Input() showCloseButton = true;
+    @Input() testId: string;
 
     private _infoText: string;
     @Input() set infoText(value: string) {
@@ -18,10 +20,17 @@ export class ModalHeaderComponent {
         return this._infoText;
     }
 
+    /** @internal */
+    modalTestIdModifiers: typeof ModalTestIdModifiers = ModalTestIdModifiers;
+    /** @internal */
+    testIdsService: TestIdsService = this.injector.get(TestIdsService);
+
     /** @internal */
     closeButtonIcon = {iconName: 'close', iconVersion: 'v3'};
     /** @internal */
     infoIcon = {iconName: 'info', iconVersion: 'v3'};
 
     @Output() close = new EventEmitter();
+
+    constructor(private injector: Injector) {}
 }
diff --git a/projects/fusion-ui/components/modal/v3/modal.component.html b/projects/fusion-ui/components/modal/v3/modal.component.html
@@ -1,12 +1,13 @@
 <div class="modal" [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL" #modalHolder>
     <div class="modal-body" [class.has-footer]="configuration?.hasFooter" [class.has-header]="configuration?.headerText" [style.width]="configuration?.width" [style.height]="configuration?.height" #modalBody>
 
-        <fusion-modal-header [headerText]="configuration?.headerText" [infoText]="configuration?.headerInfoText" (close)="onClose(true, 'close')"></fusion-modal-header>
+        <fusion-modal-header [testId]="testId" [headerText]="configuration?.headerText" [infoText]="configuration?.headerInfoText" (close)="onClose(true, 'close')"></fusion-modal-header>
 
         <fusion-modal-content
             *ngIf="configuration?.headerText || configuration?.hasFooter"
             [pending]="submitPending"
             [ngClass]="{'fu-has-height': !!configuration?.height}"
+            [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:modalTestIdModifiers.MODAL_CONTENT"
         >
             <ng-container *ngTemplateOutlet="content"></ng-container>
         </fusion-modal-content>
@@ -29,6 +30,7 @@
             (onSubmit)="onClose(true, 'submit')"
             (onCloseButtonClicked)="onClose(true, 'close')"
             [submitButtonPending]="submitPending"
+            [testId]="testId"
         ></fusion-modal-footer>
 
     </div>

diff --git a/projects/fusion-ui/entities/test-ids-modifiers.ts b/projects/fusion-ui/entities/test-ids-modifiers.ts
@@ -22,11 +22,10 @@ export enum IncludeExcludeTestIdModifiers {
 
 export enum ModalTestIdModifiers {
     MODAL = 'modal',
-    MODAL_HEADER = 'modal-header',
     MODAL_TITLE = 'modal-title',
     MODAL_CLOSE_BUTTON = 'modal-close-button',
     MODAL_CONTENT = 'modal-content',
-    MODAL_FOOTER = 'modal-footer',
     MODAL_SUBMIT_BUTTON = 'modal-submit-button',
-    MODAL_CANCEL_BUTTON = 'modal-cancel-button'
+    MODAL_CANCEL_BUTTON = 'modal-cancel-button',
+    MODAL_ERROR = 'modal-error'
 }