@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
58 lines (57 loc) • 3.22 kB
JavaScript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { Datepicker } from './Datepicker';
import { getFormattedDate } from './helpers';
describe('Components / Datepicker', () => {
it("should display today's date by default", () => {
const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
render(React.createElement(Datepicker, null));
expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
});
it('should update date when a different day is clicked', async () => {
const todaysDayOfMonth = new Date().getDate();
const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
render(React.createElement(Datepicker, null));
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getAllByText(anotherDay)[0]);
expect(screen.getByRole('textbox').value?.includes(`${anotherDay}`)).toBeTruthy();
});
it("should reset to today's date when Clear button is clicked", async () => {
const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
const todaysDayOfMonth = new Date().getDate();
const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
render(React.createElement(Datepicker, null));
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getAllByText(anotherDay)[0]);
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getByText('Clear'));
expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
});
it("should use today's date when Today button is clicked", async () => {
const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
const todaysDayOfMonth = new Date().getDate();
const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
render(React.createElement(Datepicker, null));
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getAllByText(anotherDay)[0]);
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getByText('Today'));
expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
});
it('should call `onSelectedDateChange` when a new date is selected', async () => {
const onSelectedDateChange = vi.fn();
const todaysDayOfMonth = new Date().getDate();
const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
render(React.createElement(Datepicker, { onSelectedDateChanged: onSelectedDateChange }));
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getAllByText(anotherDay)[0]);
expect(onSelectedDateChange).toHaveBeenCalledOnce();
});
it('should close month overlay when user clicks outside of it', async () => {
render(React.createElement(Datepicker, null));
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(document.body);
});
});