From 26bf78cf8732339fb170158ce10ffdef2af29214 Mon Sep 17 00:00:00 2001
From: Damien Robson <damien.robson@sage.com>
Date: Mon, 21 Oct 2024 15:56:29 +0100
Subject: [PATCH] chore(switch): fix missing coverage tests

---
 src/__internal__/label/label.style.ts         |   1 -
 .../__internal__/switch-slider.test.tsx       |   9 ++
 src/components/switch/switch.component.tsx    |   1 +
 src/components/switch/switch.stories.tsx      |  17 +++
 src/components/switch/switch.test.tsx         | 104 ++++++++++++++++++
 5 files changed, 131 insertions(+), 1 deletion(-)

diff --git a/src/__internal__/label/label.style.ts b/src/__internal__/label/label.style.ts
index f9032ba7d8..83f65e8313 100644
--- a/src/__internal__/label/label.style.ts
+++ b/src/__internal__/label/label.style.ts
@@ -11,7 +11,6 @@ export interface StyledLabelProps {
 
 const StyledLabel = styled.label<StyledLabelProps>`
   ${({ isDarkBackground }) =>
-    isDarkBackground &&
     css`
       color: ${isDarkBackground
         ? "var(--colorsUtilityYang100)"
diff --git a/src/components/switch/__internal__/switch-slider.test.tsx b/src/components/switch/__internal__/switch-slider.test.tsx
index 2e72237ff0..a1b123cdd1 100644
--- a/src/components/switch/__internal__/switch-slider.test.tsx
+++ b/src/components/switch/__internal__/switch-slider.test.tsx
@@ -152,3 +152,12 @@ test("renders with dark background styles when `isDarkBackground` is true", () =
 
   expect(switchPanel).toHaveStyleRule("color: black");
 });
+
+// coverage
+test("renders with dark background styles when `isDarkBackground` is true and checked is true", () => {
+  render(<SwitchSlider isDarkBackground checked />);
+
+  const switchPanel = screen.getByTestId("slider");
+
+  expect(switchPanel).toHaveStyleRule("color: white");
+});
diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
index 1a12afb658..4d6b9e4b8e 100644
--- a/src/components/switch/switch.component.tsx
+++ b/src/components/switch/switch.component.tsx
@@ -297,6 +297,7 @@ export const Switch = React.forwardRef(
                   <StyledHintText
                     data-role="hint-text"
                     id={inputHintId.current}
+                    isDarkBackground={isDarkBackground}
                   >
                     {labelHelp}
                   </StyledHintText>
diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
index 0f0c25f135..967e283679 100644
--- a/src/components/switch/switch.stories.tsx
+++ b/src/components/switch/switch.stories.tsx
@@ -470,3 +470,20 @@ export const NewValidationInlineWithDarkModeAndError: Story = () => {
 };
 NewValidationInlineWithDarkModeAndError.storyName =
   "New Validation - Inline with dark background support and error";
+
+export const NewValidationInlineWithDarkModeAndHintText: Story = () => {
+  return (
+    <Box m={2} padding={3} backgroundColor="#000000">
+      <CarbonProvider validationRedesignOptIn>
+        <Switch
+          label="Example switch (error state)"
+          labelInline
+          isDarkBackground
+          labelHelp="A helpful hint for the user"
+        />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineWithDarkModeAndHintText.storyName =
+  "New Validation - Inline with dark background support and hint text";
diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
index cc41c33472..7c17c42655 100644
--- a/src/components/switch/switch.test.tsx
+++ b/src/components/switch/switch.test.tsx
@@ -460,3 +460,107 @@ test("renders correctly with inputWidth set to numerical value of between 0 and
 
   expect(switchElement).toHaveStyleRule("width: 50%");
 });
+
+// coverage
+test("renders correctly with labelInline and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelInline />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with reverse flag set under erroneous state and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch reverse error="error" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with no reverse flag set under erroneous state and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch reverse={false} error="error" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with reverse flag not set and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch reverse={false} />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with hint text and dark background in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelHelp="hint text" isDarkBackground />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with hint text in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelHelp="hint text" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with inline label and field help in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelInline fieldHelp="Field help" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with inline label, dark background and field help in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelInline fieldHelp="Field help" isDarkBackground />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});