Testing LiveView

Curious how to test LiveView?

Look no further! We’ll learn to write effective LiveView tests using our application's domain language. We'll use the exceptional tools built into LiveViewTest. And we'll see how our LiveView tests can to teach us about the design of our LiveViews. So join me, and let's take a deep dive into LiveView testing.

Key takeaway:

Write tests from the perspective of the user (testing behavior, not implementation) in the domain of your application.

Links mentioned in the talk:

- https://hexdocs.pm/phoenix_live_view/Phoenix.LiveViewTest.html
- https://www.testingliveview.com/
- https://www.tddphoenix.com/
- https://twitter.com/germsvel

Transcript

1. Testing
   LiveView
   

   View Slide

2. German Velasco
   

   View Slide

3. View Slide

4. Phoenix.LiveViewTest
   josevalim - chrismccord - preciz
   alexgaribay - SherSpock - wojtekmach
   nthock - NikitaAvvakumov - sneako
   mcrumm - leandrocp - jmbejar
   henrik - JonRowe - feliperenan
   orthodoX - davydog187 - qrede
   cadebward - axelclark - glennr
   adamvaughan - SolbiatiAlessandro
   rhruiz - hasmanyguitars - sevenseacat
   LostKobrakai - egze - dvic
   

   View Slide

5. How to write effective
   tests
   

   View Slide

6. Learn by doing
   

   View Slide

7. Learn by doing
   → How to write LiveView tests
   

   View Slide

8. Learn by doing
   → How to write LiveView tests
   → Testing the right things
   

   View Slide

9. Learn by doing
   → How to write LiveView tests
   → Testing the right things
   → Writing explicit tests
   

   View Slide

10. View Slide

11. Version 0.14.4
    

    View Slide

12. View Slide

13. How to write
    LiveView
    tests
    

    View Slide

14. Setup
    defmodule MyAppWeb.TodoLiveTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    end
    

    View Slide

15. Setup
    defmodule MyAppWeb.TodoLiveTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    end
    

    View Slide

16. Setup
    defmodule MyAppWeb.TodoLiveTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    end
    

    View Slide

17. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

18. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

19. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

20. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

21. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

22. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

23. Anatomy of a test
    {:ok, view, _html} = live(conn, "/todo")
    rendered =
    view
    |> element("li", "Hold council of Elrond")
    |> render_click()
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

24. live/2
    {:ok, view, html} = live(conn, "/todo")
    assert html =~ "Your Todo"
    assert render(view) =~ "Your Todo"
    

    View Slide

25. live/2
    {:ok, view, html} = live(conn, "/todo")
    assert html =~ "Your Todo"
    assert render(view) =~ "Your Todo"
    

    View Slide

26. live/2
    {:ok, view, html} = live(conn, "/todo")
    assert html =~ "Your Todo"
    assert render(view) =~ "Your Todo"
    

    View Slide

27. live/2
    {:ok, view, html} = live(conn, "/todo")
    assert html =~ "Your Todo"
    assert render(view) =~ "Your Todo"
    

    View Slide

28. element/3
    view
    |> element("li", "Hold council of Elrond")
    %Element{
    selector: "li",
    text_filter: "Hold council of Elrond"
    }
    

    View Slide

29. element/3
    view
    |> element("li", "Hold council of Elrond")
    %Element{
    selector: "li",
    text_filter: "Hold council of Elrond"
    }
    

    View Slide

30. form/3
    view
    |> form("#attendee-form", %{
    email: "gandalf@thefellowship.com"
    })
    %Element{
    selector: "#attendee-form",
    form_data: %{
    email: "gandalf@thefellowship.com"
    }
    }
    

    View Slide

31. form/3
    view
    |> form("#attendee-form", %{
    email: "gandalf@thefellowship.com"
    })
    %Element{
    selector: "#attendee-form",
    form_data: %{
    email: "gandalf@thefellowship.com"
    }
    }
    

    View Slide

32. CSS selectors
    selector example
    classes ".button"
    ids "#user-name"
    tags "h1"
    data attributes "[data-role=user-heading]"
    

    View Slide

33. render_* functions
    render_blur/2
    render_blur/3
    render_change/2
    render_change/3
    render_click/2
    render_click/3
    render_focus/2
    render_focus/3
    render_keydown/2
    render_keydown/3
    render_keyup/2
    render_keyup/3
    render_submit/2
    render_submit/3
    

    View Slide

34. Assertions
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

35. Assertions
    assert rendered =~ "Tell tale of Elendil"
    assert has_element?(view, "p", "Tell tale of Elendil")
    

    View Slide

36. Example: Adding a new
    todo
    

    View Slide

37. Adding a new todo
    

    View Slide

38. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

39. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

40. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

41. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

42. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

43. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

44. Two alternatives:
    

    View Slide

45. Two alternatives:
    → Use render_submit/3 without form/3.
    

    View Slide

46. Two alternatives:
    → Use render_submit/3 without form/3.
    → Assert rendered text
    

    View Slide

47. render_submit/3
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    - |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    - |> render_submit()
    + |> render_submit("create-todo", todo: %{text: "Decide fate of ring"})
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

48. render_submit/3
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    - |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    - |> render_submit()
    + |> render_submit("create-todo", todo: %{text: "Decide fate of ring"})
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

49. render_submit/3
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    - |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    - |> render_submit()
    + |> render_submit("create-todo", todo: %{text: "Decide fate of ring"})
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

50. Targets this directly
    def handle_event("create-todo", %{"todo" => params}, socket) do
    # event handler
    {:noreply, socket}
    end
    

    View Slide

51. You could delete the entire form
    - <%= f = form_for @changeset, "#",
    - phx_submit: "create-todo",
    - id: "new-todo" %>
    -
    - <%= text_input f, :text, placeholder: "Enter todo here" %>
    - <%= submit "Add todo" %>
    -
    

    View Slide

52. !
    

    View Slide

53. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

54. Avoid targeting events
    directly
    

    View Slide

55. Asserting text
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    + rendered =
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    - assert has_element?(view, ".todo", "Decide fate of ring")
    + assert rendered =~ "Decide fate of ring"
    end
    

    View Slide

56. Asserting text
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    + rendered =
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    - assert has_element?(view, ".todo", "Decide fate of ring")
    + assert rendered =~ "Decide fate of ring"
    end
    

    View Slide

57. Asserting text
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    + rendered =
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    - assert has_element?(view, ".todo", "Decide fate of ring")
    + assert rendered =~ "Decide fate of ring"
    end
    

    View Slide

58. View Slide

59. View Slide

60. Use has_element? in
    assertions
    

    View Slide

61. Adding a new todo
    test "user can add a new todo", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> form("#new-todo", todo: %{text: "Decide fate of ring"})
    |> render_submit()
    assert has_element?(view, ".todo", "Decide fate of ring")
    end
    

    View Slide

62. Example: Showing a
    todo's details
    

    View Slide

63. Showing a todo's details
    

    View Slide

64. Showing a todo's details
    test "selecting a todo opens todo details panel", %{conn: conn} do
    todo = create_todo(text: "Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
    |> render_click()
    assert has_element?(view, "#todo-#{todo.id}-details")
    end
    

    View Slide

65. Showing a todo's details
    test "selecting a todo opens todo details panel", %{conn: conn} do
    todo = create_todo(text: "Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
    |> render_click()
    assert has_element?(view, "#todo-#{todo.id}-details")
    end
    

    View Slide

66. Showing a todo's details
    test "selecting a todo opens todo details panel", %{conn: conn} do
    todo = create_todo(text: "Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
    |> render_click()
    assert has_element?(view, "#todo-#{todo.id}-details")
    end
    

    View Slide

67. Showing a todo's details
    test "selecting a todo opens todo details panel", %{conn: conn} do
    todo = create_todo(text: "Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
    |> render_click()
    assert has_element?(view, "#todo-#{todo.id}-details")
    end
    

    View Slide

68. Showing a todo's details
    test "selecting a todo opens todo details panel", %{conn: conn} do
    todo = create_todo(text: "Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
    |> render_click()
    assert has_element?(view, "#todo-#{todo.id}-details")
    end
    

    View Slide

69. Showing a todo's details
    test "selecting a todo opens todo details panel", %{conn: conn} do
    todo = create_todo(text: "Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
    |> render_click()
    assert has_element?(view, "#todo-#{todo.id}-details")
    end
    

    View Slide

70. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

71. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

72. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

73. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

74. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

75. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

76. Testing the details
    defmodule MyAppWeb.TodoComponentTest do
    use MyAppWeb.ConnCase
    import Phoenix.LiveViewTest
    alias MyAppWeb.TodoComponent
    test "renders todo with notes" do
    todo = create_todo(text: "Decide fate of ring", notes: "Cannot be destroyed by axe")
    html = render_component(TodoComponent, todo: todo)
    assert html =~ todo.text
    assert html =~ todo.notes
    end
    end
    

    View Slide

77. Testing the
    right things
    

    View Slide

78. Example: Marking a todo
    as complete
    

    View Slide

79. Marking a todo as complete
    

    View Slide

80. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

81. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

82. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

83. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

84. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

85. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

86. Assert database changes?
    test "user can mark todo as complete", %{conn: conn} do
    {:ok, todo} = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    updated_todo = Repo.get(MyApp.Todo, todo.id)
    assert updated_todo.complete
    end
    

    View Slide

87. Assert database changes?
    test "user can mark todo as complete", %{conn: conn} do
    {:ok, todo} = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    updated_todo = Repo.get(MyApp.Todo, todo.id)
    assert updated_todo.complete
    end
    

    View Slide

88. Write tests
    from the
    perspective
    of the user
    

    View Slide

89. Marking a todo as complete
    test "user can mark todo as complete", %{conn: conn} do
    todo = create_todo("Hold council of Elrond")
    {:ok, view, _html} = live(conn, "/todo")
    view
    |> element("#todo-#{todo.id} input[name=todo]")
    |> render_click()
    assert has_element?(view, "s", "Hold council of Elrond")
    end
    

    View Slide

90. But how to test this logic?
    def handle_event("complete-todo", %{"value" => todo_id}, socket) do
    Todo
    |> Repo.get(todo_id)
    |> Todo.changeset(%{complete: true})
    |> Repo.update!()
    {:noreply, assign(socket, :todos, Todos.get_all())}
    end
    

    View Slide

91. But how to test this logic?
    def handle_event("complete-todo", %{"value" => todo_id}, socket) do
    Todo
    |> Repo.get(todo_id)
    |> Todo.changeset(%{complete: true})
    |> Repo.update!()
    {:noreply, assign(socket, :todos, Todos.get_all())}
    end
    

    View Slide

92. Listen to your tests for
    signs of coupling
    

    View Slide

93. Extract logic
    def handle_event("complete-todo", %{"value" => todo_id}, socket) do
    - Todo
    - |> Repo.get(todo_id)
    - |> Todo.changeset(%{complete: true})
    - |> Repo.update!()
    + Todos.complete_todo(todo_id)
    {:noreply, assign(socket, :todos, Todos.get_all())}
    end
    

    View Slide

94. Extract logic
    def handle_event("complete-todo", %{"value" => todo_id}, socket) do
    Todos.complete_todo(todo_id)
    {:noreply, assign(socket, :todos, Todos.get_all())}
    end
    

    View Slide

95. Example: Changing how
    to show a todo's details
    

    View Slide

96. Showing a todo's details
    

    View Slide

97. Implementation Changes
    - phx-click="show-todo"
    - phx-value-id="<%= todo.id %>"
    - data-role="todo-text">
    -
    - <%= todo.text %>
    + <%= live_patch todo.text,
    + to: Routes.todo_path(@socket, :show, todo),
    + data: [role: "todo-text"]
    + %>
    
    

    View Slide

98. Implementation Changes
    - phx-click="show-todo"
    - phx-value-id="<%= todo.id %>"
    - data-role="todo-text">
    -
    - <%= todo.text %>
    + <%= live_patch todo.text,
    + to: Routes.todo_path(@socket, :show, todo),
    + data: [role: "todo-text"]
    + %>
    
    

    View Slide

99. Implementation Changes
    - phx-click="show-todo"
    - phx-value-id="<%= todo.id %>"
    - data-role="todo-text">
    -
    - <%= todo.text %>
    + <%= live_patch todo.text,
    + to: Routes.todo_path(@socket, :show, todo),
    + data: [role: "todo-text"]
    + %>
    
    

    View Slide

100. Change to assert_patched/2?
     test "selecting a todo opens todo details panel", %{conn: conn} do
     todo = create_todo(text: "Hold council of Elrond")
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     - assert has_element?(view, "#todo-#{todo.id}-details")
     + assert_patched(view, "/todo/#{todo.id}")
     end
     

     View Slide

101. Change to assert_patched/2?
     test "selecting a todo opens todo details panel", %{conn: conn} do
     todo = create_todo(text: "Hold council of Elrond")
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     - assert has_element?(view, "#todo-#{todo.id}-details")
     + assert_patched(view, "/todo/#{todo.id}")
     end
     

     View Slide

102. Change to assert_patched/2?
     test "selecting a todo opens todo details panel", %{conn: conn} do
     todo = create_todo(text: "Hold council of Elrond")
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     - assert has_element?(view, "#todo-#{todo.id}-details")
     + assert_patched(view, "/todo/#{todo.id}")
     end
     

     View Slide

103. What does the user see?
     Existing behavior New behavior
     clicking on todo's text
     opens details panel
     clicking on todo's text
     opens details panel
     

     View Slide

104. Test
     behavior, not
     implementat
     ion
     

     View Slide

105. Test is unchanged
     test "selecting a todo opens todo details panel", %{conn: conn} do
     todo = create_todo(text: "Hold council of Elrond")
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     assert has_element?(view, "#todo-#{todo.id}-details")
     end
     

     View Slide

106. Writing
     explicit tests
     

     View Slide

107. Example: Adding notes to
     a todo
     

     View Slide

108. Adding notes
     

     View Slide

109. Notes icon
     

     View Slide

110. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

111. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

112. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

113. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

114. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

115. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

116. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

117. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

118. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

119. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

120. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

121. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

122. Comments are code
     smells. They hint at lack
     of clarity.
     

     View Slide

123. Write tests
     in the
     domain of
     your
     application
     

     View Slide

124. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

125. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     # Opening todo details
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

126. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     defp open_todo_details(view, todo) do
     view
     |> element("#todo-#{todo.id} [data-role=todo-text]", todo.text)
     |> render_click()
     view
     end
     

     View Slide

127. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     # Opening editable notes
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

128. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     |> edit_notes(todo)
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     defp edit_notes(view, todo) do
     view
     |> element("#todo-#{todo.id}-details [data-role=edit-todo-notes]", "Edit notes")
     |> render_click()
     view
     end
     

     View Slide

129. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     |> edit_notes(todo)
     # Add notes
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

130. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     |> edit_notes(todo)
     |> add_notes(todo, notes)
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     defp add_notes(view, todo, notes) do
     view
     |> form("#todo-#{todo.id}-details [data-role=update-todo-notes]", todo: %{notes: notes})
     |> render_submit()
     view
     end
     

     View Slide

131. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     |> edit_notes(todo)
     |> add_notes(todo, notes)
     assert has_element?(view, "#todo-#{todo.id}-details [data-role=todo-notes]", notes)
     assert has_element?(view, "#todo-#{todo.id} [data-role=notes-icon]")
     end
     

     View Slide

132. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     |> edit_notes(todo)
     |> add_notes(todo, notes)
     assert has_element?(view, todo_details(todo), notes)
     assert has_element?(view, todo_notes_icon(todo))
     end
     defp todo_details(todo) do
     "#todo-#{todo.id}-details [data-role=todo-notes]"
     end
     defp todo_notes_icon(todo) do
     "#todo-#{todo.id} [data-role=notes-icon]"
     end
     

     View Slide

133. test "user can edit notes", %{conn: conn} do
     todo = create_todo(text: "Decide fate of the ring")
     notes = "We might have to cast it into mount doom"
     {:ok, view, _html} = live(conn, "/todo")
     view
     |> open_todo_details(todo)
     |> edit_notes(todo)
     |> add_notes(todo, notes)
     assert has_element?(view, todo_details(todo), notes)
     assert has_element?(view, todo_notes_icon(todo))
     end
     

     View Slide

134. Effective LiveView Testing
     Write tests
     

     View Slide

135. Effective LiveView Testing
     Write tests
     from the perspective of the user
     (testing behavior, not implementation)
     

     View Slide

136. Effective LiveView Testing
     Write tests
     from the perspective of the user
     (testing behavior, not implementation)
     in the domain of your application.
     

     View Slide

137. testingliveview.com
     tddphoenix.com
     @germsvel
     

     View Slide