Skip to content

Commit

Permalink
Merge pull request #5062 from qburst/issue-5038/enhancement/test/refa…
Browse files Browse the repository at this point in the history 
…ctor-safeQuerySelector-with-SafeElementWrapper

♻️🧪 Refactor test cases with SafeElementWrapper querySelector chain to eliminate the unnecessary temporary variable
  • Loading branch information
@martijnrusschen
martijnrusschen authored Sep 1, 2024
2 parents 04f58ea + a997af8 commit e38003b
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 61 deletions.
107 changes: 57 additions & 50 deletions src/test/timepicker_test.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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");
});

Expand Down Expand Up @@ -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");
});

Expand All @@ -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");
});

Expand All @@ -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);
Expand All @@ -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");
});

Expand All @@ -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);
});

Expand All @@ -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);
});

Expand All @@ -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);
});

Expand Down
20 changes: 9 additions & 11 deletions src/test/year_picker_test.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
getKey,
gotoNextView,
openDateInput,
SafeElementWrapper,
safeQuerySelector,
safeQuerySelectorAll,
} from "./test_utils";
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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");
Expand Down

0 comments on commit e38003b

Please sign in to comment.