From a997af8a766cd559ee10516c5f2ba3cdd6be4350 Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Fri, 30 Aug 2024 15:29:16 +0530 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=F0=9F=A7=AA=20Refactor=20tes?= =?UTF-8?q?t=20with=20SafeElementWrapper=20and=20removed=20the=20direct=20?= =?UTF-8?q?usage=20of=20safeQuerySelector/safeQuerySelectorAll=20to=20avoi?= =?UTF-8?q?d=20unnecessary=20intermediate=20variable=20declarations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/test/timepicker_test.test.tsx | 107 +++++++++++++++-------------- src/test/year_picker_test.test.tsx | 20 +++--- 2 files changed, 66 insertions(+), 61 deletions(-) diff --git a/src/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx index 8db6f4baf..f8d664633 100644 --- a/src/test/timepicker_test.test.tsx +++ b/src/test/timepicker_test.test.tsx @@ -4,7 +4,12 @@ import React from "react"; import { formatDate, KeyType } from "../date_utils"; import DatePicker from "../index"; -import { getKey, safeQuerySelector, safeQuerySelectorAll } from "./test_utils"; +import { + getKey, + SafeElementWrapper, + safeQuerySelector, + safeQuerySelectorAll, +} from "./test_utils"; const MIN_TIME_LI_LEN = 2; @@ -38,12 +43,11 @@ describe("TimePicker", () => { fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.click(lis[1]!); + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.click(timeOption); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); @@ -178,12 +182,13 @@ describe("TimePicker", () => { throw new Error("input is null/undefined"); } fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Enter)); + + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Enter)); + expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); @@ -193,12 +198,11 @@ describe("TimePicker", () => { throw new Error("input is null/undefined"); } fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Space)); + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Space)); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); @@ -210,14 +214,13 @@ describe("TimePicker", () => { } const input = safeQuerySelector(datePicker, "input"); - fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Enter)); + + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Enter)); await waitFor(() => { expect(document.activeElement).toBe(input); @@ -230,12 +233,13 @@ describe("TimePicker", () => { throw new Error("input is null/undefined"); } fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Escape)); + + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Escape)); + expect(getInputString()).toBe("February 28, 2018 4:43 PM"); }); @@ -248,12 +252,13 @@ describe("TimePicker", () => { throw new Error("input is null/undefined"); } fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Escape)); + + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Escape)); + expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -266,12 +271,13 @@ describe("TimePicker", () => { throw new Error("input is null/undefined"); } fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Enter)); + + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Enter)); + expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -284,12 +290,13 @@ describe("TimePicker", () => { throw new Error("input is null/undefined"); } fireEvent.focus(instance.input); - const time = safeQuerySelector( - datePicker, - ".react-datepicker__time-container", - ); - const lis = safeQuerySelectorAll(time, "li", MIN_TIME_LI_LEN); - fireEvent.keyDown(lis[1]!, getKey(KeyType.Space)); + + const timeOption = new SafeElementWrapper(datePicker) + .safeQuerySelector(".react-datepicker__time-container") + .safeQuerySelectorAll("li", MIN_TIME_LI_LEN)[1]! + .getElement(); + fireEvent.keyDown(timeOption, getKey(KeyType.Space)); + expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx index 4ea99267c..3ff0e4e83 100644 --- a/src/test/year_picker_test.test.tsx +++ b/src/test/year_picker_test.test.tsx @@ -18,6 +18,7 @@ import { getKey, gotoNextView, openDateInput, + SafeElementWrapper, safeQuerySelector, safeQuerySelectorAll, } from "./test_utils"; @@ -578,11 +579,10 @@ describe("YearPicker", () => { const input = safeQuerySelector(container, "input"); fireEvent.focus(input); - const calendar = safeQuerySelector(container, ".react-datepicker"); - const previousButton = safeQuerySelector( - calendar, - ".react-datepicker__navigation--previous", - ); + const previousButton = new SafeElementWrapper(container) + .safeQuerySelector(".react-datepicker") + .safeQuerySelector(".react-datepicker__navigation--previous") + .getElement(); fireEvent.click(previousButton); const year = container.querySelector(".react-datepicker__year"); @@ -611,12 +611,10 @@ describe("YearPicker", () => { const input = safeQuerySelector(container, "input"); fireEvent.focus(input); - const calendar = safeQuerySelector(container, ".react-datepicker"); - const nextButton = safeQuerySelector( - calendar, - ".react-datepicker__navigation--next", - ); - + const nextButton = new SafeElementWrapper(container) + .safeQuerySelector(".react-datepicker") + .safeQuerySelector(".react-datepicker__navigation--next") + .getElement(); fireEvent.click(nextButton); const year = container.querySelector(".react-datepicker__year");