Added tests for updated liveviews and live components

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -83,7 +83,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
         <li>
           <span
             class={[
-              "flex h-8 w-8 items-center justify-center rounded",
+              "pagination-prev h-8 w-8 items-center justify-center rounded",
               @page_number != 1 && "cursor-pointer hover:bg-primary hover:text-white",
               @page_number <= 1 && "cursor-not-allowed"
             ]}
@@ -101,7 +101,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
         <li>
           <span
             class={[
-              "flex h-8 w-8 items-center justify-center rounded",
+              "pagination-next flex h-8 w-8 items-center justify-center rounded",
               @page_number != @total_pages && "cursor-pointer hover:bg-primary hover:text-white",
               @page_number >= @total_pages && "cursor-not-allowed"
             ]}

lib/pinchflat_web/controllers/sources/source_live/index_table_live.ex

@@ -7,12 +7,12 @@ defmodule PinchflatWeb.Sources.SourceLive.IndexTableLive do
   import PinchflatWeb.Helpers.PaginationHelpers
 
   alias Pinchflat.Repo
-  alias Pinchflat.Sources
   alias Pinchflat.Sources.Source
   alias Pinchflat.Media.MediaItem
 
   def mount(_params, session, socket) do
     limit = session["results_per_page"]
+
     initial_params =
       Map.merge(
         %{

lib/pinchflat_web/controllers/sources/source_live/index_table_live_BAK.html.heex

@@ -1,45 +0,0 @@
-<.table rows={@sources} table_class="text-white">
-  <:col :let={source} label="Name">
-    <.subtle_link href={~p"/sources/#{source.id}"}>
-      {StringUtils.truncate(source.custom_name || source.collection_name, 35)}
-    </.subtle_link>
-  </:col>
-  <:col :let={source} label="Pending">
-    <.subtle_link href={~p"/sources/#{source.id}/#tab-pending"}>
-      <.localized_number number={source.pending_count} />
-    </.subtle_link>
-  </:col>
-  <:col :let={source} label="Downloaded">
-    <.subtle_link href={~p"/sources/#{source.id}/#tab-downloaded"}>
-      <.localized_number number={source.downloaded_count} />
-    </.subtle_link>
-  </:col>
-  <:col :let={source} label="Retention">
-    <%= if source.retention_period_days && source.retention_period_days > 0 do %>
-      <.localized_number number={source.retention_period_days} />
-      <.pluralize count={source.retention_period_days} word="day" />
-    <% else %>
-      <span class="text-lg">∞</span>
-    <% end %>
-  </:col>
-  <:col :let={source} label="Media Profile">
-    <.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
-      {source.media_profile.name}
-    </.subtle_link>
-  </:col>
-  <:col :let={source} label="Enabled?">
-    <.input
-      name={"source[#{source.id}][enabled]"}
-      value={source.enabled}
-      id={"source_#{source.id}_enabled"}
-      phx-hook="formless-input"
-      data-subscribe="change"
-      data-event-name="toggle_enabled"
-      data-identifier={source.id}
-      type="toggle"
-    />
-  </:col>
-  <:col :let={source} label="" class="flex place-content-evenly">
-    <.icon_link href={~p"/sources/#{source.id}/edit"} icon="hero-pencil-square" class="mx-1" />
-  </:col>
-</.table>

lib/pinchflat_web/controllers/sources/source_live/source_enable_toggle.ex

@@ -7,7 +7,7 @@ defmodule PinchflatWeb.Sources.SourceLive.SourceEnableToggle do
   def render(assigns) do
     ~H"""
     <div>
-      <.form :let={f} for={@form} phx-change="update" phx-target={@myself}>
+      <.form :let={f} for={@form} phx-change="update" phx-target={@myself} class="enabled_toggle_form">
         <.input id={"source_#{@source_id}_enabled_input"} field={f[:enabled]} type="toggle" />
       </.form>
     </div>

test/pinchflat_web/controllers/sources/index_table_live_test.exs

@@ -1,4 +1,4 @@
-defmodule PinchflatWeb.Sources.IndexTableLiveTest do
+defmodule PinchflatWeb.Sources.SourceLive.IndexTableLiveTest do
   use PinchflatWeb.ConnCase
 
   import Phoenix.LiveViewTest
@@ -6,13 +6,13 @@ defmodule PinchflatWeb.Sources.IndexTableLiveTest do
   import Pinchflat.ProfilesFixtures
 
   alias Pinchflat.Sources.Source
-  alias PinchflatWeb.Sources.IndexTableLive
+  alias PinchflatWeb.Sources.SourceLive.IndexTableLive
 
   describe "initial rendering" do
     test "lists all sources", %{conn: conn} do
       source = source_fixture()
 
-      {:ok, _view, html} = live_isolated(conn, IndexTableLive)
+      {:ok, _view, html} = live_isolated(conn, IndexTableLive, session: create_session())
 
       assert html =~ source.custom_name
     end
@@ -20,7 +20,7 @@ defmodule PinchflatWeb.Sources.IndexTableLiveTest do
     test "omits sources that have marked_for_deletion_at set", %{conn: conn} do
       source = source_fixture(marked_for_deletion_at: DateTime.utc_now())
 
-      {:ok, _view, html} = live_isolated(conn, IndexTableLive)
+      {:ok, _view, html} = live_isolated(conn, IndexTableLive, session: create_session())
 
       refute html =~ source.custom_name
     end
@@ -29,28 +29,102 @@ defmodule PinchflatWeb.Sources.IndexTableLiveTest do
       media_profile = media_profile_fixture(marked_for_deletion_at: DateTime.utc_now())
       source = source_fixture(media_profile_id: media_profile.id)
 
-      {:ok, _view, html} = live_isolated(conn, IndexTableLive)
+      {:ok, _view, html} = live_isolated(conn, IndexTableLive, session: create_session())
 
       refute html =~ source.custom_name
     end
   end
 
-  describe "when a source is enabled or disabled" do
+  describe "when testing sorting" do
+    test "sorts by the custom_name by default", %{conn: conn} do
+      source1 = source_fixture(custom_name: "Source_B")
+      source2 = source_fixture(custom_name: "Source_A")
+
+      {:ok, view, _html} = live_isolated(conn, IndexTableLive, session: create_session())
+      assert render_element(view, "tbody tr:first-child") =~ source2.custom_name
+      assert render_element(view, "tbody tr:last-child") =~ source1.custom_name
+    end
+
+    test "clicking the row will change the sort direction", %{conn: conn} do
+      source1 = source_fixture(custom_name: "Source_B")
+      source2 = source_fixture(custom_name: "Source_A")
+
+      {:ok, view, _html} = live_isolated(conn, IndexTableLive, session: create_session())
+
+      # Click the row to change the sort direction
+      click_element(view, "th", "Name")
+
+      assert render_element(view, "tbody tr:first-child") =~ source1.custom_name
+      assert render_element(view, "tbody tr:last-child") =~ source2.custom_name
+    end
+
+    test "clicking a different row will sort by that attribute", %{conn: conn} do
+      source1 = source_fixture(custom_name: "Source_A", retention_period_days: 10)
+      source2 = source_fixture(custom_name: "Source_A", retention_period_days: 5)
+
+      {:ok, view, _html} = live_isolated(conn, IndexTableLive, session: create_session())
+
+      # Click the row to change the sort field
+      click_element(view, "th", "Retention")
+
+      assert render_element(view, "tbody tr:first-child") =~ source2.custom_name
+      assert render_element(view, "tbody tr:last-child") =~ source1.custom_name
+
+      # Click the row to again change the sort direcation
+      click_element(view, "th", "Retention")
+      assert render_element(view, "tbody tr:first-child") =~ source1.custom_name
+      assert render_element(view, "tbody tr:last-child") =~ source2.custom_name
+    end
+  end
+
+  describe "when testing pagination" do
+    test "moving to the next page loads new records", %{conn: conn} do
+      source1 = source_fixture(custom_name: "Source_A")
+      source2 = source_fixture(custom_name: "Source_B")
+
+      session = Map.merge(create_session(), %{"results_per_page" => 1})
+      {:ok, view, _html} = live_isolated(conn, IndexTableLive, session: session)
+
+      assert render_element(view, "tbody") =~ source1.custom_name
+      refute render_element(view, "tbody") =~ source2.custom_name
+
+      click_element(view, "span.pagination-next")
+
+      refute render_element(view, "tbody") =~ source1.custom_name
+      assert render_element(view, "tbody") =~ source2.custom_name
+    end
+  end
+
+  describe "when testing the enable toggle" do
     test "updates the source's enabled status", %{conn: conn} do
       source = source_fixture(enabled: true)
-      {:ok, view, _html} = live_isolated(conn, IndexTableLive)
+      {:ok, view, _html} = live_isolated(conn, IndexTableLive, session: create_session())
 
-      params = %{
+      view
-        "event" => "toggle_enabled",
+      |> element(".enabled_toggle_form")
-        "id" => source.id,
+      |> render_change(%{source: %{"enabled" => false}})
-        "value" => "false"
-      }
-
-      # Send an event to the server directly
-      # TODO: remove
-      render_change(view, "formless-input", params)
 
       assert %{enabled: false} = Repo.get!(Source, source.id)
     end
   end
+
+  defp click_element(view, selector, text_filter \\ nil) do
+    view
+    |> element(selector, text_filter)
+    |> render_click()
+  end
+
+  defp render_element(view, selector) do
+    view
+    |> element(selector)
+    |> render()
+  end
+
+  defp create_session do
+    %{
+      "initial_sort_key" => :custom_name,
+      "initial_sort_direction" => :asc,
+      "results_per_page" => 10
+    }
+  end
 end

test/pinchflat_web/controllers/sources/source_enable_toggle_test.exs

@@ -0,0 +1,26 @@
+defmodule PinchflatWeb.Sources.SourceLive.SourceEnableToggleTest do
+  use PinchflatWeb.ConnCase
+
+  import Phoenix.LiveViewTest
+
+  alias PinchflatWeb.Sources.SourceLive.SourceEnableToggle
+
+  describe "initial rendering" do
+    test "renders a toggle in the on position if the source is enabled" do
+      source = %{ id: 1, enabled: true }
+
+      html = render_component(SourceEnableToggle, %{id: :foo, source: source})
+
+      # This is checking the Alpine attrs which is a good-enough proxy for the toggle position
+      assert html =~ "{ enabled: true }"
+    end
+
+    test "renders a toggle in the off position if the source is disabled" do
+      source = %{ id: 1, enabled: false }
+
+      html = render_component(SourceEnableToggle, %{id: :foo, source: source})
+
+      assert html =~ "{ enabled: false }"
+    end
+  end
+end