BZ-40556:test: Add testId input property for modal and select properties

- Adding a new property in modal and select properties that uniquely identifies items
- Enhances the testing capabilities

Author: dakshana-j

src/lib/Modal/Modal.svelte

@@ -112,7 +112,7 @@
                 </div>
               {/if}
               {#if properties.header.rightImage}
-                <div role="button" tabindex="0" on:click={handleRightImageClick} on:keydown data-pw={`${properties.header.dataPw}-button`}>
+                <div role="button" tabindex="0" on:click={handleRightImageClick} on:keydown data-pw={`${properties.header.buttonTestId}`}>
                   <img class="header-right-img" src={properties.header.rightImage} alt="" />
                 </div>
               {/if}

src/lib/Modal/properties.ts

@@ -15,7 +15,8 @@ export type ModalProperties = {
     leftImage: string | null;
     rightImage: string | null;
     text: string | null;
-    dataPw?: string | null;
+    dataPw?: string;
+    buttonTestId?: string;
   };
   footer?: {
     primaryButton?: ButtonProperties,

src/lib/Select/Select.svelte

@@ -138,7 +138,7 @@
 </script>
 
 {#if properties.label !== null && properties.label !== ''}
-  <label class="label-container" for={properties.label} data-pw={`${properties.dataPw}-heading`}>
+  <label class="label-container" for={properties.label} data-pw={`${properties.dataPwHeading}`}>
     {properties.label}
   </label>
 {/if}
@@ -220,7 +220,7 @@
             class="item {isSelected(properties.selectedItem, item) ? ' item-selected' : ''}"
             role="button"
             tabindex="0"
-            data-pw={`${properties.dataPw}-item-${item}`}
+            data-pw={`${properties.dataPwItemButton}-${item}`}
           >
             {#if properties.selectMultipleItems}
               <CheckListItem checked={isSelected(properties.selectedItem, item)} text="" />

src/lib/Select/properties.ts

@@ -14,4 +14,6 @@ export type SelectProperties = {
   showSelectedItem?: boolean;
   showSelectedItemCount?: boolean;
   dataPw?: string;
+  dataPwHeading?: string;
+  dataPwItemButton?: string;
 };

src/lib/Toast/Toast.svelte

@@ -104,10 +104,10 @@
       </div>
     {/if}
 
-    <div class="toast-message">
+    <div class="toast-message" data-pw={properties.dataPwMessage}>
       {properties.message}
       {#if properties.subtext}
-        <div class="toast-subtext">{properties.subtext}</div>
+        <div class="toast-subtext" data-pw={properties.dataPwSubText}>{properties.subtext}</div>
       {/if}
 
       {#if $$slots.bottomContent}
@@ -116,7 +116,7 @@
     </div>
 
     {#if properties.rightIcon}
-      <div class="close-button" tabindex="0" role="button" on:click={hideToast} on:keypress>
+      <div class="close-button" tabindex="0" role="button" on:click={hideToast} on:keypress data-pw={properties.dataPwCloseIcon}>
         <img class="toast-icon" src={properties.rightIcon} alt="close-icon" />
       </div>
     {/if}

src/lib/Toast/properties.ts

@@ -14,6 +14,10 @@ export type ToastProperties = {
   inAnimationDuration?: number;
   outAnimationOffset?: number;
   outAnimationDuration?: number;
+  dataPw?: string;
+  dataPwMessage?: string;
+  dataPwSubText?: string;
+  dataPwCloseIcon?: string;
 };
 
 export const defaultToastProperties: ToastProperties = {