add test for auto upload and phoenixframework#2974

test/e2e/tests/uploads.spec.js

@@ -1,5 +1,5 @@
 const { test, expect } = require("@playwright/test");
-const { syncLV } = require("../utils");
+const { syncLV, attributeMutations } = require("../utils");
 
 // https://stackoverflow.com/questions/10623798/how-do-i-read-the-contents-of-a-node-js-stream-into-a-string-variable
 const readStream = (stream) => new Promise((resolve) => {
@@ -17,6 +17,8 @@ const readStream = (stream) => new Promise((resolve) => {
 
 test("can upload a file", async ({ page }) => {
   await page.goto("/upload");
+  let changesForm = attributeMutations(page, "#upload-form");
+  let changesInput = attributeMutations(page, "#upload-form input");
   await syncLV(page);
 
   await page.locator("#upload-form input").setInputFiles({
@@ -25,11 +27,22 @@ test("can upload a file", async ({ page }) => {
     buffer: Buffer.from("this is a test")
   });
   await syncLV(page);
+  await expect(page.locator("progress")).toHaveAttribute("value", "0");
   await page.getByRole("button", { name: "Upload" }).click();
 
   // we should see one uploaded file in the list
   await expect(page.locator("ul li")).toBeVisible();
 
+  await expect(await changesForm()).toEqual(expect.arrayContaining([
+    { attr: "class", oldValue: null, newValue: "phx-submit-loading" },
+    { attr: "class", oldValue: "phx-submit-loading", newValue: null },
+  ]));
+
+  await expect(await changesInput()).toEqual(expect.arrayContaining([
+    { attr: "class", oldValue: null, newValue: "phx-change-loading" },
+    { attr: "class", oldValue: "phx-change-loading", newValue: null },
+  ]));
+
   // now download the file to see if it contains the expected content
   const downloadPromise = page.waitForEvent("download");
   await page.locator("ul li a").click();
@@ -135,3 +148,29 @@ test("shows error for invalid mimetype", async ({ page }) => {
 
   await expect(page.locator(".alert")).toContainText("You have selected an unacceptable file type");
 });
+
+test("auto upload", async ({ page }) => {
+  await page.goto("/upload?auto_upload=1");
+  let changes = attributeMutations(page, "#upload-form input");
+
+  await syncLV(page);
+
+  await page.locator("#upload-form input").setInputFiles([
+    {
+      name: "file.txt",
+      mimeType: "text/plain",
+      buffer: Buffer.from("this is a test")
+    }
+  ]);
+  await syncLV(page);
+  await expect(page.locator("progress")).toHaveAttribute("value", "100");
+
+  await expect(await changes()).toEqual(expect.arrayContaining([
+    { attr: "class", oldValue: null, newValue: "phx-change-loading" },
+    { attr: "class", oldValue: "phx-change-loading", newValue: null },
+  ]));
+
+  await page.getByRole("button", { name: "Upload" }).click();
+
+  await expect(page.locator("ul li")).toBeVisible();
+});

test/support/e2e/upload_live.ex

@@ -8,9 +8,21 @@ defmodule Phoenix.LiveViewTest.E2E.UploadLive do
     {:ok,
      socket
      |> assign(:uploaded_files, [])
+     |> assign(:auto_upload, false)
      |> allow_upload(:avatar, accept: ~w(.txt .md), max_entries: 2)}
   end
 
+  @impl Phoenix.LiveView
+  def handle_params(%{"auto_upload" => _}, _uri, socket) do
+    socket
+    |> allow_upload(:avatar, accept: ~w(.txt .md), max_entries: 2, auto_upload: true)
+    |> then(&{:noreply, &1})
+  end
+
+  def handle_params(_params, _uri, socket) do
+    {:noreply, socket}
+  end
+
   @impl Phoenix.LiveView
   def handle_event("validate", _params, socket) do
     {:noreply, socket}