Skip to content

Commit

Permalink
Rewritten tests for antd
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaxovaiko
zaxovaiko committed May 24, 2024
1 parent dbb79d3 commit fcb887e
Showing 1 changed file with 116 additions and 99 deletions.
215 changes: 116 additions & 99 deletions packages/uniforms-antd/__tests__/DateField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,149 +1,166 @@
import DatePicker from 'antd/lib/date-picker';
import { fireEvent, screen } from '@testing-library/react';
import userEvent, {
PointerEventsCheckLevel,
} from '@testing-library/user-event';
import moment from 'moment';
import React from 'react';
import { DateField } from 'uniforms-antd';
import { renderWithZod } from 'uniforms/__suites__';
import { z } from 'zod';

import createContext from './_createContext';
import mount from './_mount';
const getClosestInput = (text: string) =>
screen.getByText(text).closest('.ant-row')?.querySelector('input');

test('<DateField> - renders an input', () => {
const element = <DateField name="x" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
renderWithZod({
element: <DateField name="x" />,
schema: z.object({ x: z.date() }),
});
expect(getClosestInput('X')).toBeInTheDocument();
});

test('<DateField> - default props override', () => {
const pickerProps = { showTime: false, style: {} };
const element = <DateField name="x" {...pickerProps} />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker).props()).toEqual(
expect.objectContaining(pickerProps),
);
const pickerProps = { name: 'y' };
renderWithZod({
// @ts-ignore -- passing the same prop for testing purposes
element: <DateField name="x" {...pickerProps} />,
schema: z.object({ y: z.date() }),
});
expect(screen.getByText('Y')).toBeInTheDocument();
});

test('<DateField> - renders a input with correct id (inherited)', () => {
const element = <DateField name="x" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('id')).toBeTruthy();
renderWithZod({
element: <DateField name="x" />,
schema: z.object({ x: z.date() }),
});
expect(getClosestInput('X')?.id).toBeTruthy();
});

test('<DateField> - renders a input with correct id (specified)', () => {
const element = <DateField name="x" id="y" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('id')).toBe('y');
renderWithZod({
element: <DateField name="x" id="y" />,
schema: z.object({ x: z.date() }),
});
expect(getClosestInput('X')?.id).toBe('y');
});

test('<DateField> - renders a input with correct name', () => {
const element = <DateField name="x" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('name')).toBe('x');
renderWithZod({
element: <DateField name="x" />,
schema: z.object({ x: z.date() }),
});
expect(getClosestInput('X')?.name).toBe('x');
});

test('<DateField> - renders an input with correct disabled state', () => {
const element = <DateField name="x" disabled />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('disabled')).toBe(true);
renderWithZod({
element: <DateField name="x" disabled />,
schema: z.object({ x: z.date() }),
});
expect(getClosestInput('X')?.disabled).toBe(true);
});

test('<DateField> - renders an input with correct readOnly state', () => {
test('<DateField> - renders an input with correct readOnly state', async () => {
const onChange = jest.fn();

const now = moment();
const element = <DateField name="x" readOnly />;
const wrapper = mount(
element,
createContext({ x: { type: Date } }, { onChange }),
);

expect(wrapper.find(DatePicker)).toHaveLength(1);
// @ts-expect-error
expect(wrapper.find(DatePicker).prop('onChange')(now)).toBeFalsy();
renderWithZod({
element: <DateField name="x" readOnly />,
onChange,
schema: z.object({ x: z.date() }),
});

const input = getClosestInput('X');
expect(input).toBeInTheDocument();
fireEvent.mouseDown(input!);
fireEvent.change(input!, { target: { value: now } });
expect(onChange).not.toHaveBeenCalled();
});

test('<DateField> - renders a input with correct label (specified)', () => {
const element = <DateField name="x" label="DateFieldLabel" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find('label')).toHaveLength(1);
expect(wrapper.find('label').text()).toBe('DateFieldLabel');
renderWithZod({
element: <DateField name="x" label="DateFieldLabel" />,
schema: z.object({ x: z.date() }),
});
expect(screen.getByText('DateFieldLabel')).toBeInTheDocument();
});

test('<DateField> - renders a input with correct value (default)', () => {
const element = <DateField name="x" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('value')).toBe(undefined);
renderWithZod({
element: <DateField name="x" />,
schema: z.object({ x: z.date() }),
});
const input = getClosestInput('X');
expect(input).toBeInTheDocument();
expect(input?.value).toBe('');
});

test('<DateField> - renders a input with correct value (model)', () => {
const now = moment();
const element = <DateField name="x" />;
const wrapper = mount(
element,
createContext({ x: { type: Date } }, { model: { x: now } }),
);

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('value')).toEqual(now);
const now = moment('2024-01-01 12:00:00');
renderWithZod({
element: <DateField name="x" />,
schema: z.object({ x: z.date() }),
model: { x: now.toDate() },
});
const input = getClosestInput('X');
expect(input).toBeInTheDocument();
expect(input?.value).toBe(moment(now).format('YYYY-MM-DD HH:mm:ss'));
});

test('<DateField> - renders a input with correct value (specified)', () => {
const now = moment();
const element = <DateField name="x" value={now} />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker)).toHaveLength(1);
expect(wrapper.find(DatePicker).prop('value')).toEqual(now);
const now = moment('2024-01-01 12:00:00');
renderWithZod({
element: <DateField name="x" value={now} />,
schema: z.object({ x: z.date() }),
});
const input = getClosestInput('X');
expect(input).toBeInTheDocument();
expect(input?.value).toBe(moment(now).format('YYYY-MM-DD HH:mm:ss'));
});

test('<DateField> - renders a input which correctly reacts on change', () => {
// FIXME: This test is broken.
test('<DateField> - renders a input which correctly reacts on change', async () => {
const onChange = jest.fn();

const now = moment();
const element = <DateField name="x" />;
const wrapper = mount(
element,
createContext({ x: { type: Date } }, { onChange }),
);

expect(wrapper.find(DatePicker)).toHaveLength(1);
// @ts-expect-error
expect(wrapper.find(DatePicker).prop('onChange')(now)).toBeFalsy();
const now = moment('2024-01-01 12:00:00');
renderWithZod({
element: <DateField name="x" />,
onChange,
schema: z.object({ x: z.date() }),
});

const input = getClosestInput('X');
expect(input).toBeInTheDocument();
await userEvent.click(input!);
await userEvent.type(input!, now.format('YYYY-MM-DD HH:mm:ss'));
const ok = screen.getByText('Ok');
await userEvent.click(ok, {
pointerEventsCheck: PointerEventsCheckLevel.Never,
});
expect(onChange).toHaveBeenLastCalledWith('x', now.toDate());
});

test('<DateField> - renders a input which correctly reacts on change (empty)', () => {
test('<DateField> - renders a input which correctly reacts on change (empty)', async () => {
const onChange = jest.fn();

const element = <DateField name="x" />;
const wrapper = mount(
element,
createContext({ x: { type: Date } }, { onChange }),
);

expect(wrapper.find(DatePicker)).toHaveLength(1);
// @ts-expect-error
expect(wrapper.find(DatePicker).prop('onChange')(undefined)).toBeFalsy();
renderWithZod({
element: <DateField name="x" value={new Date()} />,
onChange,
schema: z.object({ x: z.date() }),
});

const input = getClosestInput('X');
expect(input).toBeInTheDocument();
await userEvent.click(input!);
const clear = input?.parentElement?.querySelector('.ant-picker-clear');
await userEvent.click(clear!);
expect(onChange).toHaveBeenLastCalledWith('x', undefined);
});

test('<DateField> - renders a wrapper with unknown props', () => {
const element = <DateField name="x" data-x="x" data-y="y" data-z="z" />;
const wrapper = mount(element, createContext({ x: { type: Date } }));

expect(wrapper.find(DatePicker).prop('data-x')).toBe('x');
expect(wrapper.find(DatePicker).prop('data-y')).toBe('y');
expect(wrapper.find(DatePicker).prop('data-z')).toBe('z');
renderWithZod({
element: <DateField name="x" data-x="x" data-y="y" data-z="z" />,
schema: z.object({ x: z.date() }),
});
expect(getClosestInput('X')?.getAttribute('data-x')).toBe('x');
expect(getClosestInput('X')?.getAttribute('data-y')).toBe('y');
expect(getClosestInput('X')?.getAttribute('data-z')).toBe('z');
});

0 comments on commit fcb887e

Please sign in to comment.