Extract, test and refactor periodPopoverText function (#24193)

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/CurrentPicker/CurrentPicker.tsx

 import React from "react";
-import { t } from "ttag";
-import moment from "moment";
 
+import { periodPopoverText } from "./periodPopoverText";
 import { formatBucketing } from "metabase/lib/query_time";
 import TippyPopover from "metabase/components/Popover/TippyPopover";
 import { DATE_PERIODS } from "../RelativeDatePicker";
@@ -19,31 +18,6 @@ type CurrentPickerProps = {
   onCommit: (filter?: any[]) => void;
 };
 
-const periodPopoverText = (period: string) => {
-  const now = moment();
-  let start: string, end: string;
-  switch (period) {
-    case "day":
-      return t`Right now, this is ${now.format("ddd, MMM D")}`;
-    case "week":
-      start = now.startOf("week").format("ddd, MMM D");
-      end = now.endOf("week").format("ddd, MMM D");
-      return t`Right now, this is ${start} - ${end}`;
-    case "month":
-      start = now.startOf("month").format("ddd, MMM D");
-      end = now.endOf("month").format("ddd, MMM D");
-      return t`Right now, this is ${start} - ${end}`;
-    case "quarter":
-      start = now.startOf("quarter").format("ddd, MMM D");
-      end = now.endOf("quarter").format("ddd, MMM D");
-      return t`Right now, this is ${start} - ${end}`;
-    case "year":
-      start = now.startOf("year").format("MMM D, YYYY");
-      end = now.endOf("year").format("MMM D, YYYY");
-      return t`Right now, this is ${start} - ${end}`;
-  }
-};
-
 export default function CurrentPicker(props: CurrentPickerProps) {
   const {
     className,

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/CurrentPicker/periodPopoverText.ts

+import { t } from "ttag";
+import moment, { unitOfTime } from "moment-timezone";
+
+const buildStartAndEndDates = (period: unitOfTime.StartOf, format: string) => {
+  const now = moment();
+  const start = now.startOf(period).format(format);
+  const end = now.endOf(period).format(format);
+
+  return [start, end];
+};
+
+export const periodPopoverText = (period: string) => {
+  const format = period === "year" ? "MMM D, YYYY" : "ddd, MMM D";
+
+  if (period === "day") {
+    return t`Right now, this is ${moment().format(format)}`;
+  }
+
+  const [start, end] = buildStartAndEndDates(
+    period as unitOfTime.StartOf,
+    format,
+  );
+
+  return t`Right now, this is ${start} - ${end}`;
+};

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/CurrentPicker/periodPopoverText.unit.spec.js

+import { periodPopoverText } from "./periodPopoverText";
+
+describe("periodPopoverText", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date(2020, 4, 13));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("builds date for `day`", () => {
+    const text = periodPopoverText("day");
+    const expectedText = "Right now, this is Wed, May 13";
+    expect(text).toBe(expectedText);
+  });
+
+  it("builds dates for `week`", () => {
+    const text = periodPopoverText("week");
+    const expectedText = "Right now, this is Sun, May 10 - Sat, May 16";
+    expect(text).toBe(expectedText);
+  });
+
+  it("builds dates for `month`", () => {
+    const text = periodPopoverText("month");
+    const expectedText = "Right now, this is Fri, May 1 - Sun, May 31";
+    expect(text).toBe(expectedText);
+  });
+
+  it("builds dates for `quarter`", () => {
+    const text = periodPopoverText("quarter");
+    const expectedText = "Right now, this is Wed, Apr 1 - Tue, Jun 30";
+    expect(text).toBe(expectedText);
+  });
+
+  it("builds dates for `year`", () => {
+    const text = periodPopoverText("year");
+    const expectedText = "Right now, this is Jan 1, 2020 - Dec 31, 2020";
+    expect(text).toBe(expectedText);
+  });
+});