From c14f72490731905158aa02fdc6c528a7a285a67e Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Thu, 28 Mar 2024 10:55:17 -0700
Subject: [PATCH] Refactor test so it wont fail when the UTC day changes

---
 package.json                               |  3 ++-
 tests/e2e/specs/DatePickerTimezone.spec.js | 25 ++++++++++------------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 6231426ab..c27c2eee9 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "run-cypress": "TZ=UTC nyc cypress run",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "serve": "npm run dev"
   },
   "main": "./dist/vue-form-builder.umd.js",
   "module": "./dist/vue-form-builder.es.js",
diff --git a/tests/e2e/specs/DatePickerTimezone.spec.js b/tests/e2e/specs/DatePickerTimezone.spec.js
index 54317fd17..db0e5cc83 100644
--- a/tests/e2e/specs/DatePickerTimezone.spec.js
+++ b/tests/e2e/specs/DatePickerTimezone.spec.js
@@ -1,15 +1,16 @@
 /* eslint-disable no-param-reassign */
-import moment from "moment-timezone";
-
-const timezoneTest = "America/Los_Angeles";
-moment.tz.setDefault(timezoneTest);
 
 describe("Date Picker", () => {
   beforeEach(() => {
+    // Set date to midnight January 1, 2024.
+    // The timezone is UTC. We set it to UTC in package.json `TZ=UTC`
+    cy.clock(new Date(2024, 0, 0, 0, 0, 0), ['Date']);
     cy.visit("/");
     cy.openAcordeon("collapse-1");
+
+    // Set the User's timezone to Los Angeles. This is what DatePicker will use
     cy.window().then((win) => {
-      win.ProcessMaker.user.timezone = timezoneTest;
+      win.ProcessMaker.user.timezone = "America/Los_Angeles";
     });
   });
 
@@ -24,9 +25,11 @@ describe("Date Picker", () => {
     cy.get(
       "[data-cy=preview-content] [data-cy='screen-field-form_date_picker_1'] input"
     ).click();
+    // Choose today. In Los Angeles, that would be December 31, 2023
     cy.get(
       "[data-cy=preview-content] [data-cy='screen-field-form_date_picker_1'] .selectable.today"
     ).click();
+    // Set time to 8:15 PM Los Angeles time
     cy.get(
       "[data-cy=preview-content] [data-cy='screen-field-form_date_picker_1'] .vdpHoursInput"
     ).type("8");
@@ -36,21 +39,15 @@ describe("Date Picker", () => {
     cy.get(
       "[data-cy=preview-content] [data-cy='screen-field-form_date_picker_1'] .vdp12HourToggleBtn"
     ).then((toggle) => {
+      // Change to AM/PM - Time is now 8:15 PM, Los Angeles time
       if (toggle.is(".vdp12HourToggleBtn")) {
         cy.get(toggle).click();
       }
     });
 
-    cy.wait(500);
-    const todaysDate = moment();
-    const todayDateChanged = `${moment
-      .tz(todaysDate, "America/Los_Angeles")
-      .format("YYYY-MM-DD")}T20:15:00`;
-    const today = moment(todayDateChanged).utc();
-    cy.log("today", today.toISOString());
-
     cy.assertPreviewData({
-      form_date_picker_1: moment(today).toISOString()
+      // 8:15 PM on December 31, 2023 in Los Angeles is 04:15 (4:15am) the next day (January 1, 2024) in UTC
+      form_date_picker_1: "2024-01-01T04:15:00.000Z"
     });
   });
 });