From 52479f1fe5e674b1f3469ae38dba48363400756b Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-741
 <117368893+GCHQ-Developer-741@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:23:15 +0000
Subject: [PATCH] feat(react): added cypress tests for a slotted radio-group
 within a radio-group

added test for keyboard interaction when slotting a child radio-group.
Also updated some consts
---
 .../component-tests/IcRadio/IcRadio.cy.tsx    | 90 ++++++++++++++-----
 .../IcRadio/IcRadioTestData.tsx               | 65 ++++++++++++++
 .../src/stories/ic-radio-group.stories.mdx    | 54 ++++++++---
 3 files changed, 175 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx b/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx
index 863420e88e..d5717ca365 100644
--- a/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx
+++ b/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx
@@ -1,4 +1,4 @@
-/// <reference types="Cypress" />
+/// <reference types="cypress" />
 
 import React from "react";
 import { mount } from "cypress/react";
@@ -20,6 +20,8 @@ import {
   TabbableSelected,
   ConditionalDynamicTextFieldValue,
   InAForm,
+  RadioGroupInAdditionalField,
+  StaticChildRadioGroup,
 } from "./IcRadioTestData";
 import {
   HAVE_PROP,
@@ -31,6 +33,7 @@ import {
   HAVE_ATTR,
   NOT_BE_VISIBLE,
   HAVE_BEEN_CALLED,
+  BE_VISIBLE,
 } from "../utils/constants";
 import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";
 
@@ -40,6 +43,7 @@ const IC_BUTTON = "ic-button";
 const BUTTON = "button";
 const INPUT = "input";
 const TEXT_FIELD_SELECTOR = "ic-text-field";
+const CONTAINER_CLASS = ".container";
 const DEFAULT_TEST_THRESHOLD = 0.026;
 
 describe("IcRadio end-to-end tests", () => {
@@ -126,7 +130,7 @@ describe("IcRadio end-to-end tests", () => {
     mount(<Uncontrolled />);
 
     cy.spy(window.console, "log").as("spyWinConsoleLog");
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get("@spyWinConsoleLog").should(HAVE_BEEN_CALLED_WITH, true);
   });
 
@@ -158,10 +162,10 @@ describe("IcRadio end-to-end tests", () => {
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
 
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", false);
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", false);
 
-    cy.get(RADIO_SELECTOR).eq(1).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(1).shadow().find(CONTAINER_CLASS).click();
     cy.realPress("ArrowDown");
     cy.get(RADIO_SELECTOR).eq(2).should(HAVE_PROP, "selected", false);
     cy.realPress("ArrowUp");
@@ -174,11 +178,11 @@ describe("IcRadio end-to-end tests", () => {
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
 
     cy.get(TEXT_FIELD_SELECTOR).should(HAVE_PROP, "disabled", true);
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(TEXT_FIELD_SELECTOR).should(HAVE_PROP, "disabled", false);
     cy.findShadowEl(TEXT_FIELD_SELECTOR, INPUT).type("test");
     cy.get(TEXT_FIELD_SELECTOR).should(HAVE_PROP, "value", "test");
-    cy.get(RADIO_SELECTOR).eq(1).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(1).shadow().find(CONTAINER_CLASS).click();
     cy.get(TEXT_FIELD_SELECTOR).should(HAVE_PROP, "disabled", true);
   });
 
@@ -190,20 +194,20 @@ describe("IcRadio end-to-end tests", () => {
     cy.get(TEXT_FIELD_SELECTOR).eq(0).should(NOT_BE_VISIBLE);
     cy.get(TEXT_FIELD_SELECTOR).eq(1).should(NOT_BE_VISIBLE);
     cy.get(TEXT_FIELD_SELECTOR).eq(2).should(NOT_BE_VISIBLE);
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
-    cy.get(TEXT_FIELD_SELECTOR).eq(0).should("be.visible");
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
+    cy.get(TEXT_FIELD_SELECTOR).eq(0).should(BE_VISIBLE);
     cy.get(TEXT_FIELD_SELECTOR).eq(1).should(NOT_BE_VISIBLE);
     cy.get(TEXT_FIELD_SELECTOR).eq(2).should(NOT_BE_VISIBLE);
 
-    cy.get(RADIO_SELECTOR).eq(1).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(1).shadow().find(CONTAINER_CLASS).click();
     cy.get(TEXT_FIELD_SELECTOR).eq(0).should(NOT_BE_VISIBLE);
-    cy.get(TEXT_FIELD_SELECTOR).eq(1).should("be.visible");
+    cy.get(TEXT_FIELD_SELECTOR).eq(1).should(BE_VISIBLE);
     cy.get(TEXT_FIELD_SELECTOR).eq(2).should(NOT_BE_VISIBLE);
 
-    cy.get(RADIO_SELECTOR).eq(2).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(2).shadow().find(CONTAINER_CLASS).click();
     cy.get(TEXT_FIELD_SELECTOR).eq(0).should(NOT_BE_VISIBLE);
     cy.get(TEXT_FIELD_SELECTOR).eq(1).should(NOT_BE_VISIBLE);
-    cy.get(TEXT_FIELD_SELECTOR).eq(2).should("be.visible");
+    cy.get(TEXT_FIELD_SELECTOR).eq(2).should(BE_VISIBLE);
   });
 
   it("should emit icChange and icCheck events when radio option is selected", () => {
@@ -221,7 +225,7 @@ describe("IcRadio end-to-end tests", () => {
       cy.stub().as("icCheck")
     );
 
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", true);
 
     cy.get("@icChange").should(HAVE_BEEN_CALLED);
@@ -304,7 +308,7 @@ describe("IcRadio end-to-end tests", () => {
 
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
 
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", true);
     cy.realPress("Tab");
     cy.get(TEXT_FIELD_SELECTOR).eq(0).should(HAVE_FOCUS);
@@ -315,7 +319,7 @@ describe("IcRadio end-to-end tests", () => {
 
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
 
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", true);
     cy.get(TEXT_FIELD_SELECTOR).should(HAVE_PROP, "disabled", false);
     cy.realPress("ArrowDown");
@@ -345,7 +349,7 @@ describe("IcRadio end-to-end tests", () => {
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
     cy.spy(window.console, "log").as("spyWinConsoleLog");
 
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", true);
     cy.get("input[type='submit']").click();
     cy.get("@spyWinConsoleLog").should(
@@ -359,13 +363,59 @@ describe("IcRadio end-to-end tests", () => {
 
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
 
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", true);
 
     cy.get("input[type='reset']").click();
 
     cy.get(RADIO_SELECTOR).eq(0).should(HAVE_PROP, "selected", false);
   });
+
+  it("should handle keyboard navigation of a slotted radio-group within an additional-field", () => {
+    mount(<RadioGroupInAdditionalField />);
+
+    cy.checkHydrated(RADIO_GROUP_SELECTOR);
+
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find("input").focus();
+    cy.realPress("Tab").realPress("ArrowDown");
+
+    cy.get(`${RADIO_SELECTOR}[label="child-option-2"]`).should(
+      HAVE_PROP,
+      "selected",
+      true
+    );
+    cy.get(`${RADIO_SELECTOR}[label="option2"]`).should(
+      HAVE_PROP,
+      "selected",
+      false
+    );
+  });
+
+  it("should select parent radio if a child radio is selected when additionFieldDisplay is static", () => {
+    mount(<StaticChildRadioGroup />);
+
+    cy.checkHydrated(RADIO_GROUP_SELECTOR);
+
+    cy.get(`${RADIO_SELECTOR}[label="option2"]`).should(
+      HAVE_PROP,
+      "selected",
+      false
+    );
+
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find("input").focus();
+    cy.realPress("Tab").realPress("Space");
+
+    cy.get(`${RADIO_SELECTOR}[label="child-option-1"]`).should(
+      HAVE_PROP,
+      "selected",
+      true
+    );
+    cy.get(`${RADIO_SELECTOR}[label="option2"]`).should(
+      HAVE_PROP,
+      "selected",
+      true
+    );
+  });
 });
 
 describe("IcRadio visual regression and a11y tests", () => {
@@ -528,7 +578,7 @@ describe("IcRadio visual regression and a11y tests", () => {
     mount(<ConditionalDynamic />);
 
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
-    cy.get(RADIO_SELECTOR).eq(0).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(0).shadow().find(CONTAINER_CLASS).click();
 
     cy.checkA11yWithWait();
     cy.compareSnapshot({
@@ -541,7 +591,7 @@ describe("IcRadio visual regression and a11y tests", () => {
     mount(<ConditionalDynamic />);
 
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
-    cy.get(RADIO_SELECTOR).eq(1).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(1).shadow().find(CONTAINER_CLASS).click();
 
     cy.checkA11yWithWait();
     cy.compareSnapshot({
@@ -591,7 +641,7 @@ describe("IcRadio visual regression tests in high contrast mode", () => {
     mount(<ConditionalDynamic />);
 
     cy.checkHydrated(RADIO_GROUP_SELECTOR);
-    cy.get(RADIO_SELECTOR).eq(1).shadow().find(".container").click();
+    cy.get(RADIO_SELECTOR).eq(1).shadow().find(CONTAINER_CLASS).click();
 
     cy.compareSnapshot({
       name: "conditional-dynamic-high-contrast",
diff --git a/packages/react/src/component-tests/IcRadio/IcRadioTestData.tsx b/packages/react/src/component-tests/IcRadio/IcRadioTestData.tsx
index 8714175b07..452c6bfae8 100644
--- a/packages/react/src/component-tests/IcRadio/IcRadioTestData.tsx
+++ b/packages/react/src/component-tests/IcRadio/IcRadioTestData.tsx
@@ -413,3 +413,68 @@ export const InAForm = () => {
     </form>
   );
 };
+
+export const RadioGroupInAdditionalField = (): JSX.Element => (
+  <IcRadioGroup label="Parent" name="radio-group-1">
+    <IcRadioOption
+      additional-field-display="dynamic"
+      value="valueName1"
+      label="option1"
+      selected
+    >
+      <IcRadioGroup
+        slot="additional-field"
+        helperText="Child Group Helper Text"
+        label="Children"
+        name="radio-group-2"
+      >
+        <IcRadioOption
+          key="child-option-1"
+          label="child-option-1"
+          value="child-option-1"
+        ></IcRadioOption>
+        <IcRadioOption
+          key="child-option-2"
+          label="child-option-2"
+          value="child-option-2"
+        ></IcRadioOption>
+      </IcRadioGroup>
+    </IcRadioOption>
+    <IcRadioOption
+      additional-field-display="dynamic"
+      value="valueName2"
+      label="option2"
+    >
+      <IcTextField
+        slot="additional-field"
+        placeholder="Placeholder"
+        label="What's your favourite type of coffee?"
+      />
+    </IcRadioOption>
+  </IcRadioGroup>
+);
+
+export const StaticChildRadioGroup = (): JSX.Element => (
+  <IcRadioGroup label="Conditional static" name="1">
+    <IcRadioOption value="valueName1" label="option1" />
+    <IcRadioOption value="valueName2" label="option2">
+      <IcRadioGroup
+        slot="additional-field"
+        helperText="Child Group Helper Text"
+        label="Children"
+        name="radio-group-2"
+      >
+        <IcRadioOption
+          key="child-option-1"
+          label="child-option-1"
+          value="child-option-1"
+        ></IcRadioOption>
+        <IcRadioOption
+          key="child-option-2"
+          label="child-option-2"
+          value="child-option-2"
+        ></IcRadioOption>
+      </IcRadioGroup>
+    </IcRadioOption>
+  </IcRadioGroup>
+);
diff --git a/packages/react/src/stories/ic-radio-group.stories.mdx b/packages/react/src/stories/ic-radio-group.stories.mdx
index 007d89fa86..1f05903b90 100644
--- a/packages/react/src/stories/ic-radio-group.stories.mdx
+++ b/packages/react/src/stories/ic-radio-group.stories.mdx
@@ -112,18 +112,30 @@ import { useState, useEffect, useRef } from "react";
       <IcRadioOption
         additionalFieldDisplay="dynamic"
         value="valueName1"
-        label="option1"
+        label="Option with Radio as conditional slotted additional field"
       >
-        <IcTextField
+        <IcRadioGroup
           slot="additional-field"
-          placeholder="Placeholder"
-          label="What's your favourite type of coffee? "
-        />
+          helperText="Child Group Helper Text"
+          label="Children"
+          name="radio-group-2"
+        >
+          <IcRadioOption
+            key="child-option-1"
+            label="child-option-1"
+            value="child-option-1"
+          ></IcRadioOption>
+          <IcRadioOption
+            key="child-option-2"
+            label="child-option-2"
+            value="child-option-2"
+          ></IcRadioOption>
+        </IcRadioGroup>
       </IcRadioOption>
       <IcRadioOption
         additionalFieldDisplay="dynamic"
         value="valueName2"
-        label="option2 - error example"
+        label="Option with Text-field as conditional slotted additional field"
       >
         <IcTextField
           validationStatus="error"
@@ -136,13 +148,9 @@ import { useState, useEffect, useRef } from "react";
       <IcRadioOption
         additionalFieldDisplay="dynamic"
         value="valueName3"
-        label="option3"
+        label="Option with Button as conditional slotted additional field"
       >
-        <IcTextField
-          slot="additional-field"
-          placeholder="Placeholder"
-          label="What's your favourite type of coffee? "
-        />
+        <IcButton slot="additional-field">Hello world</IcButton>
       </IcRadioOption>
     </IcRadioGroup>
   </Story>
@@ -152,14 +160,32 @@ import { useState, useEffect, useRef } from "react";
 
 <Canvas>
   <Story name="Conditional static">
-    <IcRadioGroup label="Conditional dynamic" name="1">
+    <IcRadioGroup label="Conditional static" name="1">
       <IcRadioOption value="valueName1" label="option1">
         <IcTextField
           slot="additional-field"
           label="What's your favourite type of coffee?"
         />
       </IcRadioOption>
-      <IcRadioOption value="valueName2" label="option2" />
+      <IcRadioOption value="valueName2" label="option2">
+        <IcRadioGroup
+          slot="additional-field"
+          helperText="Child Group Helper Text"
+          label="Children"
+          name="radio-group-2"
+        >
+          <IcRadioOption
+            key="child-option-1"
+            label="child-option-1"
+            value="child-option-1"
+          ></IcRadioOption>
+          <IcRadioOption
+            key="child-option-2"
+            label="child-option-2"
+            value="child-option-2"
+          ></IcRadioOption>
+        </IcRadioGroup>
+      </IcRadioOption>
     </IcRadioGroup>
   </Story>
 </Canvas>