From 0cc2c76f0592ce47b1c1c116355c938eb7d98f31 Mon Sep 17 00:00:00 2001
From: gd2910 <122624946+gd2910@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:10:28 +0000
Subject: [PATCH] test(react): textfield test

added cypress test and react storybook for autofocus attribute
---
 .../component-tests/IcTextField/IcTextField.cy.tsx |  9 +++++++++
 .../IcTextField/IcTextFieldTestData.tsx            | 14 ++++++++++++++
 .../react/src/stories/ic-text-field.stories.mdx    |  8 ++++++++
 3 files changed, 31 insertions(+)

diff --git a/packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx b/packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx
index b022cf96d8..71aa189d03 100644
--- 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
index 64989bddb0..7d01c435dc 100644
--- 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
index 198de8d311..0ffbd0b14e 100644
--- 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>