Localised date format

* Localised date format based on the user's browser language. * Added jsdom as the jest environment. * Moved date related functions from main.js into date-helper.js. * Added tests for formatDate to make sure the date formatting is working correctly based on the user's browser language.
spence-m · Oct 11, 2022 · ad5c019 · ad5c019
1 parent 55e69b7
commit ad5c019
Show file tree

Hide file tree

Showing 7 changed files with 1,279 additions and 115 deletions.
diff --git a/__tests__/date-helper.test.js b/__tests__/date-helper.test.js
@@ -0,0 +1,50 @@
+import { wrathDates } from "../__fixtures__/wotlk-dates.js";
+import { formatDate, getWOTLKHolidays } from "../helpers/date-helper.js";
+
+let languageGetter;
+
+beforeEach(() => {
+  languageGetter = jest.spyOn(window.navigator, "language", "get");
+});
+
+it("should format the date correctly for British users", () => {
+  languageGetter.mockReturnValue("en-GB");
+  const date = new Date(Date.UTC(2022, 9, 15, 0, 0, 0)); // 15/10/2022
+
+  const actual = formatDate(date);
+  const expected = "15/10/2022";
+
+  expect(actual).toEqual(expected);
+});
+
+it("should format the date correctly for American users", () => {
+  languageGetter.mockReturnValue("en-US");
+  const date = new Date(Date.UTC(2022, 9, 15, 0, 0, 0)); // 15/10/2022
+
+  const actual = formatDate(date);
+  const expected = "10/15/2022";
+
+  expect(actual).toEqual(expected);
+});
+
+it("should contain the correct WOTLK dates for 2022", () => {
+  const holidays = getWOTLKHolidays(2022);
+  for (let i = 0; i < holidays.length; i++) {
+    for (let j = 0; j < holidays[i].length; j++) {
+      const firstKey = wrathDates[i][j].key;
+      const secondKey = holidays[i][j].key;
+
+      const firstDateStr =
+        wrathDates[i][j].date === ""
+          ? wrathDates[i][j].date
+          : wrathDates[i][j].date.toLocaleDateString();
+      const secondDateStr =
+        holidays[i][j].date === ""
+          ? holidays[i][j].date
+          : holidays[i][j].date.toLocaleDateString();
+
+      expect(firstKey).toEqual(secondKey);
+      expect(firstDateStr).toEqual(secondDateStr);
+    }
+  }
+});
diff --git a/__tests__/wotlk-dates.test.js b/__tests__/wotlk-dates.test.js
diff --git a/helpers/date-helper.js b/helpers/date-helper.js
@@ -1,3 +1,89 @@
+export const formatDate = (date) => {
+  if (!date) {
+    return "";
+  }
+
+  return date.toLocaleDateString(navigator.language);
+};
+
+export const isPast = (holidayDate) => {
+  if (!holidayDate) {
+    return false;
+  }
+  // Holiday lasts ~4 days.
+  const holidayEnd = new Date(holidayDate);
+  holidayEnd.setDate(holidayEnd.getDate() + 4);
+  const today = new Date();
+  today.setHours(0, 0, 1, 0); // One second past midnight
+  return holidayEnd < today;
+};
+
+export const isHoliday = (holidayDate) => {
+  if (!holidayDate) {
+    return false;
+  }
+  const ends = new Date(holidayDate);
+  ends.setDate(ends.getDate() + 3);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return today >= holidayDate && today <= ends;
+};
+
+export const getClassicHolidays = (
+  year,
+  warsongEpoch,
+  arathiEpoch,
+  alteracEpoch,
+  start
+) => {
+  let i = 0;
+  const dates = [];
+  while (start.getFullYear() <= year) {
+    const row = [
+      {
+        key: "warsong",
+        date: "",
+      },
+      {
+        key: "arathi",
+        date: "",
+      },
+      {
+        key: "alterac",
+        date: "",
+      },
+    ];
+    const warsongDate = new Date(warsongEpoch);
+    warsongDate.setDate(warsongDate.getDate() + 28 * i);
+    const arathiDate = new Date(arathiEpoch);
+    arathiDate.setDate(arathiDate.getDate() + 28 * i);
+    const alteracDate = new Date(alteracEpoch);
+    alteracDate.setDate(alteracDate.getDate() + 28 * i);
+
+    let added = false;
+    if (warsongDate.getFullYear() === year) {
+      row[0].date = warsongDate;
+      added = true;
+    }
+    if (arathiDate.getFullYear() === year) {
+      row[1].date = arathiDate;
+      added = true;
+    }
+    if (alteracDate.getFullYear() === year) {
+      row[2].date = alteracDate;
+      added = true;
+    }
+
+    if (added) {
+      dates.push(row);
+    }
+    start.setDate(start.getDate() + 28);
+    i++;
+  }
+
+  return dates;
+};
+
 export const getWOTLKHolidays = (year) => {
   const arathiEpoch = new Date(2022, 8, 30);
   const strandEpoch = new Date(2022, 9, 7);

diff --git a/jest.config.json b/jest.config.json
@@ -0,0 +1,3 @@
+{
+  "testEnvironment": "jsdom"
+}
diff --git a/main.js b/main.js
@@ -1,92 +1,14 @@
 import Alpine from "alpinejs";
-import { getWOTLKHolidays } from "./helpers/date-helper.js";
 
-window.Alpine = Alpine;
-
-function getClassicHolidays(
-  year,
-  warsongEpoch,
-  arathiEpoch,
-  alteracEpoch,
-  start
-) {
-  let i = 0;
-  const dates = [];
-  while (start.getFullYear() <= year) {
-    const row = [
-      {
-        key: "warsong",
-        date: "",
-      },
-      {
-        key: "arathi",
-        date: "",
-      },
-      {
-        key: "alterac",
-        date: "",
-      },
-    ];
-    const warsongDate = new Date(warsongEpoch);
-    warsongDate.setDate(warsongDate.getDate() + 28 * i);
-    const arathiDate = new Date(arathiEpoch);
-    arathiDate.setDate(arathiDate.getDate() + 28 * i);
-    const alteracDate = new Date(alteracEpoch);
-    alteracDate.setDate(alteracDate.getDate() + 28 * i);
-
-    let added = false;
-    if (warsongDate.getFullYear() === year) {
-      row[0].date = warsongDate;
-      added = true;
-    }
-    if (arathiDate.getFullYear() === year) {
-      row[1].date = arathiDate;
-      added = true;
-    }
-    if (alteracDate.getFullYear() === year) {
-      row[2].date = alteracDate;
-      added = true;
-    }
-
-    if (added) {
-      dates.push(row);
-    }
-    start.setDate(start.getDate() + 28);
-    i++;
-  }
-
-  return dates;
-}
+import {
+  formatDate,
+  getClassicHolidays,
+  getWOTLKHolidays,
+  isHoliday,
+  isPast,
+} from "./helpers/date-helper.js";
 
-function formatDate(date) {
-  if (!date) {
-    return "";
-  }
-  return date.toLocaleDateString();
-}
-
-function isPast(holidayDate) {
-  if (!holidayDate) {
-    return false;
-  }
-  // Holiday lasts ~4 days.
-  const holidayEnd = new Date(holidayDate);
-  holidayEnd.setDate(holidayEnd.getDate() + 4);
-  const today = new Date();
-  today.setHours(0, 0, 1, 0); // One second past midnight
-  return holidayEnd < today;
-}
-
-function isHoliday(holidayDate) {
-  if (!holidayDate) {
-    return false;
-  }
-  const ends = new Date(holidayDate);
-  ends.setDate(ends.getDate() + 3);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  return today >= holidayDate && today <= ends;
-}
+window.Alpine = Alpine;
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("classicEraHolidays", () => ({
@@ -145,4 +67,5 @@ document.addEventListener("alpine:init", () => {
     isHoliday,
   }));
 });
+
 Alpine.start();