1import React from 'react';
2import { fireEvent, render, screen } from '@testing-library/react';
3import { DatePicker } from './DatePicker';
4
5describe('DatePicker', () => {
6  it('does not render calendar when isOpen is false', () => {
7    render(<DatePicker isOpen={false} onChange={jest.fn()} onClose={jest.fn()} />);
8
9    expect(screen.queryByTestId('date-picker')).not.toBeInTheDocument();
10  });
11
12  it('renders calendar when isOpen is true', () => {
13    render(<DatePicker isOpen={true} onChange={jest.fn()} onClose={jest.fn()} />);
14
15    expect(screen.getByTestId('date-picker')).toBeInTheDocument();
16  });
17
18  it('renders calendar with default date', () => {
19    render(<DatePicker isOpen={true} onChange={jest.fn()} onClose={jest.fn()} value={new Date(1400000000000)} />);
20
21    expect(screen.getByText('May 2014')).toBeInTheDocument();
22  });
23
24  it('renders calendar with date passed in', () => {
25    render(<DatePicker isOpen={true} value={new Date(1607431703363)} onChange={jest.fn()} onClose={jest.fn()} />);
26
27    expect(screen.getByText('December 2020')).toBeInTheDocument();
28  });
29
30  it('calls onChange when date is selected', () => {
31    const onChange = jest.fn();
32
33    render(<DatePicker isOpen={true} onChange={onChange} onClose={jest.fn()} />);
34
35    expect(onChange).not.toHaveBeenCalled();
36
37    // clicking the date
38    fireEvent.click(screen.getByText('14'));
39
40    expect(onChange).toHaveBeenCalledTimes(1);
41  });
42
43  it('calls onClose when outside of wrapper is clicked', () => {
44    const onClose = jest.fn();
45
46    render(<DatePicker isOpen={true} onChange={jest.fn()} onClose={onClose} />);
47
48    expect(onClose).not.toHaveBeenCalled();
49
50    fireEvent.click(document);
51
52    expect(onClose).toHaveBeenCalledTimes(1);
53  });
54});
55