feat: add test identifiers (data-test) to Container Copy components (#2306)

src/Common/LoadingOverlay.tsx

@@ -13,6 +13,7 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) =>
 
   return (
     <Overlay
+      data-test="loading-overlay"
       styles={{
         root: {
           backgroundColor: "rgba(255,255,255,0.9)",

src/Common/__snapshots__/LoadingOverlay.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`LoadingOverlay should handle long labels properly 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -22,6 +23,7 @@ exports[`LoadingOverlay should handle long labels properly 1`] = `
 exports[`LoadingOverlay should render loading overlay when isLoading is true 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -41,6 +43,7 @@ exports[`LoadingOverlay should render loading overlay when isLoading is true 1`]
 exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -60,6 +63,7 @@ exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 exports[`LoadingOverlay should render loading overlay with empty label 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddManagedIdentity.tsx

@@ -35,6 +35,7 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </Text>
       <Toggle
+        data-test="btn-toggle"
         checked={systemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.tsx

@@ -65,6 +65,7 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
         <InfoTooltip content={TooltipContent} />
       </Text>
       <Toggle
+        data-test="btn-toggle"
         checked={readPermissionAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.tsx

@@ -12,7 +12,7 @@ import { useCopyJobPrerequisitesCache } from "../../Utils/useCopyJobPrerequisite
 import usePermissionSections, { PermissionGroupConfig, PermissionSectionConfig } from "./hooks/usePermissionsSection";
 
 const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
-  <AccordionItem key={id} value={id} disabled={disabled}>
+  <AccordionItem key={id} value={id} disabled={disabled} data-test="accordion-item">
     <AccordionHeader className="accordionHeader">
       <Text className="accordionHeaderText" variant="medium">
         {title}
@@ -25,13 +25,13 @@ const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Compo
         height={completed ? 20 : 24}
       />
     </AccordionHeader>
-    <AccordionPanel aria-disabled={disabled} className="accordionPanel">
+    <AccordionPanel aria-disabled={disabled} className="accordionPanel" data-test="accordion-panel">
       <Component />
     </AccordionPanel>
   </AccordionItem>
 );
 
-const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description, sections }) => {
+const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, description, sections }) => {
   const [openItems, setOpenItems] = React.useState<string[]>([]);
 
   useEffect(() => {
@@ -44,6 +44,7 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description,
 
   return (
     <Stack
+      data-test={`permission-group-container-${id}`}
       tokens={{ childrenGap: 15 }}
       styles={{
         root: {
@@ -99,7 +100,11 @@ const AssignPermissions = () => {
   }, []);
 
   return (
-    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 20 }}>
+    <Stack
+      data-test="Panel:AssignPermissionsContainer"
+      className="assignPermissionsContainer"
+      tokens={{ childrenGap: 20 }}
+    >
       <Text variant="medium">
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.tsx

@@ -31,6 +31,7 @@ const DefaultManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </div>
       <Toggle
+        data-test="btn-toggle"
         checked={defaultSystemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx

@@ -127,6 +127,7 @@ const PointInTimeRestore: React.FC = () => {
       <Stack.Item>
         {showRefreshButton ? (
           <PrimaryButton
+            data-test="pointInTimeRestore:RefreshBtn"
             className="fullWidth"
             text={ContainerCopyMessages.refreshButtonLabel}
             iconProps={{ iconName: "Refresh" }}
@@ -134,6 +135,7 @@ const PointInTimeRestore: React.FC = () => {
           />
         ) : (
           <PrimaryButton
+            data-test="pointInTimeRestore:PrimaryBtn"
             className="fullWidth"
             text={loading ? "" : ContainerCopyMessages.pointInTimeRestore.buttonText}
             {...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddManagedIdentity.test.tsx.snap

@@ -67,6 +67,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
         class="ms-Toggle-background pill-117"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle1"
         role="switch"
         type="button"
@@ -154,6 +155,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle11"
         role="switch"
         type="button"
@@ -173,10 +175,12 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   </div>
   <div
     class="ms-Stack popover-container foreground loading css-123"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div
       class="ms-Overlay root-135"
+      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-137"
@@ -323,6 +327,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle3"
         role="switch"
         type="button"
@@ -342,6 +347,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   </div>
   <div
     class="ms-Stack popover-container foreground css-123"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle17"
           role="switch"
           type="button"
@@ -103,6 +104,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle16"
           role="switch"
           type="button"
@@ -165,6 +167,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle3"
           role="switch"
           type="button"
@@ -227,6 +230,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle1"
           role="switch"
           type="button"
@@ -314,6 +318,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -376,6 +381,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle2"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AssignPermissions.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -15,6 +16,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -36,6 +38,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -85,6 +88,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -134,6 +138,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -142,6 +147,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -201,6 +207,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -212,6 +219,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -233,6 +241,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -282,6 +291,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -331,6 +341,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -339,6 +350,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -398,6 +410,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -409,6 +422,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -430,6 +444,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -479,6 +494,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -528,6 +544,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -536,6 +553,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -595,6 +613,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -606,6 +625,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -627,6 +647,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -676,6 +697,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -725,6 +747,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -733,6 +756,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -792,6 +816,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -803,6 +828,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -824,6 +850,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -875,6 +902,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
       </div>
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -896,6 +924,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -945,6 +974,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -964,6 +994,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -975,6 +1006,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -996,6 +1028,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1045,6 +1078,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1094,6 +1128,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -1113,6 +1148,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1124,6 +1160,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -1145,6 +1182,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1194,6 +1232,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1243,6 +1282,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="add-read-permission"
@@ -1262,6 +1302,7 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1283,6 +1324,7 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`DefaultManagedIdentity Edge Cases should handle missing account name gr
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle14"
           role="switch"
           type="button"
@@ -103,6 +104,7 @@ exports[`DefaultManagedIdentity Edge Cases should handle null account 1`] = `
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle15"
           role="switch"
           type="button"
@@ -165,6 +167,7 @@ exports[`DefaultManagedIdentity Loading States should render loading state snaps
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle10"
           role="switch"
           type="button"
@@ -256,6 +259,7 @@ exports[`DefaultManagedIdentity Rendering should render correctly with default s
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -318,6 +322,7 @@ exports[`DefaultManagedIdentity Toggle Interactions should render toggle with ch
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle7"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap

@@ -56,6 +56,7 @@ exports[`PointInTimeRestore Initial Render should render correctly with default
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -131,6 +132,7 @@ exports[`PointInTimeRestore Initial Render should render with empty account name
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -161,6 +163,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
   >
     <div
       class="ms-Overlay root-123"
+      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-125"
@@ -223,6 +226,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
         aria-disabled="true"
         class="ms-Button ms-Button--primary is-disabled fullWidth root-128"
         data-is-focusable="false"
+        data-test="pointInTimeRestore:PrimaryBtn"
         disabled=""
         type="button"
       >
@@ -301,6 +305,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot with refresh button
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:RefreshBtn"
         type="button"
       >
         <span

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/NavigationControls.tsx

@@ -19,9 +19,21 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
   isPreviousDisabled,
 }) => (
   <Stack horizontal tokens={{ childrenGap: 20 }}>
-    <PrimaryButton text={primaryBtnText} onClick={onPrimary} allowDisabledFocus disabled={isPrimaryDisabled} />
+    <PrimaryButton
-    <DefaultButton text="Previous" onClick={onPrevious} allowDisabledFocus disabled={isPreviousDisabled} />
+      data-test="copy-job-primary"
-    <DefaultButton text="Cancel" onClick={onCancel} />
+      text={primaryBtnText}
+      onClick={onPrimary}
+      allowDisabledFocus
+      disabled={isPrimaryDisabled}
+    />
+    <DefaultButton
+      data-test="copy-job-previous"
+      text="Previous"
+      onClick={onPrevious}
+      allowDisabledFocus
+      disabled={isPreviousDisabled}
+    />
+    <DefaultButton data-test="copy-job-cancel" text="Cancel" onClick={onCancel} />
   </Stack>
 );
 

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx

@@ -17,6 +17,7 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
   ({ isLoading = false, title, children, onPrimary, onCancel }) => {
     return (
       <Stack
+        data-test="popover-container"
         className={`popover-container foreground ${isLoading ? "loading" : ""}`}
         tokens={{ childrenGap: 20 }}
         style={{ maxWidth: 450 }}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -71,6 +72,7 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -133,6 +135,7 @@ exports[`PopoverMessage Component Edge Cases should handle undefined children 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -195,6 +198,7 @@ exports[`PopoverMessage Component Edge Cases should handle very long title 1`] =
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -266,6 +270,7 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -335,6 +340,7 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -409,6 +415,7 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -478,6 +485,7 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
 <div>
   <div
     class="ms-Stack popover-container foreground loading css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.tsx

@@ -22,6 +22,7 @@ const CreateCopyJobScreens: React.FC = () => {
       <Stack.Item className="createCopyJobScreensContent">
         {contextError && (
           <MessageBar
+            data-test="Panel:ErrorContainer"
             className="createCopyJobErrorMessageBar"
             messageBarType={MessageBarType.blocked}
             isMultiline={false}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/PreviewCopyJob.tsx

@@ -31,17 +31,17 @@ const PreviewCopyJob: React.FC = () => {
     }));
   };
   return (
-    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer" data-test="Panel:PreviewCopyJob">
       <FieldRow label={ContainerCopyMessages.jobNameLabel}>
-        <TextField value={jobName} onChange={onJobNameChange} />
+        <TextField data-test="job-name-textfield" value={jobName} onChange={onJobNameChange} />
       </FieldRow>
       <Stack>
         <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
-        <Text>{copyJobState.source?.subscription?.displayName}</Text>
+        <Text data-test="source-subscription-name">{copyJobState.source?.subscription?.displayName}</Text>
       </Stack>
       <Stack>
         <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-        <Text>{copyJobState.source?.account?.name}</Text>
+        <Text data-test="source-account-name">{copyJobState.source?.account?.name}</Text>
       </Stack>
       <Stack>
         <DetailsList

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/__snapshots__/PreviewCopyJob.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`PreviewCopyJob should handle special characters in database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -32,6 +33,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField84"
               type="text"
               value="job-with@special#chars_123"
@@ -51,6 +53,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -65,6 +68,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -321,6 +325,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
 exports[`PreviewCopyJob should render component with cross-subscription setup 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -350,6 +355,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField96"
               type="text"
               value=""
@@ -369,6 +375,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -383,6 +390,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -639,6 +647,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
 exports[`PreviewCopyJob should render with default state and empty job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -668,6 +677,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField0"
               type="text"
               value=""
@@ -687,6 +697,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -701,6 +712,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -957,6 +969,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
 exports[`PreviewCopyJob should render with long subscription and account names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -986,6 +999,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField60"
               type="text"
               value=""
@@ -1005,6 +1019,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       This is a very long subscription name that might cause display issues if not handled properly
     </span>
@@ -1019,6 +1034,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       this-is-a-very-long-database-account-name-that-might-cause-display-issues
     </span>
@@ -1275,6 +1291,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
 exports[`PreviewCopyJob should render with missing source account information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1304,6 +1321,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField36"
               type="text"
               value=""
@@ -1323,6 +1341,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -1588,6 +1607,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
 exports[`PreviewCopyJob should render with missing source subscription information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1617,6 +1637,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField24"
               type="text"
               value=""
@@ -1645,6 +1666,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -1901,6 +1923,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
 exports[`PreviewCopyJob should render with online migration type 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1930,6 +1953,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField72"
               type="text"
               value="online-migration-job"
@@ -1949,6 +1973,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -1963,6 +1988,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -2219,6 +2245,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
 exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2248,6 +2275,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField12"
               type="text"
               value="custom-job-name-123"
@@ -2267,6 +2295,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -2281,6 +2310,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -2537,6 +2567,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 exports[`PreviewCopyJob should render with undefined database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2566,6 +2597,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField48"
               type="text"
               value=""
@@ -2585,6 +2617,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -2599,6 +2632,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx

@@ -9,7 +9,7 @@ import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 import { CopyJobContext } from "../../../../Context/CopyJobContext";
 import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
 import { CopyJobContextProviderType, CopyJobContextState } from "../../../../Types/CopyJobTypes";
-import { AccountDropdown } from "./AccountDropdown";
+import { AccountDropdown, normalizeAccountId } from "./AccountDropdown";
 
 jest.mock("../../../../../../hooks/useDatabaseAccounts");
 jest.mock("../../../../../../UserContext", () => ({
@@ -202,13 +202,16 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toBe(mockDatabaseAccount1);
+      expect(newState.source.account).toEqual({
+        ...mockDatabaseAccount1,
+        id: normalizeAccountId(mockDatabaseAccount1.id),
+      });
     });
 
     it("should auto-select predefined account from userContext if available", async () => {
       const userContextAccount = {
         ...mockDatabaseAccount2,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account2",
       };
 
       (userContext as any).databaseAccount = userContextAccount;
@@ -223,7 +226,10 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toBe(mockDatabaseAccount2);
+      expect(newState.source.account).toEqual({
+        ...mockDatabaseAccount2,
+        id: normalizeAccountId(mockDatabaseAccount2.id),
+      });
     });
 
     it("should keep current account if it exists in the filtered list", async () => {
@@ -248,7 +254,16 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
-      expect(newState).toBe(contextWithSelectedAccount.copyJobState);
+      expect(newState).toEqual({
+        ...contextWithSelectedAccount.copyJobState,
+        source: {
+          ...contextWithSelectedAccount.copyJobState.source,
+          account: {
+            ...mockDatabaseAccount1,
+            id: normalizeAccountId(mockDatabaseAccount1.id),
+          },
+        },
+      });
     });
 
     it("should handle account change when user selects different account", async () => {
@@ -272,7 +287,7 @@ describe("AccountDropdown", () => {
     it("should normalize account ID for Portal platform", () => {
       const portalAccount = {
         ...mockDatabaseAccount1,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account1",
       };
 
       (configContext as any).platform = Platform.Portal;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.tsx

@@ -12,7 +12,7 @@ import FieldRow from "../../Components/FieldRow";
 
 interface AccountDropdownProps {}
 
-const normalizeAccountId = (id: string) => {
+export const normalizeAccountId = (id: string = "") => {
   if (configContext.platform === Platform.Portal) {
     return id.replace("/Microsoft.DocumentDb/", "/Microsoft.DocumentDB/");
   } else if (configContext.platform === Platform.Hosted) {
@@ -27,7 +27,12 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
 
   const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
   const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
-  const sqlApiOnlyAccounts: DatabaseAccount[] = (allAccounts || []).filter((account) => apiType(account) === "SQL");
+  const sqlApiOnlyAccounts = (allAccounts || [])
+    .filter((account) => apiType(account) === "SQL")
+    .map((account) => ({
+      ...account,
+      id: normalizeAccountId(account.id),
+    }));
 
   const updateCopyJobState = (newAccount: DatabaseAccount) => {
     setCopyJobState((prevState) => {
@@ -47,7 +52,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
   useEffect(() => {
     if (sqlApiOnlyAccounts && sqlApiOnlyAccounts.length > 0 && selectedSubscriptionId) {
       const currentAccountId = copyJobState?.source?.account?.id;
-      const predefinedAccountId = userContext.databaseAccount?.id;
+      const predefinedAccountId = normalizeAccountId(userContext.databaseAccount?.id);
       const selectedAccountId = currentAccountId || predefinedAccountId;
 
       const targetAccount: DatabaseAccount | null =
@@ -58,7 +63,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
 
   const accountOptions =
     sqlApiOnlyAccounts?.map((account) => ({
-      key: normalizeAccountId(account.id),
+      key: account.id,
       text: account.name,
       data: account,
     })) || [];

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/MigrationTypeCheckbox.tsx

@@ -10,7 +10,7 @@ interface MigrationTypeCheckboxProps {
 }
 
 export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => (
-  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow">
+  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow" data-test="migration-type-checkbox">
     <Checkbox label={ContainerCopyMessages.migrationTypeCheckboxLabel} checked={checked} onChange={onChange} />
   </Stack>
 ));

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/MigrationTypeCheckbox.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`MigrationTypeCheckbox Component Rendering should render in checked state 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
+  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-checked is-enabled root-119"
@@ -43,6 +44,7 @@ exports[`MigrationTypeCheckbox Component Rendering should render in checked stat
 exports[`MigrationTypeCheckbox Component Rendering should render with default props (unchecked state) 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
+  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-enabled root-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers.tsx

@@ -47,7 +47,11 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
   const onDropdownChange = dropDownChangeHandler(setCopyJobState);
 
   return (
-    <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
+    <Stack
+      data-test="Panel:SelectSourceAndTargetContainers"
+      className="selectSourceAndTargetContainers"
+      tokens={{ childrenGap: 25 }}
+    >
       <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
       <DatabaseContainerSection
         heading={ContainerCopyMessages.sourceContainerSubHeading}
@@ -59,6 +63,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         selectedContainer={source?.containerId}
         containerDisabled={!source?.databaseId}
         containerOnChange={onDropdownChange("sourceContainer")}
+        sectionType="source"
       />
       <DatabaseContainerSection
         heading={ContainerCopyMessages.targetContainerSubHeading}
@@ -71,6 +76,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         containerDisabled={!target?.databaseId}
         containerOnChange={onDropdownChange("targetContainer")}
         handleOnDemandCreateContainer={showAddCollectionPanel}
+        sectionType="target"
       />
     </Stack>
   );

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.test.tsx

@@ -32,6 +32,7 @@ describe("DatabaseContainerSection", () => {
     selectedContainer: "container1",
     containerDisabled: false,
     containerOnChange: mockContainerOnChange,
+    sectionType: "source",
   };
 
   beforeEach(() => {
@@ -292,6 +293,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: mockContainerOptions,
         selectedContainer: "container1",
         containerOnChange: mockContainerOnChange,
+        sectionType: "source",
       };
 
       render(<DatabaseContainerSection {...minimalProps} />);
@@ -393,6 +395,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [{ key: "c1", text: "Container 1", data: { id: "c1" } }],
         selectedContainer: "c1",
         containerOnChange: jest.fn(),
+        sectionType: "source",
       };
 
       const { container } = render(<DatabaseContainerSection {...minimalProps} />);
@@ -411,6 +414,7 @@ describe("DatabaseContainerSection", () => {
         containerDisabled: false,
         containerOnChange: jest.fn(),
         handleOnDemandCreateContainer: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...fullProps} />);
@@ -428,6 +432,7 @@ describe("DatabaseContainerSection", () => {
         selectedContainer: "container1",
         containerDisabled: true,
         containerOnChange: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...disabledProps} />);
@@ -443,6 +448,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [],
         selectedContainer: "",
         containerOnChange: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...emptyOptionsProps} />);

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx

@@ -15,6 +15,7 @@ export const DatabaseContainerSection = ({
   containerDisabled,
   containerOnChange,
   handleOnDemandCreateContainer,
+  sectionType,
 }: DatabaseContainerSectionProps) => (
   <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
     <label className="subHeading">{heading}</label>
@@ -27,6 +28,7 @@ export const DatabaseContainerSection = ({
         disabled={!!databaseDisabled}
         selectedKey={selectedDatabase}
         onChange={databaseOnChange}
+        data-test={`${sectionType}-databaseDropdown`}
       />
     </FieldRow>
     <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
@@ -39,6 +41,7 @@ export const DatabaseContainerSection = ({
           disabled={!!containerDisabled}
           selectedKey={selectedContainer}
           onChange={containerOnChange}
+          data-test={`${sectionType}-containerDropdown`}
         />
         {handleOnDemandCreateContainer && (
           <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/__snapshots__/DatabaseContainerSection.test.tsx.snap

@@ -37,6 +37,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown98"
           role="combobox"
           tabindex="0"
@@ -94,6 +95,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown99"
             role="combobox"
             tabindex="0"
@@ -182,6 +184,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
           class="ms-Dropdown is-disabled is-required dropdown-143"
           data-is-focusable="false"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown103"
           role="combobox"
           tabindex="-1"
@@ -239,6 +242,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
             class="ms-Dropdown is-disabled is-required dropdown-143"
             data-is-focusable="false"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown104"
             role="combobox"
             tabindex="-1"
@@ -306,6 +310,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown105"
           role="combobox"
           tabindex="0"
@@ -363,6 +368,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown106"
             role="combobox"
             tabindex="0"
@@ -430,6 +436,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="source-databaseDropdown"
           id="Dropdown96"
           role="combobox"
           tabindex="0"
@@ -487,6 +494,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="source-containerDropdown"
             id="Dropdown97"
             role="combobox"
             tabindex="0"

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx

@@ -83,6 +83,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
 
   return (
     <IconButton
+      data-test={`CopyJobActionMenu/Button:${job.Name}`}
       role="button"
       iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
       menuProps={{ items: getMenuItems() }}

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.tsx

@@ -80,6 +80,7 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
         <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <ShimmeredDetailsList
+              className="CopyJobListContainer"
               onRenderRow={_onRenderRow}
               checkboxVisibility={2}
               columns={columns}

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -49,6 +49,7 @@ export interface DatabaseContainerSectionProps {
   containerDisabled?: boolean;
   containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
   handleOnDemandCreateContainer?: () => void;
+  sectionType: "source" | "target";
 }
 
 export interface CopyJobContextState {