Migrated Time test to react testing library

This commit is contained in:
Alejandro Celaya 2022-05-29 20:32:34 +02:00
parent 876018390d
commit ceee26ad25
2 changed files with 10 additions and 18 deletions

View file

@ -1,13 +1,13 @@
import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns'; import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns';
import { isDateObject } from './helpers/date'; import { isDateObject } from './helpers/date';
export interface DateProps { export interface TimeProps {
date: Date | string; date: Date | string;
format?: string; format?: string;
relative?: boolean; relative?: boolean;
} }
export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: DateProps) => { export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: TimeProps) => {
const dateObject = isDateObject(date) ? date : parseISO(date); const dateObject = isDateObject(date) ? date : parseISO(date);
return ( return (

View file

@ -1,30 +1,22 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render } from '@testing-library/react';
import { DateProps, Time } from '../../src/utils/Time'; import { TimeProps, Time } from '../../src/utils/Time';
import { parseDate } from '../../src/utils/helpers/date'; import { parseDate } from '../../src/utils/helpers/date';
describe('<Time />', () => { describe('<Time />', () => {
let wrapper: ShallowWrapper; const setUp = (props: TimeProps) => render(<Time {...props} />);
const createWrapper = (props: DateProps) => {
wrapper = shallow(<Time {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([ it.each([
[{ date: parseDate('2020-05-05', 'yyyy-MM-dd') }, '1588636800000', '2020-05-05 00:00'], [{ date: parseDate('2020-05-05', 'yyyy-MM-dd') }, '1588636800000', '2020-05-05 00:00'],
[{ date: parseDate('2021-03-20', 'yyyy-MM-dd'), format: 'dd/MM/yyyy' }, '1616198400000', '20/03/2021'], [{ date: parseDate('2021-03-20', 'yyyy-MM-dd'), format: 'dd/MM/yyyy' }, '1616198400000', '20/03/2021'],
])('includes expected dateTime and format', (props, expectedDateTime, expectedFormatted) => { ])('includes expected dateTime and format', (props, expectedDateTime, expectedFormatted) => {
const wrapper = createWrapper(props); const { container } = setUp(props);
expect(wrapper.prop('dateTime')).toEqual(expectedDateTime); expect(container.firstChild).toHaveAttribute('datetime', expectedDateTime);
expect(wrapper.prop('children')).toEqual(expectedFormatted); expect(container.firstChild).toHaveTextContent(expectedFormatted);
}); });
it('renders relative times when requested', () => { it('renders relative times when requested', () => {
const wrapper = createWrapper({ date: new Date(), relative: true }); const { container } = setUp({ date: new Date(), relative: true });
expect(container.firstChild).toHaveTextContent(' ago');
expect(wrapper.prop('children')).toContain(' ago');
}); });
}); });