Merge pull request #6926 from Sage/FE-6590-duellingpicklist-rtl

refactor: convert duelling-picklist tests to RTL
Sage · Sep 12, 2024 · 3eea52e · 3eea52e
2 parents 1620297 + eaff73f
commit 3eea52e
Show file tree

Hide file tree

Showing 11 changed files with 1,046 additions and 1,427 deletions.
diff --git a/src/components/duelling-picklist/duelling-picklist.component.tsx b/src/components/duelling-picklist/duelling-picklist.component.tsx
@@ -76,6 +76,7 @@ export const DuellingPicklist = ({
     <StyledDuellingPicklistOverlay
       disabled={disabled}
       data-component="duelling-picklist"
+      data-role="duelling-picklist-overlay"
       {...filterStyledSystemMarginProps(rest)}
     >
       {shouldDisplayLabels && (
@@ -93,7 +94,7 @@ export const DuellingPicklist = ({
           <StyledControl data-element="picklist-left-control">
             {leftControls}
           </StyledControl>
-          <StyledControl data-element="picklist-right-label">
+          <StyledControl data-element="picklist-right-control">
             {rightControls}
           </StyledControl>
         </StyledControlsContainer>

diff --git a/src/components/duelling-picklist/duelling-picklist.pw.tsx b/src/components/duelling-picklist/duelling-picklist.pw.tsx
@@ -258,7 +258,7 @@ test.describe(`should render Duelling-Picklist component`, () => {
   }) => {
     await mount(<DuellingPicklistComponent />);
 
-    const rightSearch = getDataElementByValue(page, "picklist-right-label")
+    const rightSearch = getDataElementByValue(page, "picklist-right-control")
       .locator("div")
       .nth(0);
     await expect(rightSearch).toHaveAttribute("data-component", "search");
@@ -280,6 +280,18 @@ test.describe(`should render Duelling-Picklist component`, () => {
             "disabled",
             /.*/
           );
+          await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
+            "opacity",
+            "0.2"
+          );
+          await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
+            "pointer-events",
+            "none"
+          );
+          await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
+            "user-select",
+            "none"
+          );
         } else {
           await expect(
             getComponent(page, "duelling-picklist")