From baaba560893f981aaee5306225602ac60fbca42c Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 23 Feb 2024 11:04:54 +0100 Subject: [PATCH] Added few more tests --- packages/uniforms-antd/__tests__/index.ts | 2 +- packages/uniforms/__suites__/SelectField.tsx | 252 ++++++++++++++----- 2 files changed, 194 insertions(+), 60 deletions(-) diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index 057dc6608..d81fdb192 100644 --- a/packages/uniforms-antd/__tests__/index.ts +++ b/packages/uniforms-antd/__tests__/index.ts @@ -57,7 +57,7 @@ describe('@RTL', () => { suites.testRadioField(theme.RadioField, { skipHtmlAttributesTest: true }); // FIXME: AntD has problem with toHaveValue check suites.testSubmitField(theme.SubmitField, { skipValueTest: true }); - suites.testSelectField(theme.SelectField, { skipInAntdTests: true }); + suites.testSelectField(theme.SelectField, { antdTests: true }); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index cdec1e265..acb95742c 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -9,39 +9,41 @@ export function testSelectField( SelectField: ComponentType, options?: { skipInMuiTests?: boolean; - skipInAntdTests?: boolean; + antdTests?: boolean; }, ) { - skipTestIf(options?.skipInMuiTests)( - ' - renders a select', - () => { - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - expect(screen.getByText('X')).not.toBeNull(); - expect(screen.getByText('a')).not.toBeNull(); - }, - ); + test(' - renders a select', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('X')).not.toBeNull(); + expect(screen.getByText('a')).not.toBeNull(); + if (!options?.antdTests && !options?.skipInMuiTests) { + expect(screen.getByText('b')).not.toBeNull(); + } + }); - skipTestIf(options?.skipInMuiTests)( - ' - renders a select with correct disabled state', - () => { - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - if (options?.skipInAntdTests) { - const selectField = screen.getByTestId('select-field'); - expect(selectField?.getAttribute('name')).toBe('x'); - } else { - const selectField = screen.getByTestId('select-field'); - const select = selectField.querySelector('select'); - expect(select?.getAttribute('disabled')).toBe(''); - } - }, - ); + test(' - renders a select with correct disabled state', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const selectField = screen.getByTestId('select-field'); + if (options?.antdTests) { + expect(selectField.classList.contains('ant-select-disabled')).toBe(true); + } else if (options?.skipInMuiTests) { + expect( + screen.getByRole('button').classList.contains('Mui-disabled'), + ).toBe(true); + } else { + expect( + selectField.querySelector('select')?.getAttribute('disabled'), + ).toBe(''); + } + }); + // TODO: Add for MUI skipTestIf(options?.skipInMuiTests)( ' - renders a select with correct readOnly state', () => { @@ -58,41 +60,66 @@ export function testSelectField( schema: z.object({ x: z.enum(['a', 'b']) }), }); const selectField = screen.getByTestId('select-field'); - if (options?.skipInAntdTests) { + if (options?.antdTests) { expect(selectField.getAttribute('readonly')).toBe(''); } else { - const option = selectField.querySelector('option'); - option?.click(); + selectField.querySelector('option')?.click(); expect(onChange).not.toHaveBeenCalled(); } }, ); - // test(' - renders a select with correct id (inherited)', () => {}); + test(' - renders a select with correct id (inherited)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + let selectField: HTMLElement | HTMLSelectElement | null = null; + if (options?.antdTests) { + selectField = screen.getByRole('combobox'); + } else if (options?.skipInMuiTests) { + selectField = screen.getByRole('button'); + } else { + selectField = screen.getByTestId('select-field').querySelector('select'); + } + expect(selectField?.getAttribute('id')).toBeTruthy(); + }); - // test(' - renders a select with correct id (specified)', () => {}); + test(' - renders a select with correct id (specified)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + let selectField: HTMLElement | HTMLSelectElement | null = null; + if (options?.antdTests) { + selectField = screen.getByRole('combobox'); + } else if (options?.skipInMuiTests) { + selectField = screen.getByRole('button'); + } else { + selectField = screen.getByTestId('select-field').querySelector('select'); + } + expect(selectField?.getAttribute('id')).toBe('y'); + }); - skipTestIf(options?.skipInMuiTests)( - ' - renders a select with correct name', - () => { - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const selectField = screen.getByTestId('select-field'); - if (options?.skipInAntdTests) { - expect(selectField.getAttribute('name')).toBe('x'); - } else { - const select = selectField.querySelector('select'); - expect(select?.getAttribute('name')).toBe('x'); - } - }, - ); + test(' - renders a select with correct name', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const selectField = screen.getByTestId('select-field'); + if (options?.antdTests) { + expect(selectField.getAttribute('name')).toBe('x'); + } else if (options?.skipInMuiTests) { + expect(screen.getByText('X')).toBeDefined(); + } else { + const select = selectField.querySelector('select'); + expect(select?.getAttribute('name')).toBe('x'); + } + }); - skipTestIf(options?.skipInMuiTests || options?.skipInAntdTests)( + skipTestIf(options?.antdTests || options?.skipInMuiTests)( ' - renders a select with correct options', () => { - // TODO: Add test for AntD const selectOptions = ['a', 'b'] as const; renderWithZod({ element: , @@ -132,9 +159,19 @@ export function testSelectField( schema: z.object({ x: z.enum(['ă', 'ś']) }), }); expect(screen.getByText('ă')).toBeInTheDocument(); + if (!options?.antdTests && !options?.skipInMuiTests) { + expect(screen.getByText('ś')).toBeInTheDocument(); + } }); - // test(' - disabled items (options)', () => {}); + test(' - disabled items (options)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + expect(select.querySelector('option')?.getAttribute('disabled')).toBeNull(); + }); // test(' - renders a set of checkboxes', () => {}); @@ -142,11 +179,50 @@ export function testSelectField( // test(' - renders a set of checkboxes with correct readOnly state', () => {}); - // test(' - renders a set of checkboxes with correct id (inherited)', () => {}); + // TODO: refactor a bit + test(' - renders a set of checkboxes with correct id (inherited)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = options?.skipInMuiTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : options?.antdTests + ? screen + .getByText('X') + .closest('body') + ?.querySelectorAll('.ant-radio-group') + : screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).toHaveAttribute('id'); + }); - // test(' - renders a set of checkboxes with correct id (specified)', () => {}); + test.only(' - renders a set of checkboxes with correct id (specified)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = options?.skipInMuiTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : options?.antdTests + ? screen + .getByText('X') + .closest('body') + ?.querySelectorAll('.ant-radio-group') + : screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).toHaveAttribute('id', 'y-YQ'); + }); - // test(' - renders a set of checkboxes with correct name', () => {}); + test(' - renders a set of checkboxes with correct name', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = + options?.antdTests || options?.skipInMuiTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).toHaveAttribute('name', 'x'); + }); // test(' - renders a set of checkboxes with correct options', () => {}); @@ -164,7 +240,20 @@ export function testSelectField( // test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => {}); - // test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => {}); + test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + model: { x: 'a' }, + }); + const checkbox = + options?.antdTests || options?.skipInMuiTests + ? screen.getByDisplayValue('a') + : screen.getByRole('checkbox', { name: 'a' }); + checkbox?.click(); + screen.getByLabelText('a').click(); + expect(checkbox).toBeChecked(); + }); test(' - renders a label', () => { renderWithZod({ @@ -174,7 +263,29 @@ export function testSelectField( expect(screen.getByText('y')).toBeInTheDocument(); }); - // test(' - renders a wrapper with unknown props', () => {}); + // TODO: Add for AntD + skipTestIf(options?.antdTests)( + ' - renders a wrapper with unknown props', + () => { + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const field = screen.getByTestId('select-field'); + expect(field).toHaveAttribute('data-x', 'x'); + expect(field).toHaveAttribute('data-z', 'z'); + expect(field).toHaveAttribute('data-y', 'y'); + }, + ); test(' - works with special characters', () => { renderWithZod({ @@ -182,7 +293,30 @@ export function testSelectField( schema: z.object({ x: z.enum(['ă', 'ș']) }), }); expect(screen.getByText('ă')).toBeInTheDocument(); + if (!options?.antdTests && !options?.skipInMuiTests) { + expect(screen.getByText('ș')).toBeInTheDocument(); + } }); - // test(' - disabled items (checkboxes)', () => {}); + test(' - disabled items (checkboxes)', () => { + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = + options?.antdTests || options?.skipInMuiTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).toBeDisabled(); + expect(checkboxes?.[1]).not.toBeDisabled(); + }); }