From 86ca98344e51302618c6cbfeeb64bb78a9724364 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 10 Nov 2023 00:34:53 +0100 Subject: [PATCH 01/14] Moved SelectField tests to suites --- packages/uniforms-antd/__tests__/index.ts | 1 + .../uniforms-bootstrap3/__tests__/index.ts | 1 + .../uniforms-bootstrap4/__tests__/index.ts | 1 + .../uniforms-bootstrap5/__tests__/index.ts | 1 + packages/uniforms-material/__tests__/index.ts | 1 + packages/uniforms-mui/__tests__/index.ts | 1 + packages/uniforms-semantic/__tests__/index.ts | 1 + packages/uniforms-unstyled/__tests__/index.ts | 1 + packages/uniforms/__suites__/SelectField.tsx | 22 +++++++++++++++++++ packages/uniforms/__suites__/index.ts | 1 + 10 files changed, 31 insertions(+) create mode 100644 packages/uniforms/__suites__/SelectField.tsx diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index 8f0fbdb8b..f2f13980d 100644 --- a/packages/uniforms-antd/__tests__/index.ts +++ b/packages/uniforms-antd/__tests__/index.ts @@ -57,6 +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); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); diff --git a/packages/uniforms-bootstrap3/__tests__/index.ts b/packages/uniforms-bootstrap3/__tests__/index.ts index 83ab14a6d..e888d6d58 100644 --- a/packages/uniforms-bootstrap3/__tests__/index.ts +++ b/packages/uniforms-bootstrap3/__tests__/index.ts @@ -53,6 +53,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-bootstrap4/__tests__/index.ts b/packages/uniforms-bootstrap4/__tests__/index.ts index 0d7ded864..c02adb1e4 100644 --- a/packages/uniforms-bootstrap4/__tests__/index.ts +++ b/packages/uniforms-bootstrap4/__tests__/index.ts @@ -53,6 +53,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-bootstrap5/__tests__/index.ts b/packages/uniforms-bootstrap5/__tests__/index.ts index bd1096e57..ff4ae6bc9 100644 --- a/packages/uniforms-bootstrap5/__tests__/index.ts +++ b/packages/uniforms-bootstrap5/__tests__/index.ts @@ -55,6 +55,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-material/__tests__/index.ts b/packages/uniforms-material/__tests__/index.ts index 5d81b6d44..34a7a501a 100644 --- a/packages/uniforms-material/__tests__/index.ts +++ b/packages/uniforms-material/__tests__/index.ts @@ -55,6 +55,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-mui/__tests__/index.ts b/packages/uniforms-mui/__tests__/index.ts index bb7fdb5b8..2bda7dbd1 100644 --- a/packages/uniforms-mui/__tests__/index.ts +++ b/packages/uniforms-mui/__tests__/index.ts @@ -52,6 +52,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-semantic/__tests__/index.ts b/packages/uniforms-semantic/__tests__/index.ts index 1c5817f1a..5e300107c 100644 --- a/packages/uniforms-semantic/__tests__/index.ts +++ b/packages/uniforms-semantic/__tests__/index.ts @@ -51,6 +51,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-unstyled/__tests__/index.ts b/packages/uniforms-unstyled/__tests__/index.ts index 98de11a8e..2abef5bdf 100644 --- a/packages/uniforms-unstyled/__tests__/index.ts +++ b/packages/uniforms-unstyled/__tests__/index.ts @@ -56,6 +56,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); + suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx new file mode 100644 index 000000000..fd7f4056f --- /dev/null +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -0,0 +1,22 @@ +import { screen } from '@testing-library/react'; +import React, { ComponentType } from 'react'; +import z from 'zod'; + +import { renderWithZod } from './render-zod'; +import { skipTestIf } from './skipTestIf'; + +export function testSelectField( + SelectField: ComponentType, + options?: { + skipMuiTests?: boolean; + }, +) { + skipTestIf(options?.skipMuiTests)(' - renders a select', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + + expect(screen.getAllByRole('combobox')).toHaveLength(1); + }); +} diff --git a/packages/uniforms/__suites__/index.ts b/packages/uniforms/__suites__/index.ts index 20a088254..de6b16372 100644 --- a/packages/uniforms/__suites__/index.ts +++ b/packages/uniforms/__suites__/index.ts @@ -15,6 +15,7 @@ export * from './NestField'; export * from './NumField'; export * from './QuickForm'; export * from './RadioField'; +export * from './SelectField'; export * from './SubmitField'; export * from './TextField'; export * from './ValidatedForm'; From 93c60e610f9c86b66848241b6a9ae430127fc3d7 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 9 Feb 2024 15:48:27 +0100 Subject: [PATCH 02/14] Added few more test suites --- .gitignore | 1 + packages/uniforms-antd/__tests__/index.ts | 2 +- packages/uniforms-material/__tests__/index.ts | 2 +- packages/uniforms-mui/__tests__/index.ts | 2 +- packages/uniforms/__suites__/SelectField.tsx | 172 +++++++++++++++++- packages/uniforms/__suites__/render-zod.tsx | 4 - 6 files changed, 173 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 451b010be..f67efa4fa 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ /.parcel-cache /coverage /lerna-debug.log +.DS_Store /node_modules /npm-debug.log diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index f2f13980d..057dc6608 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); + suites.testSelectField(theme.SelectField, { skipInAntdTests: true }); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); diff --git a/packages/uniforms-material/__tests__/index.ts b/packages/uniforms-material/__tests__/index.ts index 34a7a501a..071567fc7 100644 --- a/packages/uniforms-material/__tests__/index.ts +++ b/packages/uniforms-material/__tests__/index.ts @@ -55,7 +55,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField); + suites.testSelectField(theme.SelectField, { skipInMuiTests: true }); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-mui/__tests__/index.ts b/packages/uniforms-mui/__tests__/index.ts index 2bda7dbd1..5dfd060bf 100644 --- a/packages/uniforms-mui/__tests__/index.ts +++ b/packages/uniforms-mui/__tests__/index.ts @@ -52,7 +52,7 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField); + suites.testSelectField(theme.SelectField, { skipInMuiTests: true }); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index fd7f4056f..cdec1e265 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -8,15 +8,181 @@ import { skipTestIf } from './skipTestIf'; export function testSelectField( SelectField: ComponentType, options?: { - skipMuiTests?: boolean; + skipInMuiTests?: boolean; + skipInAntdTests?: boolean; }, ) { - skipTestIf(options?.skipMuiTests)(' - renders a select', () => { + 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(); + }, + ); + + 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(''); + } + }, + ); + + skipTestIf(options?.skipInMuiTests)( + ' - renders a select with correct readOnly state', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const selectField = screen.getByTestId('select-field'); + if (options?.skipInAntdTests) { + expect(selectField.getAttribute('readonly')).toBe(''); + } else { + const option = selectField.querySelector('option'); + option?.click(); + expect(onChange).not.toHaveBeenCalled(); + } + }, + ); + + // test(' - renders a select with correct id (inherited)', () => {}); + + // test(' - renders a select with correct id (specified)', () => {}); + + 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'); + } + }, + ); + + skipTestIf(options?.skipInMuiTests || options?.skipInAntdTests)( + ' - renders a select with correct options', + () => { + // TODO: Add test for AntD + const selectOptions = ['a', 'b'] as const; + renderWithZod({ + element: , + schema: z.object({ x: z.enum(selectOptions) }), + }); + selectOptions.forEach(option => { + expect(screen.getByText(option)).not.toBeNull(); + }); + }, + ); + + // test(' - renders a select with correct options (transform)', () => {}); + + // test(' - renders a select with correct placeholder (implicit)', () => {}); + + // test(' - renders a select with correct value (default)', () => {}); + + // test(' - renders a select with correct value (model)', () => {}); + + // test(' - renders a select with correct value (specified)', () => {}); + + // test(' - renders a select which correctly reacts on change', () => {}); + + // test(' - renders a select which correctly reacts on change (array)', () => {}); + + // test(' - renders a select (undefined values)', () => {}); + + // test(' - renders a select which correctly reacts on change (empty)', () => {}); + + // test(' - renders a select which correctly reacts on change (same value)', () => {}); + + // test(' - renders a wrapper with unknown props', () => {}); + + test(' - works with special characters', () => { renderWithZod({ element: , + schema: z.object({ x: z.enum(['ă', 'ś']) }), + }); + expect(screen.getByText('ă')).toBeInTheDocument(); + }); + + // test(' - disabled items (options)', () => {}); + + // test(' - renders a set of checkboxes', () => {}); + + // test(' - renders a set of checkboxes with correct disabled state', () => {}); + + // test(' - renders a set of checkboxes with correct readOnly state', () => {}); + + // test(' - renders a set of checkboxes with correct id (inherited)', () => {}); + + // test(' - renders a set of checkboxes with correct id (specified)', () => {}); + + // test(' - renders a set of checkboxes with correct name', () => {}); + + // test(' - renders a set of checkboxes with correct options', () => {}); + + // test(' - renders a set of checkboxes with correct options (transform)', () => {}); + + // test(' - renders a set of checkboxes with correct value (default)', () => {}); + + // test(' - renders a set of checkboxes with correct value (model)', () => {}); + + // test(' - renders a set of checkboxes with correct value (specified)', () => {}); + + // test(' - renders a set of checkboxes which correctly reacts on change', () => {}); + + // test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => {}); + + // 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 label', () => { + renderWithZod({ + element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); + expect(screen.getByText('y')).toBeInTheDocument(); + }); + + // test(' - renders a wrapper with unknown props', () => {}); - expect(screen.getAllByRole('combobox')).toHaveLength(1); + test(' - works with special characters', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['ă', 'ș']) }), + }); + expect(screen.getByText('ă')).toBeInTheDocument(); }); + + // test(' - disabled items (checkboxes)', () => {}); } diff --git a/packages/uniforms/__suites__/render-zod.tsx b/packages/uniforms/__suites__/render-zod.tsx index 8dde3b026..ac2490fd0 100644 --- a/packages/uniforms/__suites__/render-zod.tsx +++ b/packages/uniforms/__suites__/render-zod.tsx @@ -14,10 +14,6 @@ export function renderWithZod>({ } & Omit>>, 'schema'>) { return renderOnScreen(element, { wrapper({ children }) { - if (!schema) { - return <>{children}; - } - const value = { changed: false, changedMap: Object.create(null), From baaba560893f981aaee5306225602ac60fbca42c Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 23 Feb 2024 11:04:54 +0100 Subject: [PATCH 03/14] 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(); + }); } From abbdf52d3b80bd29bda351145e2dbccdce1dff87 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Sat, 24 Feb 2024 22:54:31 +0100 Subject: [PATCH 04/14] Added few more tests --- packages/uniforms/__suites__/SelectField.tsx | 57 +++++++++++++++++--- 1 file changed, 51 insertions(+), 6 deletions(-) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index acb95742c..8ef8ea3af 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -110,7 +110,7 @@ export function testSelectField( if (options?.antdTests) { expect(selectField.getAttribute('name')).toBe('x'); } else if (options?.skipInMuiTests) { - expect(screen.getByText('X')).toBeDefined(); + expect(screen.getByText('X')).toBeInTheDocument(); } else { const select = selectField.querySelector('select'); expect(select?.getAttribute('name')).toBe('x'); @@ -173,11 +173,44 @@ export function testSelectField( expect(select.querySelector('option')?.getAttribute('disabled')).toBeNull(); }); - // test(' - renders a set of checkboxes', () => {}); + test(' - renders a set of checkboxes', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = + options?.skipInMuiTests || options?.antdTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : screen.getAllByRole('checkbox'); + expect(checkboxes).toHaveLength(2); + }); - // test(' - renders a set of checkboxes with correct disabled state', () => {}); + test(' - renders a set of checkboxes with correct disabled state', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = + options?.skipInMuiTests || options?.antdTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).toBeDisabled(); + expect(checkboxes?.[1]).toBeDisabled(); + }); - // test(' - renders a set of checkboxes with correct readOnly state', () => {}); + test(' - renders a set of checkboxes with correct readOnly state', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = + options?.skipInMuiTests || options?.antdTests + ? screen.getByText('X').closest('body')?.querySelectorAll('input') + : screen.getAllByRole('checkbox'); + checkboxes?.[1].click(); + expect(onChange).not.toHaveBeenCalled(); + }); // TODO: refactor a bit test(' - renders a set of checkboxes with correct id (inherited)', () => { @@ -196,7 +229,7 @@ export function testSelectField( expect(checkboxes?.[0]).toHaveAttribute('id'); }); - test.only(' - renders a set of checkboxes with correct id (specified)', () => { + test(' - renders a set of checkboxes with correct id (specified)', () => { renderWithZod({ element: , schema: z.object({ x: z.enum(['a', 'b']) }), @@ -234,7 +267,19 @@ export function testSelectField( // test(' - renders a set of checkboxes with correct value (specified)', () => {}); - // test(' - renders a set of checkboxes which correctly reacts on change', () => {}); + test(' - renders a set of checkboxes which correctly reacts on change', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkbox = + options?.antdTests || options?.skipInMuiTests + ? screen.getByDisplayValue('b') + : screen.getByRole('checkbox', { name: 'b' }); + expect(checkbox).not.toBeChecked(); + checkbox?.click(); + expect(checkbox).toBeChecked(); + }); // test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => {}); From 8fbba3f4a2fe6fb53881511cb610da14e9bf6e12 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Thu, 29 Feb 2024 02:01:15 +0100 Subject: [PATCH 05/14] Added more tests --- packages/uniforms-antd/__tests__/index.ts | 3 +- packages/uniforms-material/__tests__/index.ts | 3 +- packages/uniforms-mui/__tests__/index.ts | 3 +- packages/uniforms/__suites__/SelectField.tsx | 450 ++++++++++-------- 4 files changed, 252 insertions(+), 207 deletions(-) diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index d81fdb192..152e18a14 100644 --- a/packages/uniforms-antd/__tests__/index.ts +++ b/packages/uniforms-antd/__tests__/index.ts @@ -57,7 +57,8 @@ 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, { antdTests: true }); + // FIXME: AntD select does not work with new RTL test implementation + // suites.testSelectField(theme.SelectField, { antdTests: true }); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); diff --git a/packages/uniforms-material/__tests__/index.ts b/packages/uniforms-material/__tests__/index.ts index 071567fc7..fbe8f1a7b 100644 --- a/packages/uniforms-material/__tests__/index.ts +++ b/packages/uniforms-material/__tests__/index.ts @@ -55,7 +55,8 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField, { skipInMuiTests: true }); + // FIXME: MUI select does not work with new RTL test implementation + // suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-mui/__tests__/index.ts b/packages/uniforms-mui/__tests__/index.ts index 5dfd060bf..2b7520252 100644 --- a/packages/uniforms-mui/__tests__/index.ts +++ b/packages/uniforms-mui/__tests__/index.ts @@ -52,7 +52,8 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField, { skipInMuiTests: true }); + // FIXME: MUI select does not work with new RTL test implementation + // suites.testSelectField(theme.SelectField); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index 8ef8ea3af..1d141c3b7 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -1,27 +1,16 @@ -import { screen } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import React, { ComponentType } from 'react'; import z from 'zod'; import { renderWithZod } from './render-zod'; -import { skipTestIf } from './skipTestIf'; - -export function testSelectField( - SelectField: ComponentType, - options?: { - skipInMuiTests?: boolean; - antdTests?: boolean; - }, -) { + +export function testSelectField(SelectField: ComponentType) { 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(); - } + expect(screen.getByTestId('select-field')).toBeInTheDocument(); }); test(' - renders a select with correct disabled state', () => { @@ -29,60 +18,35 @@ export function testSelectField( 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', - () => { - const onChange = jest.fn(); - renderWithZod({ - element: ( - - ), - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const selectField = screen.getByTestId('select-field'); - if (options?.antdTests) { - expect(selectField.getAttribute('readonly')).toBe(''); - } else { - selectField.querySelector('option')?.click(); - expect(onChange).not.toHaveBeenCalled(); - } - }, - ); + const select = screen.getByTestId('select-field').querySelector('select'); + expect(select?.getAttribute('disabled')).toBe(''); + }); + + test(' - renders a select with correct readOnly state', () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const option = screen.getByTestId('select-field').querySelector('option'); + option?.click(); + expect(onChange).not.toHaveBeenCalled(); + }); 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(); + const select = screen.getByTestId('select-field').querySelector('select'); + expect(select?.getAttribute('id')).toBeTruthy(); }); test(' - renders a select with correct id (specified)', () => { @@ -90,15 +54,8 @@ export function testSelectField( 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'); + const select = screen.getByTestId('select-field').querySelector('select'); + expect(select?.getAttribute('id')).toBe('y'); }); test(' - renders a select with correct name', () => { @@ -106,52 +63,128 @@ export function testSelectField( 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')).toBeInTheDocument(); - } else { - const select = selectField.querySelector('select'); - expect(select?.getAttribute('name')).toBe('x'); - } + const select = screen.getByTestId('select-field').querySelector('select'); + expect(select?.getAttribute('name')).toBe('x'); }); - skipTestIf(options?.antdTests || options?.skipInMuiTests)( - ' - renders a select with correct options', - () => { - const selectOptions = ['a', 'b'] as const; - renderWithZod({ - element: , - schema: z.object({ x: z.enum(selectOptions) }), - }); - selectOptions.forEach(option => { - expect(screen.getByText(option)).not.toBeNull(); - }); - }, - ); - - // test(' - renders a select with correct options (transform)', () => {}); - - // test(' - renders a select with correct placeholder (implicit)', () => {}); + test(' - renders a select with correct options', () => { + const selectOptions = ['a', 'b'] as const; + renderWithZod({ + element: , + schema: z.object({ x: z.enum(selectOptions) }), + }); + selectOptions.forEach(option => { + expect(screen.getByText(option)).not.toBeNull(); + }); + }); - // test(' - renders a select with correct value (default)', () => {}); + test(' - renders a select with correct options (transform)', () => { + const selectOptions = ['a', 'b'] as const; + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(selectOptions) }), + }); + selectOptions.forEach(option => { + expect(screen.getByText(option.toUpperCase())).toBeInTheDocument(); + }); + }); - // test(' - renders a select with correct value (model)', () => {}); + test(' - renders a select with correct placeholder (implicit)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('y')).toBeInTheDocument(); + }); - // test(' - renders a select with correct value (specified)', () => {}); + test(' - renders a select with correct value (default)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + expect(select).toHaveValue('a'); + }); - // test(' - renders a select which correctly reacts on change', () => {}); + test(' - renders a select with correct value (model)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + model: { x: 'b' }, + }); + const select = screen.getByRole('combobox'); + expect(select).toHaveValue('b'); + }); - // test(' - renders a select which correctly reacts on change (array)', () => {}); + test(' - renders a select with correct value (specified)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + expect(select).toHaveValue('b'); + }); - // test(' - renders a select (undefined values)', () => {}); + test(' - renders a select which correctly reacts on change', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: 'b' } }); + expect(onChange).toHaveBeenCalledWith('b'); + }); - // test(' - renders a select which correctly reacts on change (empty)', () => {}); + test(' - renders a select which correctly reacts on change (empty)', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: '' } }); + expect(onChange).toHaveBeenLastCalledWith(undefined); + }); - // test(' - renders a select which correctly reacts on change (same value)', () => {}); + test(' - renders a select which correctly reacts on change (same value)', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + model: { x: 'b' }, + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: 'b' } }); + expect(onChange).toHaveBeenCalledWith('b'); + }); - // test(' - renders a wrapper with unknown props', () => {}); + test(' - 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({ @@ -159,18 +192,24 @@ export function testSelectField( schema: z.object({ x: z.enum(['ă', 'ś']) }), }); expect(screen.getByText('ă')).toBeInTheDocument(); - if (!options?.antdTests && !options?.skipInMuiTests) { - expect(screen.getByText('ś')).toBeInTheDocument(); - } + expect(screen.getByText('ś')).toBeInTheDocument(); }); test(' - disabled items (options)', () => { renderWithZod({ - element: , + element: ( + + ), schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByRole('combobox'); - expect(select.querySelector('option')?.getAttribute('disabled')).toBeNull(); + expect(screen.getByText('A')).toBeDisabled(); + expect(screen.getByText('B')).not.toBeDisabled(); }); test(' - renders a set of checkboxes', () => { @@ -178,11 +217,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = - options?.skipInMuiTests || options?.antdTests - ? screen.getByText('X').closest('body')?.querySelectorAll('input') - : screen.getAllByRole('checkbox'); - expect(checkboxes).toHaveLength(2); + expect(screen.getAllByRole('checkbox')).toHaveLength(2); }); test(' - renders a set of checkboxes with correct disabled state', () => { @@ -190,10 +225,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = - options?.skipInMuiTests || options?.antdTests - ? screen.getByText('X').closest('body')?.querySelectorAll('input') - : screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole('checkbox'); expect(checkboxes?.[0]).toBeDisabled(); expect(checkboxes?.[1]).toBeDisabled(); }); @@ -204,28 +236,17 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = - options?.skipInMuiTests || options?.antdTests - ? screen.getByText('X').closest('body')?.querySelectorAll('input') - : screen.getAllByRole('checkbox'); - checkboxes?.[1].click(); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[0]); expect(onChange).not.toHaveBeenCalled(); }); - // 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'); + const checkboxes = screen.getAllByRole('checkbox'); expect(checkboxes?.[0]).toHaveAttribute('id'); }); @@ -234,15 +255,9 @@ export function testSelectField( 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'); + const checkboxes = screen.getAllByRole('checkbox'); expect(checkboxes?.[0]).toHaveAttribute('id', 'y-YQ'); + expect(checkboxes?.[1]).toHaveAttribute('id', 'y-Yg'); }); test(' - renders a set of checkboxes with correct name', () => { @@ -250,54 +265,90 @@ export function testSelectField( 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'); + const checkboxes = screen.getAllByRole('checkbox'); expect(checkboxes?.[0]).toHaveAttribute('name', 'x'); + expect(checkboxes?.[1]).toHaveAttribute('name', 'x'); }); - // test(' - renders a set of checkboxes with correct options', () => {}); - - // test(' - renders a set of checkboxes with correct options (transform)', () => {}); - - // test(' - renders a set of checkboxes with correct value (default)', () => {}); + test(' - renders a set of checkboxes with correct options', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('a')).toBeInTheDocument(); + expect(screen.getByText('b')).toBeInTheDocument(); + }); - // test(' - renders a set of checkboxes with correct value (model)', () => {}); + test(' - renders a set of checkboxes with correct options (transform)', () => { + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('A')).toBeInTheDocument(); + expect(screen.getByText('B')).toBeInTheDocument(); + }); - // test(' - renders a set of checkboxes with correct value (specified)', () => {}); + test(' - renders a set of checkboxes with correct value (default)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).toBeChecked(); + expect(checkboxes?.[1]).not.toBeChecked(); + }); - test(' - renders a set of checkboxes which correctly reacts on change', () => { + test(' - renders a set of checkboxes with correct value (model)', () => { renderWithZod({ element: , schema: z.object({ x: z.enum(['a', 'b']) }), + model: { x: 'b' }, }); - const checkbox = - options?.antdTests || options?.skipInMuiTests - ? screen.getByDisplayValue('b') - : screen.getByRole('checkbox', { name: 'b' }); - expect(checkbox).not.toBeChecked(); - checkbox?.click(); - expect(checkbox).toBeChecked(); + const checkboxes = screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).not.toBeChecked(); + expect(checkboxes?.[1]).toBeChecked(); }); - // test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => {}); + test(' - renders a set of checkboxes with correct value (specified)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + expect(checkboxes?.[0]).not.toBeChecked(); + expect(checkboxes?.[1]).toBeChecked(); + }); - // test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => {}); + test(' - renders a set of checkboxes which correctly reacts on change', async () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[1]); + expect(onChange).toHaveBeenCalledWith('b'); + }); test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => { + const onChange = jest.fn(); renderWithZod({ - element: , + element: , schema: z.object({ x: z.enum(['a', 'b']) }), - model: { x: 'a' }, + model: { x: 'b' }, }); - const checkbox = - options?.antdTests || options?.skipInMuiTests - ? screen.getByDisplayValue('a') - : screen.getByRole('checkbox', { name: 'a' }); - checkbox?.click(); - screen.getByLabelText('a').click(); - expect(checkbox).toBeChecked(); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[1]); + expect(onChange).toHaveBeenCalledWith('b'); }); test(' - renders a label', () => { @@ -308,29 +359,25 @@ export function testSelectField( expect(screen.getByText('y')).toBeInTheDocument(); }); - // 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(' - 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({ @@ -338,9 +385,7 @@ export function testSelectField( schema: z.object({ x: z.enum(['ă', 'ș']) }), }); expect(screen.getByText('ă')).toBeInTheDocument(); - if (!options?.antdTests && !options?.skipInMuiTests) { - expect(screen.getByText('ș')).toBeInTheDocument(); - } + expect(screen.getByText('ș')).toBeInTheDocument(); }); test(' - disabled items (checkboxes)', () => { @@ -357,10 +402,7 @@ export function testSelectField( ), schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = - options?.antdTests || options?.skipInMuiTests - ? screen.getByText('X').closest('body')?.querySelectorAll('input') - : screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole('checkbox'); expect(checkboxes?.[0]).toBeDisabled(); expect(checkboxes?.[1]).not.toBeDisabled(); }); From dc39e509c009ca2f62e346b318c366648ca0d874 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Thu, 29 Feb 2024 02:03:38 +0100 Subject: [PATCH 06/14] Removed theme tests --- .../__tests__/SelectField.tsx | 737 ----------------- .../__tests__/SelectField.tsx | 778 ------------------ .../__tests__/SelectField.tsx | 755 ----------------- .../__tests__/SelectField.tsx | 708 ---------------- 4 files changed, 2978 deletions(-) delete mode 100644 packages/uniforms-bootstrap3/__tests__/SelectField.tsx delete mode 100644 packages/uniforms-bootstrap4/__tests__/SelectField.tsx delete mode 100644 packages/uniforms-bootstrap5/__tests__/SelectField.tsx delete mode 100644 packages/uniforms-unstyled/__tests__/SelectField.tsx diff --git a/packages/uniforms-bootstrap3/__tests__/SelectField.tsx b/packages/uniforms-bootstrap3/__tests__/SelectField.tsx deleted file mode 100644 index ad8a2e566..000000000 --- a/packages/uniforms-bootstrap3/__tests__/SelectField.tsx +++ /dev/null @@ -1,737 +0,0 @@ -import React from 'react'; -import { SelectField } from 'uniforms-bootstrap3'; - -import createContext from './_createContext'; -import mount from './_mount'; - -test(' - renders a select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); -}); - -test(' - renders a select with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('disabled')).toBe(true); -}); - -test(' - renders a select with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a select with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBeTruthy(); -}); - -test(' - renders a select with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBe('y'); -}); - -test(' - renders a select with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('name')).toBe('x'); -}); - -test(' - renders a select with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct options (transform)', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, label: '' } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'A'], - ['b', 'B'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (fallback)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], optional: true }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (implicit)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe(''); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a select which correctly reacts on change (empty)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: '' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', undefined); -}); - -test(' - renders a select which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(1); - expect(wrapper.find('label').prop('children')).toBe('y'); - expect(wrapper.find('label').prop('htmlFor')).toBe( - wrapper.find('select').prop('id'), - ); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - disabled items (options)', () => { - const element = ( - - ); - const wrapper = mount(element, createContext({ x: { type: String } })); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option[value="a"]').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('option[value="b"]').at(0).prop('disabled')).toBe(false); -}); - -test(' - renders a set of checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); -}); - -test(' - renders a set of inline checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('.checkbox-inline')).toHaveLength(2); -}); - -test(' - renders a set of checkboxes with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a set of checkboxes with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBeTruthy(); - expect(wrapper.find('input').at(1).prop('id')).toBeTruthy(); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual([]); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { model: { x: ['b'] } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select which correctly reacts on change (first value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a']); -}); - -test(' - renders a select which correctly reacts on change (next value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a', 'b']); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by value', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper - .find('select') - .simulate('change', { target: { selectedIndex: -1 } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBe('y-YQ'); - expect(wrapper.find('input').at(1).prop('id')).toBe('y-Yg'); -}); - -test(' - renders a set of checkboxes with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('name')).toBe('x'); - expect(wrapper.find('input').at(1).prop('name')).toBe('x'); -}); - -test(' - renders a set of checkboxes with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('label')).toHaveLength(2); - expect(wrapper.find('label').at(0).text()).toBe('a'); - expect(wrapper.find('label').at(1).text()).toBe('b'); -}); - -test(' - renders a set of checkboxes with correct options (transform)', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, label: '' } }), - ); - - expect(wrapper.find('label')).toHaveLength(2); - expect(wrapper.find('label').at(0).text()).toBe('A'); - expect(wrapper.find('label').at(1).text()).toBe('B'); -}); - -test(' - renders a set of checkboxes with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(false); -}); - -test(' - renders a set of checkboxes with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['b']); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'a'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(3); - expect(wrapper.find('label').at(0).text()).toBe('y'); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - disabled items (checkboxes)', () => { - const allowedValues = ['a', 'b']; - - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(false); -}); diff --git a/packages/uniforms-bootstrap4/__tests__/SelectField.tsx b/packages/uniforms-bootstrap4/__tests__/SelectField.tsx deleted file mode 100644 index fbe3504a6..000000000 --- a/packages/uniforms-bootstrap4/__tests__/SelectField.tsx +++ /dev/null @@ -1,778 +0,0 @@ -import React from 'react'; -import { SelectField } from 'uniforms-bootstrap4'; - -import createContext from './_createContext'; -import mount from './_mount'; - -test(' - renders a select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); -}); - -test(' - renders a select with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('disabled')).toBe(true); -}); - -test(' - renders a select with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a select with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBeTruthy(); -}); - -test(' - renders a select with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBe('y'); -}); - -test(' - renders a select with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('name')).toBe('x'); -}); - -test(' - renders a select with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct options', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, label: '' } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'A'], - ['b', 'B'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (fallback)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], optional: true }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (implicit)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe(''); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a select which correctly reacts on change (empty)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: '' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', undefined); -}); - -test(' - renders a select which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(1); - expect(wrapper.find('label').prop('children')).toBe('y'); - expect(wrapper.find('label').prop('htmlFor')).toBe( - wrapper.find('select').prop('id'), - ); -}); - -test(' - renders a select with class "bg-red" beside "form-group"', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('.bg-red.form-group')).toHaveLength(1); -}); - -test(' - renders a disabled select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('select').prop('disabled')).toEqual(true); -}); - -test(' - renders a required select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('.form-group.required')).toHaveLength(1); -}); - -test(' - renders am error massge in select', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('.form-text.text-danger')).toHaveLength(1); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - disabled items (options)', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, label: '' } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option[value="a"]').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('option[value="b"]').at(0).prop('disabled')).toBe(false); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual([]); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { model: { x: ['b'] } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select which correctly reacts on change (first value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a']); -}); - -test(' - renders a select which correctly reacts on change (next value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a', 'b']); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by value', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper - .find('select') - .simulate('change', { target: { selectedIndex: -1 } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); -}); - -test(' - renders a set of inline checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('.checkbox-inline')).toHaveLength(2); -}); - -test(' - renders a set of checkboxes with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a set of checkboxes with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBeTruthy(); - expect(wrapper.find('input').at(1).prop('id')).toBeTruthy(); -}); - -test(' - renders a set of checkboxes with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBe('y-YQ'); - expect(wrapper.find('input').at(1).prop('id')).toBe('y-Yg'); -}); - -test(' - renders a set of checkboxes with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('name')).toBe('x'); - expect(wrapper.find('input').at(1).prop('name')).toBe('x'); -}); - -test(' - renders a set of checkboxes with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('label')).toHaveLength(2); - expect(wrapper.find('label').at(0).text()).toBe('a'); - expect(wrapper.find('label').at(1).text()).toBe('b'); -}); - -test(' - renders a set of checkboxes with correct options (transform)', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, label: '' } }), - ); - - expect(wrapper.find('label')).toHaveLength(2); - expect(wrapper.find('label').at(0).text()).toBe('A'); - expect(wrapper.find('label').at(1).text()).toBe('B'); -}); - -test(' - renders a set of checkboxes with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(false); -}); - -test(' - renders a set of checkboxes with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['b']); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'a'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(3); - expect(wrapper.find('label').at(0).text()).toBe('y'); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - disabled items (checkboxes)', () => { - const element = ( - - ); - const wrapper = mount(element, createContext({ x: { type: String } })); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(false); -}); diff --git a/packages/uniforms-bootstrap5/__tests__/SelectField.tsx b/packages/uniforms-bootstrap5/__tests__/SelectField.tsx deleted file mode 100644 index 9a66984e8..000000000 --- a/packages/uniforms-bootstrap5/__tests__/SelectField.tsx +++ /dev/null @@ -1,755 +0,0 @@ -import React from 'react'; -import { SelectField } from 'uniforms-bootstrap5'; - -import createContext from './_createContext'; -import mount from './_mount'; - -test(' - renders a select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); -}); - -test(' - renders a select with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('disabled')).toBe(true); -}); - -test(' - renders a select with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a select with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBeTruthy(); -}); - -test(' - renders a select with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBe('y'); -}); - -test(' - renders a select with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('name')).toBe('x'); -}); - -test(' - renders a select with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct options (transform)', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, label: '' } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'A'], - ['b', 'B'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (fallback)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], optional: true }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (implicit)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe(''); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a select which correctly reacts on change (empty)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: '' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', undefined); -}); - -test(' - renders a select which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(1); - expect(wrapper.find('label').prop('children')).toBe('y'); - expect(wrapper.find('label').prop('htmlFor')).toBe( - wrapper.find('select').prop('id'), - ); -}); - -test(' - renders a select with class "bg-red" beside "mb-3"', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('.bg-red.mb-3')).toHaveLength(1); -}); - -test(' - renders a disabled select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('select').prop('disabled')).toEqual(true); -}); - -test(' - renders a required select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('.mb-3.required')).toHaveLength(1); -}); - -test(' - renders am error massge in select', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - expect(wrapper.find('.form-text.text-danger')).toHaveLength(1); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - disabled items (options)', () => { - const element = ( - - ); - const wrapper = mount(element, createContext({ x: { type: String } })); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option[value="a"]').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('option[value="b"]').at(0).prop('disabled')).toBe(false); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual([]); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { model: { x: ['b'] } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select which correctly reacts on change (first value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a']); -}); - -test(' - renders a select which correctly reacts on change (next value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a', 'b']); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by value', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper - .find('select') - .simulate('change', { target: { selectedIndex: -1 } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); -}); - -test(' - renders a set of inline checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('.form-check')).toHaveLength(2); - expect(wrapper.find('.form-check-inline')).toHaveLength(2); -}); - -test(' - renders a set of checkboxes with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a set of checkboxes with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBeTruthy(); - expect(wrapper.find('input').at(1).prop('id')).toBeTruthy(); -}); - -test(' - renders a set of checkboxes with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBe('y-YQ'); - expect(wrapper.find('input').at(1).prop('id')).toBe('y-Yg'); -}); - -test(' - renders a set of checkboxes with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('name')).toBe('x'); - expect(wrapper.find('input').at(1).prop('name')).toBe('x'); -}); - -test(' - renders a set of checkboxes with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('label')).toHaveLength(2); - expect(wrapper.find('label').at(0).text()).toBe('a'); - expect(wrapper.find('label').at(1).text()).toBe('b'); -}); - -test(' - renders a set of checkboxes with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(false); -}); - -test(' - renders a set of checkboxes with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['b']); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'a'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(3); - expect(wrapper.find('label').at(0).text()).toBe('y'); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - disabled items (checkboxes)', () => { - const element = ( - - ); - const wrapper = mount(element, createContext({ x: { type: String } })); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(false); -}); diff --git a/packages/uniforms-unstyled/__tests__/SelectField.tsx b/packages/uniforms-unstyled/__tests__/SelectField.tsx deleted file mode 100644 index 5ffddda31..000000000 --- a/packages/uniforms-unstyled/__tests__/SelectField.tsx +++ /dev/null @@ -1,708 +0,0 @@ -import React from 'react'; -import { SelectField } from 'uniforms-unstyled'; - -import createContext from './_createContext'; -import mount from './_mount'; - -test(' { - const element = ( - - ); - const wrapper = mount(element, createContext({ x: { type: String } })); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); -}); - -test(' { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, required: true, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); -}); - -test(' - renders a select', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); -}); - -test(' - renders a select with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('disabled')).toBe(true); -}); - -test(' - renders a select with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a select with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBeTruthy(); -}); - -test(' - renders a select with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('id')).toBe('y'); -}); - -test(' - renders a select with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('name')).toBe('x'); -}); - -test(' - renders a select with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', ''], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (fallback)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], optional: true }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct placeholder (implicit)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('option')).toHaveLength(3); - [ - ['', 'y'], - ['a', 'a'], - ['b', 'b'], - ].forEach(([value, text], index) => { - const option = wrapper.find('option').at(index); - expect(option.prop('value')).toBe(value); - expect(option.text()).toBe(text); - }); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe(''); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toBe('b'); -}); - -test(' - renders a select which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a select which correctly reacts on change (empty)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: '' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', undefined); -}); - -test(' - renders a select which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'b' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(1); - expect(wrapper.find('label').prop('children')).toBe('y'); - expect(wrapper.find('label').prop('htmlFor')).toBe( - wrapper.find('select').prop('id'), - ); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - renders a set of checkboxes', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); -}); - -test(' - renders a set of checkboxes with correct disabled state', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBe(true); - expect(wrapper.find('input').at(1).prop('disabled')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct readOnly state', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).not.toHaveBeenCalled(); -}); - -test(' - renders a set of checkboxes with correct id (inherited)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBeTruthy(); - expect(wrapper.find('input').at(1).prop('id')).toBeTruthy(); -}); - -test(' - renders a set of checkboxes with correct id (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('id')).toBe('y-YQ'); - expect(wrapper.find('input').at(1).prop('id')).toBe('y-Yg'); -}); - -test(' - renders a set of checkboxes with correct name', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('name')).toBe('x'); - expect(wrapper.find('input').at(1).prop('name')).toBe('x'); -}); - -test(' - renders a select with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual([]); -}); - -test(' - renders a multiselect with disabled options', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual([]); - expect(wrapper.find('option').at(0).prop('disabled')).toBeFalsy(); - expect(wrapper.find('option').at(1).prop('disabled')).toBeTruthy(); -}); - -test(' - renders a select with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { model: { x: ['b'] } }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect(wrapper.find('select').prop('value')).toStrictEqual(['b']); -}); - -test(' - renders a select which correctly reacts on change (first value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a']); -}); - -test(' - renders a select which correctly reacts on change (next value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['a', 'b']); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by value', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper.find('select').simulate('change', { target: { value: 'a' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('select')).toHaveLength(1); - expect( - wrapper - .find('select') - .simulate('change', { target: { selectedIndex: -1 } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes with correct options', () => { - const element = ; - const wrapper = mount( - element, - createContext({ - x: { type: String, allowedValues: ['a', 'b'], label: '' }, - }), - ); - - expect(wrapper.find('label')).toHaveLength(2); - expect(wrapper.find('label').at(0).text()).toBe('a'); - expect(wrapper.find('label').at(1).text()).toBe('b'); -}); - -test(' - renders a set of checkboxes with correct value (default)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(false); -}); - -test(' - renders a set of checkboxes with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' } }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes with correct value (specified)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('checked')).toBe(false); - expect(wrapper.find('input').at(1).prop('checked')).toBe(true); -}); - -test(' - renders a set of checkboxes which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'b'); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', ['b']); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { - x: { type: Array }, - 'x.$': { type: String, allowedValues: ['a', 'b'] }, - }, - { onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(1).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', []); -}); - -test(' - renders a set of checkboxes which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext( - { x: { type: String, allowedValues: ['a', 'b'] } }, - { model: { x: 'b' }, onChange }, - ), - ); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).simulate('change')).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 'a'); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('label')).toHaveLength(3); - expect(wrapper.find('label').at(0).text()).toBe('y'); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ( - - ); - const wrapper = mount( - element, - createContext({ x: { type: String, allowedValues: ['a', 'b'] } }), - ); - - expect(wrapper.find('div').at(0).prop('data-x')).toBe('x'); - expect(wrapper.find('div').at(0).prop('data-y')).toBe('y'); - expect(wrapper.find('div').at(0).prop('data-z')).toBe('z'); -}); - -test(' - works with special characters', () => { - mount( - , - createContext({ x: { type: String, allowedValues: ['ă', 'ș'] } }), - ); -}); - -test(' - renders a set of checkboxes with per-item props', () => { - const element = ( - - ); - const wrapper = mount(element, createContext({ x: { type: String } })); - - expect(wrapper.find('input')).toHaveLength(2); - expect(wrapper.find('input').at(0).prop('disabled')).toBeTruthy(); - expect(wrapper.find('input').at(1).prop('disabled')).toBeFalsy(); -}); From f3fa234d4b7c349011d87bf47c73477f5c8761e6 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Thu, 29 Feb 2024 02:36:40 +0100 Subject: [PATCH 07/14] wip, three tests need attention --- packages/uniforms/__suites__/SelectField.tsx | 112 +++++++++++++++++++ 1 file changed, 112 insertions(+) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index 1d141c3b7..f6f19979d 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -40,6 +40,118 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).not.toHaveBeenCalled(); }); + // FIXME: This test is not working as expected + // test(' - renders a set of inline checkboxes', () => { + // renderWithZod({ + // element: , + // schema: z.object({ x: z.enum(['a', 'b']) }), + // }); + // expect( + // screen.getByLabelText('X').closest('.form-check-inline'), + // ).toBeInTheDocument(); + // }); + + // FIXME: This test is not working as expected + // test.only(' - renders a select which correctly reacts on change (first value)', () => { + // const onChange = jest.fn(); + // renderWithZod({ + // element: ( + // + // ), + // schema: z.object({ x: z.enum(['a', 'b']) }), + // }); + // const select = screen.getByTestId('select'); + // fireEvent.change(select, { target: { value: 'a' } }); + // expect(onChange).toHaveBeenCalledWith(['a']); + // }); + + // FIXME: This test is not working as expected + // test.only(' - renders a select which correctly reacts on change (next value)', () => { + // const onChange = jest.fn(); + // renderWithZod({ + // element: ( + // + // ), + // schema: z.object({ x: z.enum(['a', 'b']) }), + // }); + // const select = screen.getByTestId('select'); + // fireEvent.change(select, { target: { value: 'b' } }); + // expect(onChange).toHaveBeenCalledWith(['a', 'b']); + // }); + + test(' - renders a select which correctly reacts on change (uncheck) by value', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: '' } }); + expect(onChange).toHaveBeenCalledWith(undefined); + }); + + test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { selectedIndex: -1 } }); + expect(onChange).toHaveBeenCalledWith(undefined); + }); + + test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[1]); + expect(onChange).toHaveBeenCalledWith(['b']); + fireEvent.click(checkboxes?.[0]); + expect(onChange).toHaveBeenCalledWith(['a']); + }); + + test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[0]); + expect(onChange).toHaveBeenCalledWith([]); + }); + test(' - renders a select with correct id (inherited)', () => { renderWithZod({ element: , From f232d6b8eec7acd7fe39cc8075d3368849a499b5 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 1 Mar 2024 00:19:34 +0100 Subject: [PATCH 08/14] Added few more tests for array --- packages/uniforms/__suites__/SelectField.tsx | 102 +++++++++++-------- 1 file changed, 62 insertions(+), 40 deletions(-) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index f6f19979d..187fe9676 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -40,6 +40,28 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).not.toHaveBeenCalled(); }); + test(' - renders a select which correctly reacts on change (uncheck) by value', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: '' } }); + expect(onChange).toHaveBeenCalledWith(undefined); + }); + + test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { selectedIndex: -1 } }); + expect(onChange).toHaveBeenCalledWith(undefined); + }); + // FIXME: This test is not working as expected // test(' - renders a set of inline checkboxes', () => { // renderWithZod({ @@ -112,46 +134,6 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).toHaveBeenCalledWith(undefined); }); - test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { - const onChange = jest.fn(); - renderWithZod({ - element: ( - - ), - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const checkboxes = screen.getAllByRole('checkbox'); - fireEvent.click(checkboxes?.[1]); - expect(onChange).toHaveBeenCalledWith(['b']); - fireEvent.click(checkboxes?.[0]); - expect(onChange).toHaveBeenCalledWith(['a']); - }); - - test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { - const onChange = jest.fn(); - renderWithZod({ - element: ( - - ), - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const checkboxes = screen.getAllByRole('checkbox'); - fireEvent.click(checkboxes?.[0]); - expect(onChange).toHaveBeenCalledWith([]); - }); - test(' - renders a select with correct id (inherited)', () => { renderWithZod({ element: , @@ -463,6 +445,46 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).toHaveBeenCalledWith('b'); }); + test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[1]); + expect(onChange).toHaveBeenCalledWith(['b']); + fireEvent.click(checkboxes?.[0]); + expect(onChange).toHaveBeenCalledWith(['a']); + }); + + test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole('checkbox'); + fireEvent.click(checkboxes?.[0]); + expect(onChange).toHaveBeenCalledWith([]); + }); + test(' - renders a label', () => { renderWithZod({ element: , From afb8bc00587da5cc33dbb25579e726731e193e29 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 1 Mar 2024 00:28:36 +0100 Subject: [PATCH 09/14] changed props --- packages/uniforms/__suites__/SelectField.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index 187fe9676..f9319b049 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -43,23 +43,23 @@ export function testSelectField(SelectField: ComponentType) { test(' - renders a select which correctly reacts on change (uncheck) by value', () => { const onChange = jest.fn(); renderWithZod({ - element: , + element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByRole('combobox'); + const select = screen.getByRole('listbox'); fireEvent.change(select, { target: { value: '' } }); - expect(onChange).toHaveBeenCalledWith(undefined); + expect(onChange).toHaveBeenCalledWith([]); }); test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { const onChange = jest.fn(); renderWithZod({ - element: , + element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByRole('combobox'); + const select = screen.getByRole('listbox'); fireEvent.change(select, { target: { selectedIndex: -1 } }); - expect(onChange).toHaveBeenCalledWith(undefined); + expect(onChange).toHaveBeenCalledWith([]); }); // FIXME: This test is not working as expected From c73754644a520ab59246ee931571b1aa777661fd Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 1 Mar 2024 00:54:21 +0100 Subject: [PATCH 10/14] Added few more tests for partial hit --- packages/uniforms/__suites__/SelectField.tsx | 26 ++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index f9319b049..a153c7451 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -40,6 +40,24 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).not.toHaveBeenCalled(); }); + test(' - ignores selection with readOnly state ', () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByTestId('select-field').querySelector('select'); + fireEvent.change(select!, { target: { value: 'b' } }); + expect(onChange).not.toHaveBeenCalled(); + }); + test(' - renders a select which correctly reacts on change (uncheck) by value', () => { const onChange = jest.fn(); renderWithZod({ @@ -191,6 +209,14 @@ export function testSelectField(SelectField: ComponentType) { }); }); + test(' - renders a select with correct placeholder (fallback)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('y')).toBeInTheDocument(); + }); + test(' - renders a select with correct placeholder (implicit)', () => { renderWithZod({ element: , From 6f62067e1d1a1e81a6ea3ff791df728f56b9e013 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 1 Mar 2024 01:10:40 +0100 Subject: [PATCH 11/14] Added few more tests for partial hit --- packages/uniforms/__suites__/SelectField.tsx | 59 +++++++------------- 1 file changed, 20 insertions(+), 39 deletions(-) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index a153c7451..0c7eddf5c 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -80,6 +80,17 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).toHaveBeenCalledWith([]); }); + test(' - renders a select which correctly reacts on change (checked) by selectedIndex', () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('listbox'); + fireEvent.change(select, { target: { selectedIndex: 0 } }); + expect(onChange).toHaveBeenCalledWith(['a']); + }); + // FIXME: This test is not working as expected // test(' - renders a set of inline checkboxes', () => { // renderWithZod({ @@ -91,45 +102,6 @@ export function testSelectField(SelectField: ComponentType) { // ).toBeInTheDocument(); // }); - // FIXME: This test is not working as expected - // test.only(' - renders a select which correctly reacts on change (first value)', () => { - // const onChange = jest.fn(); - // renderWithZod({ - // element: ( - // - // ), - // schema: z.object({ x: z.enum(['a', 'b']) }), - // }); - // const select = screen.getByTestId('select'); - // fireEvent.change(select, { target: { value: 'a' } }); - // expect(onChange).toHaveBeenCalledWith(['a']); - // }); - - // FIXME: This test is not working as expected - // test.only(' - renders a select which correctly reacts on change (next value)', () => { - // const onChange = jest.fn(); - // renderWithZod({ - // element: ( - // - // ), - // schema: z.object({ x: z.enum(['a', 'b']) }), - // }); - // const select = screen.getByTestId('select'); - // fireEvent.change(select, { target: { value: 'b' } }); - // expect(onChange).toHaveBeenCalledWith(['a', 'b']); - // }); - test(' - renders a select which correctly reacts on change (uncheck) by value', () => { const onChange = jest.fn(); renderWithZod({ @@ -234,6 +206,15 @@ export function testSelectField(SelectField: ComponentType) { expect(select).toHaveValue('a'); }); + test(' - renders a select with missing value (model)', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + expect(select).toHaveValue(''); + }); + test(' - renders a select with correct value (model)', () => { renderWithZod({ element: , From 85268e513a216190ca7564ff8626643409587f51 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Fri, 1 Mar 2024 01:37:32 +0100 Subject: [PATCH 12/14] Added few more tests for partial hit --- .../uniforms-bootstrap3/__tests__/index.ts | 5 ++- .../uniforms-bootstrap4/__tests__/index.ts | 5 ++- .../uniforms-bootstrap5/__tests__/index.ts | 5 ++- packages/uniforms/__suites__/SelectField.tsx | 34 +++++++++++-------- 4 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/uniforms-bootstrap3/__tests__/index.ts b/packages/uniforms-bootstrap3/__tests__/index.ts index e888d6d58..e2fb15f9e 100644 --- a/packages/uniforms-bootstrap3/__tests__/index.ts +++ b/packages/uniforms-bootstrap3/__tests__/index.ts @@ -53,7 +53,10 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField); + suites.testSelectField(theme.SelectField, { + getCheckboxInlineOption: screen => + screen.getByLabelText('a').closest('.checkbox-inline'), + }); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-bootstrap4/__tests__/index.ts b/packages/uniforms-bootstrap4/__tests__/index.ts index c02adb1e4..b52f247ab 100644 --- a/packages/uniforms-bootstrap4/__tests__/index.ts +++ b/packages/uniforms-bootstrap4/__tests__/index.ts @@ -53,7 +53,10 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField); + suites.testSelectField(theme.SelectField, { + getCheckboxInlineOption: screen => + screen.getByLabelText('a').closest('.checkbox-inline'), + }); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms-bootstrap5/__tests__/index.ts b/packages/uniforms-bootstrap5/__tests__/index.ts index ff4ae6bc9..d155ffd98 100644 --- a/packages/uniforms-bootstrap5/__tests__/index.ts +++ b/packages/uniforms-bootstrap5/__tests__/index.ts @@ -55,7 +55,10 @@ describe('@RTL', () => { suites.testNumField(theme.NumField); suites.testQuickForm(theme.QuickForm); suites.testRadioField(theme.RadioField); - suites.testSelectField(theme.SelectField); + suites.testSelectField(theme.SelectField, { + getCheckboxInlineOption: screen => + screen.getByLabelText('a').closest('.form-check-inline'), + }); suites.testSubmitField(theme.SubmitField); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index 0c7eddf5c..9f119c5c0 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -1,10 +1,16 @@ -import { fireEvent, screen } from '@testing-library/react'; +import { fireEvent, screen, Screen } from '@testing-library/react'; import React, { ComponentType } from 'react'; import z from 'zod'; import { renderWithZod } from './render-zod'; - -export function testSelectField(SelectField: ComponentType) { +import { skipTestIf } from './skipTestIf'; + +export function testSelectField( + SelectField: ComponentType, + options?: { + getCheckboxInlineOption?: (screen: Screen) => Element | null; + }, +) { test(' - renders a select', () => { renderWithZod({ element: , @@ -91,17 +97,6 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).toHaveBeenCalledWith(['a']); }); - // FIXME: This test is not working as expected - // test(' - renders a set of inline checkboxes', () => { - // renderWithZod({ - // element: , - // schema: z.object({ x: z.enum(['a', 'b']) }), - // }); - // expect( - // screen.getByLabelText('X').closest('.form-check-inline'), - // ).toBeInTheDocument(); - // }); - test(' - renders a select which correctly reacts on change (uncheck) by value', () => { const onChange = jest.fn(); renderWithZod({ @@ -342,6 +337,17 @@ export function testSelectField(SelectField: ComponentType) { expect(onChange).not.toHaveBeenCalled(); }); + skipTestIf(!options?.getCheckboxInlineOption)( + ' - renders a set of inline checkboxes', + () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(options?.getCheckboxInlineOption?.(screen)).toBeInTheDocument(); + }, + ); + test(' - renders a set of checkboxes with correct id (inherited)', () => { renderWithZod({ element: , From 9dec81c7cd36d45464782dc5452f7d987093b5b1 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Sun, 31 Mar 2024 01:24:48 +0100 Subject: [PATCH 13/14] Added (multiple) label to test names --- packages/uniforms/__suites__/SelectField.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index 9f119c5c0..d4581ee3e 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -64,7 +64,7 @@ export function testSelectField( expect(onChange).not.toHaveBeenCalled(); }); - test(' - renders a select which correctly reacts on change (uncheck) by value', () => { + test(' - (multiple) renders a select which correctly reacts on change (uncheck) by value', () => { const onChange = jest.fn(); renderWithZod({ element: , @@ -75,7 +75,7 @@ export function testSelectField( expect(onChange).toHaveBeenCalledWith([]); }); - test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { + test(' - (multiple) renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { const onChange = jest.fn(); renderWithZod({ element: , @@ -86,7 +86,7 @@ export function testSelectField( expect(onChange).toHaveBeenCalledWith([]); }); - test(' - renders a select which correctly reacts on change (checked) by selectedIndex', () => { + test(' - (multiple) renders a select which correctly reacts on change (checked) by selectedIndex', () => { const onChange = jest.fn(); renderWithZod({ element: , @@ -458,7 +458,7 @@ export function testSelectField( expect(onChange).toHaveBeenCalledWith('b'); }); - test(' - renders a set of checkboxes which correctly reacts on change (array check)', () => { + test(' - (multiple) renders a set of checkboxes which correctly reacts on change (array check)', () => { const onChange = jest.fn(); renderWithZod({ element: ( @@ -479,7 +479,7 @@ export function testSelectField( expect(onChange).toHaveBeenCalledWith(['a']); }); - test(' - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { + test(' - (multiple) renders a set of checkboxes which correctly reacts on change (array uncheck)', () => { const onChange = jest.fn(); renderWithZod({ element: ( From b90343cfc5f55d83014958b2d4baaff5927b931d Mon Sep 17 00:00:00 2001 From: Adrian Mucha Date: Fri, 5 Apr 2024 12:24:49 +0200 Subject: [PATCH 14/14] Enable AntD SelectField tests suite (#1312) Co-authored-by: Volodymyr Zakhovaiko --- packages/uniforms-antd/__tests__/index.ts | 2 +- packages/uniforms-antd/src/SelectField.tsx | 48 +-- packages/uniforms/__suites__/SelectField.tsx | 394 +++++++++++-------- 3 files changed, 256 insertions(+), 188 deletions(-) diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index 717b7a7a2..f65bc471c 100644 --- a/packages/uniforms-antd/__tests__/index.ts +++ b/packages/uniforms-antd/__tests__/index.ts @@ -61,7 +61,7 @@ describe('@RTL', () => { // FIXME: AntD has problem with toHaveValue check suites.testSubmitField(theme.SubmitField, { skipValueTest: true }); // FIXME: AntD select does not work with new RTL test implementation - // suites.testSelectField(theme.SelectField, { antdTests: true }); + suites.testSelectField(theme.SelectField, { theme: 'antd' }); suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); diff --git a/packages/uniforms-antd/src/SelectField.tsx b/packages/uniforms-antd/src/SelectField.tsx index ac3d77415..40197c0ed 100644 --- a/packages/uniforms-antd/src/SelectField.tsx +++ b/packages/uniforms-antd/src/SelectField.tsx @@ -41,30 +41,33 @@ export type SelectFieldProps = CheckboxesProps | SelectProps; function Select(props: SelectFieldProps) { const Group = props.fieldType === Array ? CheckboxGroup : RadioGroup; + const filteredDOMProps = filterDOMProps(props); return wrapField( props, props.checkboxes ? ( - // @ts-expect-error: Incorrect `value` type. - { - if (!props.readOnly) { - props.onChange( - // FIXME: Argument type depends on `props.fieldType`. - props.fieldType === Array - ? eventOrValue - : eventOrValue.target.value, - ); - } - }} - options={props.options?.map(option => ({ - ...option, - label: option.label ?? option.value, - }))} - value={props.value} - /> + + {/* @ts-expect-error: Incorrect `value` type. */} + { + if (!props.readOnly) { + props.onChange( + // FIXME: Argument type depends on `props.fieldType`. + props.fieldType === Array + ? eventOrValue + : eventOrValue.target.value, + ); + } + }} + options={props.options?.map(option => ({ + ...option, + label: option.label ?? option.value, + }))} + value={props.value} + /> + ) : ( allowClear={!props.required} @@ -86,13 +89,14 @@ function Select(props: SelectFieldProps) { : [] : props.value } - {...filterDOMProps(props)} + {...filteredDOMProps} > {props.options?.map(option => ( {option.label ?? option.value} diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx index d4581ee3e..7cb413876 100644 --- a/packages/uniforms/__suites__/SelectField.tsx +++ b/packages/uniforms/__suites__/SelectField.tsx @@ -8,6 +8,7 @@ import { skipTestIf } from './skipTestIf'; export function testSelectField( SelectField: ComponentType, options?: { + theme?: 'antd'; getCheckboxInlineOption?: (screen: Screen) => Element | null; }, ) { @@ -24,8 +25,8 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByTestId('select-field').querySelector('select'); - expect(select?.getAttribute('disabled')).toBe(''); + const select = screen.getByRole('combobox'); + expect(select).toBeDisabled(); }); test(' - renders a select with correct readOnly state', () => { @@ -46,85 +47,103 @@ export function testSelectField( expect(onChange).not.toHaveBeenCalled(); }); - test(' - ignores selection with readOnly state ', () => { - const onChange = jest.fn(); - renderWithZod({ - element: ( - - ), - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByTestId('select-field').querySelector('select'); - fireEvent.change(select!, { target: { value: 'b' } }); - expect(onChange).not.toHaveBeenCalled(); - }); + skipTestIf(options?.theme === 'antd')( + ' - ignores selection with readOnly state ', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByTestId('select-field').querySelector('select'); + fireEvent.change(select!, { target: { value: 'b' } }); + expect(onChange).not.toHaveBeenCalled(); + }, + ); - test(' - (multiple) renders a select which correctly reacts on change (uncheck) by value', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('listbox'); - fireEvent.change(select, { target: { value: '' } }); - expect(onChange).toHaveBeenCalledWith([]); - }); + skipTestIf(options?.theme === 'antd')( + ' - (multiple) renders a select which correctly reacts on change (uncheck) by value', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('listbox'); + fireEvent.change(select, { target: { value: '' } }); + expect(onChange).toHaveBeenCalledWith([]); + }, + ); - test(' - (multiple) renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('listbox'); - fireEvent.change(select, { target: { selectedIndex: -1 } }); - expect(onChange).toHaveBeenCalledWith([]); - }); + skipTestIf(options?.theme === 'antd')( + ' - (multiple) renders a select which correctly reacts on change (uncheck) by selectedIndex', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('listbox'); + fireEvent.change(select, { target: { selectedIndex: -1 } }); + expect(onChange).toHaveBeenCalledWith([]); + }, + ); - test(' - (multiple) renders a select which correctly reacts on change (checked) by selectedIndex', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('listbox'); - fireEvent.change(select, { target: { selectedIndex: 0 } }); - expect(onChange).toHaveBeenCalledWith(['a']); - }); + skipTestIf(options?.theme === 'antd')( + ' - (multiple) renders a select which correctly reacts on change (checked) by selectedIndex', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('listbox'); + fireEvent.change(select, { target: { selectedIndex: 0 } }); + expect(onChange).toHaveBeenCalledWith(['a']); + }, + ); - test(' - renders a select which correctly reacts on change (uncheck) by value', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('combobox'); - fireEvent.change(select, { target: { value: '' } }); - expect(onChange).toHaveBeenCalledWith(undefined); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a select which correctly reacts on change (uncheck) by value', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: '' } }); + expect(onChange).toHaveBeenCalledWith(undefined); + }, + ); - test(' - renders a select which correctly reacts on change (uncheck) by selectedIndex', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('combobox'); - fireEvent.change(select, { target: { selectedIndex: -1 } }); - expect(onChange).toHaveBeenCalledWith(undefined); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a select which correctly reacts on change (uncheck) by selectedIndex', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { selectedIndex: -1 } }); + expect(onChange).toHaveBeenCalledWith(undefined); + }, + ); test(' - renders a select with correct id (inherited)', () => { renderWithZod({ element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByTestId('select-field').querySelector('select'); + const select = screen.getByTestId('select-field').querySelector('[id]'); expect(select?.getAttribute('id')).toBeTruthy(); }); @@ -133,7 +152,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByTestId('select-field').querySelector('select'); + const select = screen.getByTestId('select-field').querySelector('[id="y"]'); expect(select?.getAttribute('id')).toBe('y'); }); @@ -142,8 +161,9 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const select = screen.getByTestId('select-field').querySelector('select'); - expect(select?.getAttribute('name')).toBe('x'); + const select = screen.getByTestId('select-field'); + const elementWithAttribute = select.querySelector('[name="x"]') || select; + expect(elementWithAttribute?.getAttribute('name')).toBe('x'); }); test(' - renders a select with correct options', () => { @@ -152,8 +172,10 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(selectOptions) }), }); + const combobox = screen.getByRole('combobox'); + fireEvent.mouseDown(combobox); selectOptions.forEach(option => { - expect(screen.getByText(option)).not.toBeNull(); + expect(screen.getByRole('option', { name: option })).not.toBeNull(); }); }); @@ -171,8 +193,12 @@ export function testSelectField( ), schema: z.object({ x: z.enum(selectOptions) }), }); + const combobox = screen.getByRole('combobox'); + fireEvent.mouseDown(combobox); selectOptions.forEach(option => { - expect(screen.getByText(option.toUpperCase())).toBeInTheDocument(); + expect( + screen.getByRole('option', { name: option.toUpperCase() }), + ).toBeInTheDocument(); }); }); @@ -184,13 +210,16 @@ export function testSelectField( expect(screen.getByText('y')).toBeInTheDocument(); }); - test(' - renders a select with correct placeholder (implicit)', () => { - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - expect(screen.getByText('y')).toBeInTheDocument(); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a select with correct placeholder (implicit)', + () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('y')).toBeInTheDocument(); + }, + ); test(' - renders a select with correct value (default)', () => { renderWithZod({ @@ -198,7 +227,12 @@ export function testSelectField( schema: z.object({ x: z.enum(['a', 'b']) }), }); const select = screen.getByRole('combobox'); - expect(select).toHaveValue('a'); + if (options?.theme === 'antd') { + expect(screen.getByText('a')).toBeInTheDocument(); + expect(screen.queryByText('b')).not.toBeInTheDocument(); + } else { + expect(select).toHaveValue('a'); + } }); test(' - renders a select with missing value (model)', () => { @@ -217,7 +251,12 @@ export function testSelectField( model: { x: 'b' }, }); const select = screen.getByRole('combobox'); - expect(select).toHaveValue('b'); + if (options?.theme === 'antd') { + expect(screen.getByText('b')).toBeInTheDocument(); + expect(screen.queryByText('a')).not.toBeInTheDocument(); + } else { + expect(select).toHaveValue('b'); + } }); test(' - renders a select with correct value (specified)', () => { @@ -226,42 +265,56 @@ export function testSelectField( schema: z.object({ x: z.enum(['a', 'b']) }), }); const select = screen.getByRole('combobox'); - expect(select).toHaveValue('b'); + if (options?.theme === 'antd') { + expect(screen.getByText('b')).toBeInTheDocument(); + expect(screen.queryByText('a')).not.toBeInTheDocument(); + } else { + expect(select).toHaveValue('b'); + } }); - test(' - renders a select which correctly reacts on change', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('combobox'); - fireEvent.change(select, { target: { value: 'b' } }); - expect(onChange).toHaveBeenCalledWith('b'); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a select which correctly reacts on change', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: 'b' } }); + expect(onChange).toHaveBeenCalledWith('b'); + }, + ); - test(' - renders a select which correctly reacts on change (empty)', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const select = screen.getByRole('combobox'); - fireEvent.change(select, { target: { value: '' } }); - expect(onChange).toHaveBeenLastCalledWith(undefined); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a select which correctly reacts on change (empty)', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: '' } }); + expect(onChange).toHaveBeenLastCalledWith(undefined); + }, + ); - test(' - renders a select which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - model: { x: 'b' }, - }); - const select = screen.getByRole('combobox'); - fireEvent.change(select, { target: { value: 'b' } }); - expect(onChange).toHaveBeenCalledWith('b'); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a select which correctly reacts on change (same value)', + () => { + const onChange = jest.fn(); + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + model: { x: 'b' }, + }); + const select = screen.getByRole('combobox'); + fireEvent.change(select, { target: { value: 'b' } }); + expect(onChange).toHaveBeenCalledWith('b'); + }, + ); test(' - renders a wrapper with unknown props', () => { renderWithZod({ @@ -287,33 +340,38 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['ă', 'ś']) }), }); - expect(screen.getByText('ă')).toBeInTheDocument(); - expect(screen.getByText('ś')).toBeInTheDocument(); + const combobox = screen.getByRole('combobox'); + fireEvent.mouseDown(combobox); + expect(screen.getAllByText('ă')[0]).toBeInTheDocument(); + expect(screen.getAllByText('ś')[0]).toBeInTheDocument(); }); - test(' - disabled items (options)', () => { - renderWithZod({ - element: ( - - ), - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - expect(screen.getByText('A')).toBeDisabled(); - expect(screen.getByText('B')).not.toBeDisabled(); - }); + skipTestIf(options?.theme === 'antd')( + ' - disabled items (options)', + () => { + renderWithZod({ + element: ( + + ), + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + expect(screen.getByText('A')).toBeDisabled(); + expect(screen.getByText('B')).not.toBeDisabled(); + }, + ); test(' - renders a set of checkboxes', () => { renderWithZod({ element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - expect(screen.getAllByRole('checkbox')).toHaveLength(2); + expect(screen.getAllByRole(/checkbox|radio/)).toHaveLength(2); }); test(' - renders a set of checkboxes with correct disabled state', () => { @@ -321,7 +379,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); expect(checkboxes?.[0]).toBeDisabled(); expect(checkboxes?.[1]).toBeDisabled(); }); @@ -332,7 +390,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); fireEvent.click(checkboxes?.[0]); expect(onChange).not.toHaveBeenCalled(); }); @@ -348,31 +406,37 @@ export function testSelectField( }, ); - test(' - renders a set of checkboxes with correct id (inherited)', () => { - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const checkboxes = screen.getAllByRole('checkbox'); - expect(checkboxes?.[0]).toHaveAttribute('id'); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a set of checkboxes with correct id (inherited)', + () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole(/checkbox|radio/); + expect(checkboxes?.[0]).toHaveAttribute('id'); + }, + ); - test(' - renders a set of checkboxes with correct id (specified)', () => { - renderWithZod({ - element: , - schema: z.object({ x: z.enum(['a', 'b']) }), - }); - const checkboxes = screen.getAllByRole('checkbox'); - expect(checkboxes?.[0]).toHaveAttribute('id', 'y-YQ'); - expect(checkboxes?.[1]).toHaveAttribute('id', 'y-Yg'); - }); + skipTestIf(options?.theme === 'antd')( + ' - renders a set of checkboxes with correct id (specified)', + () => { + renderWithZod({ + element: , + schema: z.object({ x: z.enum(['a', 'b']) }), + }); + const checkboxes = screen.getAllByRole(/checkbox|radio/); + expect(checkboxes?.[0]).toHaveAttribute('id', 'y-YQ'); + expect(checkboxes?.[1]).toHaveAttribute('id', 'y-Yg'); + }, + ); test(' - renders a set of checkboxes with correct name', () => { renderWithZod({ element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); expect(checkboxes?.[0]).toHaveAttribute('name', 'x'); expect(checkboxes?.[1]).toHaveAttribute('name', 'x'); }); @@ -409,7 +473,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); expect(checkboxes?.[0]).toBeChecked(); expect(checkboxes?.[1]).not.toBeChecked(); }); @@ -420,7 +484,7 @@ export function testSelectField( schema: z.object({ x: z.enum(['a', 'b']) }), model: { x: 'b' }, }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); expect(checkboxes?.[0]).not.toBeChecked(); expect(checkboxes?.[1]).toBeChecked(); }); @@ -430,7 +494,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); expect(checkboxes?.[0]).not.toBeChecked(); expect(checkboxes?.[1]).toBeChecked(); }); @@ -441,7 +505,7 @@ export function testSelectField( element: , schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); fireEvent.click(checkboxes?.[1]); expect(onChange).toHaveBeenCalledWith('b'); }); @@ -451,10 +515,10 @@ export function testSelectField( renderWithZod({ element: , schema: z.object({ x: z.enum(['a', 'b']) }), - model: { x: 'b' }, + model: { x: 'a' }, }); - const checkboxes = screen.getAllByRole('checkbox'); - fireEvent.click(checkboxes?.[1]); + const checkbox = screen.getByRole(/checkbox|radio/, { name: 'b' }); + fireEvent.click(checkbox); expect(onChange).toHaveBeenCalledWith('b'); }); @@ -472,7 +536,7 @@ export function testSelectField( ), schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); fireEvent.click(checkboxes?.[1]); expect(onChange).toHaveBeenCalledWith(['b']); fireEvent.click(checkboxes?.[0]); @@ -493,7 +557,7 @@ export function testSelectField( ), schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); fireEvent.click(checkboxes?.[0]); expect(onChange).toHaveBeenCalledWith([]); }); @@ -549,7 +613,7 @@ export function testSelectField( ), schema: z.object({ x: z.enum(['a', 'b']) }), }); - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.getAllByRole(/checkbox|radio/); expect(checkboxes?.[0]).toBeDisabled(); expect(checkboxes?.[1]).not.toBeDisabled(); });