Backport: Fix traces filtering (#443)

Author: hhubert6

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>
 

lib/live_debugger/services/trace_service.ex

@@ -132,7 +132,7 @@ defmodule LiveDebugger.Services.TraceService do
     [{{:_, %{function: :"$1"}}, to_spec(functions), [:"$_"]}]
   end
 
-  def to_spec([]), do: []
+  def to_spec([]), do: [false]
 
   def to_spec([single]), do: [{:"=:=", :"$1", single}]
 

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))
 
     dev_app
@@ -22,7 +22,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
@@ -31,7 +31,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))
@@ -46,19 +46,230 @@ defmodule LiveDebugger.ChannelDashboardTest do
     |> assert_has(traces(count: 4))
   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_4_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(many_assigns_14_node_button())
+    |> assert_has(assigns_entry(key: "show_child?", value: "true"))
+    |> assert_has(traces(count: 4))
+    |> click(conditional_component_5_node_button())
+    |> click(conditional_component_4_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"
+    ])
+    |> click(filters_button())
+    |> click(checkbox("mount"))
+    |> click(checkbox("handle_params"))
+    |> click(checkbox("handle_info"))
+    |> click(checkbox("handle_call"))
+    |> click(checkbox("handle_cast"))
+    |> click(checkbox("terminate"))
+    |> click(checkbox("render"))
+    |> click(checkbox("handle_event"))
+    |> click(checkbox("handle_async"))
+    |> click(css("button", text: "Apply"))
+    |> assert_has(traces(count: 0))
+  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
+
   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("#filters-dropdown-button")
+
+  defp reset_filters_button(), do: css("button[phx-click=\"reset\"]")
+
+  defp conditional_component_4_node_button() do
+    css("#tree-node-button-4-component-tree-sidebar-content")
+  end
+
+  defp conditional_component_5_node_button() do
+    css("#tree-node-button-5-component-tree-sidebar-content")
+  end
+
+  defp many_assigns_14_node_button() do
+    css("#tree-node-button-14-component-tree-sidebar-content")
+  end
 end

test/services/trace_service_test.exs

@@ -7,6 +7,8 @@ defmodule Services.TraceServiceTest do
   alias LiveDebugger.Services.TraceService
   alias LiveDebugger.MockEtsTableServer
 
+  @all_functions LiveDebugger.Utils.Callbacks.callbacks_functions()
+
   setup :verify_on_exit!
 
   setup_all do
@@ -56,7 +58,8 @@ defmodule Services.TraceServiceTest do
       MockEtsTableServer
       |> expect(:table!, fn ^pid -> table end)
 
-      assert {[^trace1, ^trace2], _} = TraceService.existing_traces(pid)
+      assert {[^trace1, ^trace2], _} =
+               TraceService.existing_traces(pid, functions: @all_functions)
     end
 
     test "returns traces with limit and continuation", %{module: module, pid: pid, table: table} do
@@ -70,12 +73,13 @@ defmodule Services.TraceServiceTest do
       MockEtsTableServer
       |> expect(:table!, fn ^pid -> table end)
 
-      {traces1, cont} = TraceService.existing_traces(pid, limit: 2)
-      {traces2, cont} = TraceService.existing_traces(pid, cont: cont)
+      {traces1, cont} = TraceService.existing_traces(pid, limit: 2, functions: @all_functions)
+      {traces2, cont} = TraceService.existing_traces(pid, cont: cont, functions: @all_functions)
 
       assert [trace1, trace2] == traces1
       assert [trace3] == traces2
       assert cont == :end_of_table
+
       assert :end_of_table == TraceService.existing_traces(pid, cont: :end_of_table)
     end
 
@@ -113,8 +117,11 @@ defmodule Services.TraceServiceTest do
       MockEtsTableServer
       |> expect(:table!, 2, fn ^pid -> table end)
 
-      assert {[^trace1], _} = TraceService.existing_traces(pid, node_id: pid)
-      assert {[^trace2, ^trace3], _} = TraceService.existing_traces(pid, node_id: cid)
+      assert {[^trace1], _} =
+               TraceService.existing_traces(pid, node_id: pid, functions: @all_functions)
+
+      assert {[^trace2, ^trace3], _} =
+               TraceService.existing_traces(pid, node_id: cid, functions: @all_functions)
     end
 
     test "returns :end_of_table when no traces match", %{module: module, pid: pid, table: table} do
@@ -141,15 +148,16 @@ defmodule Services.TraceServiceTest do
       MockEtsTableServer
       |> expect(:table!, 5, fn ^pid -> table end)
 
-      assert {[^trace1, ^trace2], _} = TraceService.existing_traces(pid)
+      assert {[^trace1, ^trace2], _} =
+               TraceService.existing_traces(pid, functions: @all_functions)
 
       TraceService.clear_traces(pid, trace1.pid)
 
-      assert {[^trace2], _} = TraceService.existing_traces(pid)
+      assert {[^trace2], _} = TraceService.existing_traces(pid, functions: @all_functions)
 
       TraceService.clear_traces(pid, trace2.cid)
 
-      assert :end_of_table = TraceService.existing_traces(pid)
+      assert :end_of_table = TraceService.existing_traces(pid, functions: @all_functions)
     end
   end
 end