update js dependencies (#3849)

* update js dependencies

* fix flaky test

Author: SteffenDE

.github/workflows/ci.yml

@@ -169,7 +169,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.51.1-jammy
+      image: mcr.microsoft.com/playwright:v1.53.0-jammy
     env:
       ImageOS: ubuntu22
       HOME: /root

assets/js/phoenix_live_view/browser.js

@@ -79,11 +79,17 @@ const Browser = {
     document.cookie = `${name}=; max-age=-1; path=/`;
   },
 
-  redirect(toURL, flash) {
+  redirect(
+    toURL,
+    flash,
+    navigate = (url) => {
+      window.location.href = url;
+    },
+  ) {
     if (flash) {
       this.setCookie("__phoenix_flash__", flash, 60);
     }
-    window.location.href = toURL;
+    navigate(toURL);
   },
 
   localKey(namespace, subkey) {

assets/test/browser_test.ts

@@ -30,59 +30,22 @@ describe("Browser", () => {
   });
 
   describe("redirect", () => {
-    let originalLocation: Location;
-    let mockHrefSetter: jest.Mock;
-    let currentHref: string;
-
-    beforeAll(() => {
-      originalLocation = window.location;
-    });
-
-    beforeEach(() => {
-      currentHref = "https://example.com"; // Initial mocked URL
-      mockHrefSetter = jest.fn((newHref: string) => {
-        currentHref = newHref;
-      });
-
-      Object.defineProperty(window, "location", {
-        writable: true,
-        configurable: true,
-        value: {
-          get href() {
-            return currentHref;
-          },
-          set href(url: string) {
-            mockHrefSetter(url);
-          },
-        },
-      });
-    });
-
-    afterAll(() => {
-      // Restore the original window.location object
-      Object.defineProperty(window, "location", {
-        writable: true,
-        configurable: true,
-        value: originalLocation,
-      });
-    });
-
     test("redirects to a new URL", () => {
+      const navigate = jest.fn();
       const targetUrl = "https://phoenixframework.com";
-      Browser.redirect(targetUrl);
-      expect(mockHrefSetter).toHaveBeenCalledWith(targetUrl);
-      expect(window.location.href).toEqual(targetUrl);
+      Browser.redirect(targetUrl, null, navigate);
+      expect(navigate).toHaveBeenCalledWith(targetUrl);
     });
 
     test("sets a flash cookie before redirecting", () => {
+      const navigate = jest.fn();
       const targetUrl = "https://phoenixframework.com";
       const flashMessage = "mango";
-      Browser.redirect(targetUrl, flashMessage);
+      Browser.redirect(targetUrl, flashMessage, navigate);
 
       expect(document.cookie).toContain("__phoenix_flash__");
       expect(document.cookie).toContain(flashMessage);
-      expect(mockHrefSetter).toHaveBeenCalledWith(targetUrl);
-      expect(window.location.href).toEqual(targetUrl);
+      expect(navigate).toHaveBeenCalledWith(targetUrl);
     });
   });
 });

assets/test/globals.d.ts

@@ -1,6 +1,4 @@
 declare global {
-  function setStartSystemTime(): void;
-  function advanceTimersToNextFrame(): void;
   let LV_VSN: string;
 }
 

assets/test/js_test.ts

@@ -22,7 +22,6 @@ describe("JS", () => {
   beforeEach(() => {
     global.document.body.innerHTML = "";
     jest.useFakeTimers();
-    setStartSystemTime();
   });
 
   afterEach(() => {
@@ -301,27 +300,27 @@ describe("JS", () => {
       JS.exec(event, "click", click.getAttribute("phx-click"), view, click);
       expect(hideStartCalled).toBe(true);
       // first tick: waiting for start classes to be set
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-out-start")).toBe(true);
       expect(modal.classList.contains("fade-out")).toBe(false);
       // second tick: waiting for out classes to be set
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-out-start")).toBe(true);
       expect(modal.classList.contains("fade-out")).toBe(true);
       // third tick: waiting for outEndClasses
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-out-start")).toBe(false);
       expect(modal.classList.contains("fade-out")).toBe(true);
       expect(modal.classList.contains("fade-out-end")).toBe(true);
       // wait for onEnd
       jest.runAllTimers();
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       // fifth tick: display: none
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(hideEndCalled).toBe(true);
       expect(modal.style.display).toEqual("none");
       // sixth tick, removed end classes
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-out-start")).toBe(false);
       expect(modal.classList.contains("fade-out")).toBe(false);
       expect(modal.classList.contains("fade-out-end")).toBe(false);
@@ -330,24 +329,24 @@ describe("JS", () => {
       JS.exec(event, "click", click.getAttribute("phx-click"), view, click);
       expect(showStartCalled).toBe(true);
       // first tick: waiting for start classes to be set
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-in-start")).toBe(true);
       expect(modal.classList.contains("fade-in")).toBe(false);
       expect(modal.style.display).toEqual("none");
       // second tick: waiting for in classes to be set
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-in-start")).toBe(true);
       expect(modal.classList.contains("fade-in")).toBe(true);
       expect(modal.classList.contains("fade-in-end")).toBe(false);
       expect(modal.style.display).toEqual("block");
       // third tick: waiting for inEndClasses
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(modal.classList.contains("fade-in-start")).toBe(false);
       expect(modal.classList.contains("fade-in")).toBe(true);
       expect(modal.classList.contains("fade-in-end")).toBe(true);
       // wait for onEnd
       jest.runAllTimers();
-      advanceTimersToNextFrame();
+      jest.advanceTimersToNextFrame();
       expect(showEndCalled).toBe(true);
       // sixth tick, removed end classes
       expect(modal.classList.contains("fade-in-start")).toBe(false);

jest.config.js

@@ -3,7 +3,7 @@
  * https://jestjs.io/docs/configuration
  */
 
-import {default as packageJson} from "./package.json" with {type: "json"}
+import { default as packageJson } from "./package.json" with { type: "json" };
 
 export default {
   // All imported modules in your tests should be mocked automatically
@@ -28,10 +28,7 @@ export default {
   // coverageDirectory: undefined,
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: [
-    "/node_modules/",
-    "/assets/test/"
-  ],
+  coveragePathIgnorePatterns: ["/node_modules/", "/assets/test/"],
 
   collectCoverage: true,
 
@@ -85,7 +82,7 @@ export default {
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
     "^phoenix_live_view$": "<rootDir>/assets/js/phoenix_live_view/index.ts",
-    "^phoenix_live_view/(.*)$": "<rootDir>/assets/js/phoenix_live_view/$1"
+    "^phoenix_live_view/(.*)$": "<rootDir>/assets/js/phoenix_live_view/$1",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -106,15 +103,14 @@ export default {
   // Use this configuration option to add custom reporters to Jest
   reporters: [
     "default",
-    ["jest-monocart-coverage", {
-      name: "Phoenix LiveView JS Unit Coverage",
-      reports: [
-        ["raw", {outputDir: "./raw"}],
-        ["v8"],
-        ["console-summary"]
-      ],
-      outputDir: "./coverage"
-    }]
+    [
+      "jest-monocart-coverage",
+      {
+        name: "Phoenix LiveView JS Unit Coverage",
+        reports: [["raw", { outputDir: "./raw" }], ["v8"], ["console-summary"]],
+        outputDir: "./coverage",
+      },
+    ],
   ],
 
   // Automatically reset mock state between every test
@@ -141,14 +137,12 @@ export default {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: [
-    "<rootDir>/setupTests.js"
-  ],
+  setupFiles: ["<rootDir>/setupTests.js"],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  setupFilesAfterEnv: [
-    "<rootDir>/setupTestsAfterEnv.js"
-  ],
+  // setupFilesAfterEnv: [
+  //   "<rootDir>/setupTestsAfterEnv.js"
+  // ],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,
@@ -211,4 +205,4 @@ export default {
 
   // Whether to use watchman for file crawling
   // watchman: true,
-}
+};