test(dashboard): component & page coverage

Specs for core primitives (incl. local_time / future relative_time), DataTable, LogLine, Timeline, flow graph, workflow tabs and routing.

Author: kasvith

durable_dashboard/test/durable_dashboard/components/core_test.exs

@@ -108,10 +108,28 @@ defmodule DurableDashboard.Components.CoreTest do
       assert html =~ "2m ago"
     end
 
-    test "renders em-dash for nil" do
+    test "renders 'in …' for future timestamps, not 'just now'" do
+      future = DateTime.add(DateTime.utc_now(), 2 * 3600, :second)
+      assigns = %{at: future}
+      html = rendered_to_string(~H[<Core.relative_time at={@at} />])
+      assert html =~ "in 2h"
+      refute html =~ "just now"
+    end
+
+    test "emits <time data-ts data-rel> so the client localizes the tooltip" do
+      now = DateTime.utc_now()
+      assigns = %{at: now}
+      html = rendered_to_string(~H[<Core.relative_time at={@at} />])
+      assert html =~ "<time"
+      assert html =~ ~s(data-rel="1")
+      assert html =~ ~s(data-ts="#{DateTime.to_iso8601(now)}")
+    end
+
+    test "renders em-dash for nil, without a data-ts to localize" do
       assigns = %{at: nil}
       html = rendered_to_string(~H[<Core.relative_time at={@at} />])
       assert html =~ "—"
+      refute html =~ "data-ts"
     end
   end
 
@@ -183,4 +201,40 @@ defmodule DurableDashboard.Components.CoreTest do
       assert html =~ "abc12345"
     end
   end
+
+  describe "local_time/1" do
+    test "emits a <time> carrying the UTC ISO for the client to localize" do
+      assigns = %{at: ~U[2026-06-23 11:39:40.328499Z]}
+      html = rendered_to_string(~H[<Core.local_time at={@at} format="datetime" />])
+
+      assert html =~ "<time"
+      # The client hook reads data-ts (UTC ISO) and data-format.
+      assert html =~ ~s(data-ts="2026-06-23T11:39:40.328499Z")
+      assert html =~ ~s(data-format="datetime")
+      # A UTC fallback renders so it's legible before/without JS.
+      assert html =~ "Jun 23, 2026"
+    end
+
+    test "the time format renders a ms-precision time-of-day fallback" do
+      assigns = %{at: ~U[2026-06-23 11:39:40.328499Z]}
+      html = rendered_to_string(~H[<Core.local_time at={@at} format="time" />])
+
+      assert html =~ ~s(data-format="time")
+      assert html =~ "11:39:40.328"
+    end
+
+    test "accepts an ISO string and normalizes it to data-ts" do
+      assigns = %{at: "2026-06-23T11:39:40Z"}
+      html = rendered_to_string(~H[<Core.local_time at={@at} format="datetime" />])
+
+      assert html =~ ~s(data-ts="2026-06-23T11:39:40Z")
+    end
+
+    test "renders an em dash for a nil timestamp" do
+      assigns = %{at: nil}
+      html = rendered_to_string(~H[<Core.local_time at={@at} />])
+
+      assert html =~ "—"
+    end
+  end
 end

durable_dashboard/test/durable_dashboard/components/flow_graph_test.exs

@@ -206,6 +206,21 @@ defmodule DurableDashboard.Components.FlowGraphTest do
       assert status_for(nodes, "parallel_200__do_b") == "failed"
     end
 
+    test "a step carrying child_workflow_id flips to the child_workflow node type" do
+      definition = simple_workflow()
+      graph = GraphBuilder.build(definition)
+
+      execs = [
+        step_execution(name: "register", status: :completed, child_workflow_id: "child-abc")
+      ]
+
+      %{nodes: nodes} = GraphBuilder.overlay_status(graph, execs)
+      node = Enum.find(nodes, &(&1.id == "register"))
+
+      assert node.type == "child_workflow"
+      assert node.data.child_workflow_id == "child-abc"
+    end
+
     test "top-level step names continue to match by id" do
       definition = simple_workflow()
       graph = GraphBuilder.build(definition)
@@ -244,6 +259,41 @@ defmodule DurableDashboard.Components.FlowGraphTest do
     end
   end
 
+  # ============================================================================
+  # normalize_edge — runtime edge styling must survive serialization
+  # ============================================================================
+
+  describe "FlowGraph data-graph — edge className/label reach the client (regression)" do
+    test "a running step's inbound edge keeps its flow-edge-running className" do
+      # b is running, so graph_builder paints the a->b edge flow-edge-running.
+      # Before the fix, normalize_edge/1 dropped :className (and :label), so
+      # the client never received any edge status — the graph never reflected
+      # execution. This asserts the styling reaches the serialized data-graph.
+      steps = [
+        step_execution(name: "a", status: :completed, duration_ms: 5),
+        step_execution(name: "b", status: :running)
+      ]
+
+      html =
+        render_component(FlowGraph,
+          id: "fg-edge",
+          kind: :flow,
+          workflow: %{
+            id: "wf-1",
+            workflow_module: Atom.to_string(DurableDashboard.Components.FlowGraphTestWorkflow),
+            workflow_name: "fg_test"
+          },
+          steps: steps
+        )
+
+      assert html =~ ~s(phx-hook="FlowGraph")
+      assert html =~ "flow-edge-running"
+      # The serialized edge shape now carries the className + label keys.
+      assert html =~ "className"
+      assert html =~ "label"
+    end
+  end
+
   # ============================================================================
   # Test fixtures
   # ============================================================================
@@ -407,6 +457,7 @@ defmodule DurableDashboard.Components.FlowGraphTest do
       duration_ms: Keyword.get(opts, :duration_ms),
       started_at: Keyword.get(opts, :started_at),
       completed_at: Keyword.get(opts, :completed_at),
+      child_workflow_id: Keyword.get(opts, :child_workflow_id),
       inserted_at: Keyword.get(opts, :inserted_at, DateTime.utc_now())
     }
   end

durable_dashboard/test/durable_dashboard/components/log_line_test.exs

@@ -0,0 +1,93 @@
+defmodule DurableDashboard.Components.LogLineTest do
+  @moduledoc """
+  Unit coverage for the shared `LogLine` component — message classification
+  (JSON / embedded Elixir map / plain text) and the rendered row markup.
+  """
+
+  use ExUnit.Case, async: true
+
+  import Phoenix.LiveViewTest
+
+  alias DurableDashboard.Components.Workflow.LogLine
+
+  describe "parse_message/1" do
+    test "classifies a whole-message JSON object as a term" do
+      assert {:term, %{"json" => 1}} = LogLine.parse_message(~S({"json": 1}))
+    end
+
+    test "classifies a whole-message Elixir map (string keys, =>) as a term" do
+      msg = ~S(%{"a" => 1, "b" => 2.5})
+      assert {:term, %{"a" => 1, "b" => 2.5}} = LogLine.parse_message(msg)
+    end
+
+    test "handles atom keys, nesting, lists and booleans in an Elixir map" do
+      assert {:term, %{:b => 2, :c => [1, 2, %{d: true}], "a" => 1}} =
+               LogLine.parse_message(~S|%{"a" => 1, b: 2, c: [1, 2, %{d: true}]}|)
+    end
+
+    test "splits a 'label: %{...}' message into a prefix + parsed map" do
+      msg =
+        ~S|[Cron] Metrics gathered: %{"active_users" => 491, "error_rate" => 0.046}|
+
+      assert {:prefix_term, "[Cron] Metrics gathered:",
+              %{"active_users" => 491, "error_rate" => 0.046}} = LogLine.parse_message(msg)
+    end
+
+    test "falls back to plain text for non-literal terms (function calls)" do
+      assert :text = LogLine.parse_message(~S|result: %{pid: foo()}|)
+    end
+
+    test "plain text stays text" do
+      assert :text = LogLine.parse_message("just a regular log line")
+    end
+
+    test "a leading [tag] alone is never mistaken for a list literal" do
+      assert :text = LogLine.parse_message("[Cron] nothing structured here")
+    end
+  end
+
+  describe "row/1 rendering" do
+    defp render_entry(entry, opts \\ []) do
+      assigns = Map.merge(%{entry: entry, show_step: true}, Map.new(opts))
+      render_component(&LogLine.row/1, assigns)
+    end
+
+    test "an embedded Elixir map is syntax-highlighted in the expanded block" do
+      html =
+        render_entry(%{
+          "level" => "info",
+          "message" =>
+            ~S|[Cron] Metrics gathered: %{"active_users" => 491, "error_rate" => 0.046}|,
+          "timestamp" => "2026-05-04T06:21:04Z"
+        })
+
+      # The text prefix renders, and the map keys/values are highlighted spans.
+      assert html =~ "[Cron] Metrics gathered:"
+      assert html =~ ~s(<span class="text-primary">&quot;active_users&quot;</span>)
+      assert html =~ ~s(<span class="text-warning">491</span>)
+    end
+
+    test "show_step={false} suppresses the summary step column (detail still lists it)" do
+      entry = %{"level" => "info", "message" => "hi", "__step__" => "gather", "timestamp" => nil}
+      with_step = render_entry(entry, show_step: true)
+      without_step = render_entry(entry, show_step: false)
+
+      # The summary-line step column (its distinctive max-width class) only
+      # appears when show_step is true...
+      assert with_step =~ "md:max-w-[150px]"
+      refute without_step =~ "md:max-w-[150px]"
+
+      # ...but the expanded fields table lists the step either way.
+      assert without_step =~ ">step</span>"
+      assert without_step =~ "gather"
+    end
+
+    test "level drives the semantic color and left accent" do
+      html =
+        render_entry(%{"level" => "error", "message" => "boom", "timestamp" => nil})
+
+      assert html =~ "text-destructive"
+      assert html =~ "border-l-destructive"
+    end
+  end
+end

durable_dashboard/test/durable_dashboard/components/logs_tab_test.exs

@@ -107,4 +107,121 @@ defmodule DurableDashboard.Components.LogsTabTest do
     assert html =~ "text-warning"
     assert html =~ "text-info"
   end
+
+  test "error and warning rows get a tinted left accent" do
+    html =
+      render_component(LogsTab,
+        id: "logs-tint",
+        steps: sample_steps_with_logs()
+      )
+
+    assert html =~ "border-l-destructive"
+    assert html =~ "bg-destructive/5"
+    assert html =~ "border-l-warning"
+  end
+
+  test "a JSON message shows compact inline and pretty-prints in the expanded fields table" do
+    now = DateTime.utc_now() |> DateTime.to_iso8601()
+
+    steps = [
+      %{
+        id: "s-json",
+        step_name: "emit",
+        logs: [
+          %{
+            "level" => "info",
+            "message" => ~s({"order_id":42,"total":9.99}),
+            "timestamp" => now
+          }
+        ]
+      }
+    ]
+
+    html = render_component(LogsTab, id: "logs-json", steps: steps)
+
+    assert html =~ "<details"
+    assert html =~ "order_id"
+    # Syntax-highlighted in the expanded message block: the key renders in the
+    # primary color, the numeric value in the warning color (separate spans).
+    assert html =~ ~s(<span class="text-primary">&quot;total&quot;</span>)
+    assert html =~ ~s(<span class="text-warning">9.99</span>)
+  end
+
+  test "an embedded Elixir map in the message is highlighted, not dumped as text" do
+    now = DateTime.utc_now() |> DateTime.to_iso8601()
+
+    steps = [
+      %{
+        id: "s-elixir",
+        step_name: "gather",
+        logs: [
+          %{
+            "level" => "info",
+            "message" =>
+              ~S|[Cron] Metrics gathered: %{"active_users" => 491, "error_rate" => 0.046}|,
+            "timestamp" => now
+          }
+        ]
+      }
+    ]
+
+    html = render_component(LogsTab, id: "logs-elixir", steps: steps)
+
+    # The text prefix survives, and the map is syntax-highlighted (separate
+    # spans), not rendered as a flat `%{...}` blob.
+    assert html =~ "[Cron] Metrics gathered:"
+    assert html =~ ~s(<span class="text-primary">&quot;active_users&quot;</span>)
+    assert html =~ ~s(<span class="text-warning">491</span>)
+  end
+
+  test "metadata: meaningful keys inline (key=value), source noise filtered, all keys in detail" do
+    now = DateTime.utc_now() |> DateTime.to_iso8601()
+
+    steps = [
+      %{
+        id: "s-meta",
+        step_name: "emit",
+        logs: [
+          %{
+            "level" => "info",
+            "message" => "plain text line",
+            "timestamp" => now,
+            "metadata" => %{"request_id" => "req-abc", "user_id" => 7, "line" => 33}
+          }
+        ]
+      }
+    ]
+
+    html = render_component(LogsTab, id: "logs-meta", steps: steps)
+
+    # Inline labels surface meaningful keys, not source-location noise.
+    assert html =~ "request_id=req-abc"
+    assert html =~ "user_id=7"
+    refute html =~ "line=33"
+
+    # The message renders in its own labeled block, and the expanded fields
+    # table (a clean key/value grid, not a JSON box) DOES include the
+    # noise-filtered source field.
+    assert html =~ "plain text line"
+    assert html =~ ">line</span>"
+  end
+
+  test "each line is an expandable detail row with a fields table" do
+    html = render_component(LogsTab, id: "logs-plain", steps: sample_steps_with_logs())
+
+    assert html =~ "<details"
+    # The expanded detail renders a key/value fields table with labeled keys.
+    assert html =~ ">level</span>"
+  end
+
+  test "renders the timestamp sort toggle and a pager count" do
+    html = render_component(LogsTab, id: "logs-sort", steps: sample_steps_with_logs())
+
+    # Sort control (defaults to ascending).
+    assert html =~ "sort:toggle"
+    assert html =~ "Time"
+
+    # Pager shows the visible range over the total (4 entries in the sample).
+    assert html =~ "of 4"
+  end
 end