add test for phoenixframework#3047

test/e2e/test_helper.exs

@@ -68,6 +68,14 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
       live "/3040", Phoenix.LiveViewTest.E2E.Issue3040Live
     end
   end
+
+  # these routes use a custom layout and therefore cannot be in the live_session
+  scope "/issues" do
+    pipe_through(:browser)
+
+    live "/3047/a", Phoenix.LiveViewTest.E2E.Issue3047ALive
+    live "/3047/b", Phoenix.LiveViewTest.E2E.Issue3047BLive
+  end
 end
 
 defmodule Phoenix.LiveViewTest.E2E.Endpoint do

test/e2e/tests/issues/3047.spec.js

@@ -0,0 +1,31 @@
+const { test, expect } = require("@playwright/test");
+const { syncLV } = require("../../utils");
+
+const listItems = async (page) => page.locator('[phx-update="stream"] > span').evaluateAll(list => list.map(el => el.id));
+
+test("streams are not cleared in sticky live views", async ({ page }) => {
+  await page.goto("/issues/3047/a");
+  await syncLV(page);
+  await expect(page.locator("#page")).toContainText("Page A");
+
+  await expect(await listItems(page)).toEqual([
+    "items-1", "items-2", "items-3", "items-4", "items-5",
+    "items-6", "items-7", "items-8", "items-9", "items-10"
+  ]);
+
+  await page.getByRole("button", { name: "Reset" }).click();
+  await expect(await listItems(page)).toEqual([
+    "items-5", "items-6", "items-7", "items-8", "items-9", "items-10",
+    "items-11", "items-12", "items-13", "items-14", "items-15"
+  ]);
+
+  await page.getByRole("link", { name: "Page B" }).click();
+  await syncLV(page);
+
+  // stream items should still be visible
+  await expect(page.locator("#page")).toContainText("Page B");
+  await expect(await listItems(page)).toEqual([
+    "items-5", "items-6", "items-7", "items-8", "items-9", "items-10",
+    "items-11", "items-12", "items-13", "items-14", "items-15"
+  ]);
+});

test/support/e2e/issues/issue_3047.ex

@@ -0,0 +1,75 @@
+defmodule Phoenix.LiveViewTest.E2E.Issue3047ALive do
+  use Phoenix.LiveView, layout: {__MODULE__, :live}
+
+  def render("live.html", assigns) do
+    ~H"""
+    <%= apply(Phoenix.LiveViewTest.E2E.Layout, :render, ["live.html", Map.put(assigns, :inner_content, [])]) %>
+
+    <div class="flex flex-col items-center justify-center">
+      <div class="flex flex-row gap-3">
+        <.link class="border rounded bg-blue-700 w-fit px-2 text-white" navigate={"/issues/3047/a"}>
+          Page A
+        </.link>
+        <.link class="border rounded bg-blue-700 w-fit px-2 text-white" navigate={"/issues/3047/b"}>
+          Page B
+        </.link>
+      </div>
+
+      <%= @inner_content %>
+
+      <%= live_render(@socket, Phoenix.LiveViewTest.E2E.Issue3047.Sticky, id: "test", sticky: true) %>
+    </div>
+    """
+  end
+
+  def render(assigns) do
+    ~H"""
+    <span id="page">Page A</span>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.Issue3047BLive do
+  use Phoenix.LiveView, layout: {Phoenix.LiveViewTest.E2E.Issue3047ALive, :live}
+
+  def render(assigns) do
+    ~H"""
+    <span id="page">Page B</span>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.Issue3047.Sticky do
+  use Phoenix.LiveView
+
+  def mount(_params, _session, socket) do
+    items =
+      Enum.map(1..10, fn x ->
+        %{id: x, name: "item-#{x}"}
+      end)
+
+    {:ok, socket |> stream(:items, items), layout: false}
+  end
+
+  def handle_event("reset", _, socket) do
+    items =
+      Enum.map(5..15, fn x ->
+        %{id: x, name: "item-#{x}"}
+      end)
+
+    {:noreply, socket |> stream(:items, items, reset: true)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div style="border: 2px solid black;">
+      <h1>This is the sticky liveview</h1>
+      <div id="items" phx-update="stream" style="display: flex; flex-direction: column; gap: 4px;">
+        <span :for={{dom_id, item} <- @streams.items} id={dom_id}><%= item.name %></span>
+      </div>
+
+      <button phx-click="reset">Reset</button>
+    </div>
+    """
+  end
+end