Merge pull request #6941 from Sage/FE-6787

refactor(character-count, field-help): convert enzyme tests to RTL

src/__internal__/character-count/character-count.component.tsx

@@ -40,6 +40,7 @@ const CharacterCount = ({
  <StyledCharacterCountWrapper>
  <VisuallyHiddenHint
  data-element="visually-hidden-hint"
+ data-role="visually-hidden-hint"
  id={visuallyHiddenHintId}
  >
  {l.characterCount.visuallyHiddenHint(
@@ -50,6 +51,7 @@ const CharacterCount = ({
  aria-hidden="true"
  isOverLimit={isOverLimit}
  data-element="character-count"
+ data-role="character-count"
  >
  {!isOverLimit
  ? l.characterCount.charactersLeft(

src/__internal__/character-count/character-count.test.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import CharacterCount from ".";
+
+test("visible character count is visible", () => {
+ render(<CharacterCount value={10} limit={5} isOverLimit={false} />);
+
+ const visibleCharacterCount = screen.getByTestId("character-count");
+ expect(visibleCharacterCount).toBeVisible();
+});
+
+test("visible character count renders with the 'aria-hidden' attribute", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visibleCharacterCount = screen.getByTestId("character-count");
+ expect(visibleCharacterCount).toHaveAttribute("aria-hidden", "true");
+});
+
+test("visible character count renders with '{count} character(s) left' text content", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visibleCharacterCount = screen.getByTestId("character-count");
+ expect(visibleCharacterCount).toHaveTextContent("5 characters left");
+});
+
+test("visible character count renders with '{count} character(s) too many' text content when `isOverLimit` prop is true", () => {
+ render(<CharacterCount value={10} limit={5} isOverLimit />);
+
+ const visuallyHiddenHint = screen.getByTestId("character-count");
+ expect(visuallyHiddenHint).toHaveTextContent("5 characters too many");
+});
+
+test("visually hidden character counter is visually hidden", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visuallyHiddenCharacterCount = screen.getByTestId(
+ "visually-hidden-character-count"
+ );
+ expect(visuallyHiddenCharacterCount).toHaveStyle({
+ border: "0",
+ height: "1px",
+ margin: "-1px",
+ overflow: "hidden",
+ padding: "0",
+ position: "absolute",
+ width: "1px",
+ "white-space": "nowrap",
+ });
+});
+
+test("visually hidden character count renders with the 'aria-live' attribute set to 'off'", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visuallyHiddenCharacterCount = screen.getByTestId(
+ "visually-hidden-character-count"
+ );
+ expect(visuallyHiddenCharacterCount).toHaveAttribute("aria-live", "off");
+});
+
+test("visually hidden character count renders with the 'aria-live' attribute set to 'polite' when the `ariaLive` prop is 'polite'", () => {
+ render(
+ <CharacterCount
+ value={5}
+ limit={10}
+ isOverLimit={false}
+ ariaLive="polite"
+ />
+ );
+
+ const visuallyHiddenCharacterCount = screen.getByTestId(
+ "visually-hidden-character-count"
+ );
+ expect(visuallyHiddenCharacterCount).toHaveAttribute("aria-live", "polite");
+});
+
+test("visually hidden character count renders with '{count} character(s) left' text content", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visuallyHiddenCharacterCount = screen.getByTestId(
+ "visually-hidden-character-count"
+ );
+ expect(visuallyHiddenCharacterCount).toHaveTextContent("5 characters left");
+});
+
+test("visually hidden character count renders with '{count} character(s) too many' text content when `isDebouncedOverLimit` prop is true", () => {
+ render(
+ <CharacterCount
+ value={10}
+ limit={5}
+ isOverLimit={false}
+ isDebouncedOverLimit
+ />
+ );
+
+ const visuallyHiddenHint = screen.getByTestId(
+ "visually-hidden-character-count"
+ );
+ expect(visuallyHiddenHint).toHaveTextContent("5 characters too many");
+});
+
+test("visually hidden hint is visually hidden", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visuallyHiddenHint = screen.getByTestId("visually-hidden-hint");
+ expect(visuallyHiddenHint).toHaveStyle({
+ border: "0",
+ height: "1px",
+ margin: "-1px",
+ overflow: "hidden",
+ padding: "0",
+ position: "absolute",
+ width: "1px",
+ "white-space": "nowrap",
+ });
+});
+
+test("visually hidden hint renders with 'you can enter up to {count} character(s)' text content", () => {
+ render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
+
+ const visuallyHiddenHint = screen.getByTestId("visually-hidden-hint");
+ expect(visuallyHiddenHint).toHaveTextContent(
+ "You can enter up to 10 characters"
+ );
+});