Skip to content

Commit

Permalink
Added few more tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaxovaiko
zaxovaiko committed Feb 23, 2024
1 parent 93c60e6 commit baaba56
Show file tree
Hide file tree
Showing 2 changed files with 194 additions and 60 deletions.
2 changes: 1 addition & 1 deletion packages/uniforms-antd/__tests__/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
252 changes: 193 additions & 59 deletions packages/uniforms/__suites__/SelectField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,41 @@ export function testSelectField(
SelectField: ComponentType<any>,
options?: {
skipInMuiTests?: boolean;
skipInAntdTests?: boolean;
antdTests?: boolean;
},
) {
skipTestIf(options?.skipInMuiTests)(
'<SelectField> - renders a select',
() => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" />,
schema: z.object({ x: z.enum(['a', 'b']) }),
});
expect(screen.getByText('X')).not.toBeNull();
expect(screen.getByText('a')).not.toBeNull();
},
);
test('<SelectField> - renders a select', () => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" />,
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)(
'<SelectField> - renders a select with correct disabled state',
() => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" disabled />,
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('<SelectField> - renders a select with correct disabled state', () => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" disabled />,
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)(
'<SelectField> - renders a select with correct readOnly state',
() => {
Expand All @@ -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('<SelectField> - renders a select with correct id (inherited)', () => {});
test('<SelectField> - renders a select with correct id (inherited)', () => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" />,
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('<SelectField> - renders a select with correct id (specified)', () => {});
test('<SelectField> - renders a select with correct id (specified)', () => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" id="y" />,
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)(
'<SelectField> - renders a select with correct name',
() => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" />,
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('<SelectField> - renders a select with correct name', () => {
renderWithZod({
element: <SelectField data-testid="select-field" name="x" />,
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)(
'<SelectField> - renders a select with correct options',
() => {
// TODO: Add test for AntD
const selectOptions = ['a', 'b'] as const;
renderWithZod({
element: <SelectField name="x" />,
Expand Down Expand Up @@ -132,21 +159,70 @@ export function testSelectField(
schema: z.object({ x: z.enum(['ă', 'ś']) }),
});
expect(screen.getByText('ă')).toBeInTheDocument();
if (!options?.antdTests && !options?.skipInMuiTests) {
expect(screen.getByText('ś')).toBeInTheDocument();
}
});

// test('<SelectField> - disabled items (options)', () => {});
test('<SelectField> - disabled items (options)', () => {
renderWithZod({
element: <SelectField name="x" />,
schema: z.object({ x: z.enum(['a', 'b']) }),
});
const select = screen.getByRole('combobox');
expect(select.querySelector('option')?.getAttribute('disabled')).toBeNull();
});

// test('<SelectField checkboxes> - renders a set of checkboxes', () => {});

// test('<SelectField checkboxes> - renders a set of checkboxes with correct disabled state', () => {});

// test('<SelectField checkboxes> - renders a set of checkboxes with correct readOnly state', () => {});

// test('<SelectField checkboxes> - renders a set of checkboxes with correct id (inherited)', () => {});
// TODO: refactor a bit
test('<SelectField checkboxes> - renders a set of checkboxes with correct id (inherited)', () => {
renderWithZod({
element: <SelectField checkboxes name="x" />,
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('<SelectField checkboxes> - renders a set of checkboxes with correct id (specified)', () => {});
test.only('<SelectField checkboxes> - renders a set of checkboxes with correct id (specified)', () => {
renderWithZod({
element: <SelectField checkboxes name="x" id="y" />,
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('<SelectField checkboxes> - renders a set of checkboxes with correct name', () => {});
test('<SelectField checkboxes> - renders a set of checkboxes with correct name', () => {
renderWithZod({
element: <SelectField checkboxes name="x" />,
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('<SelectField checkboxes> - renders a set of checkboxes with correct options', () => {});

Expand All @@ -164,7 +240,20 @@ export function testSelectField(

// test('<SelectField checkboxes> - renders a set of checkboxes which correctly reacts on change (array uncheck)', () => {});

// test('<SelectField checkboxes> - renders a set of checkboxes which correctly reacts on change (same value)', () => {});
test('<SelectField checkboxes> - renders a set of checkboxes which correctly reacts on change (same value)', () => {
renderWithZod({
element: <SelectField checkboxes name="x" />,
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('<SelectField checkboxes> - renders a label', () => {
renderWithZod({
Expand All @@ -174,15 +263,60 @@ export function testSelectField(
expect(screen.getByText('y')).toBeInTheDocument();
});

// test('<SelectField checkboxes> - renders a wrapper with unknown props', () => {});
// TODO: Add for AntD
skipTestIf(options?.antdTests)(
'<SelectField checkboxes> - renders a wrapper with unknown props',
() => {
renderWithZod({
element: (
<SelectField
checkboxes
data-testid="select-field"
name="x"
data-x="x"
data-y="y"
data-z="z"
/>
),
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('<SelectField checkboxes> - works with special characters', () => {
renderWithZod({
element: <SelectField checkboxes name="x" />,
schema: z.object({ x: z.enum(['ă', 'ș']) }),
});
expect(screen.getByText('ă')).toBeInTheDocument();
if (!options?.antdTests && !options?.skipInMuiTests) {
expect(screen.getByText('ș')).toBeInTheDocument();
}
});

// test('<SelectField checkboxes> - disabled items (checkboxes)', () => {});
test('<SelectField checkboxes> - disabled items (checkboxes)', () => {
renderWithZod({
element: (
<SelectField
checkboxes
name="x"
options={[
{ key: 'k1', label: 'A', value: 'a', disabled: true },
{ key: 'k2', label: 'B', value: 'b', disabled: false },
]}
/>
),
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();
});
}

0 comments on commit baaba56

Please sign in to comment.