Skip to content

Commit

Permalink
feat(react): added cypress tests for a slotted radio-group within a r…
Browse files Browse the repository at this point in the history 
…adio-group

added test for keyboard interaction when slotting a child radio-group.
Also updated some consts
  • Loading branch information
@GCHQ-Developer-741 @GCHQ-Developer-530
GCHQ-Developer-741 authored and GCHQ-Developer-530 committed Feb 5, 2025
1 parent e42c6c2 commit 52479f1
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 34 deletions.
90 changes: 70 additions & 20 deletions packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/// <reference types="Cypress" />
/// <reference types="cypress" />

import React from "react";
import { mount } from "cypress/react";
Expand All @@ -20,6 +20,8 @@ import {
TabbableSelected,
ConditionalDynamicTextFieldValue,
InAForm,
RadioGroupInAdditionalField,
StaticChildRadioGroup,
} from "./IcRadioTestData";
import {
HAVE_PROP,
Expand All @@ -31,6 +33,7 @@ import {
HAVE_ATTR,
NOT_BE_VISIBLE,
HAVE_BEEN_CALLED,
BE_VISIBLE,
} from "../utils/constants";
import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";

Expand All @@ -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", () => {
Expand Down Expand Up @@ -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);
});

Expand Down Expand Up @@ -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");
Expand All @@ -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);
});

Expand All @@ -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", () => {
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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");
Expand Down Expand Up @@ -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(
Expand All @@ -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", () => {
Expand Down Expand Up @@ -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({
Expand All @@ -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({
Expand Down Expand Up @@ -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",
Expand Down
65 changes: 65 additions & 0 deletions packages/react/src/component-tests/IcRadio/IcRadioTestData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
54 changes: 40 additions & 14 deletions packages/react/src/stories/ic-radio-group.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 52479f1

Please sign in to comment.