bc518174
 王天杨
提交两个项目文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import { screen } from '@testing-library/react';
import { setMonth, setYear } from 'date-fns';
import { DayPickerProps } from 'DayPicker';
import { customRender } from 'test/render';
import {
getMonthDropdown,
getYearDropdown,
queryMonthDropdown,
queryYearDropdown
} from 'test/selectors';
import { user } from 'test/user';
import { freezeBeforeAll } from 'test/utils';
import { CaptionProps } from 'components/Caption';
import { CustomComponents } from 'types/DayPickerBase';
import { CaptionDropdowns } from './CaptionDropdowns';
const today = new Date(2021, 8);
const fromYear = 2020;
const toYear = 2025;
freezeBeforeAll(today);
function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
customRender(<CaptionDropdowns {...props} />, dayPickerProps);
}
describe('when using a custom CaptionLabel component', () => {
const components: CustomComponents = {
CaptionLabel: () => <>custom label foo</>
};
const props = { displayMonth: today };
beforeEach(() => {
setup(props, { components });
});
test('it should render the custom component instead', () => {
expect(screen.getByText('custom label foo')).toBeInTheDocument();
});
});
describe('when rendered with custom styles or classnames', () => {
let container: HTMLElement;
beforeEach(() => {
const dayPickerProps: DayPickerProps = {
captionLayout: 'dropdown',
fromYear,
toYear,
classNames: { caption_dropdowns: 'foo_dropdowns' },
styles: { caption_dropdowns: { color: 'red' } }
};
const view = customRender(
<CaptionDropdowns displayMonth={today} />,
dayPickerProps
);
container = view.container;
});
test('should use the `caption_dropdowns` class name', () => {
expect(container.firstChild).toHaveClass('foo_dropdowns');
});
test('should use the `caption_dropdowns` style', () => {
expect(container.firstChild).toHaveStyle({ color: 'red' });
});
test('should render the month drop-down', () => {
expect(getMonthDropdown()).toBeInTheDocument();
});
test('should render the year drop-down', () => {
expect(getYearDropdown()).toBeInTheDocument();
});
});
describe('when a month is selected', () => {
const dayPickerProps: DayPickerProps = {
captionLayout: 'dropdown',
fromYear,
toYear,
onMonthChange: jest.fn()
};
beforeEach(() => {
customRender(<CaptionDropdowns displayMonth={today} />, dayPickerProps);
});
describe('from the months drop-down', () => {
const newMonth = setMonth(today, 0);
beforeEach(async () => {
await user.selectOptions(
getMonthDropdown(),
newMonth.getMonth().toString()
);
});
test('should call the `onMonthChange` callback', () => {
expect(dayPickerProps.onMonthChange).toHaveBeenCalledWith(newMonth);
});
});
describe('from the years drop-down', () => {
const newYear = setYear(today, 2022);
beforeEach(async () => {
await user.selectOptions(
getYearDropdown(),
newYear.getFullYear().toString()
);
});
test('should call the `onMonthChange` callback', () => {
expect(dayPickerProps.onMonthChange).toHaveBeenCalledWith(newYear);
});
});
});
describe('when no date limits are set', () => {
const dayPickerProps: DayPickerProps = {
captionLayout: 'dropdown'
};
beforeEach(() => {
customRender(<CaptionDropdowns displayMonth={today} />, dayPickerProps);
});
test('should not render the drop-downs', () => {
expect(queryMonthDropdown()).toBeNull();
expect(queryYearDropdown()).toBeNull();
});
});
|
