Updating test to include controlled testing setup function for clearB…

…utton tests

ui/components/component-library/text-field/text-field.test.js

@@ -1,29 +1,43 @@
 /* eslint-disable jest/require-top-level-describe */
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { TextField } from './text-field';
 
-// setup function as per testing-library docs
-// https://testing-library.com/docs/user-event/intro
+// userEvent setup function as per testing-library docs
+// https://testing-library.com/docs/user-event/intr
 function setup(jsx) {
   return {
     user: userEvent.setup(),
     ...render(jsx),
   };
 }
 
+// Custom userEvent setup function that renders the component in a controlled environment.
+// This is used for the showClearButton and related props as the clearButton will only show in a controlled environment.
+function setupControlled(FormComponent, props) {
+  const ControlledWrapper = () => {
+    const [value, setValue] = useState('');
+    return (
+      <FormComponent
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        {...props}
+      />
+    );
+  };
+  return { user: userEvent.setup(), ...render(<ControlledWrapper />) };
+}
+
 describe('TextField', () => {
   it('should render correctly', () => {
     const { getByRole } = render(<TextField />);
     expect(getByRole('textbox')).toBeDefined();
   });
   it('should render and be able to input text', async () => {
     const { user, getByRole } = setup(<TextField />);
-
     const textField = getByRole('textbox');
-
     await user.type(textField, 'text value');
     expect(textField).toHaveValue('text value');
   });
@@ -66,68 +80,58 @@ describe('TextField', () => {
     await user.click(getByTestId('text-field'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('should render showClearButton button when showClearButton is true and value exists', () => {
-    // As showClearButton is intended to only work with a controlled input we need to pass a value and onChange prop
-    const { getByRole } = render(
-      <TextField value="text" onChange={() => {}} showClearButton />,
-    );
-    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
-    expect(getByRole('textbox')).toBeDefined();
-  });
   it('should render with the rightAccessory', () => {
     const { getByText } = render(
       <TextField rightAccessory={<div>right-accessory</div>} />,
     );
     expect(getByText('right-accessory')).toBeDefined();
   });
-  it('should still render with the rightAccessory when showClearButton is true', () => {
-    const { getByRole, getByTestId, getByText } = render(
-      // As showClearButton is intended to only work with a controlled input we need to pass a value and onChange prop
-      <TextField
-        value="text"
-        onChange={() => {}}
-        clearButtonProps={{ 'data-testid': 'clear-button' }}
-        rightAccessory={<div>right-accessory</div>}
-        showClearButton
-      />,
-    );
-    expect(getByTestId('clear-button')).toBeDefined();
+  it('should render showClearButton button when showClearButton is true and value exists', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use setupControlled
+    const { user, getByRole } = setupControlled(TextField, {
+      showClearButton: true,
+    });
+    await user.type(getByRole('textbox'), 'test value');
+    expect(getByRole('textbox')).toHaveValue('test value');
+    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
+  });
+  it('should still render with the rightAccessory when showClearButton is true', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use setupControlled
+    const { user, getByRole, getByText } = setupControlled(TextField, {
+      showClearButton: true,
+      rightAccessory: <div>right-accessory</div>,
+    });
+    await user.type(getByRole('textbox'), 'test value');
+    expect(getByRole('textbox')).toHaveValue('test value');
+    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
     expect(getByText('right-accessory')).toBeDefined();
-    expect(getByRole('textbox')).toBeDefined();
   });
-  it('should fire onClick event when passed to clearButtonProps when clear button is clicked', async () => {
-    // As showClearButton is intended to only work with a controlled input we need to pass a value and onChange prop
+  it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use setupControlled
     const fn = jest.fn();
-    const { user, getByRole } = setup(
-      <TextField
-        value="text"
-        onChange={() => {}}
-        clearButtonOnClick={fn}
-        showClearButton
-      />,
-    );
+    const { user, getByRole } = setupControlled(TextField, {
+      showClearButton: true,
+      clearButtonOnClick: fn,
+    });
+    await user.type(getByRole('textbox'), 'test value');
     await user.click(getByRole('button', { name: /Clear/u }));
-    expect(fn).toHaveBeenCalledTimes(1); // clear button onClick is fired
+    expect(fn).toHaveBeenCalledTimes(1);
   });
-  it('should fire clearButtonProps.onClick event when passed to clearButtonProps.onClick prop', async () => {
-    // As showClearButton is intended to only work with a controlled input we need to pass a value and onChange prop
+  it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use setupControlled
     const fn = jest.fn();
-    const { user, getByRole } = setup(
-      <TextField
-        value="text"
-        onChange={() => {}}
-        clearButtonProps={{ onClick: fn }}
-        showClearButton
-      />,
-    );
+    const { user, getByRole } = setupControlled(TextField, {
+      showClearButton: true,
+      clearButtonProps: { onClick: fn },
+    });
+    await user.type(getByRole('textbox'), 'test value');
     await user.click(getByRole('button', { name: /Clear/u }));
     expect(fn).toHaveBeenCalledTimes(1);
   });
   it('should be able to accept inputProps', () => {
-    const { getByRole } = render(
+    const { getByTestId } = render(
       <TextField inputProps={{ 'data-testid': 'text-field' }} />,
     );
-    const textField = getByRole('textbox');
-    expect(textField).toBeDefined();
+    expect(getByTestId('text-field')).toBeDefined();
   });
 });