@patternfly/react-core 4.202.11 → 4.202.14

package/src/components/FormSelect/__tests__/FormSelect.test.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { Form } from '../../Form';
 import { FormSelect } from '../FormSelect';
 import { FormSelectOption } from '../FormSelectOption';
 import { FormSelectOptionGroup } from '../FormSelectOptionGroup';
@@ -49,136 +53,141 @@ const groupedProps = {
   value: '2'
 };
 
-test('Simple FormSelect input', () => {
-  const view = render(
-    <FormSelect value={props.value} aria-label="simple FormSelect">
-      {props.options.map((option, index) => (
-        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-      ))}
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+describe('FormSelect', () => {
+  test('Simple FormSelect input', () => {
+    render(
+      <FormSelect value={props.value} aria-label="simple FormSelect">
+        {props.options.map((option, index) => (
+          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+        ))}
+      </FormSelect>
+    );
+    expect(screen.getByLabelText('simple FormSelect').outerHTML).toMatchSnapshot();
+  });
 
-test('Grouped FormSelect input', () => {
-  const view = render(
-    <FormSelect value={groupedProps.value} aria-label=" grouped FormSelect">
-      {groupedProps.groups.map((group, index) => (
-        <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
-          {group.options.map((option, i) => (
-            <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
-          ))}
-        </FormSelectOptionGroup>
-      ))}
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('Grouped FormSelect input', () => {
+    render(
+      <FormSelect value={groupedProps.value} aria-label="grouped FormSelect">
+        {groupedProps.groups.map((group, index) => (
+          <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
+            {group.options.map((option, i) => (
+              <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
+            ))}
+          </FormSelectOptionGroup>
+        ))}
+      </FormSelect>
+    );
+    expect(screen.getByLabelText('grouped FormSelect').outerHTML).toMatchSnapshot();
+  });
 
-test('Disabled FormSelect input ', () => {
-  const view = render(
-    <FormSelect isDisabled aria-label="disabled  FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('Disabled FormSelect input ', () => {
+    render(
+      <FormSelect isDisabled aria-label="disabled FormSelect">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
+    expect(screen.getByLabelText('disabled FormSelect').outerHTML).toMatchSnapshot();
+  });
 
-test('FormSelect input with aria-label does not generate console error', () => {
-  const myMock = jest.fn() as any;
-  global.console = { error: myMock } as any;
-  const view = render(
-    <FormSelect aria-label="FormSelect with aria-label">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-  expect(myMock).not.toBeCalled();
-});
+  test('FormSelect input with aria-label does not generate console error', () => {
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
 
-test('FormSelect input with id does not generate console error', () => {
-  const myMock = jest.fn() as any;
-  global.console = { error: myMock } as any;
-  const view = render(
-    <FormSelect id="id">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-  expect(myMock).not.toBeCalled();
-});
+    render(
+      <FormSelect aria-label="label">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
 
-test('FormSelect input with no aria-label or id generates console error', () => {
-  const myMock = jest.fn() as any;
-  global.console = { error: myMock } as any;
-  const view = render(
-    <FormSelect>
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-  expect(myMock).toBeCalled();
-});
+    expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot();
+    expect(myMock).not.toBeCalled();
+  });
 
-test('invalid FormSelect input', () => {
-  const view = render(
-    <FormSelect validated={'error'} aria-label="invalid FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('FormSelect input with id does not generate console error', () => {
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
 
-test('validated success FormSelect input', () => {
-  const view = shallow(
-    <FormSelect validated={ValidatedOptions.success} aria-label="validated FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
+    render(
+      <FormSelect id="id" aria-label="label">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
 
-test('validated error FormSelect input', () => {
-  const view = render(
-    <FormSelect validated={ValidatedOptions.error} aria-label="validated FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+    expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot();
+    expect(myMock).not.toBeCalled();
+  });
 
-test('validated warning FormSelect input', () => {
-  const view = shallow(
-    <FormSelect validated={ValidatedOptions.warning} aria-label="validated FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.find('.pf-c-form-control.pf-m-warning').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
+  test('FormSelect input with no aria-label or id generates console error', () => {
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
 
+    render(
+      <FormSelect data-testid="test-id">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
 
-test('required FormSelect input', () => {
-  const view = render(
-    <FormSelect required aria-label="required FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    expect(myMock).toBeCalled();
+  });
+
+  test('invalid FormSelect input', () => {
+    render(
+      <FormSelect validated="error" aria-label="invalid FormSelect">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
+    expect(screen.getByLabelText('invalid FormSelect').outerHTML).toMatchSnapshot();
+  });
+
+  test('validated success FormSelect input', () => {
+    render(
+      <FormSelect validated={ValidatedOptions.success} aria-label="validated FormSelect">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
+
+    const formSelect = screen.getByLabelText('validated FormSelect');
+
+    expect(formSelect.className).toContain('pf-m-success');
+    expect(formSelect.outerHTML).toMatchSnapshot();
+  });
+
+  test('validated warning FormSelect input', () => {
+    render(
+      <FormSelect validated={ValidatedOptions.warning} aria-label="validated FormSelect">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
+
+    const formSelect = screen.getByLabelText('validated FormSelect');
+
+    expect(formSelect.className).toContain('pf-m-warning');
+    expect(formSelect.outerHTML).toMatchSnapshot();
+  });
+
+  test('required FormSelect input', () => {
+    render(
+      <FormSelect isRequired aria-label="required FormSelect">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
+
+    expect(screen.getByLabelText('required FormSelect')).toHaveAttribute('required');
+  });
+
+  test('FormSelect passes value and event to onChange handler', () => {
+    const myMock = jest.fn();
+
+    render(
+      <FormSelect onChange={myMock} aria-label="Some label">
+        <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
+      </FormSelect>
+    );
+
+    userEvent.selectOptions(screen.getByLabelText('Some label'), 'Mr');
 
-test('FormSelect passes value and event to onChange handler', () => {
-  const myMock = jest.fn();
-  const newValue = 1;
-  const event = {
-    currentTarget: { value: newValue }
-  };
-  const view = shallow(
-    <FormSelect onChange={myMock} aria-label="onchange FormSelect">
-      <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
-    </FormSelect>
-  );
-  view.find('select').simulate('change', event);
-  expect(myMock).toBeCalledWith(newValue, event);
+    expect(myMock).toBeCalled();
+    expect(myMock.mock.calls[0][0]).toEqual('mr');
+  });
 });

package/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap

@@ -1,311 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Disabled FormSelect input  1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    aria-label="disabled  FormSelect"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-    disabled=""
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect Disabled FormSelect input  1`] = `"<select aria-label=\\"disabled FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-3\\" disabled=\\"\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
 
-exports[`FormSelect input with aria-label does not generate console error 1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    aria-label="FormSelect with aria-label"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `"<select aria-label=\\"label\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-4\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
 
-exports[`FormSelect input with id does not generate console error 1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-    id="id"
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect FormSelect input with id does not generate console error 1`] = `"<select id=\\"id\\" aria-label=\\"label\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-5\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
 
-exports[`FormSelect input with no aria-label or id generates console error 1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `"<select data-testid=\\"test-id\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-6\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
 
-exports[`Grouped FormSelect input 1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    aria-label=" grouped FormSelect"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <optgroup
-      class=""
-      label="Group1"
-    >
-      <option
-        class=""
-        value="1"
-      >
-        The First Option
-      </option>
-      <option
-        class=""
-        value="2"
-      >
-        Second option is selected by default
-      </option>
-    </optgroup>
-    <optgroup
-      class=""
-      label="Group2"
-    >
-      <option
-        class=""
-        value="3"
-      >
-        The Third Option
-      </option>
-      <option
-        class=""
-        value="4"
-      >
-        The Fourth option
-      </option>
-    </optgroup>
-    <optgroup
-      class=""
-      disabled=""
-      label="Group3"
-    >
-      <option
-        class=""
-        value="5"
-      >
-        The Fifth Option
-      </option>
-      <option
-        class=""
-        value="6"
-      >
-        The Sixth option
-      </option>
-    </optgroup>
-  </select>
-</div>
-`;
+exports[`FormSelect Grouped FormSelect input 1`] = `"<select aria-label=\\"grouped FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-2\\"><optgroup class=\\"\\" label=\\"Group1\\"><option class=\\"\\" value=\\"1\\">The First Option</option><option class=\\"\\" value=\\"2\\">Second option is selected by default</option></optgroup><optgroup class=\\"\\" label=\\"Group2\\"><option class=\\"\\" value=\\"3\\">The Third Option</option><option class=\\"\\" value=\\"4\\">The Fourth option</option></optgroup><optgroup disabled=\\"\\" class=\\"\\" label=\\"Group3\\"><option class=\\"\\" value=\\"5\\">The Fifth Option</option><option class=\\"\\" value=\\"6\\">The Sixth option</option></optgroup></select>"`;
 
-exports[`Simple FormSelect input 1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    aria-label="simple FormSelect"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      disabled=""
-      value="please choose"
-    >
-      Please Choose
-    </option>
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-    <option
-      class=""
-      value="miss"
-    >
-      Miss
-    </option>
-    <option
-      class=""
-      value="mrs"
-    >
-      Mrs
-    </option>
-    <option
-      class=""
-      value="ms"
-    >
-      Ms
-    </option>
-    <option
-      class=""
-      value="dr"
-    >
-      Dr
-    </option>
-    <option
-      class=""
-      disabled=""
-      value="other"
-    >
-      Other
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect Simple FormSelect input 1`] = `"<select aria-label=\\"simple FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-1\\"><option class=\\"\\" value=\\"please choose\\" disabled=\\"\\">Please Choose</option><option class=\\"\\" value=\\"mr\\">Mr</option><option class=\\"\\" value=\\"miss\\">Miss</option><option class=\\"\\" value=\\"mrs\\">Mrs</option><option class=\\"\\" value=\\"ms\\">Ms</option><option class=\\"\\" value=\\"dr\\">Dr</option><option class=\\"\\" value=\\"other\\" disabled=\\"\\">Other</option></select>"`;
 
-exports[`invalid FormSelect input 1`] = `
-<div>
-  <select
-    aria-invalid="true"
-    aria-label="invalid FormSelect"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect invalid FormSelect input 1`] = `"<select aria-label=\\"invalid FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"true\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-error-1\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
 
-exports[`required FormSelect input 1`] = `
-<div>
-  <select
-    aria-invalid="false"
-    aria-label="required FormSelect"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-7"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
+exports[`FormSelect validated success FormSelect input 1`] = `"<select aria-label=\\"validated FormSelect\\" class=\\"pf-c-form-control pf-m-success\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-success-1\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
 
-exports[`validated error FormSelect input 1`] = `
-<div>
-  <select
-    aria-invalid="true"
-    aria-label="validated FormSelect"
-    class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-error-2"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-  </select>
-</div>
-`;
-
-exports[`validated success FormSelect input 1`] = `
-<select
-  aria-invalid={false}
-  aria-label="validated FormSelect"
-  className="pf-c-form-control pf-m-success"
-  data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
-  data-ouia-component-type="PF4/FormSelect"
-  data-ouia-safe={true}
-  disabled={false}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onFocus={[Function]}
-  required={false}
-  value=""
->
-  <FormSelectOption
-    key="1"
-    label="Mr"
-    value="mr"
-  />
-</select>
-`;
-
-exports[`validated warning FormSelect input 1`] = `
-<select
-  aria-invalid={false}
-  aria-label="validated FormSelect"
-  className="pf-c-form-control pf-m-warning"
-  data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
-  data-ouia-component-type="PF4/FormSelect"
-  data-ouia-safe={true}
-  disabled={false}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onFocus={[Function]}
-  required={false}
-  value=""
->
-  <FormSelectOption
-    key="1"
-    label="Mr"
-    value="mr"
-  />
-</select>
-`;
+exports[`FormSelect validated warning FormSelect input 1`] = `"<select aria-label=\\"validated FormSelect\\" class=\\"pf-c-form-control pf-m-warning\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-warning-1\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;

package/src/components/InputGroup/__tests__/InputGroup.test.tsx

@@ -1,47 +1,23 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+
 import { InputGroup } from '../InputGroup';
-import { InputGroupText, InputGroupTextVariant } from '../InputGroupText';
 import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
-test('InputGroupText', () => {
-  const view = shallow(
-    <InputGroupText className="inpt-grp-text" variant={InputGroupTextVariant.plain} id="email-npt-grp">
-      @
-    </InputGroupText>
-  );
-  expect(view.find('span')).toHaveLength(1);
-  const spanProps = view.find('span').props();
-  expect(spanProps.className).toEqual(expect.stringContaining('inpt-grp-text'));
-  expect(spanProps.className).toEqual(expect.stringContaining('pf-m-plain'));
-  expect(spanProps.id).toBe('email-npt-grp');
-  expect(view.text()).toBe('@');
-});
-
-test('InputGroup', () => {
-  const view = shallow(
-    <InputGroup className="text-verify-cls" id="text-1">
-      <TextInput value="this is text" aria-label="data text" />
-    </InputGroup>
-  );
-
-  expect(view.find('div')).toHaveLength(1);
-  const divProps = view.find('div').props();
-  expect(divProps.className).toEqual(expect.stringContaining('text-verify-cls'));
-  expect(divProps.id).toBe('text-1');
-});
-
-test('add aria-describedby to form-control if one of the non form-controls has id', () => {
-  // In this test, TextInput is a form-control component and Button is not.
-  // If Button has an id props, this should be used in aria-describedby.
-  const view = shallow(
-    <InputGroup>
-      <TextInput value="some data" aria-label="some text" />
-      <Button variant="primary" id="button-id">
-        hello
-      </Button>
-    </InputGroup>
-  );
-  expect(view.find(TextInput).props()['aria-describedby']).toBe('button-id');
+describe('InputGroup', () => {
+  test('add aria-describedby to form-control if one of the non form-controls has id', () => {
+    // In this test, TextInput is a form-control component and Button is not.
+    // If Button has an id props, this should be used in aria-describedby.
+    render(
+      <InputGroup data-testid="input-group-test-id">
+        <TextInput value="some data" aria-label="some text" />
+        <Button variant="primary" id="button-id">
+          hello
+        </Button>
+      </InputGroup>
+    );
+    expect(screen.getByLabelText('some text').getAttribute('aria-describedby')).toEqual('button-id');
+  });
 });