Merge pull request #6995 from Sage/test-styled-system-refactor

Update styled-system tests to use RTL in converted unit test files
Sage · Oct 8, 2024 · 7ba3780 · 7ba3780
2 parents 5896c7e + 01a9181
commit 7ba3780
Show file tree

Hide file tree

Showing 68 changed files with 888 additions and 428 deletions.
diff --git a/src/__internal__/fieldset/fieldset.test.tsx b/src/__internal__/fieldset/fieldset.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen, within } from "@testing-library/react";
 import Fieldset from ".";
-import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
+import { testStyledSystemMarginRTL } from "../../__spec_helper__/__internal__/test-utils";
 
 test("renders with provided `children`", () => {
   render(
@@ -116,8 +116,11 @@ test("renders with expected padding when `inline` is true and `legendSpacing` is
   expect(legend).toHaveStyleRule("padding-right", "var(--spacing100)");
 });
 
-testStyledSystemMargin((props) => (
-  <Fieldset {...props}>
-    <input />
-  </Fieldset>
-));
+testStyledSystemMarginRTL(
+  (props) => (
+    <Fieldset {...props}>
+      <input />
+    </Fieldset>
+  ),
+  () => screen.getByRole("group")
+);
diff --git a/src/__internal__/validations/validation-icon.component.tsx b/src/__internal__/validations/validation-icon.component.tsx
@@ -129,6 +129,7 @@ export const ValidationIcon = ({
         if (onBlur) onBlur(e);
       }}
       isPartOfInput={isPartOfInput}
+      data-role="validation-icon-wrapper"
       {...filterStyledSystemMarginProps(rest)}
     >
       <Icon

diff --git a/src/__internal__/validations/validation-icon.test.tsx b/src/__internal__/validations/validation-icon.test.tsx
@@ -4,9 +4,12 @@ import userEvent from "@testing-library/user-event";
 
 import ValidationIcon from "./validation-icon.component";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
+import { testStyledSystemMarginRTL } from "../../__spec_helper__/__internal__/test-utils";
 
-testStyledSystemMargin((props) => <ValidationIcon {...props} error="error" />);
+testStyledSystemMarginRTL(
+  (props) => <ValidationIcon {...props} error="error" />,
+  () => screen.getByTestId("validation-icon-wrapper")
+);
 
 test("renders an icon with the error type when the `error` prop is a string", () => {
   render(<ValidationIcon error="error" />);