由於 LiveView 的狀態是在 server 端，所以大部分的 End-to-end 測試都可以直接使用 Elixir 在 LiveViewTest 中進行

LiveViewTest module 提供了很多操作 LiveView 測試的函式。

基本的 Index 畫面測試

與 Controll-View 類似，我們用 live 執行 LiveView，並且檢查回傳的 html 是否包含我們要的內容。

defmodule GratitudeWeb.NoteLiveTest do
  use GratitudeWeb.ConnCase

  alias Gratitude.Notes
  import Phoenix.LiveViewTest

  describe "Index" do
    test "lists all notes", %{conn: conn} do
      {:ok, note} = Notes.create_note(%{content: "感激筆記內容"})
      {:ok, _view, html} = live(conn, ~p"/")

      assert html =~ "感激筆記 LiveView 版"
      assert html =~ note.content
    end
  end
end

live 函示除了靜態的 html 之外還有回傳測試用的 view struct ，可以讓我們在測試中對目前的 LiveView process 操作。

測試新增 Note

test "saves new note", %{conn: conn} do
  {:ok, view, _html} = live(conn, ~p"/")

  assert view
         |> element("a", "新增筆記")
         |> render_click() =~ "新增感激筆記"

  assert_patch(view, ~p"/new")

  assert view
         |> form("#note-form", note: %{"content" => "新筆記"})
         |> render_submit()

  assert_patch(view, ~p"/")

  html = render(view)
  assert html =~ "新增成功"
  assert html =~ "新筆記"
end

我們使用一連串的 assert 檢查 LiveView 的狀態，並且使用 render_click 與 render_submit 模擬使用者點擊與送出表單的動作。

1. 點擊新增筆記連結：

先使用 element 找到 view 中的新增元件，再使用 render_click 點擊，最後在使用 =~ 檢查回傳的 html 是否包含我們要的內容。

2. 確認 patch 到新筆記頁面：

使用 assert_patch 檢查是否有 patch 到新筆記頁面。

3. 填寫表單並送出：

使用 form 找到表單，並且填入 note 的內容，再使用 render_submit 送出表單。

4. 確認 patch 回列表頁面：

一樣使用 assert_patch 檢查是否有 patch 回列表頁面。

5. 回到列表頁面後，檢查回傳的 html 是否包含新增的內容：

對 view 使用 render ，並檢查回傳的內容。

關於 View

通常寫 Elixir 的時候，由於是函數式的寫法，並不會有隱藏的狀態，但在寫 LiveView 測試的時候要注意，這邊用的 view 會指到正在執行 LiveView 頁面的 process，他有自己的狀態。
所以在我們執行 render_click 與 render_submit 的時候，儘管這些函式不會回傳新的 view，但是會改變 view 畫面 的狀態。