Add full e2e phoenix app test

Author: solnic

mix.exs

@@ -13,6 +13,7 @@ defmodule Sentry.Mixfile do
       package: package(),
       deps: deps(),
       elixirc_paths: elixirc_paths(Mix.env()),
+      test_paths: test_paths(System.get_env("SENTRY_INTEGRATION")),
       dialyzer: [
         flags: [:unmatched_returns, :error_handling, :extra_return],
         plt_file: {:no_warn, "plts/dialyzer.plt"},
@@ -22,7 +23,9 @@ defmodule Sentry.Mixfile do
       ],
       test_coverage: [tool: ExCoveralls],
       preferred_cli_env: [
-        "coveralls.html": :test
+        "coveralls.html": :test,
+        "test.all": :test,
+        "test.integrations": :test
       ],
       name: "Sentry",
       docs: [
@@ -83,6 +86,9 @@ defmodule Sentry.Mixfile do
   defp elixirc_paths(:test), do: ["test/support"] ++ elixirc_paths(:dev)
   defp elixirc_paths(_other), do: ["lib"]
 
+  defp test_paths(nil), do: ["test"]
+  defp test_paths(integration), do: ["test_integrations/#{integration}/test"]
+
   defp deps do
     [
       {:nimble_options, "~> 1.0"},
@@ -123,6 +129,42 @@ defmodule Sentry.Mixfile do
   end
 
   defp aliases do
-    [test: ["sentry.package_source_code", "test"]]
+    [
+      test: ["sentry.package_source_code", "test", "test.integrations"],
+      "test.integrations": &test_integrations/1
+    ]
+  end
+
+  @integrations [
+    "phoenix_app"
+  ]
+
+  defp test_integrations(args) do
+    for integration <- @integrations do
+      run_integration_tests(integration, args)
+    end
+  end
+
+  defp run_integration_tests(integration, args) do
+    header = if IO.ANSI.enabled?(), do: IO.ANSI.bright() <> IO.ANSI.cyan(), else: ""
+    reset = if IO.ANSI.enabled?(), do: IO.ANSI.reset(), else: ""
+
+    IO.puts("\n#{header}==> Running tests for integration: #{integration}#{reset}")
+
+    integration_dir = Path.join("test_integrations", integration)
+
+    {_, status} =
+      System.cmd("sh", ["-c", "cd #{integration_dir} && mix test #{Enum.join(args, " ")}"],
+        into: IO.binstream(:stdio, :line)
+      )
+
+    if status > 0 do
+      error = if IO.ANSI.enabled?(), do: IO.ANSI.red(), else: ""
+      IO.puts("#{error}Integration tests for #{integration} failed#{reset}")
+      System.at_exit(fn _ -> exit({:shutdown, 1}) end)
+    else
+      success = if IO.ANSI.enabled?(), do: IO.ANSI.green(), else: ""
+      IO.puts("#{success}Integration tests for #{integration} passed#{reset}")
+    end
   end
 end

mix.lock

@@ -1,4 +1,4 @@
-ExUnit.start(assert_receive_timeout: 1000)
+ExUnit.start()
 
 File.rm_rf!(Sentry.Sources.path_of_packaged_source_code())
 

test/test_helper.exs

@@ -0,0 +1,6 @@
+[
+  import_deps: [:ecto, :ecto_sql, :phoenix],
+  subdirectories: ["priv/*/migrations"],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
+]

test_integrations/phoenix_app/.formatter.exs

@@ -0,0 +1,37 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Temporary files, for example, from tests.
+/tmp/
+
+# Ignore package tarball (built via "mix hex.build").
+phoenix_app-*.tar
+
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
+

test_integrations/phoenix_app/.gitignore

@@ -0,0 +1,18 @@
+# PhoenixApp
+
+To start your Phoenix server:
+
+  * Run `mix setup` to install and setup dependencies
+  * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+
+Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
+
+## Learn more
+
+  * Official website: https://www.phoenixframework.org/
+  * Guides: https://hexdocs.pm/phoenix/overview.html
+  * Docs: https://hexdocs.pm/phoenix
+  * Forum: https://elixirforum.com/c/phoenix-forum
+  * Source: https://github.com/phoenixframework/phoenix

test_integrations/phoenix_app/README.md

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* This file is for your main application CSS */

test_integrations/phoenix_app/assets/css/app.css

@@ -0,0 +1,44 @@
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import topbar from "../vendor/topbar"
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {
+  longPollFallbackMs: 2500,
+  params: {_csrf_token: csrfToken}
+})
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+

test_integrations/phoenix_app/assets/js/app.js

@@ -0,0 +1,74 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+module.exports = {
+  content: [
+    "./js/**/*.js",
+    "../lib/phoenix_app_web.ex",
+    "../lib/phoenix_app_web/**/*.*ex"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: "#FD4F00",
+      }
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+
+    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, {values})
+    })
+  ]
+}