Set up wallaby and add a feature test

Followed the instructions in the wallaby readme, using chromdriver
because that seems to be the most common setup that works well for
people, based on looking around the elixir forum

I added a new mix alias for running tests in ci because you have to
ensure that js is built otherwise liveview stuff doesn't work. there may
be a day when we need to also add the css assets?

Finally, I skipped everything in the setup about running tests async and
ensuring database connections don't mess with one another. We may need
to do that stuff at some point.

Note that failing feature tests will add a screenshot artifact

closes #311

.circleci/config.yml

@@ -2,6 +2,9 @@ version: 2.1
 
 description: Common jobs for testing and building phoenix applications
 
+orbs:
+  browser-tools: circleci/[email protected]
+  node: circleci/[email protected]
 executors:
   builder:
     docker:
@@ -83,7 +86,7 @@ commands:
     steps:
       - run:
           name: Run tests
-          command: MIX_ENV=test mix test
+          command: MIX_ENV=test mix test-ci
 
 jobs:
   check-formatting:
@@ -97,6 +100,7 @@ jobs:
   run-unit-tests:
     executor: builder
     steps:
+      - browser-tools/install-chromedriver
       - checkout
       - install-deps:
           include-assets: false
@@ -113,6 +117,9 @@ jobs:
       - store_artifacts:
           path: cover
           destination: cover
+      - store_artifacts:
+          path: screenshots
+          destination: screenshots
 
 workflows:
   version: 2

.gitignore

@@ -37,3 +37,6 @@ npm-debug.log
 figgy-fixture-container/fixture-exports/*.binary
 figgy-fixture-container/fixture-exports/*.sql
 solr/conf/solr_config.zip
+
+# wallaby screenshots
+screenshots/*

README.md

@@ -6,6 +6,13 @@ This project is built in Elixir using Phoenix LiveView as a web framework and Br
 
 ## Project Setup for Development and Test environments
 
+### First time setup
+
+- `brew install asdf`
+- `asdf install`
+- `brew install --cask chromedriver`
+  - required to run feature tests
+
 ### Every time setup
 
 Do these things every time you start new work in this project in dev or test

config/test.exs

@@ -26,12 +26,11 @@ config :dpul_collections, DpulCollections.FiggyRepo,
   show_sensitive_data_on_connection_error: true,
   pool_size: 10
 
-# We don't run a server during test. If one is required,
-# you can enable the server option below.
+# Wallaby feature tests require the server to be running
 config :dpul_collections, DpulCollectionsWeb.Endpoint,
   http: [ip: {127, 0, 0, 1}, port: 4002],
   secret_key_base: "fS76i6oeLWDlMP7AEe+nExNz3J4tHyaIZrELNhSmY3LUocagaphwGc8Ff7rAh6qS",
-  server: false
+  server: true
 
 # In test we don't send emails.
 config :dpul_collections, DpulCollections.Mailer, adapter: Swoosh.Adapters.Test
@@ -72,3 +71,11 @@ config :dpul_collections, :start_indexing_pipeline?, fn -> false end
 config :dpul_collections, :figgy_hydrator, poll_interval: 50
 
 config :dpul_collections, :web_connections, figgy_url: "https://figgy.example.com"
+
+config :wallaby,
+  otp_app: :dpul_collections,
+  screenshot_on_failure: true,
+  chromedriver: [
+    # change to false if you want to see the browser in action
+    headless: true
+  ]

mix.exs

@@ -73,7 +73,8 @@ defmodule DpulCollections.MixProject do
       {:broadway, "~> 1.0"},
       {:ex_doc, "~> 0.21", only: :dev, runtime: false},
       {:req, "~> 0.5.0"},
-      {:broadway_dashboard, "~> 0.4.0"}
+      {:broadway_dashboard, "~> 0.4.0"},
+      {:wallaby, "~> 0.30", runtime: false, only: :test}
     ]
   end
 
@@ -88,7 +89,17 @@ defmodule DpulCollections.MixProject do
       setup: ["deps.get", "ecto.setup", "assets.setup", "assets.build"],
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
-      test: ["ecto.create --quiet", "ecto.migrate --quiet", "coveralls.html"],
+      test: [
+        "ecto.create --quiet",
+        "ecto.migrate --quiet",
+        "coveralls.html"
+      ],
+      "test-ci": [
+        "esbuild dpul_collections",
+        "ecto.create --quiet",
+        "ecto.migrate --quiet",
+        "coveralls.html"
+      ],
       "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
       "assets.build": ["tailwind dpul_collections", "esbuild dpul_collections"],
       "assets.deploy": [

test/dpul_collections_web/features/locale_test.exs

@@ -0,0 +1,17 @@
+defmodule DpulCollectionsWeb.Features.LocaleTest do
+  use ExUnit.Case, async: true
+  use Wallaby.Feature
+
+  import Wallaby.Query
+
+  feature "locale persists between pages", %{session: session} do
+    session
+    |> visit("/")
+    |> assert_has(css("h3", text: "Explore Our Digital Collections"))
+    |> click(button("Language"))
+    |> click(link("Español"))
+    |> assert_has(css("h3", text: "Explora nuestras colecciones"))
+    |> click(button("Buscar"))
+    |> assert_has(css("div#filters", text: "Relevancia"))
+  end
+end

test/test_helper.exs

@@ -1,2 +1,5 @@
 ExUnit.start()
 Ecto.Adapters.SQL.Sandbox.mode(DpulCollections.Repo, :manual)
+
+{:ok, _} = Application.ensure_all_started(:wallaby)
+Application.put_env(:wallaby, :base_url, DpulCollectionsWeb.Endpoint.url())