test: added more test cases for calendar (#121)

* test: added more test cases for calendar * chore: removed unneeded async
adaptui · Oct 28, 2020 · a5cbfc6 · a5cbfc6
1 parent 523d469
commit a5cbfc6
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/src/calendar/__tests__/Calendar.test.tsx b/src/calendar/__tests__/Calendar.test.tsx
@@ -132,7 +132,7 @@ describe("Calendar", () => {
     expect(testId("current-year")).toHaveTextContent("October 2019");
   });
 
-  test("should have min/max values", async () => {
+  test("should have min/max values", () => {
     const { getByLabelText: label } = render(
       <CalendarComp
         defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
@@ -152,6 +152,59 @@ describe("Calendar", () => {
     expect(label("Saturday, November 14, 2020")).toHaveFocus();
   });
 
+  test("should be able to go to prev/next month when min/max values are set", () => {
+    const { getByLabelText: label } = render(
+      <CalendarComp
+        defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
+        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+        maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+      />,
+    );
+
+    repeat(press.Tab, 5);
+    expect(label("Saturday, November 7, 2020 selected")).toHaveFocus();
+
+    press.PageUp();
+    expect(label("Saturday, October 31, 2020")).toHaveFocus();
+
+    press.PageDown();
+    expect(label("Saturday, November 14, 2020")).toHaveFocus();
+
+    // Should not be able to go to next/prev year
+    press.PageDown(null, { shiftKey: true });
+    expect(label("Saturday, November 14, 2020")).toHaveFocus();
+    press.PageUp(null, { shiftKey: true });
+    expect(label("Saturday, November 14, 2020")).toHaveFocus();
+  });
+
+  test("should be able to go to prev/next year when min/max values are set", () => {
+    const { getByLabelText: label } = render(
+      <CalendarComp
+        defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
+        minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
+        maxValue={format(addWeeks(new Date(2021, 10, 7), 1), "yyyy-MM-dd")}
+      />,
+    );
+
+    repeat(press.Tab, 5);
+    expect(label("Saturday, November 7, 2020 selected")).toHaveFocus();
+
+    press.PageUp();
+    expect(label("Saturday, October 31, 2020")).toHaveFocus();
+
+    press.PageDown(null, { shiftKey: true });
+    expect(label("Sunday, October 31, 2021")).toHaveFocus();
+
+    press.PageDown();
+    expect(label("Sunday, November 14, 2021")).toHaveFocus();
+
+    press.PageUp();
+    expect(label("Thursday, October 14, 2021")).toHaveFocus();
+
+    press.PageUp(null, { shiftKey: true });
+    expect(label("Saturday, October 31, 2020")).toHaveFocus();
+  });
+
   test("Calendar renders with no a11y violations", async () => {
     const { container } = render(<CalendarComp />);
     const results = await axe(container);

diff --git a/src/calendar/__tests__/RangeCalendar.test.tsx b/src/calendar/__tests__/RangeCalendar.test.tsx
@@ -118,7 +118,7 @@ describe("RangeCalendar", () => {
     expect(end).toHaveTextContent("30");
   });
 
-  it("should announce selected range after finishing selection", async () => {
+  it("should announce selected range after finishing selection", () => {
     const { getByLabelText: label } = render(
       <RangeCalendarComp
         defaultValue={{ start: "2019-10-07", end: "2019-10-30" }}

diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx
@@ -43,21 +43,21 @@ DefaultValue.args = { value: "2001-01-01", defaultValue: "2001-01-01" };
 
 export const MinMaxDate = Base.bind({});
 MinMaxDate.args = {
-  defaultValue: format(new Date(2020, 10, 1), "yyyy-MM-dd"),
-  minValue: format(new Date(), "yyyy-MM-dd"),
-  maxValue: format(addWeeks(new Date(), 1), "yyyy-MM-dd"),
+  defaultValue: new Date(2020, 10, 1),
+  minValue: new Date(),
+  maxValue: addWeeks(new Date(), 1),
 };
 
 export const MinMaxDefaultDate = Base.bind({});
 MinMaxDefaultDate.args = {
-  defaultValue: format(new Date(2020, 10, 7), "yyyy-MM-dd"),
-  minValue: format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd"),
-  maxValue: format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd"),
+  defaultValue: new Date(2020, 10, 7),
+  minValue: subWeeks(new Date(2020, 10, 7), 1),
+  maxValue: addWeeks(new Date(2020, 10, 7), 1),
 };
 
 export const Options = Base.bind({});
 Options.args = {
-  value: format(new Date(), "yyyy-MM-dd"),
+  value: new Date(),
   isDisabled: false,
   isReadOnly: false,
   autoFocus: false,