Add drag(source, to: target) (#85)

Add `Case.drag/3` to drag and drop in feature tests.

Usage:

```ex
|> drag("#source", to: "#target")
|> drag(Selector.text("Draggable"), to: Selector.text("Target"))
```

Implements #84 

See https://playwright.dev/docs/input#drag-and-drop

Author: ftes

lib/phoenix_test/playwright.ex

@@ -560,6 +560,39 @@ defmodule PhoenixTest.Playwright do
     conn
   end
 
+  @drag_opts_schema [
+    to: [
+      type_spec: quote(do: selector()),
+      type_doc: "`t:selector/0`",
+      required: true,
+      doc: "The target selector."
+    ]
+  ]
+
+  @doc """
+  Drag and drop a source element to a target element.
+
+  ## Options
+  #{NimbleOptions.docs(@drag_opts_schema)}
+
+  ## Examples
+      |> drag("#source", to: "#target")
+      |> drag(Selector.text("Draggable"), to: Selector.text("Target"))
+  """
+  @spec drag(t(), selector(), [
+          unquote(NimbleOptions.option_typespec(@drag_opts_schema))
+        ]) :: t()
+  def drag(conn, source_selector, to: target_selector) do
+    source_selector = conn |> maybe_within() |> Selector.concat(source_selector)
+    target_selector = conn |> maybe_within() |> Selector.concat(target_selector)
+
+    conn.frame_id
+    |> Frame.drag_and_drop(source_selector, target_selector)
+    |> handle_response(source_selector)
+
+    conn
+  end
+
   def assert_path(conn, path, opts \\ []) do
     if opts[:query_params] do
       retry(fn -> Assertions.assert_path(conn, path, opts) end, timeout(opts))

lib/phoenix_test/playwright/case.ex

@@ -24,6 +24,7 @@ defmodule PhoenixTest.Playwright.Case do
       import PhoenixTest
 
       import PhoenixTest.Playwright,
+        # styler:sort
         only: [
           add_cookies: 2,
           add_session_cookie: 3,
@@ -34,6 +35,7 @@ defmodule PhoenixTest.Playwright.Case do
           click: 4,
           click_button: 4,
           click_link: 4,
+          drag: 3,
           press: 3,
           press: 4,
           screenshot: 2,

lib/phoenix_test/playwright/frame.ex

@@ -158,4 +158,13 @@ defmodule PhoenixTest.Playwright.Frame do
     |> post()
     |> Result.from_response(& &1)
   end
+
+  def drag_and_drop(frame_id, source_selector, target_selector, opts \\ []) do
+    params = %{source: source_selector, target: target_selector, strict: true}
+    params = Enum.into(opts, params)
+
+    [guid: frame_id, method: :drag_and_drop, params: params]
+    |> post()
+    |> Result.from_response(& &1)
+  end
 end

test/phoenix_test/playwright_test.exs

@@ -873,6 +873,16 @@ defmodule PhoenixTest.PlaywrightTest do
     end
   end
 
+  describe "drag/3" do
+    test "triggers a javascript event handler", %{conn: conn} do
+      conn
+      |> visit("/live/index")
+      |> refute_has("#drag-status", text: "dropped")
+      |> drag(Selector.text("Drag this"), to: Selector.text("Drop here"))
+      |> assert_has("#drag-status", text: "dropped")
+    end
+  end
+
   describe "add_cookies/2" do
     test "sets a plain cookie", %{conn: conn} do
       conn

test/support/index_live.ex

@@ -441,6 +441,12 @@ defmodule PhoenixTest.IndexLive do
     <div id="hook-with-redirect" phx-hook="SomeOtherHook"></div>
 
     <.link data-confirm="Are you sure?" navigate="/live/page_2">Confirm to navigate</.link>
+
+    <div id="drag-and-drop">
+      <div id="drag-status">pending</div>
+      <div id="drag-source" style="background: yellow;" draggable="true">Drag this</div>
+      <div id="drag-target" style="border: 1px dashed black;" ondrop="document.getElementById('drag-status').innerHTML = 'dropped'">Drop here</div>
+    </div>
     """
   end