test(react): textfield test

added cypress test and react storybook for autofocus attribute
mi6 · Dec 17, 2024 · 0cc2c76 · 0cc2c76
1 parent b85d410
commit 0cc2c76
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx b/packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx
@@ -21,6 +21,7 @@ import {
 } from "../utils/constants";
 import {
   CustomSizeTextField,
+  AutofocusTextField,
   DisabledTextField,
   FullWidthTextField,
   HiddenLabelTextField,
@@ -333,6 +334,14 @@ describe("IcTextField end-to-end tests", () => {
 
     input.should(HAVE_ATTR, "title", "new-input-title");
   });
+
+  it.only("should autofocus when autofocus attribute is set", () => {
+    mount(<AutofocusTextField />);
+
+    const input = cy.findShadowEl(IC_TEXTFIELD, TEXTFIELD_INPUT);
+
+    input.should(HAVE_FOCUS);
+  }
 });
 
 describe("IcTextField visual regression tests", () => {

diff --git a/packages/react/src/component-tests/IcTextField/IcTextFieldTestData.tsx b/packages/react/src/component-tests/IcTextField/IcTextFieldTestData.tsx
@@ -113,6 +113,20 @@ export const HiddenLabelTextField = (): ReactElement => (
   </div>
 );
 
+export const AutofocusTextField = (): ReactElement => (
+  <div style={style}>
+    <IcTextField
+      maxCharacters={25}
+      label="What is your favourite coffee?"
+      placeholder="Please enter…"
+      helperText="Such as Arabica, Robusta or Liberica"
+      autofocus
+    >
+      <ReusableSlottedIcon />
+    </IcTextField>
+  </div>
+);
+
 export const TextFieldWithMinMaxCharacters = (): ReactElement => (
   <>
     <div style={style}>

diff --git a/packages/react/src/stories/ic-text-field.stories.mdx b/packages/react/src/stories/ic-text-field.stories.mdx
@@ -53,6 +53,14 @@ export const ControlledExample = () => {
   </Story>
 </Canvas>
 
+### Autofocus
+
+<Canvas>
+  <Story name="Autofocus">
+    <IcTextField label="What is your favourite coffee?" autofocus/>
+  </Story>
+</Canvas>
+
 ### Placeholder and required
 
 <Canvas>