diff --git a/package-lock.json b/package-lock.json index 1ca35725c..dc159affc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17090,9 +17090,9 @@ } }, "node_modules/nwsapi": { - "version": "2.2.27", - "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.27.tgz", - "integrity": "sha512-gQPNF78qebCQ6tvVFBYrvJdBNOrYZm90ZlXgpIFm06p6qHDHq/XC4TnJftN6OMbxVE0UTBAoRgcsDeJBBooITw==", + "version": "2.2.28", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.28.tgz", + "integrity": "sha512-IlVB7OS7qrOsVYlpnFIkETjMwT9jwvmocJmmM+GZU/PAB3uGi9Ezd7vcWhWBUnSc0ya4ppmQITOyP1ez9gg8cg==", "dev": true, "license": "MIT" }, diff --git a/packages/lib/src/date-input/DateInput.test.tsx b/packages/lib/src/date-input/DateInput.test.tsx index 45daca01f..ac214b160 100644 --- a/packages/lib/src/date-input/DateInput.test.tsx +++ b/packages/lib/src/date-input/DateInput.test.tsx @@ -15,7 +15,8 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({ })); describe("DateInput component tests", () => { - test("Renders with correct label, helper text, optional, placeholder and clearable action", () => { + test("Renders with correct label, helper text, optional, placeholder and clearable action", async () => { + const user = userEvent.setup(); const { getByText, getByRole, getAllByRole } = render( ); @@ -24,10 +25,10 @@ describe("DateInput component tests", () => { expect(getByText("Example of helper text")).toBeTruthy(); expect(getByText("(Optional)")).toBeTruthy(); expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY"); - userEvent.type(input, "10/10/2010"); + await user.type(input, "10/10/2010"); const closeAction = getAllByRole("button")[0]; if (closeAction != null) { - userEvent.click(closeAction); + await user.click(closeAction); } expect(input.value).toBe(""); }); @@ -45,50 +46,52 @@ describe("DateInput component tests", () => { test("Renders with an initial value when it is uncontrolled", () => { const { getByText, getByRole } = render(); const input = getByRole("textbox") as HTMLInputElement; - const calendarAction = getByRole("combobox"); expect(input.value).toBe("21-10-2015"); - userEvent.click(calendarAction); + fireEvent.click(getByRole("combobox")); expect(getByText("21").getAttribute("aria-selected")).toBe("true"); expect(getByText("October 2015")).toBeTruthy(); }); - test("Renders with correct format: user typed date but it's invalid, onBlur error", () => { + test("Renders with correct format: user typed date but it's invalid, onBlur error", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(({ value, error }) => { expect(value).toBe("10/90/2010"); expect(error).toBe("Invalid date."); }); const { getByRole } = render(); const input = getByRole("textbox"); - userEvent.click(input); - userEvent.keyboard("10"); - userEvent.keyboard("/"); - userEvent.keyboard("90"); - userEvent.keyboard("/"); - userEvent.keyboard("2010"); + await user.click(input); + await user.keyboard("10"); + await user.keyboard("/"); + await user.keyboard("90"); + await user.keyboard("/"); + await user.keyboard("2010"); fireEvent.blur(input); }); - test("Renders with correct format: user typed date but it's invalid, onChange error", () => { + test("Renders with correct format: user typed date but it's invalid, onChange error", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByRole } = render( ); const input = getByRole("textbox"); - userEvent.click(input); - userEvent.keyboard("10"); - userEvent.keyboard("/"); - userEvent.keyboard("90"); - userEvent.keyboard("/"); - userEvent.keyboard("2010"); + await user.click(input); + await user.keyboard("10"); + await user.keyboard("/"); + await user.keyboard("90"); + await user.keyboard("/"); + await user.keyboard("2010"); expect(onChange).toHaveBeenCalledTimes(10); expect(onChange).toHaveBeenCalledWith({ value: "10/90/2010", error: "Invalid date.", }); }); - test("Calendar renders with correct date: today's date", () => { + test("Calendar renders with correct date: today's date", async () => { + const user = userEvent.setup(); const { getByText, getByRole, getAllByText } = render(); const calendarAction = getByRole("combobox"); const d = dayjs(); - userEvent.click(calendarAction); + await user.click(calendarAction); expect( document.activeElement === (getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 @@ -97,35 +100,38 @@ describe("DateInput component tests", () => { ).toBeTruthy(); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); - test("Calendar renders with correct date: value prop", () => { + test("Calendar renders with correct date: value prop", async () => { + const user = userEvent.setup(); const { getByText, getByRole, getAllByText } = render(); const calendarAction = getByRole("combobox"); const d = dayjs("2019-10-20"); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(getAllByText(d.get("date"))[0]?.getAttribute("aria-selected")).toBe("true"); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); - test("Calendar renders with correct date: user typed value", () => { + test("Calendar renders with correct date: user typed value", async () => { + const user = userEvent.setup(); const { getByText, getByRole, getAllByText } = render(); const calendarAction = getByRole("combobox"); const d = dayjs("2010-1-1"); const input = getByRole("textbox"); - userEvent.type(input, "01-01-2010"); - userEvent.click(calendarAction); + await user.type(input, "01-01-2010"); + await user.click(calendarAction); expect(getAllByText(d.get("date"))[0]?.getAttribute("aria-selected")).toBe("true"); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); - test("Calendar renders with correct date: invalid date, renders with today's date", () => { + test("Calendar renders with correct date: invalid date, renders with today's date", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const { getByText, getByRole, getAllByText } = render(); const calendarAction = getByRole("combobox"); const d = dayjs(); const input = getByRole("textbox"); - userEvent.type(input, "01-01-xxxx"); + await user.type(input, "01-01-xxxx"); fireEvent.blur(input); expect(onBlur).toHaveBeenCalled(); expect(onBlur).toHaveBeenCalledWith({ value: "01-01-xxxx", error: "Invalid date." }); - userEvent.click(calendarAction); + await user.click(calendarAction); expect( document.activeElement === (getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 @@ -134,13 +140,14 @@ describe("DateInput component tests", () => { ).toBeTruthy(); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); - test("Selecting a date from the calendar with an specific format", () => { + test("Selecting a date from the calendar with an specific format", async () => { + const user = userEvent.setup(); const { getAllByText, getByText, getByRole } = render( ); const input = getByRole("textbox") as HTMLInputElement; const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); const dayButton = getAllByText("10")[0]; if (dayButton != null) { fireEvent.click(dayButton); @@ -157,35 +164,37 @@ describe("DateInput component tests", () => { }); expect(input.value).toBe(d.format("M-DD-YYYY")); }); - test("Changing months using the arrows", () => { + test("Changing months using the arrows", async () => { + const user = userEvent.setup(); const { getByText, getByRole, getAllByRole } = render( ); const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); let d = dayjs("10-10-2000", "DD-MM-YYYY", true); d = d.set("date", 10); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); const previousMonthButton = getAllByRole("button")[0]; expect(previousMonthButton?.getAttribute("aria-label")).toBe("Previous month"); if (previousMonthButton != null) { - userEvent.click(previousMonthButton); + await user.click(previousMonthButton); } expect(getByText(d.set("month", d.get("month") - 1).format("MMMM YYYY"))).toBeTruthy(); const nextMonthButton = getAllByRole("button")[2]; expect(nextMonthButton?.getAttribute("aria-label")).toBe("Next month"); if (nextMonthButton != null) { - userEvent.click(nextMonthButton); + await user.click(nextMonthButton); } expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); - test("Selecting a date from the calendar from another month", () => { + test("Selecting a date from the calendar from another month", async () => { + const user = userEvent.setup(); const { getAllByText, getByText, getByRole } = render( ); const input = getByRole("textbox") as HTMLInputElement; const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); const dayButton = getAllByText("31")[0]; if (dayButton != null) { fireEvent.click(dayButton); @@ -202,28 +211,30 @@ describe("DateInput component tests", () => { }); expect(input.value).toBe(d.format("DD-MM-YYYY")); }); - test("Selecting a year and month from the calendar year picker", () => { + test("Selecting a year and month from the calendar year picker", async () => { + const user = userEvent.setup(); const { getByText, getByRole } = render(); const input = getByRole("textbox") as HTMLInputElement; const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); const d = dayjs("10-08-2021", "DD-MM-YYYY", true); - userEvent.click(getByText(d.format("MMMM YYYY"))); + await user.click(getByText(d.format("MMMM YYYY"))); expect(getByText("2024")).toBeTruthy(); - userEvent.click(getByText("2024")); + await user.click(getByText("2024")); expect(getByText("February")).toBeTruthy(); - userEvent.click(getByText("February")); - userEvent.click(getByText(d.set("year", 2024).set("month", 1).format("MMMM YYYY"))); + await user.click(getByText("February")); + await user.click(getByText(d.set("year", 2024).set("month", 1).format("MMMM YYYY"))); fireEvent.keyDown(document, { key: "Escape", code: "Escape", keyCode: 27, charCode: 27 }); expect(input.value).toBe(d.set("year", 2024).set("month", 1).format("DD-MM-YYYY")); }); - test("Selecting a date from the calendar (using keyboard presses)", () => { + test("Selecting a date from the calendar (using keyboard presses)", async () => { + const user = userEvent.setup(); const { getByRole, getAllByText, getByText } = render(); const calendarAction = getByRole("combobox"); const input = getByRole("textbox") as HTMLInputElement; - userEvent.type(input, "01-01-2010"); + await user.type(input, "01-01-2010"); expect(input.value).toBe("01-01-2010"); - userEvent.click(calendarAction); + await user.click(calendarAction); const day1 = getAllByText("1")[0]; expect(document.activeElement === day1).toBeTruthy(); if (day1 != null) { @@ -288,13 +299,14 @@ describe("DateInput component tests", () => { fireEvent.keyDown(document, { key: "Escape", code: "Escape", keyCode: 27, charCode: 27 }); expect(input.value).toBe("02-01-2010"); }); - test("Selecting a date from the calendar (using keyboard presses) part II", () => { + test("Selecting a date from the calendar (using keyboard presses) part II", async () => { + const user = userEvent.setup(); const { getByRole, getAllByText } = render(); const calendarAction = getByRole("combobox"); const input = getByRole("textbox") as HTMLInputElement; - userEvent.type(input, "01-01-2010"); + await user.type(input, "01-01-2010"); expect(input.value).toBe("01-01-2010"); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(document.activeElement === getAllByText("1")[0]).toBeTruthy(); const day1 = getAllByText("1")[0]; const day8 = getAllByText("8")[0]; @@ -347,13 +359,14 @@ describe("DateInput component tests", () => { } expect(input.value).toBe("10-01-2010"); }); - test("onChange & onBlur functions are called correctly", () => { + test("onChange & onBlur functions are called correctly", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const onChange = jest.fn(); const { getByRole } = render(); const input = getByRole("textbox") as HTMLInputElement; const d = new Date(2011, 9, 10); - userEvent.type(input, "10-10-2011"); + await user.type(input, "10-10-2011"); expect(input.value).toBe("10-10-2011"); expect(onChange).toHaveBeenCalledTimes(10); expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", date: d }); @@ -361,12 +374,13 @@ describe("DateInput component tests", () => { expect(onBlur).toHaveBeenCalled(); expect(onBlur).toHaveBeenCalledWith({ value: "10-10-2011", date: d }); }); - test("onChange & onBlur functions are called correctly, also with errors", () => { + test("onChange & onBlur functions are called correctly, also with errors", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const onChange = jest.fn(); const { getByRole } = render(); const input = getByRole("textbox") as HTMLInputElement; - userEvent.type(input, "10-10-"); + await user.type(input, "10-10-"); expect(input.value).toBe("10-10-"); expect(onChange).toHaveBeenCalledTimes(6); expect(onChange).toHaveBeenCalledWith({ @@ -380,12 +394,13 @@ describe("DateInput component tests", () => { error: "Invalid date.", }); }); - test("onBlur function removes the error when it is fixed", () => { + test("onBlur function removes the error when it is fixed", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const { getByRole } = render(); const input = getByRole("textbox") as HTMLInputElement; const d = new Date(2002, 1, 20); - userEvent.type(input, "test"); + await user.type(input, "test"); expect(input.value).toBe("test"); fireEvent.blur(input); expect(onBlur).toHaveBeenCalled(); @@ -393,18 +408,19 @@ describe("DateInput component tests", () => { value: "test", error: "Invalid date.", }); - userEvent.clear(input); - userEvent.type(input, "20-02-2002"); + await user.clear(input); + await user.type(input, "20-02-2002"); expect(input.value).toBe("20-02-2002"); fireEvent.blur(input); expect(onBlur).toHaveBeenCalled(); expect(onBlur).toHaveBeenCalledWith({ value: "20-02-2002", date: d }); }); - test("onBlur function removes the error when the input is empty", () => { + test("onBlur function removes the error when the input is empty", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const { getByRole } = render(); const input = getByRole("textbox") as HTMLInputElement; - userEvent.type(input, "test"); + await user.type(input, "test"); expect(input.value).toBe("test"); fireEvent.blur(input); expect(onBlur).toHaveBeenCalled(); @@ -412,20 +428,21 @@ describe("DateInput component tests", () => { value: "test", error: "Invalid date.", }); - userEvent.clear(input); + await user.clear(input); fireEvent.blur(input); expect(onBlur).toHaveBeenCalled(); expect(onBlur).toHaveBeenCalledWith({ value: "" }); }); - test("onBlur & onChange functions error: required field (not optional)", () => { + test("onBlur & onChange functions error: required field (not optional)", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const onChange = jest.fn(); const { getByRole } = render(); const date = getByRole("textbox") as HTMLInputElement; - userEvent.type(date, "t"); + await user.type(date, "t"); expect(date.value).toBe("t"); - userEvent.clear(date); + await user.clear(date); fireEvent.blur(date); expect(onBlur).toHaveBeenCalled(); expect(onBlur).toHaveBeenCalledWith({ @@ -438,7 +455,8 @@ describe("DateInput component tests", () => { error: "This field is required. Please, enter a value.", }); }); - test("Disabled date input (calendar action must be shown but not clickable)", () => { + test("Disabled date input (calendar action must be shown but not clickable)", async () => { + const user = userEvent.setup(); const { getByRole, queryByText } = render(); const calendarAction = getByRole("button"); const d = new Date(); @@ -449,10 +467,11 @@ describe("DateInput component tests", () => { }; const input = getByRole("textbox") as HTMLInputElement; expect(input.disabled).toBeTruthy(); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy(); }); - test("Input has correct accessibility attributes", () => { + test("Input has correct accessibility attributes", async () => { + const user = userEvent.setup(); const { getByRole } = render(); const input = getByRole("textbox"); expect(input.getAttribute("aria-autocomplete")).toBeNull(); @@ -463,44 +482,46 @@ describe("DateInput component tests", () => { expect(calendarAction.getAttribute("aria-controls")).toBeTruthy(); expect(calendarAction.getAttribute("aria-describedby")).toBeFalsy(); expect(calendarAction.getAttribute("aria-expanded")).toBe("false"); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(calendarAction.getAttribute("aria-expanded")).toBe("true"); const ariaDescribedBy = calendarAction.getAttribute("aria-describedby") ?? ""; expect(document.getElementById(ariaDescribedBy)).toBeTruthy(); expect( calendarAction.getAttribute("aria-describedby") === calendarAction.getAttribute("aria-controls") ).toBeTruthy(); - userEvent.type(calendarAction, "{esc}"); + await user.type(calendarAction, "{esc}"); expect(calendarAction.getAttribute("aria-expanded")).toBe("false"); }); - test("Chooses the correct year when two digit format", () => { + test("Chooses the correct year when two digit format", async () => { + const user = userEvent.setup(); const { getByText, getByRole, getAllByText } = render( ); const input = getByRole("textbox") as HTMLInputElement; const calendarAction = getByRole("combobox"); expect(input.value).toBe("21-10-80"); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(getByText("21").getAttribute("aria-selected")).toBe("true"); expect(getByText("October 1980")).toBeTruthy(); - userEvent.type(calendarAction, "{esc}"); + await user.type(calendarAction, "{esc}"); fireEvent.change(input, { target: { value: "21-10-10" } }); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(getByText("October 1910")).toBeTruthy(); - userEvent.click(getByText("October 1910")); - userEvent.click(getByText("2010")); - userEvent.click(getByText("October 2010")); + await user.click(getByText("October 1910")); + await user.click(getByText("2010")); + await user.click(getByText("October 2010")); const day1 = getAllByText("1")[0]; if (day1 != null) { - userEvent.click(day1); + await user.click(day1); } expect(input.value).toBe("01-10-10"); - userEvent.type(calendarAction, "{esc}"); + await user.type(calendarAction, "{esc}"); fireEvent.change(input, { target: { value: "21-10-80" } }); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(getByText("October 2080")).toBeTruthy(); }); - test("German locale date input", () => { + test("German locale date input", async () => { + const user = userEvent.setup(); const { getByRole, getByText } = render( @@ -509,14 +530,15 @@ describe("DateInput component tests", () => { const input = getByRole("textbox") as HTMLInputElement; const calendarAction = getByRole("combobox"); expect(input.value).toBe("03.12.1995"); - userEvent.click(calendarAction); + await user.click(calendarAction); const day31 = getByText("31"); if (day31 != null) { - userEvent.click(day31); + await user.click(day31); } expect(input.value).toBe("31.12.1995"); }); - test("Form onSubmit is not called when interacting with the calendar and pressing enter", () => { + test("Form onSubmit is not called when interacting with the calendar and pressing enter", async () => { + const user = userEvent.setup(); const onSubmit = jest.fn(); const { getByRole, getAllByText } = render(
@@ -524,51 +546,53 @@ describe("DateInput component tests", () => {
); const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); const day1 = getAllByText("1")[0]; if (day1 != null) { - userEvent.click(day1); + await user.click(day1); } - userEvent.type(calendarAction, "{enter}"); + await user.type(calendarAction, "{enter}"); expect(onSubmit).not.toHaveBeenCalled(); }); - test("Two listboxes are shown", () => { + test("Two listboxes are shown", async () => { + const user = userEvent.setup(); const { getByRole, container } = render(); const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); const monthYearButton = getByRole("button", { name: "March 2020" }); expect(monthYearButton).toBeTruthy(); - userEvent.click(monthYearButton); + await user.click(monthYearButton); const listboxes = container.querySelectorAll("[role='listbox']"); expect(listboxes.length).toBe(2); }); - test("Calendar header formatting", () => { + test("Calendar header formatting", async () => { + const user = userEvent.setup(); const { getByRole, container } = render(); const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); const monthYearButton = getByRole("button", { name: "2020 March" }); expect(monthYearButton).toBeTruthy(); - userEvent.click(monthYearButton); + await user.click(monthYearButton); const listboxes = container.querySelectorAll("[role='listbox']"); expect(listboxes.length).toBe(2); expect(listboxes[0]).toHaveTextContent("2019"); expect(listboxes[1]).toHaveTextContent("February"); }); - // listbox keyboard control - test("Listbox keyboard control", () => { + test("Listbox keyboard control", async () => { + const user = userEvent.setup(); const { getByRole, getAllByRole } = render(); const calendarAction = getByRole("combobox"); - userEvent.click(calendarAction); + await user.click(calendarAction); expect(getByRole("button", { name: "March 2020" })).toBeTruthy(); - userEvent.click(getByRole("button", { name: "March 2020" })); + await user.click(getByRole("button", { name: "March 2020" })); const yearListbox = getAllByRole("listbox")[1]; expect(yearListbox).toBeTruthy(); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard("{Enter}"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{Enter}"); expect(getByRole("button", { name: "March 2021" })).toBeTruthy(); }); }); diff --git a/packages/lib/src/time-input/TimeInput.test.tsx b/packages/lib/src/time-input/TimeInput.test.tsx index b260f2d16..f9911efaa 100644 --- a/packages/lib/src/time-input/TimeInput.test.tsx +++ b/packages/lib/src/time-input/TimeInput.test.tsx @@ -46,21 +46,23 @@ describe("DxcTimeInput rendering", () => { expect(spinbuttons).toHaveLength(4); // hour + minute + second + dayPeriod }); - it("renders clear button when clearable is true", () => { + it("renders clear button when clearable is true", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getAllByRole } = render(); const buttons = getAllByRole("button"); expect(buttons).toHaveLength(2); - if (buttons[0]) userEvent.click(buttons[0]); + if (buttons[0]) await user.click(buttons[0]); expect(mockOnChange).toHaveBeenCalledWith(""); }); - it("renders time picker and values are correctly selected", () => { + it("renders time picker and values are correctly selected", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getByRole, getAllByRole } = render(); const pickerButton = getByRole("button"); expect(pickerButton).toBeTruthy(); - userEvent.click(pickerButton); + await user.click(pickerButton); const hourButton = getAllByRole("option", { name: "05" }).find((hourButton) => hourButton.id.includes("hour")); const minuteButton = getAllByRole("option", { name: "30" }).find((minuteButton) => minuteButton.id.includes("minute") @@ -71,7 +73,7 @@ describe("DxcTimeInput rendering", () => { expect(amButton?.getAttribute("aria-selected")).toBe("true"); const newHourButton = getAllByRole("option", { name: "10" }).find((hourButton) => hourButton.id.includes("hour")); - if (newHourButton) userEvent.click(newHourButton); + if (newHourButton) await user.click(newHourButton); expect(mockOnChange).toHaveBeenCalledWith("10:30 AM"); }); @@ -80,72 +82,76 @@ describe("DxcTimeInput rendering", () => { expect(getByText("Invalid time")).toBeTruthy(); }); - it("Calls onBlur with the correct value", () => { + it("Calls onBlur with the correct value", async () => { + const user = userEvent.setup(); const mockOnBlur = jest.fn(); const mockOnChange = jest.fn(); const { getAllByRole } = render(); const inputs = getAllByRole("spinbutton"); expect(inputs).toHaveLength(3); // hour + minute + dayPeriod - userEvent.tab(); + await user.tab(); expect(inputs[0]).toHaveFocus(); - userEvent.keyboard("{ArrowUp}"); + await user.keyboard("{ArrowUp}"); expect(mockOnChange).toHaveBeenCalledWith("01: "); - userEvent.tab(); + await user.tab(); expect(inputs[1]).toHaveFocus(); - userEvent.keyboard("{ArrowDown}"); + await user.keyboard("{ArrowDown}"); expect(mockOnChange).toHaveBeenCalledWith("01:59 "); - userEvent.tab(); + await user.tab(); expect(inputs[2]).toHaveFocus(); - userEvent.keyboard("{A}"); + await user.keyboard("{A}"); expect(mockOnChange).toHaveBeenCalledWith("01:59 AM"); - userEvent.tab(); + await user.tab(); expect(mockOnBlur).toHaveBeenCalledWith({ value: "01:59 AM", error: undefined }); }); - it("TimePicker click interaction", () => { + it("TimePicker click interaction", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getByRole, getByText, getAllByText } = render(); const button = getByRole("button"); expect(button).toBeTruthy(); - userEvent.click(button); + await user.click(button); expect(getByText("AM")).toBeTruthy(); const hourbutton = getAllByText("07"); - if (hourbutton[0]) userEvent.click(hourbutton[0]); + if (hourbutton[0]) await user.click(hourbutton[0]); expect(mockOnChange).toHaveBeenCalledWith("07:00 AM"); const minuteButton = getAllByText("30"); - if (minuteButton[0]) userEvent.click(minuteButton[0]); + if (minuteButton[0]) await user.click(minuteButton[0]); expect(mockOnChange).toHaveBeenCalledWith("07:30 AM"); const amButton = getAllByText("AM")[0]; expect(amButton).toBeTruthy(); - if (amButton) userEvent.click(amButton); + if (amButton) await user.click(amButton); expect(mockOnChange).toHaveBeenCalledWith("07:30 AM"); }); - it("TimePicker keyboard interaction", () => { + it("TimePicker keyboard interaction", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getByRole, getByText } = render(); const button = getByRole("button"); expect(button).toBeTruthy(); - userEvent.click(button); + await user.click(button); expect(getByText("AM")).toBeTruthy(); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard("{Enter}"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{Enter}"); expect(mockOnChange).toHaveBeenCalledWith("03:00 AM"); - userEvent.tab(); - userEvent.keyboard("{ArrowUp}"); - userEvent.keyboard("{Enter}"); + await user.tab(); + await user.keyboard("{ArrowUp}"); + await user.keyboard("{Enter}"); expect(mockOnChange).toHaveBeenCalledWith("03:55 AM"); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard(" "); + await user.keyboard("{ArrowDown}"); + await user.keyboard(" "); expect(mockOnChange).toHaveBeenCalledWith("03:00 AM"); - userEvent.tab(); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard("{Enter}"); + await user.tab(); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{Enter}"); expect(mockOnChange).toHaveBeenCalledWith("03:00 PM"); }); - it("TimeInput correctly move focus when each spinbutton is completed", () => { + it("TimeInput correctly move focus when each spinbutton is completed", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getAllByRole, getByText } = render( { expect(inputs[0]).toHaveValue(23); expect(inputs[1]).toHaveValue(30); expect(inputs[2]).toHaveValue(0); - userEvent.click(getByText("23")); + await user.click(getByText("23")); expect(inputs[0]).toHaveFocus(); - userEvent.keyboard("1"); - userEvent.keyboard("0"); + await user.keyboard("1"); + await user.keyboard("0"); expect(mockOnChange).toHaveBeenCalledWith("10:30:00"); expect(inputs[1]).toHaveFocus(); - userEvent.keyboard("{ArrowUp}"); + await user.keyboard("{ArrowUp}"); expect(mockOnChange).toHaveBeenCalledWith("10:31:00"); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard("{ArrowDown}"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{ArrowDown}"); expect(mockOnChange).toHaveBeenCalledWith("10:29:00"); - userEvent.keyboard("4"); - userEvent.keyboard("5"); + await user.keyboard("4"); + await user.keyboard("5"); expect(mockOnChange).toHaveBeenCalledWith("10:45:00"); expect(inputs[2]).toHaveFocus(); - userEvent.keyboard("{ArrowDown}"); - userEvent.keyboard("{ArrowUp}"); - userEvent.keyboard("{ArrowUp}"); + await user.keyboard("{ArrowDown}"); + await user.keyboard("{ArrowUp}"); + await user.keyboard("{ArrowUp}"); expect(mockOnChange).toHaveBeenCalledWith("10:45:01"); - userEvent.keyboard("3"); - userEvent.keyboard("0"); + await user.keyboard("3"); + await user.keyboard("0"); expect(mockOnChange).toHaveBeenCalledWith("10:45:30"); expect(inputs[2]).toHaveFocus(); const buttons = getAllByRole("button"); expect(buttons).toHaveLength(2); - if (buttons[0]) userEvent.click(buttons[0]); + if (buttons[0]) await user.click(buttons[0]); expect(mockOnChange).toHaveBeenCalledWith(""); expect(inputs[0]?.getAttribute("aria-valuenow")).toBeNull(); expect(inputs[1]?.getAttribute("aria-valuenow")).toBeNull(); expect(inputs[2]?.getAttribute("aria-valuenow")).toBeNull(); }); - it("Navigate timeInput using the keyboard", () => { + it("Navigate timeInput using the keyboard", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getAllByRole } = render( { expect(inputs[1]).toHaveValue(30); expect(inputs[2]).toHaveValue(0); expect(inputs[3]).toHaveValue(0); // AM - userEvent.tab(); + await user.tab(); expect(inputs[0]).toHaveFocus(); - userEvent.keyboard("{ArrowRight}"); + await user.keyboard("{ArrowRight}"); expect(inputs[1]).toHaveFocus(); - userEvent.keyboard("{ArrowRight}"); + await user.keyboard("{ArrowRight}"); expect(inputs[2]).toHaveFocus(); - userEvent.keyboard("{ArrowRight}"); + await user.keyboard("{ArrowRight}"); expect(inputs[3]).toHaveFocus(); - userEvent.keyboard("{ArrowLeft}"); + await user.keyboard("{ArrowLeft}"); expect(inputs[2]).toHaveFocus(); - userEvent.keyboard("{ArrowLeft}"); + await user.keyboard("{ArrowLeft}"); expect(inputs[1]).toHaveFocus(); - userEvent.keyboard("{ArrowLeft}"); + await user.keyboard("{ArrowLeft}"); expect(inputs[0]).toHaveFocus(); - userEvent.tab(); - userEvent.tab(); - userEvent.tab(); + await user.tab(); + await user.tab(); + await user.tab(); expect(inputs[3]).toHaveFocus(); const buttons = getAllByRole("button"); expect(buttons).toHaveLength(2); - userEvent.tab(); + await user.tab(); expect(buttons[0]).toHaveFocus(); - userEvent.tab(); + await user.tab(); expect(buttons[1]).toHaveFocus(); }); - it("Mixing keyboard inputs", () => { + it("Mixing keyboard inputs", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getAllByRole } = render( { expect(inputs[1]).toHaveValue(30); expect(inputs[2]).toHaveValue(0); expect(inputs[3]).toHaveValue(0); // AM - userEvent.tab(); + await user.tab(); expect(inputs[0]).toHaveFocus(); - userEvent.keyboard("1"); - userEvent.keyboard("2"); + await user.keyboard("1"); + await user.keyboard("2"); expect(mockOnChange).toHaveBeenCalledWith("12:30:00 AM"); expect(inputs[1]).toHaveFocus(); - userEvent.keyboard("{ArrowUp}"); - userEvent.keyboard("{5}"); + await user.keyboard("{ArrowUp}"); + await user.keyboard("{5}"); expect(mockOnChange).toHaveBeenCalledWith("12:05:00 AM"); }); - it("Time input with finnish locale", () => { + it("Time input with finnish locale", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getByRole, getAllByText } = render( @@ -276,19 +285,20 @@ describe("DxcTimeInput rendering", () => { ); const button = getByRole("button"); expect(button).toBeTruthy(); - userEvent.click(button); + await user.click(button); const hourbutton = getAllByText("16"); - if (hourbutton[0]) userEvent.click(hourbutton[0]); + if (hourbutton[0]) await user.click(hourbutton[0]); expect(mockOnChange).toHaveBeenCalledWith("16.00.00"); const minuteButton = getAllByText("30"); - if (minuteButton[0]) userEvent.click(minuteButton[0]); + if (minuteButton[0]) await user.click(minuteButton[0]); expect(mockOnChange).toHaveBeenCalledWith("16.30.00"); const secondButton = getAllByText("45"); - if (secondButton[1]) userEvent.click(secondButton[1]); + if (secondButton[1]) await user.click(secondButton[1]); expect(mockOnChange).toHaveBeenCalledWith("16.30.45"); }); - it("Time input with taiwanese locale", () => { + it("Time input with taiwanese locale", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getByRole, getAllByText } = render( @@ -297,21 +307,22 @@ describe("DxcTimeInput rendering", () => { ); const button = getByRole("button"); expect(button).toBeTruthy(); - userEvent.click(button); + await user.click(button); const amButton = getAllByText("AM")[0]; - if (amButton) userEvent.click(amButton); + if (amButton) await user.click(amButton); const hourbutton = getAllByText("07"); - if (hourbutton[0]) userEvent.click(hourbutton[0]); + if (hourbutton[0]) await user.click(hourbutton[0]); expect(mockOnChange).toHaveBeenCalledWith("AM 07:00:00"); const minuteButton = getAllByText("30"); - if (minuteButton[0]) userEvent.click(minuteButton[0]); + if (minuteButton[0]) await user.click(minuteButton[0]); expect(mockOnChange).toHaveBeenCalledWith("AM 07:30:00"); const secondButton = getAllByText("45"); - if (secondButton[1]) userEvent.click(secondButton[1]); + if (secondButton[1]) await user.click(secondButton[1]); expect(mockOnChange).toHaveBeenCalledWith("AM 07:30:45"); }); - it("Time input with taiwanese locale, but using keyboard to input time", () => { + it("Time input with taiwanese locale, but using keyboard to input time", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getAllByRole } = render( @@ -320,22 +331,23 @@ describe("DxcTimeInput rendering", () => { ); const inputs = getAllByRole("spinbutton"); expect(inputs).toHaveLength(4); - userEvent.tab(); + await user.tab(); expect(inputs[0]).toHaveFocus(); - userEvent.keyboard("p"); + await user.keyboard("p"); expect(inputs[1]).toHaveFocus(); - userEvent.keyboard("1"); - userEvent.keyboard("2"); + await user.keyboard("1"); + await user.keyboard("2"); expect(inputs[2]).toHaveFocus(); - userEvent.keyboard("{3}"); - userEvent.keyboard("{4}"); + await user.keyboard("{3}"); + await user.keyboard("{4}"); expect(inputs[3]).toHaveFocus(); - userEvent.keyboard("{5}"); - userEvent.keyboard("{6}"); + await user.keyboard("{5}"); + await user.keyboard("{6}"); expect(mockOnChange).toHaveBeenCalledWith("PM 12:34:56"); }); - it("Time input with chinese locale, but using time picker", () => { + it("Time input with chinese locale, but using time picker", async () => { + const user = userEvent.setup(); const mockOnChange = jest.fn(); const { getByRole, getAllByText } = render( @@ -344,17 +356,17 @@ describe("DxcTimeInput rendering", () => { ); const button = getByRole("button"); expect(button).toBeTruthy(); - userEvent.click(button); + await user.click(button); const amButton = getAllByText("AM")[0]; - if (amButton) userEvent.click(amButton); + if (amButton) await user.click(amButton); const hourbutton = getAllByText("12"); - if (hourbutton[0]) userEvent.click(hourbutton[0]); + if (hourbutton[0]) await user.click(hourbutton[0]); expect(mockOnChange).toHaveBeenCalledWith("AM 12:00:00"); const minuteButton = getAllByText("30"); - if (minuteButton[0]) userEvent.click(minuteButton[0]); + if (minuteButton[0]) await user.click(minuteButton[0]); expect(mockOnChange).toHaveBeenCalledWith("AM 12:30:00"); const secondButton = getAllByText("50"); - if (secondButton[1]) userEvent.click(secondButton[1]); + if (secondButton[1]) await user.click(secondButton[1]); expect(mockOnChange).toHaveBeenCalledWith("AM 12:30:50"); }); });