From 39cdbbba7d6d403a91cb671135125cd5e419b8ab Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Thu, 25 Jan 2024 23:34:32 +0100
Subject: [PATCH] Add e2e tests for live navigation and guards

---
 test/e2e/test_helper.exs          |  30 ++-
 test/e2e/tests/navigation.spec.js | 214 ++++++++++++++++++++++
 test/support/e2e/navigation.ex    | 292 ++++++++++++++++++++++++++++++
 3 files changed, 533 insertions(+), 3 deletions(-)
 create mode 100644 test/e2e/tests/navigation.spec.js
 create mode 100644 test/support/e2e/navigation.ex

diff --git a/test/e2e/test_helper.exs b/test/e2e/test_helper.exs
index 4eb047fc3..025c5a61f 100644
--- a/test/e2e/test_helper.exs
+++ b/test/e2e/test_helper.exs
@@ -26,10 +26,12 @@ defmodule Phoenix.LiveViewTest.E2E.Layout do
 
   def render("live.html", assigns) do
     ~H"""
+    <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
     <script src="/assets/phoenix/phoenix.min.js"></script>
     <script src="/assets/phoenix_live_view/phoenix_live_view.js"></script>
     <script>
-      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
+      let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket, {params: {_csrf_token: csrfToken}})
       liveSocket.connect()
     </script>
     <style>
@@ -45,7 +47,10 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
   import Phoenix.LiveView.Router
 
   pipeline :browser do
-    plug(:accepts, ["html"])
+    plug :accepts, ["html"]
+    plug :fetch_session
+    plug :fetch_live_flash
+    plug :protect_from_forgery
   end
 
   live_session :default, layout: {Phoenix.LiveViewTest.E2E.Layout, :live} do
@@ -71,6 +76,17 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
     end
   end
 
+  live_session :navigation, layout: {Phoenix.LiveViewTest.E2E.Navigation.Layout, :live} do
+    scope "/navigation" do
+      pipe_through(:browser)
+
+      live "/a", Phoenix.LiveViewTest.E2E.Navigation.ALive
+      live "/b", Phoenix.LiveViewTest.E2E.Navigation.BLive
+      live "/c", Phoenix.LiveViewTest.E2E.Navigation.CLive, :index
+      live "/c/:id", Phoenix.LiveViewTest.E2E.Navigation.CLive, :show
+    end
+  end
+
   # these routes use a custom layout and therefore cannot be in the live_session
   scope "/issues" do
     pipe_through(:browser)
@@ -83,7 +99,14 @@ end
 defmodule Phoenix.LiveViewTest.E2E.Endpoint do
   use Phoenix.Endpoint, otp_app: :phoenix_live_view
 
-  socket("/live", Phoenix.LiveView.Socket)
+  @session_options [
+    store: :cookie,
+    key: "_lv_e2e_key",
+    signing_salt: "1gk/d8ms",
+    same_site: "Lax"
+  ]
+
+  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
 
   plug Plug.Static, from: {:phoenix, "priv/static"}, at: "/assets/phoenix"
   plug Plug.Static, from: {:phoenix_live_view, "priv/static"}, at: "/assets/phoenix_live_view"
@@ -91,6 +114,7 @@ defmodule Phoenix.LiveViewTest.E2E.Endpoint do
 
   plug :health_check
 
+  plug Plug.Session, @session_options
   plug Phoenix.LiveViewTest.E2E.Router
 
   defp health_check(%{request_path: "/health"} = conn, _opts) do
diff --git a/test/e2e/tests/navigation.spec.js b/test/e2e/tests/navigation.spec.js
new file mode 100644
index 000000000..cf919928a
--- /dev/null
+++ b/test/e2e/tests/navigation.spec.js
@@ -0,0 +1,214 @@
+const { test, expect, request } = require("@playwright/test");
+const { syncLV } = require("../utils");
+
+let webSocketEvents = [];
+let networkEvents = [];
+
+test.beforeEach(async ({ page }) => {
+  page.on("request", request => networkEvents.push({ method: request.method(), url: request.url() }));
+
+  page.on("websocket", ws => {
+    ws.on("framesent", event => webSocketEvents.push({ type: "sent", payload: event.payload }));
+    ws.on("framereceived", event => webSocketEvents.push({ type: "received", payload: event.payload }));
+    ws.on("close", () => webSocketEvents.push({ type: "close" }));
+  });
+});
+
+test("can navigate between LiveViews in the same live session over websocket", async ({ page }) => {
+  await page.goto("/navigation/a");
+  await syncLV(page);
+
+  await expect(networkEvents).toEqual([
+    { method: "GET", url: "http://localhost:4000/navigation/a" },
+    { method: "GET", url: "http://localhost:4000/assets/phoenix/phoenix.min.js" },
+    { method: "GET", url: "http://localhost:4000/assets/phoenix_live_view/phoenix_live_view.js" },
+  ]);
+
+  await expect(webSocketEvents).toEqual([
+    expect.objectContaining({ type: "sent", payload: expect.stringContaining("phx_join") }),
+    expect.objectContaining({ type: "received", payload: expect.stringContaining("phx_reply") }),
+  ]);
+
+  // clear events
+  networkEvents = [];
+  webSocketEvents = [];
+
+  // patch the LV
+  await page.getByRole("link", { name: "Patch this LiveView" }).click();
+  await syncLV(page);
+  await expect(networkEvents).toEqual([]);
+  await expect(webSocketEvents).toEqual([
+    expect.objectContaining({ type: "sent", payload: expect.stringContaining("live_patch") }),
+    expect.objectContaining({ type: "received", payload: expect.stringContaining("phx_reply") }),
+  ]);
+
+  webSocketEvents = [];
+
+  // live navigation to other LV
+  await page.getByRole("link", { name: "LiveView B" }).click();
+  await syncLV(page);
+
+  await expect(networkEvents).toEqual([]);
+  // we don't assert the order of the events here, because they are not deterministic
+  await expect(webSocketEvents).toEqual(expect.arrayContaining([
+    { type: "sent", payload: expect.stringContaining("phx_leave") },
+    { type: "sent", payload: expect.stringContaining("phx_join") },
+    { type: "received", payload: expect.stringContaining("phx_close") },
+    { type: "received", payload: expect.stringContaining("phx_reply") },
+    { type: "received", payload: expect.stringContaining("phx_reply") },
+  ]));
+});
+
+test("falls back to http navigation when navigating between live sessions", async ({ page, browserName }) => {
+  await page.goto("/navigation/a");
+  await syncLV(page);
+
+  networkEvents = [];
+  webSocketEvents = [];
+
+  // live navigation to page in another live session
+  await page.getByRole("link", { name: "LiveView (other session)" }).click();
+  await syncLV(page);
+
+  await expect(networkEvents).toEqual(expect.arrayContaining([{ method: "GET", url: "http://localhost:4000/stream" }]));
+  await expect(webSocketEvents).toEqual(expect.arrayContaining([
+    { type: "sent", payload: expect.stringContaining("phx_leave") },
+    { type: "sent", payload: expect.stringContaining("phx_join") },
+    { type: "received", payload: expect.stringContaining("phx_close") },
+    { type: "received", payload: expect.stringContaining("phx_reply") },
+    { type: "received", payload: expect.stringMatching(/error.*unauthorized/) },
+    { type: "sent", payload: expect.stringContaining("phx_join") },
+    { type: "received", payload: expect.stringContaining("phx_reply") },
+  ].concat(browserName === "webkit" ? [] : [{ type: "close" }])));
+  // ^ webkit doesn't always seem to emit websocket close events
+});
+
+test("can prevent navigation with navigation guard", async ({ page }) => {
+  await page.goto("/navigation/a");
+  await syncLV(page);
+
+  await page.getByRole("link", { name: "LiveView B" }).click();
+  await syncLV(page);
+
+  await expect(page.locator("form")).toBeVisible();
+  await page.locator("input").fill("my text");
+  await syncLV(page);
+
+  networkEvents = [];
+  webSocketEvents = [];
+
+  // we expect a confirmation dialog
+  page.once("dialog", dialog => dialog.dismiss());
+  await page.getByRole("link", { name: "LiveView A" }).click();
+
+  // we should not have navigated
+  await expect(page).toHaveURL("/navigation/b");
+  await expect(webSocketEvents).toEqual([]);
+  await expect(page.locator("input")).toHaveValue("my text");
+
+  // now we accept the dialog
+  page.once("dialog", dialog => dialog.accept());
+  await page.getByRole("link", { name: "LiveView A" }).click();
+  await syncLV(page);
+
+  // navigation should succeed
+  await expect(page).toHaveURL("/navigation/a");
+  await expect(networkEvents).toEqual([]);
+});
+
+test("history triggers navigation guard", async ({ page }) => {
+  await page.goto("/navigation/a");
+  await syncLV(page);
+
+  await page.getByRole("link", { name: "LiveView B" }).click();
+  await syncLV(page);
+
+  await expect(page.locator("form")).toBeVisible();
+  await page.locator("input").fill("my text");
+  await syncLV(page);
+
+  networkEvents = [];
+  webSocketEvents = [];
+
+  // we expect a confirmation dialog
+  page.once("dialog", dialog => dialog.dismiss());
+  await page.goBack();
+
+  // we should not have navigated
+  await expect(page).toHaveURL("/navigation/b");
+  await expect(webSocketEvents).toEqual([]);
+  await expect(page.locator("input")).toHaveValue("my text");
+
+  // when we submitted the form navigation should succeed
+  await page.getByRole("button", { name: "Submit" }).click();
+  await syncLV(page);
+
+  await page.goBack();
+  await syncLV(page);
+  await expect(page).toHaveURL("/navigation/a");
+  await expect(networkEvents).toEqual([]);
+});
+
+test("navigation guard is triggered before and after navigation", async ({ page }) => {
+  await page.goto("/navigation/a");
+  await syncLV(page);
+
+  await page.getByRole("link", { name: "LiveView B" }).click();
+  await syncLV(page);
+
+  const result = await page.evaluate(() => JSON.stringify(window.navigationEvents));
+  await expect(JSON.parse(result)).toEqual([
+    { type: "before", to: "http://localhost:4000/navigation/b", from: "http://localhost:4000/navigation/a" },
+    { type: "after", to: "http://localhost:4000/navigation/b", from: "http://localhost:4000/navigation/a" },
+  ])
+});
+
+test("restores scroll position after navigation", async ({ page }) => {
+  await page.goto("/navigation/c");
+  await syncLV(page);
+
+  await expect(page.locator("#items")).toContainText("Item 42");
+
+  await expect(await page.evaluate(() => document.body.scrollTop)).toEqual(0);
+  await page.evaluate(() => window.scrollTo(0, 1200));
+  // LiveView only updates the scroll position every 100ms
+  await page.waitForTimeout(150);
+
+  await page.getByRole("link", { name: "Item 42" }).click();
+  await syncLV(page);
+
+  await page.goBack();
+  await syncLV(page);
+
+  // scroll position is restored
+  await expect.poll(
+    async () => {
+      return await page.evaluate(() => document.body.scrollTop);
+    },
+    { message: 'scrollTop not restored', timeout: 5000 }
+  ).toBe(1200);
+});
+
+test("restores scroll position on custom container after navigation", async ({ page }) => {
+  await page.goto("/navigation/c?container=1");
+  await syncLV(page);
+
+  await expect(page.locator("#items")).toContainText("Item 42");
+
+  await expect(await page.locator("#my-scroll-container").evaluate((el) => el.scrollTop)).toEqual(0);
+  await page.locator("#my-scroll-container").evaluate((el) => el.scrollTop = 1000);
+
+  await page.getByRole("link", { name: "Item 42" }).click();
+  await syncLV(page);
+
+  await page.goBack();
+  await syncLV(page);
+
+  // scroll position is restored
+  await expect.poll(
+    async () => {
+      return await page.locator("#my-scroll-container").evaluate((el) => el.scrollTop)
+    },
+    { message: 'scrollTop not restored', timeout: 5000 }
+  ).toBe(1000);
+});
diff --git a/test/support/e2e/navigation.ex b/test/support/e2e/navigation.ex
new file mode 100644
index 000000000..25e033fb2
--- /dev/null
+++ b/test/support/e2e/navigation.ex
@@ -0,0 +1,292 @@
+defmodule Phoenix.LiveViewTest.E2E.Navigation.Layout do
+  use Phoenix.LiveView
+
+  alias Phoenix.LiveView.JS
+
+  def render("live.html", assigns) do
+    ~H"""
+    <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
+    <script src="/assets/phoenix/phoenix.min.js">
+    </script>
+    <script src="/assets/phoenix_live_view/phoenix_live_view.js">
+    </script>
+    <script>
+      window.navigationEvents = []
+      let customScrollPosition = null;
+
+      let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket, {
+        params: {_csrf_token: csrfToken},
+        navigation: {
+          async beforeEach(to, from) {
+            console.log(to, from)
+            window.navigationEvents.push({ type: "before", to, from });
+
+            // remember custom scroll position
+            if (document.querySelector("#my-scroll-container")) {
+              customScrollPosition = document.querySelector("#my-scroll-container").scrollTop
+            }
+
+            // prevent navigating when form submit is pending
+            if (document.querySelector("form[data-submit-pending]")) {
+              return confirm("Do you really want to leave the page?")
+            }
+
+            if(document.startViewTransition) {
+              document.startViewTransition();
+            }
+          },
+          async afterEach(to, from) {
+            window.navigationEvents.push({ type: "after", to, from });
+
+            // restore custom scroll position
+            if (document.querySelector("#my-scroll-container") && customScrollPosition) {
+              document.querySelector("#my-scroll-container").scrollTop = customScrollPosition
+            }
+          }
+        }
+      })
+      liveSocket.connect()
+
+      window.onbeforeunload = function(e) {
+        if(document.querySelector("form[data-submit-pending]")) {
+          return "Do you really want to leave the page?"
+        }
+      };
+    </script>
+
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+        font-size: 1rem;
+      }
+    </style>
+
+    <div style="display: flex; width: 100%; height: 100vh;">
+      <div style="position: fixed; height: 100vh; background-color: #f8fafc; border-right: 1px solid; width: 20rem; display: flex; flex-direction: column; padding: 1rem; gap: 0.5rem;">
+        <h1 style="margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.75rem;">Navigation</h1>
+
+        <.link navigate="/navigation/a" style="background-color: #f1f5f9; padding: 0.5rem;">
+          LiveView A
+        </.link>
+
+        <.link navigate="/navigation/b" style="background-color: #f1f5f9; padding: 0.5rem;">
+          LiveView B
+        </.link>
+
+        <.link navigate="/navigation/c" style="background-color: #f1f5f9; padding: 0.5rem;">
+          LiveView C
+        </.link>
+
+        <.link navigate="/stream" style="background-color: #f1f5f9; padding: 0.5rem;">
+          LiveView (other session)
+        </.link>
+      </div>
+
+      <div style="margin-left: 22rem; flex: 1; padding: 2rem;">
+        <%= @inner_content %>
+      </div>
+
+      <.flash_group flash={@flash} />
+    </div>
+    """
+  end
+
+  defp flash_group(assigns) do
+    ~H"""
+    <div id="flash-group">
+      <.flash kind={:info} title="Success!" flash={@flash} />
+      <.flash kind={:error} title="Error!" flash={@flash} />
+    </div>
+    """
+  end
+
+  attr :id, :string
+  attr :flash, :map, default: %{}
+  attr :title, :string, default: nil
+  attr :kind, :atom, values: [:info, :error]
+  attr :rest, :global
+
+  slot(:inner_block, required: false)
+
+  defp flash(assigns) do
+    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
+
+    ~H"""
+    <div
+      :if={msg = render_slot(@inner_block) || @flash[to_string(@kind)]}
+      id={@id}
+      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> JS.hide(to: "##{@id}")}
+      role="alert"
+      style={"position: fixed; top: 0.5rem; right: 0.5rem; margin-right: 0.5rem; width: 20rem; z-index: 50; border-radius: 0.375rem; padding: 0.75rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); background-color: #{(@kind == :info && "#ECFDF5") || (@kind == :error && "#FEF2F2")}; color: #{(@kind == :info && "#065F46") || (@kind == :error && "#991B1B")}; ring-width: 1px; ring-color: #{(@kind == :info && "#10B981") || (@kind == :error && "#F43F5E")};"}
+      {@rest}
+    >
+      <p
+        :if={@title}
+        style="display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; line-height: 1.5;"
+      >
+        <%= @title %>
+      </p>
+      <p style="margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25;"><%= msg %></p>
+      <button
+        type="button"
+        style="position: absolute; top: 0.25rem; right: 0.25rem; padding: 0.5rem;"
+        aria-label="close"
+      >
+        x
+      </button>
+    </div>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.Navigation.ALive do
+  use Phoenix.LiveView
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    socket
+    |> assign(:param_current, nil)
+    |> then(&{:ok, &1})
+  end
+
+  @impl Phoenix.LiveView
+  def handle_params(params, _uri, socket) do
+    param = Map.get(params, "param")
+
+    socket
+    |> assign(:param_current, param)
+    |> assign(:param_next, System.unique_integer())
+    |> then(&{:noreply, &1})
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <h1>This is page A</h1>
+
+    <p>Current param: <%= @param_current %></p>
+
+    <.link
+      patch={"/navigation/a?param=#{@param_next}"}
+      style="padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: #e2e8f0; display: inline-flex; align-items: center; border-radius: 0.375rem; cursor: pointer;"
+    >
+      Patch this LiveView
+    </.link>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.Navigation.BLive do
+  use Phoenix.LiveView
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    socket
+    |> assign(:form, to_form(%{}))
+    |> assign(:form_dirty, false)
+    |> then(&{:ok, &1})
+  end
+
+  @impl Phoenix.LiveView
+  def handle_event("validate", params, socket) do
+    socket
+    |> assign(:form, to_form(params))
+    |> assign(:form_dirty, true)
+    |> then(&{:noreply, &1})
+  end
+
+  def handle_event("submit", _params, socket) do
+    socket
+    |> assign(:form, %{})
+    |> assign(:form_dirty, false)
+    |> put_flash(:info, "Submitted successfully!")
+    |> then(&{:noreply, &1})
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <h1>This is page C</h1>
+
+    <form id="my-form" data-submit-pending={@form_dirty} phx-change="validate" phx-submit="submit">
+      <label style="font-size: 0.875rem; color: #334155;">
+        Email
+      </label>
+      <input
+        type="text"
+        name="email"
+        style="height: 2.5rem; width: 12rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; padding: 1rem;"
+      />
+
+      <button style="padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: #e2e8f0; display: inline-flex; align-items: center; border-radius: 0.375rem; cursor: pointer;">
+        Submit
+      </button>
+    </form>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.Navigation.CLive do
+  use Phoenix.LiveView
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    socket
+    |> then(&{:ok, &1})
+  end
+
+  @impl Phoenix.LiveView
+  def handle_params(params, _uri, socket) do
+    socket
+    |> assign(:container, not is_nil(params["container"]))
+    |> apply_action(socket.assigns.live_action, params)
+    |> then(&{:noreply, &1})
+  end
+
+  def apply_action(socket, :index, _params) do
+    items =
+      for i <- 1..100 do
+        %{id: "item-#{i}", name: i}
+      end
+
+    stream(socket, :items, items)
+  end
+
+  def apply_action(socket, :show, %{"id" => id}) do
+    assign(socket, :id, id)
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <h1>This is page D</h1>
+
+    <div
+      :if={@live_action == :index}
+      id="my-scroll-container"
+      style={"#{if @container, do: "height: 85vh; overflow-y: scroll; "}width: 100%; border: 1px solid #e2e8f0; border-radius: 0.375rem;"}
+    >
+      <ul id="items" style="padding: 1rem; list-style: none;" phx-update="stream">
+        <%= for {id, item} <- @streams.items do %>
+          <li id={id} style="padding: 0.5rem; border-bottom: 1px solid #e2e8f0;">
+            <.link
+              patch={"/navigation/c/#{item.id}"}
+              style="display: inline-flex; align-items: center; gap: 0.5rem;"
+            >
+              Item <%= item.name %>
+            </.link>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+
+    <div :if={@live_action == :show}>
+      <p>Item <%= @id %></p>
+    </div>
+    """
+  end
+end