Merge pull request #6149 from Sage/cypress_radio_button_ts

test(radio-button): refactor ts

cypress/components/radio-button/radiobutton.cy.js → cypress/components/radio-button/radio-button.cy.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import RadioButton from "../../../src/components/radio-button/radio-button.component";
+import RadioButton, {
+ RadioButtonProps,
+} from "../../../src/components/radio-button/radio-button.component";
+import { RadioButtonGroupProps } from "../../../src/components/radio-button/radio-button-group.component";
 import {
  RadioButtonComponent,
  RadioButtonGroupComponent,
@@ -46,6 +49,7 @@ context("Testing RadioButton component", () => {
  CypressMountWithProviders(
  <RadioButtonComponent data-component={CHARACTERS.STANDARD} />
  );
+
  getComponent(CHARACTERS.STANDARD).should(
  "have.attr",
  "data-component",
@@ -153,7 +157,7 @@ context("Testing RadioButton component", () => {
  it.each([
  [SIZE.SMALL, 16],
  [SIZE.LARGE, 24],
- ])(
+ ] as [RadioButtonProps["size"], number][])(
  "should render RadioButton component with size set to %s",
  (size, heightAndWidth) => {
  CypressMountWithProviders(<RadioButtonComponent size={size} />);
@@ -167,7 +171,7 @@ context("Testing RadioButton component", () => {
  it.each([
  [1, "8px"],
  [2, "16px"],
- ])(
+ ] as [RadioButtonProps["labelSpacing"], string][])(
  "should render RadioButton component with %s as labelSpacing",
  (spacing, padding) => {
  CypressMountWithProviders(
@@ -286,9 +290,9 @@ context("Testing RadioButton component", () => {
  });
 
  it.each([
- [true, "0"],
- [false, "1"],
- ])(
+ [true, 0],
+ [false, 1],
+ ] as [boolean, number][])(
  "should render RadioButton with reverse prop set to %s",
  (reverseValue, position) => {
  CypressMountWithProviders(
@@ -306,7 +310,12 @@ context("Testing RadioButton component", () => {
  }
  );
 
- it.each(["bottom", "left", "right", "top"])(
+ it.each([
+ "bottom",
+ "left",
+ "right",
+ "top",
+ ] as RadioButtonProps["tooltipPosition"][])(
  "should render RadioButton component with tooltip positioned to the %s",
  (position) => {
  CypressMountWithProviders(
@@ -328,58 +337,45 @@ context("Testing RadioButton component", () => {
  .should("be.checked")
  .should("have.css", "color", COLOR.BLACK);
  });
- });
 
- describe("should render RadioButton component and check events", () => {
- let callback;
+  it("should have the expected border radius styling", () => {
+  CypressMountWithProviders(<RadioButtonComponent />);
 
- beforeEach(() => {
- callback = cy.stub();
+ radiobuttonSvg().should("have.css", "border-radius", "50%");
  });
+ });
 
+ describe("should render RadioButton component and check events", () => {
  it("should call onBlur callback when a blur event is triggered", () => {
+ const callback: RadioButtonProps["onBlur"] = cy.stub().as("onBlur");
  CypressMountWithProviders(<RadioButtonComponent onBlur={callback} />);
 
- radiobuttonRole()
- .focus()
- .blur()
- .then(() => {
- // eslint-disable-next-line no-unused-expressions
- expect(callback).to.have.been.calledOnce;
- });
+ radiobuttonRole().focus().blur();
+ cy.get("@onBlur").should("have.been.calledOnce");
  });
 
  it("should call onChange callback when a check event is triggered", () => {
+ const callback: RadioButtonProps["onChange"] = cy.stub().as("onChange");
  CypressMountWithProviders(<RadioButtonComponent onChange={callback} />);
 
- radiobuttonRole()
- .check()
- .then(() => {
- // eslint-disable-next-line no-unused-expressions
- expect(callback).to.have.been.calledOnce;
- });
+ radiobuttonRole().check();
+ cy.get("@onChange").should("have.been.calledOnce");
  });
 
  it("should call onFocus callback when a focus event is triggered", () => {
+ const callback: RadioButtonProps["onFocus"] = cy.stub().as("onFocus");
  CypressMountWithProviders(<RadioButtonComponent onFocus={callback} />);
 
- radiobuttonRole()
- .focus()
- .then(() => {
- // eslint-disable-next-line no-unused-expressions
- expect(callback).to.have.been.calledOnce;
- });
+ radiobuttonRole().focus();
+ cy.get("@onFocus").should("have.been.calledOnce");
  });
 
  it("should call onClick callback when a click event is triggered", () => {
+ const callback: RadioButtonProps["onClick"] = cy.stub().as("onClick");
  CypressMountWithProviders(<RadioButtonComponent onClick={callback} />);
 
- radiobuttonRole()
- .click()
- .then(() => {
- // eslint-disable-next-line no-unused-expressions
- expect(callback).to.have.been.calledOnce;
- });
+ radiobuttonRole().click();
+ cy.get("@onClick").should("have.been.calledOnce");
  });
  });
 
@@ -451,7 +447,7 @@ context("Testing RadioButton component", () => {
  it.each([
  ["left", "start"],
  ["right", "end"],
- ])(
+ ] as [RadioButtonGroupProps["legendAlign"], string][])(
  "should render RadioButtonGroup component with inline legend aligned to %s",
  (position, assertion) => {
  CypressMountWithProviders(
@@ -491,21 +487,26 @@ context("Testing RadioButton component", () => {
  it.each([
  [1, "8px"],
  [2, "16px"],
- ])(
+ ] as [RadioButtonGroupProps["legendSpacing"], string][])(
  "should render RadioButtonGroup component with legendSpacing set to %s",
  (spacing, padding) => {
  CypressMountWithProviders(
  <RadioButtonGroupComponent
  legendSpacing={spacing}
- legendWidth="10"
+ legendWidth={10}
  legendInline
  />
  );
  radiobuttonGroupLegend().should("have.css", "padding-right", padding);
  }
  );
 
- it.each(["top", "bottom", "left", "right"])(
+ it.each([
+ "top",
+ "bottom",
+ "left",
+ "right",
+ ] as RadioButtonGroupProps["tooltipPosition"][])(
  "should render RadioButtonGroup component with tooltip positioned to the %s",
  (position) => {
  CypressMountWithProviders(
@@ -545,12 +546,12 @@ context("Testing RadioButton component", () => {
  });
 
  it.each([
- ["inline", "399", "left"],
- ["inline", "400", "left"],
- ["above", "401", "none"],
+ [399, "left"],
+ [400, "left"],
+ [401, "none"],
  ])(
  "should check RadioButtonGroup legend is %s with adaptiveLabelBreakpoint %s and viewport 400",
- (alignment, breakpoint, float) => {
+ (breakpoint, float) => {
  cy.viewport(400, 300);
 
  CypressMountWithProviders(
@@ -638,10 +639,4 @@ context("Testing RadioButton component", () => {
  cy.checkAccessibility();
  });
  });
-
- it("should have the expected border radius styling", () => {
- CypressMountWithProviders(<RadioButtonComponent />);
-
- radiobuttonSvg().should("have.css", "border-radius", "50%");
- });
 });

src/components/radio-button/radio-button-test.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { ComponentStory } from "@storybook/react";
 import { RadioButtonGroup, RadioButton } from ".";
+import { RadioButtonGroupProps } from "./radio-button-group.component";
+import { RadioButtonProps } from "./radio-button.component";
 
 export default {
  title: "RadioButton/Test",
@@ -141,7 +143,7 @@ WithTooltipPositionOnRadioGroup.storyName =
 
 const radioContainerWidth = 400;
 
-export const RadioButtonComponent = ({ ...props }) => {
+export const RadioButtonComponent = (props: Partial<RadioButtonProps>) => {
  const [isChecked, setIsChecked] = React.useState(false);
  return (
  <>
@@ -168,9 +170,7 @@ export const RadioButtonComponent = ({ ...props }) => {
 export const RadioButtonGroupComponent = ({
  children,
  ...props
-}: {
- children: string;
-}) => {
+}: Partial<RadioButtonGroupProps>) => {
  return (
  <div
  style={{

src/components/radio-button/radio-button.stories.tsx

@@ -1,17 +1,16 @@
 import React from "react";
-import { ComponentStory } from "@storybook/react";
 import { RadioButtonGroup, RadioButton } from ".";
 import Typography from "../typography";
 
-export const Default: ComponentStory<typeof RadioButton> = () => (
+export const Default = () => (
  <RadioButtonGroup name="legend-and-labels-group">
  <RadioButton id="radio-1" value="radio1" label="Radio Option 1" />
  <RadioButton id="radio-2" value="radio2" label="Radio Option 2" />
  <RadioButton id="radio-3" value="radio3" label="Radio Option 3" />
  </RadioButtonGroup>
 );
 
-export const WithLegendAndLabels: ComponentStory<typeof RadioButton> = () => (
+export const WithLegendAndLabels = () => (
  <RadioButtonGroup
  name="legend-and-labels-group"
  onChange={() => console.log("change")}
@@ -38,7 +37,7 @@ export const WithLegendAndLabels: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const WithInlineLegend: ComponentStory<typeof RadioButton> = () => (
+export const WithInlineLegend = () => (
  <RadioButtonGroup
  name="inline-legend-group"
  onChange={() => console.log("change")}
@@ -52,7 +51,7 @@ export const WithInlineLegend: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const WithLeftMargin: ComponentStory<typeof RadioButton> = () => (
+export const WithLeftMargin = () => (
  <RadioButtonGroup
  name="left-margin-group"
  onChange={() => console.log("change")}
@@ -77,9 +76,7 @@ export const WithLeftMargin: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const EnableAdaptiveBehaviour: ComponentStory<
- typeof RadioButton
-> = () => (
+export const EnableAdaptiveBehaviour = () => (
  <RadioButtonGroup
  name="enable-adaptive-behaviour-group"
  onChange={() => console.log("change")}
@@ -108,7 +105,7 @@ export const EnableAdaptiveBehaviour: ComponentStory<
 
 EnableAdaptiveBehaviour.parameters = { chromatic: { disableSnapshot: true } };
 
-export const DifferentLabelSpacing: ComponentStory<typeof RadioButton> = () => (
+export const DifferentLabelSpacing = () => (
  <RadioButtonGroup
  name="different-label-spacing-group"
  onChange={() => console.log("change")}
@@ -133,7 +130,7 @@ export const DifferentLabelSpacing: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const InlineRadioButtons: ComponentStory<typeof RadioButton> = () => (
+export const InlineRadioButtons = () => (
  <RadioButtonGroup
  name="inline-group"
  onChange={() => console.log("change")}
@@ -146,7 +143,7 @@ export const InlineRadioButtons: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const ReverseRadioButtons: ComponentStory<typeof RadioButton> = () => (
+export const ReverseRadioButtons = () => (
  <RadioButtonGroup
  name="reverse-group"
  onChange={() => console.log("change")}
@@ -173,7 +170,7 @@ export const ReverseRadioButtons: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const DisableRadioButtons: ComponentStory<typeof RadioButton> = () => (
+export const DisableRadioButtons = () => (
  <RadioButtonGroup
  name="disable-group"
  onChange={() => console.log("change")}
@@ -200,7 +197,7 @@ export const DisableRadioButtons: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const WithFieldHelp: ComponentStory<typeof RadioButton> = () => (
+export const WithFieldHelp = () => (
  <RadioButtonGroup
  name="field-help-group"
  onChange={() => console.log("change")}
@@ -227,7 +224,7 @@ export const WithFieldHelp: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const WithLargeRadioButtons: ComponentStory<typeof RadioButton> = () => (
+export const WithLargeRadioButtons = () => (
  <RadioButtonGroup
  name="large-group"
  onChange={() => console.log("change")}
@@ -257,9 +254,7 @@ export const WithLargeRadioButtons: ComponentStory<typeof RadioButton> = () => (
  </RadioButtonGroup>
 );
 
-export const WithCustomStyledLabels: ComponentStory<
- typeof RadioButton
-> = () => (
+export const WithCustomStyledLabels = () => (
  <RadioButtonGroup
  name="custom-styled-label-group"
  onChange={() => console.log("change")}