Create wallaby screenshot test

Author: BrooklinJazz

README.md

@@ -17,3 +17,15 @@ Ready to run in production? Please [check our deployment guides](https://hexdocs
   * Docs: https://hexdocs.pm/phoenix
   * Forum: https://elixirforum.com/c/phoenix-forum
   * Source: https://github.com/phoenixframework/phoenix
+
+## Wallaby
+
+We use [Wallaby](https://github.com/elixir-wallaby/wallaby) for end-to-end testing. If you want to run Wallaby you'll have to follow their instructions and install the ChromeDriver.
+
+To execute wallaby tests run:
+
+```elixir
+mix test --only wallaby
+```
+
+For example, we have a `/screenshots` folder with screenshots of every page at different screen sizes in order to ensure consistent responsive styles across devices.

config/test.exs

@@ -36,3 +36,5 @@ config :phoenix, :plug_init_mode, :runtime
 config :wallaby, driver: Wallaby.Chrome
 # config :wallaby, driver: Wallaby.Selenium
 config :wallaby, otp_app: :elixir_newbie
+
+config :elixir_newbie, ElixirNewbieWeb.Endpoint, server: true

lib/elixir_newbie_web/controllers/page_html/home.html.heex

@@ -1 +1 @@
-Hello World
+<h1 class="text-white">Hello World</h1>

lib/elixir_newbie_web/live/home_live.ex

@@ -12,6 +12,7 @@ defmodule ElixirNewbieWeb.HomeLive do
 
   def render(assigns) do
     ~H"""
+    Some Text
     <section class="bg-[url('/images/background-smoke-transparent.webp')] min-h-screen bg-black bg-no-repeat bg-cover">
       <.navigation/>
       <section class="flex h-fit w-full flex-col gap-12 4k:gap-36 lg:flex-row xl:gap-24 mx-auto sm:w-full md:w-3/4 lg:w-full xl:w-3/4">
@@ -60,7 +61,7 @@ defmodule ElixirNewbieWeb.HomeLive do
             >
               <div class="transition duration-300 ease-in-out group-hover:scale-110">
                 <div class="animate-spin-slow absolute h-full w-full rounded-full border-l-2 border-black"/>
-                <img alt="DockYard Academy Icon Button" class="rounded-full border-2" src="images/dockyard_academy_icon_reduced.webp"/>
+                <img id="dockyard-academy-icon" alt="DockYard Academy Icon Button" class="rounded-full border-2" src="images/dockyard_academy_icon_reduced.webp"/>
               </div>
               <p class="absolute -bottom-12 w-full text-center text-sm text-white">DockYard Academy</p>
             </.link>

lib/elixir_newbie_web/router.ex

@@ -17,8 +17,8 @@ defmodule ElixirNewbieWeb.Router do
   scope "/", ElixirNewbieWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
-    # live "/", HomeLive, :home
+    # get "/", PageController, :home
+    live "/", HomeLive, :home
     live "/blog", BlogLive, :blog
     live "/podcast", PodcastLive, :podcast
     live "/resources", ResourcesLive, :resources

screenshots/blog/2xl.png

@@ -0,0 +1,34 @@
+defmodule ElixirNewbieWeb.Wallaby.SnapshotTests do
+  use ExUnit.Case, async: true
+  use Wallaby.Feature
+
+  @sizes [
+    {"sm", 640},
+    {"md", 768},
+    {"lg", 1024},
+    {"xl", 1280},
+    {"2xl", 1536},
+    {"4k", 3840}
+  ]
+  @urls [
+    "",
+    "blog",
+    "resources",
+    "podcast",
+    "community"
+  ]
+
+  @tag :wallaby
+  feature "take snapshots", %{session: session} do
+    Enum.each(@urls, fn url ->
+      page = visit(session, url)
+
+      Enum.each(@sizes, fn {size, width} ->
+        screen = resize_window(page, width, 2000)
+
+        Process.sleep(500)
+        take_screenshot(screen, name: "#{(url == "" && "home") || url}/#{size}")
+      end)
+    end)
+  end
+end

screenshots/blog/4k.png

@@ -1,4 +1,5 @@
 ExUnit.start()
+ExUnit.configure(exclude: :wallaby)
 Ecto.Adapters.SQL.Sandbox.mode(ElixirNewbie.Repo, :manual)
 {:ok, _} = Application.ensure_all_started(:wallaby)
 Application.put_env(:wallaby, :base_url, ElixirNewbieWeb.Endpoint.url())