Phoenix - Test smarter, not harder

# Phoenix
> Test _smarter_, not harder

------

### The Evolution of a 
## Feature test

- show of hands
  - phoenix
  - wallaby
  - playwright

</aside>

---

## Test pyramid

- e2e
- acceptance
- feature 
- integration
- unit
</div>

</div>

<small>

https://martinfowler.com/bliki/TestPyramid.html

</small>

---

## <svg style="transform: translateY(20px); color: red;" width="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path style="fill:currentColor" d="M212.9 344.3c3.8-.1 22.8-1.4 25.6-2.2-2.4-2.6-43.6-1-68-49.6-4.3-8.6-7.5-17.6-6.4-27.6 2.9-25.5 32.9-30 52-18.5 36 21.6 63.3 91.3 113.7 97.5 37 4.5 84.6-17 108.2-45.4-.6-.1-.8-.2-1-.1-.4 .1-.8 .2-1.1 .3-33.3 12.1-94.3 9.7-134.7-14.8-37.6-22.8-53.1-58.7-51.8-74.6 1.8-21.3 22.9-23.2 35.9-19.6 14.4 3.9 24.4 17.6 38.9 27.4 15.6 10.4 32.9 13.7 51.3 10.3 14.9-2.7 34.4-12.3 36.5-14.5-1.1-.1-1.8-.1-2.5-.2-6.2-.6-12.4-.8-18.5-1.7C279.8 194.5 262.1 47.4 138.5 37.9 94.2 34.5 39.1 46 2.2 72.9c-.8 .6-1.5 1.2-2.2 1.8 .1 .2 .1 .3 .2 .5 .8 0 1.6-.1 2.4-.2 6.3-1 12.5-.8 18.7 .3 23.8 4.3 47.7 23.1 55.9 76.5 5.3 34.3-.7 50.8 8 86.1 19 77.1 91 107.6 127.7 106.4zM75.3 64.9c-.9-1-.9-1.2-1.3-2 12.1-2.6 24.2-4.1 36.6-4.8-1.1 14.7-22.2 21.3-35.3 6.8zm196.9 350.5c-42.8 1.2-92-26.7-123.5-61.4-4.6-5-16.8-20.2-18.6-23.4l.4-.4c6.6 4.1 25.7 18.6 54.8 27 24.2 7 48.1 6.3 71.6-3.3 22.7-9.3 41-.5 43.1 2.9-18.5 3.8-20.1 4.4-24 7.9-5.1 4.4-4.6 11.7 7 17.2 26.2 12.4 63-2.8 97.2 25.4 2.4 2 8.1 7.8 10.1 10.7-.1 .2-.3 .3-.4 .5-4.8-1.5-16.4-7.5-40.2-9.3-24.7-2-46.3 5.3-77.5 6.2zm174.8-252c16.4-5.2 41.3-13.4 66.5-3.3 16.1 6.5 26.2 18.7 32.1 34.6 3.5 9.4 5.1 19.7 5.1 28.7-.2 0-.4 0-.6 .1-.2-.4-.4-.9-.5-1.3-5-22-29.9-43.8-67.6-29.9-50.2 18.6-130.4 9.7-176.9-48-.7-.9-2.4-1.7-1.3-3.2 .1-.2 2.1 .6 3 1.3 18.1 13.4 38.3 21.9 60.3 26.2 30.5 6.1 54.6 2.9 79.9-5.2zm102.7 117.5c-32.4 .2-33.8 50.1-103.6 64.4-18.2 3.7-38.7 4.6-44.9 4.2v-.4c2.8-1.5 14.7-2.6 29.7-16.6 7.9-7.3 15.3-15.1 22.8-22.9 19.5-20.2 41.4-42.2 81.9-39 23.1 1.8 29.3 8.2 36.1 12.7 .3 .2 .4 .5 .7 .9-.5 0-.7 .1-.9 0-7-2.7-14.3-3.3-21.8-3.3zm-12.3-24.1c-.1 .2-.1 .4-.2 .6-28.9-4.4-48-7.9-68.5 4-17 9.9-31.4 20.5-62 24.4-27.1 3.4-45.1 2.4-66.1-8-.3-.2-.6-.4-1-.6 0-.2 .1-.3 .1-.5 24.9 3.8 36.4 5.1 55.5-5.8 22.3-12.9 40.1-26.6 71.3-31 29.6-4.1 51.3 2.5 70.9 16.9zM268.6 97.3c-.6-.6-1.1-1.2-2.1-2.3 7.6 0 29.7-1.2 53.4 8.4 19.7 8 32.2 21 50.2 32.9 11.1 7.3 23.4 9.3 36.4 8.1 4.3-.4 8.5-1.2 12.8-1.7 .4-.1 .9 0 1.5 .3-.6 .4-1.2 .9-1.8 1.2-8.1 4-16.7 6.3-25.6 7.1-26.1 2.6-50.3-3.7-73.4-15.4-19.3-9.9-36.4-22.9-51.4-38.6zM640 335.7c-3.5 3.1-22.7 11.6-42.7 5.3-12.3-3.9-19.5-14.9-31.6-24.1-10-7.6-20.9-7.9-28.1-8.4 .6-.8 .9-1.2 1.2-1.4 14.8-9.2 30.5-12.2 47.3-6.5 12.5 4.2 19.2 13.5 30.4 24.2 10.8 10.4 21 9.9 23.1 10.5 .1-.1 .2 0 .4 .4zm-212.5 137c2.2 1.2 1.6 1.5 1.5 2-18.5-1.4-33.9-7.6-46.8-22.2-21.8-24.7-41.7-27.9-48.6-29.7 .5-.2 .8-.4 1.1-.4 13.1 .1 26.1 .7 38.9 3.9 25.3 6.4 35 25.4 41.6 35.3 3.2 4.8 7.3 8.3 12.3 11.1z"/></svg> Phoenix

- wallaby / playwright 🚧
  - phoenix_test 
  - LiveViewTest
  - ConnTest
</div>

---
## Playwright

<small>

https://www.bigbinary.com/blog/why-we-switched-from-cypress-to-playwright

</small>

- liveview e2e tests

</aside>

---

## Wallaby

<small>

- chromedriver
- selenium
- HTTP + JSON: WebDriver Wire Protocol
- chromedriver: CDP

</small>

<small>

- https://w3c.github.io/webdriver/
- https://www.edureka.co/blog/selenium-webdriver-architecture/

</small>

---

## 🚊 Ruby on Rails

```rb
require "application_system_test_case"

class RegistrationTest < ApplicationSystemTestCase
  test "register" do
    visit registration_path
    fill_in "Email", with: "f@ftes.de"
    fill_in "Password", with: "1234"
    click_on "Register"
    assert_text "Account created"
```

- rack_test
- selenium
- cuprite <svg width="60" style="transform: translateY(10px)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path style="fill:currentColor" d="M0 256C0 209.4 12.5 165.6 34.3 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.2 98.5C101 38.5 174 0 256 0C350.8 0 433.5 51.5 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"/></svg>

</div>
</div>

<small>

https://www.allthingswild.co.uk/wild-bunch/capybara-2/

</small>

- cuprite: vanilla ruby + CDP
- stimulus reflex: not in rack_test

</aside>

---

## phoenix_test

Made with ❤️ by German Velasco

```ex
test "register", %{conn: conn} do
  conn
  |> visit("/register")
  |> fill_in("Email", with: "f@ftes.de")
  |> fill_in("Password", with: "1234")
  |> submit()
  |> assert_has("#flash-info", text: "User created")
```

- static
- live
- playwright 🚧
</div>

<small>

https://www.germanvelasco.com/blog/introducing-phoenix-test (Jan 31, 2024)

</small>

- drivers: static + live under the hood
  - no need to explicitly choose

</aside>

---

## Demo time

# 🍿

---

```sh [1|3-4|6|8]
mix phx.gen.auth Accounts User users

Do you want to create a LiveView based
authentication system? [Yn]

mix test
```

---

```ex [1|6-8|11|14-16]
defmodule SmartWeb.UserRegistrationControllerTest do
  test "creates account and logs the user in", %{conn: conn} do
    email = unique_user_email()

conn =
      post(conn, ~p"/users/register", %{
        "user" => valid_user_attributes(email: email)
      })

assert get_session(conn, :user_token)
    assert redirected_to(conn) == ~p"/"

# Now do a logged in request and assert on the menu
    conn = get(conn, ~p"/")
    response = html_response(conn, 200)
    assert response =~ email
    assert response =~ ~p"/users/settings"
    assert response =~ ~p"/users/log_out"
```
---

```ex [1|10-12|13-14|15]
defmodule UserRegistrationTest do
  use Smart.DataCase
  use PhoenixTest.Case

test "register, log out and in", %{conn: conn} do
    conn
    |> visit("/")

# Log out
    # Log in
```

---

```sh [1|3-4|6|8]
mix phx.gen.auth Accounts User users

Do you want to create a LiveView based
authentication system? [Yn]

mix test test/features/user_registration_test.exs
```

```html [1-2|4|6-9]
Could not find any elements with selector "#flash-info"
and text "User created"

Found these elements matching the selector "#flash-info":

<div id="flash-info">
  Success!
  Account created successfully!
</div>
```
</div>

---

```ex [14-15|13|11]
defmodule UserRegistrationTest do
  use Smart.DataCase
  use PhoenixTest.Case

test "register, log out and in", %{conn: conn} do
    conn
    |> visit("/")

# Log out
    # Log in
```

- fast
- live validations
- phx-trigger-action

</aside>

---

```ex [5|6]
conn
|> visit("/")
|> click_link("Register")

|> fill_in("Password", with: "short")
|> assert_has(".text-rose-600", text: "at least 12")
```

---

```heex [5|11|12-13]
<.simple_form
  for={@form}
  id="registration_form"
  phx-submit="save"
  phx-change={false # "validate"}
  phx-trigger-action={@trigger_submit}
  action={~p"/users/log_in?_action=registered"}
  method="post"
>
  <.input field={@form[:email]} type="email" label="Email" required />
  <.input phx-hook="Password" field={@form[:password]} type="password" label="Password" required />
  <p id="pwd-error" class="hidden mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden"><span class="hero-exclamation-circle-mini mt-0.5 h-5 w-5 flex-none"></span>
    should be at least 12 character(s)
  </p>
```

```sh
mix phx.server
```

</div>

---

```sh [1|2]
mix test test/features/user_registration_test.exs
1 test, 0 failures
```

```ex [8]
conn
|> visit("/")
|> click_link("Register")
|> fill_in("Email", with: "f@ftes.de")

|> fill_in("Password", with: "short")
# |> assert_has(".text-rose-600", text: "at least 12")
|> assert_has(".text-rose-600:not(.hidden)", text: "at least 12")
```
</div>

```sh [2]
mix test test/features/user_registration_test.exs
1 test, 1 failure
```
</div>

---

```ex [3-6|8]
defmodule UserRegistrationTest do
  use Smart.DataCase
  use PhoenixTest.Case,
    playwright: :chromium,
    headless: false,
    slow_mo: 900

@tag :playwright
  test "register, log out and in", %{conn: conn} do
    conn
    |> visit("/")
    |> fill_in("Password", with: "short")
    |> assert_has(".text-rose-600:not(.hidden)", text: "at least 12")
```

```sh [2]
mix test test/features/user_registration_test.exs
1 test, 0 failures
```
</div>

---

## 📝 Summary

- feature tests = phoenix_test
- Don't lose it - reuse it 🐶
- ✅ static + live view (vanilla)
- 🚧 playwright (JS)
- 🚧 advanced assertions (locators, input values)

---

###  Fredrik Teschke

Freelance Dev

`f@ftes.de`

`@ftes`

---

<div class="fragment" style="backdrop-filter: blur(8px); text-align: right; padding: 1.5rem; background-color: rgb(0 0 0 / 0.3); border-radius: 0.75 rem; width: fit-content; margin-top: 20rem; float: right;">

#### co-founder of 
## BogenGaudi 
#### Arrow Tag rental by 📦

</div>

---

### `teamengine.co.uk`
------
> Digital contracting & time-recording\
> for the Film & TV industry

---

## 🍭 Other stuff 🍬

- graphite
- mix_unused
- a11y_audit_elixir
- test_also_with