diff --git a/packages/gamut/src/Form/__tests__/FormGroup.test.tsx b/packages/gamut/src/Form/__tests__/FormGroup.test.tsx index 19bb316157..11a1c5d17d 100644 --- a/packages/gamut/src/Form/__tests__/FormGroup.test.tsx +++ b/packages/gamut/src/Form/__tests__/FormGroup.test.tsx @@ -9,7 +9,6 @@ const renderView = setupRtl(FormGroup, { const label = 'up dog'; const htmlFor = 'up-dog'; -const optional = '(optional)'; const optionalLabelText = `${label} (optional)`; describe('FormGroup', () => { @@ -19,22 +18,14 @@ describe('FormGroup', () => { view.getByLabelText(optionalLabelText); }); - it('render (optional) as aria-hidden', async () => { - const { view } = renderView({ label, htmlFor }); - expect(view.getByText(optional)).toHaveAttribute('aria-hidden', 'true'); - }); + }); describe('when htmlFor is not provided', () => { it('renders Label as a div', () => { const { view } = renderView({ label }); expect(view.queryByLabelText(optionalLabelText)).toBeNull(); - view.getByText(label); - }); - - it('render (optional) as aria-hidden', () => { - const { view } = renderView({ label }); - expect(view.getByText(optional)).toHaveAttribute('aria-hidden', 'true'); + view.getByText(/up dog/); }); }); diff --git a/packages/gamut/src/Form/elements/FormGroupLabel.tsx b/packages/gamut/src/Form/elements/FormGroupLabel.tsx index 0f6a8df82e..3457d56b17 100644 --- a/packages/gamut/src/Form/elements/FormGroupLabel.tsx +++ b/packages/gamut/src/Form/elements/FormGroupLabel.tsx @@ -74,9 +74,11 @@ export const FormGroupLabel: React.FC = ({ > {children} {!isSoloField && ( - - {required ? '*' : ' \u00A0(optional)'} - + required ? ( + * + ) : ( + '\u00A0(optional)' + ) )} {infotip && } diff --git a/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormContent.test.tsx b/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormContent.test.tsx index d5fa94ff3b..f77dd73f0f 100644 --- a/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormContent.test.tsx +++ b/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormContent.test.tsx @@ -25,7 +25,7 @@ describe('GridFormContent', () => { const { view } = renderView(); view.getByLabelText('Stub Text (optional)'); - view.getByRole('textbox', { name: 'Stub Text' }); + view.getByRole('textbox', { name: /Stub Text/ }); }); it('gives the field access to form context and validation', async () => { @@ -34,7 +34,7 @@ describe('GridFormContent', () => { mode: 'onChange', }); - fireEvent.input(view.getByRole('textbox', { name: 'Stub Text' }), { + fireEvent.input(view.getByRole('textbox', { name: /Stub Text/ }), { target: { value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', diff --git a/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormSection.test.tsx b/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormSection.test.tsx index a7025ee344..fe9306e1a4 100644 --- a/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormSection.test.tsx +++ b/packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormSection.test.tsx @@ -1,5 +1,6 @@ import { setupRtl } from '@codecademy/gamut-tests'; import { fireEvent } from '@testing-library/dom'; +import { act } from 'react'; import { stubFileField, @@ -48,9 +49,9 @@ describe('GridFormSections', () => { const { view } = renderView(); const textLabel = view.getByLabelText('Stub Text (optional)'); - const textField = view.getByRole('textbox', { name: 'Stub Text' }); + const textField = view.getByRole('textbox', { name: /Stub Text/ }); const radioLabel = view.getByLabelText('Stub Select (optional)'); - const radioField = view.getByRole('combobox', { name: 'Stub Select' }); + const radioField = view.getByRole('combobox', { name: /Stub Select/ }); expect(textLabel).toBeTruthy(); expect(textField).toBeTruthy(); @@ -64,18 +65,22 @@ describe('GridFormSections', () => { mode: 'onChange', }); - fireEvent.input(view.getByRole('textbox', { name: 'Stub Text' }), { - target: { - value: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - }, + await act(async () => { + fireEvent.input(view.getByRole('textbox', { name: 'Stub Text' }), { + target: { + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + }, + }); }); - fireEvent.input(view.getByRole('textbox', { name: 'Stub Text Again' }), { - target: { - value: 'Do you know what that is?', - }, - }); + await act(async () => { + fireEvent.input(view.getByRole('textbox', { name: 'Stub Text Again' }), { + target: { + value: 'Do you know what that is?', + }, + }); + }) await view.findByText('what is it?'); await view.findByText('not enough updog'); @@ -87,17 +92,21 @@ describe('GridFormSections', () => { mode: 'onChange', }); - fireEvent.input(view.getByRole('textbox', { name: 'Stub Text' }), { - target: { - value: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - }, + await act(async () => { + fireEvent.input(view.getByRole('textbox', { name: 'Stub Text' }), { + target: { + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + }, + }); }); - fireEvent.input(view.getByRole('textbox', { name: 'Stub Text Again' }), { - target: { - value: 'Do you know what that is?', - }, + await act(async () => { + fireEvent.input(view.getByRole('textbox', { name: 'Stub Text Again' }), { + target: { + value: 'Do you know what that is?', + }, + }); }); expect(await view.findAllByRole('alert')).toHaveLength(1); diff --git a/packages/gamut/src/GridForm/__tests__/GridForm.test.tsx b/packages/gamut/src/GridForm/__tests__/GridForm.test.tsx index 03d5f0bd20..1c48254a23 100644 --- a/packages/gamut/src/GridForm/__tests__/GridForm.test.tsx +++ b/packages/gamut/src/GridForm/__tests__/GridForm.test.tsx @@ -106,10 +106,10 @@ const getBaseCases = (view: RenderResult) => { name: 'Check me!', }) as HTMLInputElement; const selectField = view.getByRole('combobox', { - name: 'Stub Select', + name: /Stub Select/, }) as HTMLInputElement; const textField = view.getByRole('textbox', { - name: 'Stub Text', + name: /Stub Text/, }) as HTMLInputElement; return { checkboxField, selectField, textField }; }; @@ -257,7 +257,7 @@ describe('GridForm', () => { }, }); - const textField = view.getByRole('textbox', { name: 'Stub Text' }); + const textField = view.getByRole('textbox', { name: /Stub Text/ }); await act(async () => { fireEvent.input(textField, { @@ -284,7 +284,7 @@ describe('GridForm', () => { validation: 'onChange', }); - const textField = view.getByRole('textbox', { name: 'Stub Text' }); + const textField = view.getByRole('textbox', { name: /Stub Text/ }); await act(async () => { fireEvent.input(textField, {