@kadconsulting/dry
Version:
KAD Reusable Component Library
134 lines • 5.67 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
// CLI Version 1.0.1
// Component Version 1.0.0
import React from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Calendar from './Calendar';
// Mock the FullCalendar component
jest.mock('@fullcalendar/react', () => {
return jest.fn((props) => (_jsx("div", { "data-testid": 'full-calendar', children: props.events.map((event) => (_jsx("div", { "data-testid": `event-${event.id}`, children: event.title }, event.id))) })));
});
// Mock the Modal component
jest.mock('../index', () => ({
Modal: jest.fn(({ isOpen, children }) => isOpen ? _jsx("div", { "data-testid": 'modal', children: children }) : null),
}));
describe('Calendar', () => {
const mockEvents = [
{
id: '1',
title: 'Event 1',
start: '2023-05-01',
end: '2023-05-01',
extraData: {},
},
{
id: '2',
title: 'Event 2',
start: '2023-05-02',
end: '2023-05-02',
extraData: {},
},
];
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(_jsx(Calendar, { events: mockEvents }));
// ASSERT
expect(container.firstChild).toHaveClass('calendarComponent');
});
it('passes a ref to its outermost element', async () => {
// ARRANGE
const Wrapper = () => {
const ref = React.useRef(null);
const [refWasPassed, setRefWasPassed] = React.useState(false);
React.useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(Calendar, { ref: ref, events: mockEvents }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
// ASSERT
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('renders events correctly', () => {
// ARRANGE & ACT
render(_jsx(Calendar, { events: mockEvents }));
// ASSERT
expect(screen.getByTestId('event-1')).toHaveTextContent('Event 1');
expect(screen.getByTestId('event-2')).toHaveTextContent('Event 2');
});
it('calls onEventClick when an event is clicked', () => {
// ARRANGE
const onEventClick = jest.fn();
render(_jsx(Calendar, { events: mockEvents, onEventClick: onEventClick }));
// ACT
fireEvent.click(screen.getByTestId('event-1'));
// ASSERT
expect(onEventClick).toHaveBeenCalled();
});
it('renders modal when isOpen is true', () => {
// ARRANGE
const modalContent = _jsx("div", { children: "Modal Content" });
render(_jsx(Calendar, { events: mockEvents, isOpen: true, modalContent: modalContent }));
// ASSERT
expect(screen.getByTestId('modal')).toBeInTheDocument();
expect(screen.getByText('Modal Content')).toBeInTheDocument();
});
it('does not render modal when isOpen is false', () => {
// ARRANGE
const modalContent = _jsx("div", { children: "Modal Content" });
render(_jsx(Calendar, { events: mockEvents, isOpen: false, modalContent: modalContent }));
// ASSERT
expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
});
it('calls closeModal when modal is closed', () => {
// ARRANGE
const closeModal = jest.fn();
render(_jsx(Calendar, { events: mockEvents, isOpen: true, closeModal: closeModal }));
// ACT
fireEvent.click(screen.getByTestId('modal'));
// ASSERT
expect(closeModal).toHaveBeenCalled();
});
it('renders mobile view when width is less than 1000px', () => {
// ARRANGE
global.innerWidth = 800;
global.dispatchEvent(new Event('resize'));
render(_jsx(Calendar, { events: mockEvents }));
// ASSERT
expect(screen.getByTestId('full-calendar')).toHaveAttribute('initialView', 'listMonth');
});
it('renders desktop view when width is greater than 1000px', () => {
// ARRANGE
global.innerWidth = 1200;
global.dispatchEvent(new Event('resize'));
render(_jsx(Calendar, { events: mockEvents }));
// ASSERT
expect(screen.getByTestId('full-calendar')).toHaveAttribute('initialView', 'dayGridMonth');
});
it('passes custom time slots to FullCalendar', () => {
// ARRANGE
render(_jsx(Calendar, { events: mockEvents, slotMinTime: '06:00:00', slotMaxTime: '22:00:00' }));
// ASSERT
const fullCalendar = screen.getByTestId('full-calendar');
expect(fullCalendar).toHaveAttribute('slotMinTime', '06:00:00');
expect(fullCalendar).toHaveAttribute('slotMaxTime', '22:00:00');
});
it('passes selectable prop to FullCalendar', () => {
// ARRANGE
render(_jsx(Calendar, { events: mockEvents, selectable: true }));
// ASSERT
expect(screen.getByTestId('full-calendar')).toHaveAttribute('selectable', 'true');
});
it('calls handleSelectSlot when a slot is selected', () => {
// ARRANGE
const handleSelectSlot = jest.fn();
render(_jsx(Calendar, { events: mockEvents, selectable: true, handleSelectSlot: handleSelectSlot }));
// ACT
fireEvent.select(screen.getByTestId('full-calendar'));
// ASSERT
expect(handleSelectSlot).toHaveBeenCalled();
});
});
//# sourceMappingURL=Calendar.test.js.map