Improve cover upload input

- Enable drag and drop (invisible)
- Show upload progress
- Add relevant tests

lib/music_library_web/live/record_live/form_component.ex

@@ -43,10 +43,14 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
           />
         </div>
         <.input field={@form[:release]} type="text" label="Release" />
-        <div>
+        <div phx-drop-target={@uploads.cover_data.ref}>
           <.label for={@uploads.cover_data.ref}>
             Cover art
           </.label>
+          <span :if={@uploads.cover_data.entries == []} class="float-right">No cover selected</span>
+          <%= for entry <- @uploads.cover_data.entries do %>
+            <span class="float-right"><%= entry.progress %>%</span>
+          <% end %>
           <.live_file_input
             class="mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6"
             upload={@uploads.cover_data}

test/music_library_web/live/record_live_test.exs

@@ -19,7 +19,7 @@ defmodule MusicLibraryWeb.RecordLiveTest do
   describe "Paginated list of records" do
     setup [:create_records]
 
-    test "lists all records within default pagination params", %{conn: conn, records: records} do
+    test "uses default params", %{conn: conn, records: records} do
       {:ok, index_live, html} = live(conn, ~p"/records")
 
       assert html =~ "Listing Records"
@@ -51,7 +51,7 @@ defmodule MusicLibraryWeb.RecordLiveTest do
       end
     end
 
-    test "paginates records", %{conn: conn, records: records} do
+    test "uses query string params", %{conn: conn, records: records} do
       {:ok, page_2_live, page_2_html} = live(conn, ~p"/records?page=2&page_size=5")
 
       {page_2_present, page_2_absent} =
@@ -92,4 +92,63 @@ defmodule MusicLibraryWeb.RecordLiveTest do
       assert page_2_present -- page_3_absent == []
     end
   end
+
+  describe "Updating record metadata" do
+    test "can navigate to the record edit form", %{conn: conn} do
+      record = record_fixture()
+
+      {:ok, index_live, _html} = live(conn, ~p"/records")
+
+      assert index_live
+             |> element("#records-#{record.id} a", "Edit")
+             |> render_click() =~ "Edit Metadata"
+
+      assert_patch(index_live, ~p"/records/#{record}/edit")
+
+      assert index_live |> render() =~ "Edit Metadata"
+    end
+
+    test "can change the record cover", %{conn: conn} do
+      record = record_fixture(cover_data: File.read!(marbles_cover_fixture()))
+      {:ok, form_live, html} = live(conn, ~p"/records/#{record.id}/edit")
+
+      assert html =~ ~p"/images/#{record.id}?vsn=#{record.cover_hash}"
+
+      cover_metadata = cover_metadata(raven_cover_fixture())
+
+      cover_input = file_input(form_live, "#record-form", :cover_data, [cover_metadata])
+
+      assert render_upload(cover_input, cover_metadata.name) =~ "100%"
+
+      list_html = form_live |> element("#record-form") |> render_submit()
+
+      assert list_html =~ "Record updated successfully"
+
+      # We trigger another render to force the list view to update
+      # and display the new cover
+      list_html = form_live |> render()
+
+      updated_cover = MusicLibrary.Records.get_cover(record.id)
+
+      assert updated_cover.cover_hash !== record.cover_hash
+
+      assert list_html =~ ~p"/images/#{record.id}?vsn=#{updated_cover.cover_hash}"
+    end
+
+    defp cover_metadata(path) do
+      stat = File.stat!(path)
+
+      %{
+        last_modified:
+          stat.mtime
+          |> NaiveDateTime.from_erl!()
+          |> DateTime.from_naive!("Etc/UTC")
+          |> DateTime.to_unix(),
+        name: Path.basename(path),
+        content: File.read!(path),
+        size: stat.size,
+        type: "image/jpeg"
+      }
+    end
+  end
 end

test/support/fixtures/records_fixtures.ex

@@ -31,7 +31,11 @@ defmodule MusicLibrary.RecordsFixtures do
     "Thick as a Brick"
   ]
   # While it would be great to have this random, it's ok to use one single image
-  @cover_data_path "#{__DIR__}/marillion-marbles.jpg"
+  @marbles_cover_data_path "#{__DIR__}/marillion-marbles.jpg"
+  @raven_cover_data_path "#{__DIR__}/steven-wilson-raven.jpg"
+
+  def marbles_cover_fixture, do: @marbles_cover_data_path
+  def raven_cover_fixture, do: @raven_cover_data_path
 
   def record_fixture(attrs \\ %{}) do
     musicbrainz_id = Ecto.UUID.generate()
@@ -41,7 +45,7 @@ defmodule MusicLibrary.RecordsFixtures do
       |> Enum.into(%{
         genres: Enum.take_random(@genres, :rand.uniform(3)),
         cover_url: "https://coverartarchive.org/release-group/#{musicbrainz_id}/front",
-        cover_data: File.read!(@cover_data_path),
+        cover_data: File.read!(@marbles_cover_data_path),
         musicbrainz_id: musicbrainz_id,
         title: Enum.random(@titles),
         type: :album,