studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛(react) make DatePicker's tests no longer depend on the user's locale

Browse Source 
Refactor tests to enhance simplicity and clarity by introducing
expected string values. This improvement is particularly relevant
for focused months and focused year scenarios. Consequently, the
tests no longer depend on the user's locale.
This commit is contained in:
Lebaud Antoine
2023-07-12 22:00:21 +02:00
committed by aleb_the_flash
parent c35cc603a7
commit 2cd8c6e843
2 changed files with 31 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/violet-rings-love.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": patch
---
Refactor DatePicker's tests which no longer depend on the user's locale.

78
packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
View File

@@ -47,27 +47,23 @@ describe("<DatePicker/>", () => {
); );
}; };
const expectFocusedMonthToBeEqual = (expectedDate: Date) => { const expectFocusedMonthToBeEqual = (expectedMonth: string) => {
const focusedMonth = screen const focusedMonth = screen
.getByRole("combobox", { .getByRole("combobox", {
name: "Select a month", name: "Select a month",
})! })!
.textContent?.replace("arrow_drop_down", ""); .textContent?.replace("arrow_drop_down", "");
expect(focusedMonth).eq( expect(focusedMonth).eq(expectedMonth);
expectedDate.toLocaleString("default", { month: "short" })
);
}; };
const expectFocusedYearToBeEqual = (expectedDate: Date) => { const expectFocusedYearToBeEqual = (expectedYear: string) => {
const focusedYear = screen const focusedYear = screen
.getByRole("combobox", { .getByRole("combobox", {
name: "Select a year", name: "Select a year",
})! })!
.textContent?.replace("arrow_drop_down", ""); .textContent?.replace("arrow_drop_down", "");
expect(focusedYear).eq( expect(focusedYear).eq(expectedYear);
expectedDate.toLocaleString("default", { year: "numeric" })
);
}; };
const expectMenuToBeOpen = (menu: HTMLElement) => { const expectMenuToBeOpen = (menu: HTMLElement) => {
@@ -684,7 +680,7 @@ describe("<DatePicker/>", () => {
await user.click(toggleButton); await user.click(toggleButton);
// Focused month of the calendar grid should be the one from the default value. // Focused month of the calendar grid should be the one from the default value.
expectFocusedMonthToBeEqual(defaultValue); expectFocusedMonthToBeEqual("May");
const previousMonthButton = screen.getByRole("button", { const previousMonthButton = screen.getByRole("button", {
name: "Previous month", name: "Previous month",
@@ -695,18 +691,15 @@ describe("<DatePicker/>", () => {
// Focus previous month. // Focus previous month.
await user.click(previousMonthButton); await user.click(previousMonthButton);
defaultValue.setMonth(defaultValue.getMonth() - 1); expectFocusedMonthToBeEqual("Apr");
expectFocusedMonthToBeEqual(defaultValue);
// Get back to the default focused month. // Get back to the default focused month.
await user.click(nextMonthButton); await user.click(nextMonthButton);
defaultValue.setMonth(defaultValue.getMonth() + 1); expectFocusedMonthToBeEqual("May");
expectFocusedMonthToBeEqual(defaultValue);
// Focus next month. // Focus next month.
await user.click(nextMonthButton); await user.click(nextMonthButton);
defaultValue.setMonth(defaultValue.getMonth() + 1); expectFocusedMonthToBeEqual("Jun");
expectFocusedMonthToBeEqual(defaultValue);
}); });
it("clicks next and previous focused year", async () => { it("clicks next and previous focused year", async () => {
@@ -725,7 +718,7 @@ describe("<DatePicker/>", () => {
await user.click(toggleButton); await user.click(toggleButton);
// Focused year of the calendar grid should be the one from the default value. // Focused year of the calendar grid should be the one from the default value.
expectFocusedYearToBeEqual(defaultValue); expectFocusedYearToBeEqual("2023");
const previousYearButton = screen.getByRole("button", { const previousYearButton = screen.getByRole("button", {
name: "Previous year", name: "Previous year",
@@ -736,18 +729,15 @@ describe("<DatePicker/>", () => {
// Focus previous year. // Focus previous year.
await user.click(previousYearButton); await user.click(previousYearButton);
defaultValue.setFullYear(defaultValue.getFullYear() - 1); expectFocusedYearToBeEqual("2022");
expectFocusedYearToBeEqual(defaultValue);
// Get back to the default focused month. // Get back to the default focused month.
await user.click(nextYearButton); await user.click(nextYearButton);
defaultValue.setFullYear(defaultValue.getFullYear() + 1); expectFocusedYearToBeEqual("2023");
expectFocusedYearToBeEqual(defaultValue);
// Focus next year. // Focus next year.
await user.click(nextYearButton); await user.click(nextYearButton);
defaultValue.setFullYear(defaultValue.getFullYear() + 1); expectFocusedYearToBeEqual("2024");
expectFocusedYearToBeEqual(defaultValue);
}); });
it("renders disabled next and previous month", async () => { it("renders disabled next and previous month", async () => {
@@ -943,9 +933,7 @@ describe("<DatePicker/>", () => {
"arrow_drop_down", "arrow_drop_down",
"" ""
); );
expect(focusedMonth).eq( expect(focusedMonth).eq("May");
defaultValue.toLocaleString("default", { month: "short" })
);
// Open month dropdown. // Open month dropdown.
await user.click(monthDropdown); await user.click(monthDropdown);
@@ -953,9 +941,8 @@ describe("<DatePicker/>", () => {
expectMenuToBeClosed(yearMenu); expectMenuToBeClosed(yearMenu);
// Select a month option. // Select a month option.
defaultValue.setMonth(8);
const option: HTMLLIElement = screen.getByRole("option", { const option: HTMLLIElement = screen.getByRole("option", {
name: defaultValue.toLocaleString("default", { month: "long" }), name: "September",
}); });
await user.click(option); await user.click(option);
@@ -964,9 +951,7 @@ describe("<DatePicker/>", () => {
// Make sure focused month has properly updated. // Make sure focused month has properly updated.
focusedMonth = monthDropdown.textContent?.replace("arrow_drop_down", ""); focusedMonth = monthDropdown.textContent?.replace("arrow_drop_down", "");
expect(focusedMonth).eq( expect(focusedMonth).eq("Sep");
defaultValue.toLocaleString("default", { month: "short" })
);
}); });
it("selects a focused year", async () => { it("selects a focused year", async () => {
@@ -995,19 +980,16 @@ describe("<DatePicker/>", () => {
expectMenuToBeClosed(monthMenu); expectMenuToBeClosed(monthMenu);
// Make sure the selected item matched the default value. // Make sure the selected item matched the default value.
let focusedMonth = yearDropdown.textContent?.replace("arrow_drop_down", ""); let focusedYear = yearDropdown.textContent?.replace("arrow_drop_down", "");
expect(focusedMonth).eq( expect(focusedYear).eq("2023");
defaultValue.toLocaleString("default", { year: "numeric" })
);
await user.click(yearDropdown); await user.click(yearDropdown);
expectMenuToBeOpen(yearMenu); expectMenuToBeOpen(yearMenu);
expectMenuToBeClosed(monthMenu); expectMenuToBeClosed(monthMenu);
// Select a year option. // Select a year option.
defaultValue.setFullYear(2024);
const option: HTMLLIElement = screen.getByRole("option", { const option: HTMLLIElement = screen.getByRole("option", {
name: defaultValue.toLocaleString("default", { year: "numeric" }), name: "2024",
}); });
await user.click(option); await user.click(option);
@@ -1015,10 +997,8 @@ describe("<DatePicker/>", () => {
expectMenuToBeClosed(monthMenu); expectMenuToBeClosed(monthMenu);
// Make sure focused month has properly updated. // Make sure focused month has properly updated.
focusedMonth = yearDropdown.textContent?.replace("arrow_drop_down", ""); focusedYear = yearDropdown.textContent?.replace("arrow_drop_down", "");
expect(focusedMonth).eq( expect(focusedYear).eq("2024");
defaultValue.toLocaleString("default", { year: "numeric" })
);
}); });
it("renders only cell within the focused month", async () => { it("renders only cell within the focused month", async () => {
@@ -1074,9 +1054,6 @@ describe("<DatePicker/>", () => {
</CunninghamProvider> </CunninghamProvider>
); );
const previousMonthValue = new Date(defaultValue);
previousMonthValue.setDate(defaultValue.getDate() - 1);
// Open calendar. // Open calendar.
const toggleButton = (await screen.findAllByRole("button"))![1]; const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton); await user.click(toggleButton);
@@ -1085,16 +1062,16 @@ describe("<DatePicker/>", () => {
// default value is the cell of the calendar grid. // default value is the cell of the calendar grid.
// Thus, navigating one cell up, changes the focused month. // Thus, navigating one cell up, changes the focused month.
await user.keyboard("{ArrowUp}"); await user.keyboard("{ArrowUp}");
expectFocusedMonthToBeEqual(previousMonthValue); expectFocusedMonthToBeEqual("Apr");
// Reopen the calendar menu to reset the focused month. // Reopen the calendar menu to reset the focused month.
await user.click(toggleButton); await user.click(toggleButton);
await user.click(toggleButton); await user.click(toggleButton);
expectFocusedMonthToBeEqual(defaultValue); expectFocusedMonthToBeEqual("May");
await user.keyboard("{ArrowLeft}"); await user.keyboard("{ArrowLeft}");
expectFocusedMonthToBeEqual(previousMonthValue); expectFocusedMonthToBeEqual("Apr");
}); });
it("navigate next focused month with keyboard", async () => { it("navigate next focused month with keyboard", async () => {
@@ -1110,26 +1087,23 @@ describe("<DatePicker/>", () => {
</CunninghamProvider> </CunninghamProvider>
); );
const nextMonthValue = new Date(defaultValue);
nextMonthValue.setDate(defaultValue.getDate() + 1);
const toggleButton = (await screen.findAllByRole("button"))![1]; const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton); await user.click(toggleButton);
await user.keyboard("{ArrowDown}"); await user.keyboard("{ArrowDown}");
expectFocusedMonthToBeEqual(nextMonthValue); expectFocusedMonthToBeEqual("Jun");
// Reopen the calendar menu to reset the focused month. // Reopen the calendar menu to reset the focused month.
await user.click(toggleButton); await user.click(toggleButton);
await user.click(toggleButton); await user.click(toggleButton);
expectFocusedMonthToBeEqual(defaultValue); expectFocusedMonthToBeEqual("May");
// Navigate to the previous month using keyboard. // Navigate to the previous month using keyboard.
// default value is the last cell of the calendar grid. // default value is the last cell of the calendar grid.
// Thus, navigating one cell right, changes the focused month. // Thus, navigating one cell right, changes the focused month.
await user.keyboard("{ArrowRight}"); await user.keyboard("{ArrowRight}");
expectFocusedMonthToBeEqual(nextMonthValue); expectFocusedMonthToBeEqual("Jun");
}); });
it("uses the locale props calendar system", async () => { it("uses the locale props calendar system", async () => {