Add browser based testing

.gitignore

@@ -79,6 +79,7 @@ bonfire.code-workspace
 benchmarks/output
 .vscode/
 .local
+screenshots/
 
 # we use pnpm, so ignore others
 assets/package-lock.json

assets/package.json

@@ -12,32 +12,33 @@
     "build.css": "TAILWIND_MODE=build NODE_ENV=production postcss ./css/app.scss -o ../priv/static/css/bonfire.css"
   },
   "dependencies": {
-    "@alpinejs/collapse": "^3.9.1",
-    "@alpinejs/intersect": "^3.9.1",
-    "@github/details-dialog-element": "^3.1.2",
-    "@github/details-menu-element": "^1.0.9",
-    "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/line-clamp": "^0.3.0",
-    "@tailwindcss/typography": "^0.5.0",
-    "@yaireo/tagify": "^4.9.4",
+    "@alpinejs/collapse": "^3.10.2",
+    "@alpinejs/intersect": "^3.10.2",
+    "@github/details-dialog-element": "^3.1.3",
+    "@github/details-menu-element": "^1.0.12",
+    "@tailwindcss/forms": "^0.4.1",
+    "@tailwindcss/line-clamp": "^0.3.1",
+    "@tailwindcss/typography": "^0.5.2",
+    "@yaireo/tagify": "^4.12.0",
     "alpinejs": "^3.10.2",
-    "daisyui": "^2.14.2",
+    "daisyui": "^2.15.0",
     "nprogress": "^0.2.0",
     "phoenix": "link:../deps/phoenix",
     "phoenix_html": "link:../deps/phoenix_html",
     "phoenix_live_view": "link:../deps/phoenix_live_view"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.7",
+    "chromedriver": "^101.0.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.12.8",
-    "only-allow": "^1.0.0",
-    "pnpm": "^6.7.6",
-    "postcss": "^8.4.5",
-    "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.2",
-    "prop-types": "^15.8.0",
-    "tailwindcss": "~3.0.7",
+    "esbuild": "^0.14.39",
+    "only-allow": "^1.1.0",
+    "pnpm": "^7.1.3",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.1.0",
+    "prop-types": "^15.8.1",
+    "tailwindcss": "~3.0.24",
     "tailwindcss-debug-screens": "^2.2.1"
   }
 }

flavours/classic/config/runtime.exs

@@ -53,7 +53,7 @@ config :bonfire,
   encryption_salt: encryption_salt,
   signing_salt: signing_salt
 
-start_server? = if config_env() == :test, do: System.get_env("START_SERVER", "false"), else: System.get_env("START_SERVER", "true")
+start_server? = if config_env() == :test, do: System.get_env("START_SERVER", "true"), else: System.get_env("START_SERVER", "true")
 
 config :bonfire, Bonfire.Web.Endpoint,
   server: String.to_existing_atom(start_server?),

flavours/classic/config/test.exs

@@ -64,3 +64,15 @@ config :paginator, Paginator.Repo,
 config :exsync,
   src_monitor: false,
   extra_extensions: [".leex", ".js", ".css", ".sface"]
+
+
+# for headless browser testing:
+config :bonfire, sql_sandbox: true
+config :wallaby,
+  # base_url: Bonfire.Web.Endpoint.url(),
+  otp_app: :bonfire,
+  screenshot_on_failure: true,
+  chromedriver: [
+    path: "assets/node_modules/chromedriver/bin/chromedriver", # point to your chromedriver path
+    headless: false # change to false if you want to see the browser in action
+  ]

lib/web/endpoint_template.ex

@@ -20,8 +20,12 @@ quote do
     encryption_salt: Config.get!(:encryption_salt)
   ]
 
+  if Application.get_env(:bonfire, :sql_sandbox) do
+    plug(Phoenix.Ecto.SQL.Sandbox)
+  end
+
   socket "/live", Phoenix.LiveView.Socket,
-    websocket: [connect_info: [session: @session_options]]
+    websocket: [connect_info: [:user_agent, session: @session_options]]
 
   if module_enabled?(Bonfire.API.GraphQL.UserSocket) do
     socket "/api/socket", Bonfire.API.GraphQL.UserSocket,

mix.exs

@@ -152,6 +152,7 @@ defmodule Bonfire.MixProject do
       {:mix_test_watch, "~> 1.0", only: :test, runtime: false},
       {:mix_test_interactive, "~> 1.0", only: :test, runtime: false},
       {:ex_unit_notifier, "~> 1.0", only: :test},
+      {:wallaby, "~> 0.29.1", runtime: false, only: :test},
 
       # Benchmarking utilities
       {:benchee, "~> 1.1", only: :dev},

mix.lock

@@ -199,6 +199,8 @@
   "verbs": {:git, "https://github.com/shannonwells/verbs_ex", "4b27067385390d4d2063ec1a09f9d96b97ed9a73", []},
   "voodoo": {:git, "https://github.com/bonfire-networks/voodoo", "67155848ec61c99dd83899c8dc4b8736dc5403b8", [branch: "main"]},
   "waffle": {:hex, :waffle, "1.1.6", "e944b31f8a3f3b15b8ce5c6ca315cecbcbfab354c2bb83f5980c79728cf422c0", [:mix], [{:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:ex_aws_s3, "~> 2.1", [hex: :ex_aws_s3, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: false]}, {:sweet_xml, "~> 0.6", [hex: :sweet_xml, repo: "hexpm", optional: true]}], "hexpm", "deecbf205acc5b6d0bc23d3813fa384486606a50d82b803edbd29e2a46258d4d"},
+  "wallaby": {:hex, :wallaby, "0.29.1", "7ad61c98a1425db291a392e45504e897b1271c746b40fe9f19f87a86729d2fac", [:mix], [{:ecto_sql, ">= 3.0.0", [hex: :ecto_sql, repo: "hexpm", optional: true]}, {:httpoison, "~> 0.12 or ~> 1.0", [hex: :httpoison, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_ecto, ">= 3.0.0", [hex: :phoenix_ecto, repo: "hexpm", optional: true]}, {:web_driver_client, "~> 0.2.0", [hex: :web_driver_client, repo: "hexpm", optional: false]}], "hexpm", "21b1360c4b13adbb0a1ff5c1053204cc4489ac81e9579c6c5011a27915cb7415"},
+  "web_driver_client": {:hex, :web_driver_client, "0.2.0", "63b76cd9eb3b0716ec5467a0f8bead73d3d9612e63f7560d21357f03ad86e31a", [:mix], [{:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:tesla, "~> 1.3", [hex: :tesla, repo: "hexpm", optional: false]}], "hexpm", "83cc6092bc3e74926d1c8455f0ce927d5d1d36707b74d9a65e38c084aab0350f"},
   "where": {:git, "https://github.com/bonfire-networks/where", "231049bfcab1d41470a3e77d31ef333ca6b8e932", [branch: "main"]},
   "zest": {:hex, :zest, "0.1.2", "ddf3a045ee32c6452b8ac050b22da0b2eceae5aaa7d63163fb09e5fbb925fbbe", [:mix], [], "hexpm", "ebe2d6acf615de286e45846a3d6daf72d7c20f2c5eefada6d8a1729256a3974a"},
 }

test/test_helper.exs

@@ -26,3 +26,6 @@ ExUnit.start(
 
 #     :ok
 # end)
+
+Application.put_env(:wallaby, :base_url, Bonfire.Web.Endpoint.url())
+{:ok, _} = Application.ensure_all_started(:wallaby)