Task: Improve e2e tests

dev/components.ex

@@ -26,6 +26,7 @@ defmodule LiveDebuggerDev.Components do
     """
   end
 
+  attr(:id, :string, default: nil)
   attr(:title, :string, required: true)
   attr(:color, :string, default: "blue")
   attr(:class, :string, default: "")
@@ -34,7 +35,7 @@ defmodule LiveDebuggerDev.Components do
 
   def box(assigns) do
     ~H"""
-    <div>
+    <div id={@id}>
       <span class={"text-sm #{text_color(@color)}"}><%= @title %></span>
       <div class={"border-2 #{border_color(@color)} rounded-md p-8 #{@class}"}>
         <%= render_slot(@inner_block) %>

dev/live_components/conditional.ex

@@ -5,15 +5,16 @@ defmodule LiveDebuggerDev.LiveComponents.Conditional do
     {:ok, assign(socket, :show_child?, false)}
   end
 
+  attr(:id, :string, default: nil)
   slot(:inner_block)
 
   def render(assigns) do
     ~H"""
     <div>
-      <.box title="Conditional [LiveComponent]" color="orange">
+      <.box id={@id} title="Conditional [LiveComponent]" color="orange">
         <div class="flex flex-col gap-2">
           <div class="flex items-center gap-1">
-            <.button phx-click="show_child" phx-target={@myself} color="orange">
+            <.button id={@id <> "-button"} phx-click="show_child" phx-target={@myself} color="orange">
               Show
             </.button>
 

test/live_debugger/channel_dashboard_test.exs

@@ -13,7 +13,7 @@ defmodule LiveDebugger.ChannelDashboardTest do
     debugger
     |> visit("/")
     |> click(first_link())
-    |> assert_has(counter_in_assigns(text: "0"))
+    |> assert_has(assigns_entry(key: "counter", value: "0"))
     |> assert_has(traces(count: 2))
 
     # Callback traces appear in debugger
@@ -23,7 +23,7 @@ defmodule LiveDebugger.ChannelDashboardTest do
 
     debugger
     |> assert_has(traces(count: 2))
-    |> assert_has(counter_in_assigns(text: "2"))
+    |> assert_has(assigns_entry(key: "counter", value: "2"))
     |> click(toggle_tracing_button())
 
     dev_app
@@ -32,7 +32,7 @@ defmodule LiveDebugger.ChannelDashboardTest do
 
     debugger
     |> assert_has(traces(count: 6))
-    |> assert_has(counter_in_assigns(text: "4"))
+    |> assert_has(assigns_entry(key: "counter", value: "4"))
     |> click(toggle_tracing_button())
     |> click(clear_traces_button())
     |> assert_has(traces(count: 0))
@@ -57,15 +57,13 @@ defmodule LiveDebugger.ChannelDashboardTest do
 
     Process.sleep(405)
 
-    execution_time =
-      debugger
-      |> click(refresh_button())
-      |> find(traces(count: 2))
-      |> List.last()
-      |> find(css("span.text-warning-text"))
-      |> Element.text()
-
-    assert execution_time =~ ~r"^40\d ms$"
+    assert debugger
+           |> click(refresh_button())
+           |> find(traces(count: 2))
+           |> List.last()
+           |> find(css("span.text-warning-text"))
+           |> Element.text()
+           |> String.match?(~r"^40\d ms$")
 
     debugger
     |> click(toggle_tracing_button())
@@ -110,21 +108,245 @@ defmodule LiveDebugger.ChannelDashboardTest do
     end)
   end
 
+  @sessions 2
+  feature "user can change nodes using node tree and see their assigns and callback traces", %{
+    sessions: [dev_app, debugger]
+  } do
+    LiveDebugger.GenServers.CallbackTracingServer.ping!()
+
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> click(conditional_component_5_node_button())
+    |> find(css("#info"), fn info ->
+      info
+      |> assert_text("LiveComponent")
+      |> assert_text("LiveDebuggerDev.LiveComponents.Conditional")
+    end)
+    |> assert_has(assigns_entry(key: "show_child?", value: "false"))
+    |> assert_has(traces(count: 2))
+    |> click(toggle_tracing_button())
+
+    dev_app
+    |> click(button("conditional-button"))
+
+    debugger
+    |> assert_has(assigns_entry(key: "show_child?", value: "true"))
+    |> assert_has(traces(count: 4))
+    |> click(conditional_component_6_node_button())
+    |> click(conditional_component_5_node_button())
+    |> assert_has(assigns_entry(key: "show_child?", value: "true"))
+    |> assert_has(traces(count: 4))
+  end
+
+  @sessions 2
+  feature "user can filter callback traces", %{sessions: [dev_app, debugger]} do
+    LiveDebugger.GenServers.CallbackTracingServer.ping!()
+
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> assert_has(traces(count: 2))
+    |> click(toggle_tracing_button())
+
+    dev_app
+    |> click(button("send-button"))
+    |> click(button("send-button"))
+
+    debugger
+    |> assert_traces(6, [
+      "render/1",
+      "handle_info/2",
+      "render/1",
+      "handle_info/2",
+      "render/1",
+      "mount/3"
+    ])
+    |> click(toggle_tracing_button())
+    |> click(filters_button())
+    |> click(checkbox("mount"))
+    |> click(checkbox("render"))
+    |> click(css("button", text: "Apply (7)"))
+    |> assert_traces(2, [
+      "handle_info/2",
+      "handle_info/2"
+    ])
+
+    dev_app
+    |> click(button("increment-button"))
+    |> click(button("increment-button"))
+
+    debugger
+    |> click(refresh_button())
+    |> assert_traces(4, [
+      "handle_event/3",
+      "handle_event/3",
+      "handle_info/2",
+      "handle_info/2"
+    ])
+    |> click(toggle_tracing_button())
+
+    dev_app
+    |> click(button("send-button"))
+    |> click(button("send-button"))
+
+    debugger
+    |> assert_traces(6, [
+      "handle_info/2",
+      "handle_info/2",
+      "handle_event/3",
+      "handle_event/3",
+      "handle_info/2",
+      "handle_info/2"
+    ])
+    |> click(toggle_tracing_button())
+    |> click(filters_button())
+    |> click(reset_filters_button())
+    |> click(css("button", text: "Apply (9)"))
+    |> assert_traces(14, [
+      "render/1",
+      "handle_info/2",
+      "render/1",
+      "handle_info/2",
+      "render/1",
+      "handle_event/3",
+      "render/1",
+      "handle_event/3",
+      "render/1",
+      "handle_info/2",
+      "render/1",
+      "handle_info/2",
+      "render/1",
+      "mount/3"
+    ])
+  end
+
+  defp assert_traces(session, count, callback_names) do
+    session
+    |> find(traces(count: count))
+    |> Enum.zip(callback_names)
+    |> Enum.each(fn {trace, callback_name} ->
+      trace |> assert_text(callback_name)
+    end)
+
+    session
+  end
+
+  @sessions 2
+  feature "user can inspect arguments of executed callback", %{sessions: [dev_app, debugger]} do
+    LiveDebugger.GenServers.CallbackTracingServer.ping!()
+
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> click(toggle_tracing_button())
+
+    dev_app
+    |> click(button("increment-button"))
+    |> click(button("send-button"))
+
+    [render3_trace, send_trace, render2_trace, increment_trace, render1_trace, _] =
+      debugger
+      |> find(traces(count: 6))
+
+    render1_trace
+    |> click(css("summary"))
+    |> assert_has(map_entry(key: "datetime", value: "nil"))
+    |> assert_has(map_entry(key: "counter", value: "0"))
+
+    increment_trace
+    |> click(css("summary"))
+    |> assert_text("handle_event/3")
+    |> assert_text("increment")
+
+    render2_trace
+    |> click(css("summary"))
+    |> assert_has(map_entry(key: "datetime", value: "nil"))
+    |> assert_has(map_entry(key: "counter", value: "1"))
+
+    send_trace
+    |> click(css("summary"))
+    |> assert_text("handle_info/2")
+    |> assert_text(":new_datetime")
+
+    render3_trace
+    |> click(css("summary"))
+    |> assert_has(map_entry(key: "datetime", value: "~U["))
+    |> assert_has(map_entry(key: "counter", value: "1"))
+  end
+
+  @sessions 2
+  feature "when user navigates in debugged app, debugger reloads properly", %{
+    sessions: [dev_app, debugger]
+  } do
+    LiveDebugger.GenServers.CallbackTracingServer.ping!()
+
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> find(css("#info"))
+    |> assert_text("LiveDebuggerDev.LiveViews.Main")
+
+    dev_app
+    |> click(link("Side"))
+
+    Process.sleep(500)
+
+    debugger
+    |> find(css("#info"))
+    |> assert_text("LiveDebuggerDev.LiveViews.Side")
+
+    dev_app
+    |> click(link("Nested"))
+
+    Process.sleep(500)
+
+    debugger
+    |> find(css("#info"))
+    |> assert_text("LiveDebuggerDev.LiveViews.Nested")
+  end
+
   defp first_link(), do: css("#live-sessions a", count: 1)
 
-  defp counter_in_assigns(text: text) do
+  defp assigns_entry(key: key, value: value) do
     xpath(
-      ".//*[@id=\"assigns\"]//*[contains(normalize-space(text()), \"counter:\")]/../*[contains(normalize-space(text()), \"#{text}\")]"
+      ".//*[@id=\"assigns\"]//*[contains(normalize-space(text()), \"#{key}:\")]/../*[contains(normalize-space(text()), \"#{value}\")]"
     )
   end
 
-  defp traces(opts), do: css("#traces-list-stream details", opts)
+  defp map_entry(key: key, value: value) do
+    xpath(
+      ".//*[contains(normalize-space(text()), \"#{key}:\")]/../*[contains(normalize-space(text()), \"#{value}\")]"
+    )
+  end
 
-  defp refresh_button(), do: css("button[phx-click=\"refresh-history\"]")
+  defp traces(opts), do: css("#traces-list-stream details", opts)
 
   defp toggle_tracing_button(), do: css("button[phx-click=\"switch-tracing\"]")
 
+  defp refresh_button(), do: css("button[phx-click=\"refresh-history\"]")
+
   defp clear_traces_button(), do: css("button[phx-click=\"clear-traces\"]")
 
   defp filters_button(), do: css("button[phx-click=\"open\"]")
+
+  defp reset_filters_button(), do: css("button[phx-click=\"reset\"]")
+
+  defp conditional_component_5_node_button(),
+    do: css("#tree-node-button-5-component-tree-sidebar-content")
+
+  defp conditional_component_6_node_button(),
+    do: css("#tree-node-button-6-component-tree-sidebar-content")
 end