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

src/lib/Button/Button.svelte

@@ -30,7 +30,7 @@
     on:click={handleButtonClick}
     disabled={!(properties.enable && !properties.showLoader)}
     type={properties.type}
-    data-pw={properties.dataPw}
+    data-pw={properties.testId}
   >
     {#if properties.showLoader && properties.loaderType === 'Circular'}
       <div class="button-loader"><Loader /></div>

src/lib/Button/properties.ts

@@ -6,7 +6,7 @@ export type ButtonProperties = {
   showLoader: boolean;
   loaderType: LoaderType | null;
   type: 'submit' | 'reset' | 'button';
-  dataPw?: string;
+  testId?: string;
 };
 
 export const defaultButtonProperties: ButtonProperties = {

src/lib/Input/Input.svelte

@@ -201,7 +201,7 @@
       on:input={onInput}
       on:paste={onPaste}
       on:click={onClick}
-      data-pw={properties.dataPw}
+      data-pw={properties.testId}
       class="
       {properties.actionInput ? 'action-input' : ''}
     "

src/lib/Input/properties.ts

@@ -22,7 +22,7 @@ export type InputProperties = {
   autoComplete: AutoCompleteType;
   name: string;
   textTransformers: TextTransformer[];
-  dataPw?: string;
+  testId?: string;
 };
 
 export const defaultInputProperties: InputProperties = {

src/lib/Modal/Modal.svelte

@@ -107,18 +107,12 @@
                 </div>
               {/if}
               {#if properties.header.text}
-                <div class="header-text">
+                <div class="header-text" data-pw={properties.header.testId}>
                   {properties.header.text}
                 </div>
               {/if}
               {#if properties.header.rightImage}
-                <div
-                  role="button"
-                  tabindex="0"
-                  on:click={handleRightImageClick}
-                  on:keydown
-                  data-pw={properties.rightImageTestId}
-                >
+                <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,6 +15,8 @@ export type ModalProperties = {
     leftImage: string | null;
     rightImage: string | null;
     text: string | null;
+    testId?: 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}>
+  <label class="label-container" for={properties.label} data-pw={properties.labelTestId}>
     {properties.label}
   </label>
 {/if}
@@ -152,6 +152,7 @@
       on:keydown
       role="button"
       tabindex="0"
+      data-pw={properties.testId}
     >
       {#if properties.leftIcon !== null}
         <div class="icon-container">
@@ -219,6 +220,7 @@
             class="item {isSelected(properties.selectedItem, item) ? ' item-selected' : ''}"
             role="button"
             tabindex="0"
+            data-pw={`${properties.itemTestId}-${item}`}
           >
             {#if properties.selectMultipleItems}
               <CheckListItem checked={isSelected(properties.selectedItem, item)} text="" />

src/lib/Select/properties.ts

@@ -13,4 +13,7 @@ export type SelectProperties = {
   showSingleSelectButton?: boolean | null;
   showSelectedItem?: boolean;
   showSelectedItemCount?: boolean;
+  testId?: string;
+  labelTestId?: string;
+  itemTestId?: string;
 };

src/lib/Toast/Toast.svelte

@@ -104,10 +104,10 @@
       </div>
     {/if}
 
-    <div class="toast-message">
+    <div class="toast-message" data-pw={properties.messageTestId}>
       {properties.message}
       {#if properties.subtext}
-        <div class="toast-subtext">{properties.subtext}</div>
+        <div class="toast-subtext" data-pw={properties.subTextTestId}>{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.closeIconTestId}>
         <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;
+  testId?: string;
+  messageTestId?: string;
+  subTextTestId?: string;
+  closeIconTestId?: string;
 };
 
 export const defaultToastProperties: ToastProperties = {