Skip to content

Commit b0149e0

Browse files
hoorayimhelpinghoorayimhelping
committed
Add tests
1 parent 66473e2 commit b0149e0

File tree

3 files changed

+197
-30
lines changed

3 files changed

+197
-30
lines changed

‎src/components/DatePicker/DateRangePicker.stories.tsx

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const defaultStory = {
2222
},
2323
predefinedDatesCount: {
2424
control: "number",
25+
default: 0,
2526
},
2627
onSelectDateRange: {
2728
control: "object",
@@ -37,6 +38,7 @@ const defaultStory = {
3738

3839
return (
3940
<DateRangePicker
41+
key="default"
4042
endDate={endDate}
4143
disabled={args.disabled}
4244
futureDatesDisabled={args.futureDatesDisabled}
@@ -53,30 +55,6 @@ const defaultStory = {
5355

5456
export default defaultStory;
5557

56-
// export const PredefinedRanges = {
57-
// args: {
58-
// ...defaultStory.args
59-
// },
60-
// render: (args: Args) => {
61-
// const endDate = args.endDate ? new Date(args.endDate) : undefined;
62-
// const startDate = args.startDate ? new Date(args.startDate) : undefined;
63-
64-
// console.log('predefined dates story', args.predefinedDatesCount)
65-
// return (
66-
// <DateRangePicker
67-
// endDate={endDate}
68-
// disabled={args.disabled}
69-
// futureDatesDisabled={args.futureDatesDisabled}
70-
// onSelectDateRange={args.onSelectDateRange}
71-
// placeholder={args.placeholder}
72-
// predefinedDatesCount={6}
73-
// startDate={startDate}
74-
// />
75-
// );
76-
// },
77-
// title: "Display/DateRangePickerPredefinedDates"
78-
// };
79-
8058
export const Playground = {
8159
...defaultStory,
8260
};

‎src/components/DatePicker/DateRangePicker.test.tsx

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,4 +150,182 @@ describe("DateRangePicker", () => {
150150
expect(handleSelectDate).not.toHaveBeenCalled();
151151
});
152152
});
153+
154+
describe("predefined date ranges", () => {
155+
beforeEach(() => {
156+
vi.setSystemTime(new Date("07-04-2020"));
157+
});
158+
159+
afterEach(() => {
160+
vi.useRealTimers();
161+
});
162+
163+
it("doesn't show any preselected dates if the value isn't set", async () => {
164+
const handleSelectDate = vi.fn();
165+
166+
const { getByTestId, queryByTestId } = renderCUI(
167+
<DateRangePicker onSelectDateRange={handleSelectDate} />
168+
);
169+
170+
await userEvent.click(getByTestId("daterangepicker-input"));
171+
172+
expect(queryByTestId("predefined-dates-list")).not.toBeInTheDocument();
173+
});
174+
175+
it("shows dates in the past if the value is negative", async () => {
176+
const handleSelectDate = vi.fn();
177+
178+
const { getByTestId, getByText } = renderCUI(
179+
<DateRangePicker
180+
onSelectDateRange={handleSelectDate}
181+
predefinedDatesCount={-6}
182+
/>
183+
);
184+
185+
await userEvent.click(getByTestId("daterangepicker-input"));
186+
187+
expect(getByText("Jul 2020")).toBeInTheDocument();
188+
expect(getByText("Jun 2020")).toBeInTheDocument();
189+
expect(getByText("May 2020")).toBeInTheDocument();
190+
expect(getByText("Apr 2020")).toBeInTheDocument();
191+
expect(getByText("Mar 2020")).toBeInTheDocument();
192+
expect(getByText("Feb 2020")).toBeInTheDocument();
193+
});
194+
195+
it("shows dates in the future if the value is positive", async () => {
196+
const handleSelectDate = vi.fn();
197+
198+
const { getByTestId, getByText } = renderCUI(
199+
<DateRangePicker
200+
onSelectDateRange={handleSelectDate}
201+
predefinedDatesCount={6}
202+
/>
203+
);
204+
205+
await userEvent.click(getByTestId("daterangepicker-input"));
206+
207+
expect(getByText("Jul 2020")).toBeInTheDocument();
208+
expect(getByText("Aug 2020")).toBeInTheDocument();
209+
expect(getByText("Sep 2020")).toBeInTheDocument();
210+
expect(getByText("Oct 2020")).toBeInTheDocument();
211+
expect(getByText("Nov 2020")).toBeInTheDocument();
212+
expect(getByText("Dec 2020")).toBeInTheDocument();
213+
});
214+
215+
it("allows showing the full calendar", async () => {
216+
const handleSelectDate = vi.fn();
217+
218+
const { getByTestId, getByText, queryByTestId } = renderCUI(
219+
<DateRangePicker
220+
onSelectDateRange={handleSelectDate}
221+
predefinedDatesCount={-12}
222+
/>
223+
);
224+
225+
expect(queryByTestId("datepicker-calendar-container")).not.toBeInTheDocument();
226+
227+
await userEvent.click(getByTestId("daterangepicker-input"));
228+
await userEvent.click(getByText("Custom time period"));
229+
230+
expect(getByTestId("datepicker-calendar-container")).toBeInTheDocument();
231+
});
232+
233+
it("shows at maximum six dates in the past or future", async () => {
234+
const handleSelectDate = vi.fn();
235+
236+
const { getByTestId, getByText, queryByText } = renderCUI(
237+
<DateRangePicker
238+
onSelectDateRange={handleSelectDate}
239+
predefinedDatesCount={-12}
240+
/>
241+
);
242+
243+
await userEvent.click(getByTestId("daterangepicker-input"));
244+
245+
expect(getByText("Jul 2020")).toBeInTheDocument();
246+
expect(getByText("Jun 2020")).toBeInTheDocument();
247+
expect(getByText("May 2020")).toBeInTheDocument();
248+
expect(getByText("Apr 2020")).toBeInTheDocument();
249+
expect(getByText("Mar 2020")).toBeInTheDocument();
250+
expect(getByText("Feb 2020")).toBeInTheDocument();
251+
252+
expect(queryByText("Jan 2020")).not.toBeInTheDocument();
253+
});
254+
255+
it("selects up to the current date if the current month is selected", async () => {
256+
const handleSelectDate = vi.fn();
257+
258+
const { getByTestId, getByText } = renderCUI(
259+
<DateRangePicker
260+
onSelectDateRange={handleSelectDate}
261+
predefinedDatesCount={-6}
262+
/>
263+
);
264+
265+
await userEvent.click(getByTestId("daterangepicker-input"));
266+
267+
await userEvent.click(getByText("Jul 2020"));
268+
expect(getByText("Jul 01, 2020 – Jul 04, 2020")).toBeInTheDocument();
269+
});
270+
271+
it("selects the full month if a date in the past or future is selected", async () => {
272+
const handleSelectDate = vi.fn();
273+
274+
const { getByTestId, getByText } = renderCUI(
275+
<DateRangePicker
276+
onSelectDateRange={handleSelectDate}
277+
predefinedDatesCount={-6}
278+
/>
279+
);
280+
281+
await userEvent.click(getByTestId("daterangepicker-input"));
282+
283+
await userEvent.click(getByText("May 2020"));
284+
expect(getByText("May 01, 2020 – May 31, 2020")).toBeInTheDocument();
285+
});
286+
287+
it("shows the selected month if an entire month is manually selected", async () => {
288+
const handleSelectDate = vi.fn();
289+
290+
const { getByTestId, getAllByText, getByText } = renderCUI(
291+
<DateRangePicker
292+
onSelectDateRange={handleSelectDate}
293+
predefinedDatesCount={-6}
294+
/>
295+
);
296+
297+
await userEvent.click(getByTestId("daterangepicker-input"));
298+
await userEvent.click(getByText("Custom time period"));
299+
await userEvent.click(getByTestId("calendar-previous-month"));
300+
301+
await userEvent.click(getAllByText("1")[0]);
302+
await userEvent.click(getByText("30"));
303+
304+
expect(getByText("Jun 01, 2020 – Jun 30, 2020")).toBeInTheDocument();
305+
306+
await userEvent.click(getByTestId("daterangepicker-input"));
307+
expect(getByText("Jun 2020").getAttribute("data-selected")).toBeTruthy();
308+
});
309+
310+
it("shows months wrapping around to the next or previous year", async () => {
311+
vi.setSystemTime(new Date("03-04-2020"));
312+
const handleSelectDate = vi.fn();
313+
314+
const { getByTestId, getByText } = renderCUI(
315+
<DateRangePicker
316+
onSelectDateRange={handleSelectDate}
317+
predefinedDatesCount={-6}
318+
/>
319+
);
320+
321+
await userEvent.click(getByTestId("daterangepicker-input"));
322+
323+
expect(getByText("Mar 2020")).toBeInTheDocument();
324+
expect(getByText("Feb 2020")).toBeInTheDocument();
325+
expect(getByText("Jan 2020")).toBeInTheDocument();
326+
expect(getByText("Dec 2019")).toBeInTheDocument();
327+
expect(getByText("Nov 2019")).toBeInTheDocument();
328+
expect(getByText("Oct 2019")).toBeInTheDocument();
329+
});
330+
});
153331
});

‎src/components/DatePicker/DateRangePicker.tsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ const DateRangeTableCell = styled(DateTableCell)<{
2727
`}
2828
`;
2929

30+
// ${({ theme }) => }
31+
const PredefinedCalendarContainer = styled(Panel)`
32+
background: #282828;
33+
`;
34+
3035
const PredefinedDatesContainer = styled(Container)`
3136
width: 275px;
3237
`;
@@ -199,6 +204,7 @@ const PredefinedDates = ({
199204

200205
return (
201206
<PredefinedDatesContainer
207+
data-testid="predefined-dates-list"
202208
isResponsive={false}
203209
orientation="vertical"
204210
>
@@ -208,20 +214,25 @@ const PredefinedDates = ({
208214
setEndDate(endDate);
209215
onSelectDateRange(startDate, endDate);
210216
};
217+
218+
const monthIsSelected =
219+
selectedEndDate &&
220+
isSameDate(selectedEndDate, endDate) &&
221+
selectedStartDate &&
222+
isSameDate(selectedStartDate, startDate);
211223
return (
212224
<StyledDropdownItem
225+
data-testid={`predefined-date-${startDate.getTime()}`}
213226
key={startDate.toISOString()}
214227
onClick={handleItemClick}
215228
>
216229
<Container
230+
data-selected={monthIsSelected}
217231
justifyContent="space-between"
218232
orientation="horizontal"
219233
>
220234
{monthFormatter.format(startDate)}
221-
{selectedEndDate &&
222-
isSameDate(selectedEndDate, endDate) &&
223-
selectedStartDate &&
224-
isSameDate(selectedStartDate, startDate) && <Icon name="check" />}
235+
{monthIsSelected && <Icon name="check" />}
225236
</Container>
226237
</StyledDropdownItem>
227238
);
@@ -360,7 +371,7 @@ export const DateRangePicker = ({
360371
</Dropdown.Trigger>
361372
<Dropdown.Content align="start">
362373
{shouldShowPredefinedDates ? (
363-
<Panel
374+
<PredefinedCalendarContainer
364375
orientation="horizontal"
365376
padding="none"
366377
>
@@ -389,7 +400,7 @@ export const DateRangePicker = ({
389400
)}
390401
</CalendarRenderer>
391402
)}
392-
</Panel>
403+
</PredefinedCalendarContainer>
393404
) : (
394405
<CalendarRenderer calendarOptions={calendarOptions}>
395406
{body => (

0 commit comments

Comments
 (0)