Use Intl to localise dates and times (#11422)
* Use Intl to generate better internationalised date formats * Get `Yesterday` and `Today` from Intl also * Correct capitalisation blunder * Fix formatTime include weekday * Iterate * Fix tests * use jest setSystemTime * Discard changes to cypress/e2e/settings/general-user-settings-tab.spec.ts * Discard changes to res/css/_components.pcss * Discard changes to res/css/views/elements/_LanguageDropdown.pcss * Discard changes to src/components/views/elements/LanguageDropdown.tsx * Add docs & tests for getDaysArray & getMonthsArray * Discard changes to test/components/structures/__snapshots__/MatrixChat-test.tsx.snap * Consolidate consts * Improve testing & documentation * Update snapshot * Apply suggestions from code review Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Iterate * Clarify comments * Update src/DateUtils.ts Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Specify hourCycle * Discard changes to test/components/views/settings/devices/DeviceDetails-test.tsx * Update comments --------- Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
d4571aef68
commit
3c52ba0c92
21 changed files with 446 additions and 193 deletions
|
|
@ -23,8 +23,224 @@ import {
|
|||
formatTimeLeft,
|
||||
formatPreciseDuration,
|
||||
formatLocalDateShort,
|
||||
getDaysArray,
|
||||
getMonthsArray,
|
||||
formatFullDateNoDayNoTime,
|
||||
formatTime,
|
||||
formatFullTime,
|
||||
formatFullDate,
|
||||
formatFullDateNoTime,
|
||||
formatDate,
|
||||
HOUR_MS,
|
||||
MINUTE_MS,
|
||||
DAY_MS,
|
||||
} from "../../src/DateUtils";
|
||||
import { REPEATABLE_DATE, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../test-utils";
|
||||
import * as languageHandler from "../../src/languageHandler";
|
||||
|
||||
describe("getDaysArray", () => {
|
||||
it("should return Sunday-Saturday in long mode", () => {
|
||||
expect(getDaysArray("long")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
]
|
||||
`);
|
||||
});
|
||||
it("should return Sun-Sat in short mode", () => {
|
||||
expect(getDaysArray("short")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"Sun",
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat",
|
||||
]
|
||||
`);
|
||||
});
|
||||
it("should return S-S in narrow mode", () => {
|
||||
expect(getDaysArray("narrow")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"S",
|
||||
"M",
|
||||
"T",
|
||||
"W",
|
||||
"T",
|
||||
"F",
|
||||
"S",
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("getMonthsArray", () => {
|
||||
it("should return January-December in long mode", () => {
|
||||
expect(getMonthsArray("long")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
]
|
||||
`);
|
||||
});
|
||||
it("should return Jan-Dec in short mode", () => {
|
||||
expect(getMonthsArray("short")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
]
|
||||
`);
|
||||
});
|
||||
it("should return J-D in narrow mode", () => {
|
||||
expect(getMonthsArray("narrow")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"J",
|
||||
"F",
|
||||
"M",
|
||||
"A",
|
||||
"M",
|
||||
"J",
|
||||
"J",
|
||||
"A",
|
||||
"S",
|
||||
"O",
|
||||
"N",
|
||||
"D",
|
||||
]
|
||||
`);
|
||||
});
|
||||
it("should return 1-12 in numeric mode", () => {
|
||||
expect(getMonthsArray("numeric")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
]
|
||||
`);
|
||||
});
|
||||
it("should return 01-12 in 2-digit mode", () => {
|
||||
expect(getMonthsArray("2-digit")).toMatchInlineSnapshot(`
|
||||
[
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatDate", () => {
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
jest.setSystemTime(REPEATABLE_DATE);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.setSystemTime(jest.getRealSystemTime());
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it("should return time string if date is within same day", () => {
|
||||
const date = new Date(REPEATABLE_DATE.getTime() + 2 * HOUR_MS + 12 * MINUTE_MS);
|
||||
expect(formatDate(date, false, "en-GB")).toMatchInlineSnapshot(`"19:10"`);
|
||||
});
|
||||
|
||||
it("should return time string with weekday if date is within last 6 days", () => {
|
||||
const date = new Date(REPEATABLE_DATE.getTime() - 6 * DAY_MS + 2 * HOUR_MS + 12 * MINUTE_MS);
|
||||
expect(formatDate(date, false, "en-GB")).toMatchInlineSnapshot(`"Fri 19:10"`);
|
||||
});
|
||||
|
||||
it("should return time & date string without year if it is within the same year", () => {
|
||||
const date = new Date(REPEATABLE_DATE.getTime() - 66 * DAY_MS + 2 * HOUR_MS + 12 * MINUTE_MS);
|
||||
expect(formatDate(date, false, "en-GB")).toMatchInlineSnapshot(`"Mon, 12 Sept, 19:10"`);
|
||||
});
|
||||
|
||||
it("should return full time & date string otherwise", () => {
|
||||
const date = new Date(REPEATABLE_DATE.getTime() - 666 * DAY_MS + 2 * HOUR_MS + 12 * MINUTE_MS);
|
||||
expect(formatDate(date, false, "en-GB")).toMatchInlineSnapshot(`"Wed, 20 Jan 2021, 19:10"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatFullDateNoTime", () => {
|
||||
it("should match given locale en-GB", () => {
|
||||
expect(formatFullDateNoTime(REPEATABLE_DATE, "en-GB")).toMatchInlineSnapshot(`"Thu, 17 Nov 2022"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatFullDate", () => {
|
||||
it("correctly formats with seconds", () => {
|
||||
expect(formatFullDate(REPEATABLE_DATE, true, true, "en-GB")).toMatchInlineSnapshot(
|
||||
`"Thu, 17 Nov 2022, 4:58:32 pm"`,
|
||||
);
|
||||
});
|
||||
it("correctly formats without seconds", () => {
|
||||
expect(formatFullDate(REPEATABLE_DATE, false, false, "en-GB")).toMatchInlineSnapshot(
|
||||
`"Thu, 17 Nov 2022, 16:58"`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatFullTime", () => {
|
||||
it("correctly formats 12 hour mode", () => {
|
||||
expect(formatFullTime(REPEATABLE_DATE, true, "en-GB")).toMatchInlineSnapshot(`"4:58:32 pm"`);
|
||||
});
|
||||
it("correctly formats 24 hour mode", () => {
|
||||
expect(formatFullTime(REPEATABLE_DATE, false, "en-GB")).toMatchInlineSnapshot(`"16:58:32"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatTime", () => {
|
||||
it("correctly formats 12 hour mode", () => {
|
||||
expect(formatTime(REPEATABLE_DATE, true, "en-GB")).toMatchInlineSnapshot(`"4:58 pm"`);
|
||||
});
|
||||
it("correctly formats 24 hour mode", () => {
|
||||
expect(formatTime(REPEATABLE_DATE, false, "en-GB")).toMatchInlineSnapshot(`"16:58"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatSeconds", () => {
|
||||
it("correctly formats time with hours", () => {
|
||||
|
|
@ -43,16 +259,15 @@ describe("formatSeconds", () => {
|
|||
});
|
||||
|
||||
describe("formatRelativeTime", () => {
|
||||
let dateSpy: jest.SpyInstance<number, []>;
|
||||
beforeAll(() => {
|
||||
dateSpy = jest
|
||||
.spyOn(global.Date, "now")
|
||||
// Tuesday, 2 November 2021 11:18:03 UTC
|
||||
.mockImplementation(() => 1635851883000);
|
||||
jest.useFakeTimers();
|
||||
// Tuesday, 2 November 2021 11:18:03 UTC
|
||||
jest.setSystemTime(1635851883000);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
dateSpy.mockRestore();
|
||||
jest.setSystemTime(jest.getRealSystemTime());
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it("returns hour format for events created in the same day", () => {
|
||||
|
|
@ -71,7 +286,7 @@ describe("formatRelativeTime", () => {
|
|||
const date = new Date(2021, 10, 2, 11, 1, 23, 0);
|
||||
expect(formatRelativeTime(date)).toBe("11:01");
|
||||
expect(formatRelativeTime(date, false)).toBe("11:01");
|
||||
expect(formatRelativeTime(date, true)).toBe("11:01AM");
|
||||
expect(formatRelativeTime(date, true)).toBe("11:01 AM");
|
||||
});
|
||||
|
||||
it("returns month and day for events created in the current year", () => {
|
||||
|
|
@ -134,6 +349,12 @@ describe("formatFullDateNoDayISO", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("formatFullDateNoDayNoTime", () => {
|
||||
it("should return a date formatted for en-GB locale", () => {
|
||||
expect(formatFullDateNoDayNoTime(REPEATABLE_DATE, "en-GB")).toMatchInlineSnapshot(`"17/11/2022"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatDateForInput", () => {
|
||||
it.each([["1993-11-01"], ["1066-10-14"], ["0571-04-22"], ["0062-02-05"]])(
|
||||
"should format %s",
|
||||
|
|
@ -162,15 +383,18 @@ describe("formatLocalDateShort()", () => {
|
|||
});
|
||||
const timestamp = new Date("Fri Dec 17 2021 09:09:00 GMT+0100 (Central European Standard Time)").getTime();
|
||||
it("formats date correctly by locale", () => {
|
||||
const locale = jest.spyOn(languageHandler, "getUserLanguage");
|
||||
mockIntlDateTimeFormat();
|
||||
|
||||
// format is DD/MM/YY
|
||||
mockIntlDateTimeFormat("en-UK");
|
||||
locale.mockReturnValue("en-GB");
|
||||
expect(formatLocalDateShort(timestamp)).toEqual("17/12/21");
|
||||
|
||||
// US date format is MM/DD/YY
|
||||
mockIntlDateTimeFormat("en-US");
|
||||
locale.mockReturnValue("en-US");
|
||||
expect(formatLocalDateShort(timestamp)).toEqual("12/17/21");
|
||||
|
||||
mockIntlDateTimeFormat("de-DE");
|
||||
locale.mockReturnValue("de-DE");
|
||||
expect(formatLocalDateShort(timestamp)).toEqual("17.12.21");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue