test: add QueryLive jsdom coverage

.github/workflows/elixir-web-ci.yml

@@ -0,0 +1,108 @@
+name: JSDOM Tests
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "assets/**"
+      - "lib/logflare_web/**"
+  pull_request:
+    branches: ["**"]
+    paths:
+      - "assets/**"
+      - "lib/logflare_web/**"
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    name: JSDOM Tests
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: bitnamilegacy/postgresql:15
+        ports:
+          - 5432:5432
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_DB: logflare_test
+          POSTGRESQL_WAL_LEVEL: logical
+        options: >-
+          --health-cmd "pg_isready -d logflare_test -U postgres -p 5432"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 10
+    env:
+      MIX_ENV: test
+      SHELL: /bin/bash
+      JSDOM: true
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Read versions from .tool-versions
+        id: versions
+        run: |
+          echo "elixir=$(grep '^elixir '  .tool-versions | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+          echo "erlang=$(grep '^erlang '  .tool-versions | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+          echo "node=$(grep   '^nodejs '  .tool-versions | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+          echo "rust=$(grep   '^rust '    .tool-versions | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+
+      - name: Set up Elixir
+        uses: erlef/setup-beam@v1
+        with:
+          version-file: .tool-versions
+          version-type: strict
+
+      - name: Install Rust
+        uses: dtolnay/rust-toolchain@v1
+        with:
+          toolchain: ${{ steps.versions.outputs.rust }}
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.versions.outputs.node }}
+          cache: npm
+          cache-dependency-path: assets/package-lock.json
+
+      - name: Restore Cargo cache
+        uses: actions/cache@v5
+        with:
+          path: |
+            ~/.cargo
+          key: cargo-${{ runner.os }}-${{ steps.versions.outputs.rust }}-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            cargo-${{ runner.os }}-${{ steps.versions.outputs.rust }}-
+            cargo-${{ runner.os }}-
+
+      - name: Restore Mix cache
+        uses: actions/cache@v5
+        with:
+          path: |
+            deps
+            _build
+          key: mix-${{ runner.os }}-${{ steps.versions.outputs.erlang }}-${{ steps.versions.outputs.elixir }}-${{ hashFiles('mix.lock') }}
+          restore-keys: |
+            mix-${{ runner.os }}-${{ steps.versions.outputs.erlang }}-${{ steps.versions.outputs.elixir }}-
+            mix-${{ runner.os }}-${{ steps.versions.outputs.erlang }}-
+
+      - name: Fetch Mix dependencies
+        run: mix deps.get
+
+      - name: Install phoenix_test_jsdom Node dependencies
+        run: npm ci --prefix deps/phoenix_test_jsdom/priv
+
+      - name: Install frontend dependencies
+        run: npm ci --prefix assets
+
+      - name: Compile dependencies
+        run: mix deps.compile
+
+      - name: Build assets
+        run: npm run deploy --prefix assets
+
+      - name: Run JSDOM tests
+        run: mix do ecto.create + ecto.migrate + test --only jsdom test/jsdom

config/test.exs

@@ -9,8 +9,16 @@ config :logflare,
 
 config :logflare, LogflareWeb.Endpoint,
   url: [host: "localhost", scheme: "http", port: 4001],
-  http: [port: 4001],
-  server: false
+  http: [
+    port: 4001,
+    thousand_island_options: [
+      transport_options: [
+        reuseport: false,
+        reuseport_lb: false
+      ]
+    ]
+  ],
+  server: System.get_env("JSDOM") in ["true", "1"]
 
 config :logflare, Logflare.Cluster.Utils, min_cluster_size: 1
 
@@ -75,6 +83,13 @@ config :logflare, Oban, testing: :manual
 
 config :phoenix_test, otp_app: :logflare, endpoint: LogflareWeb.Endpoint
 
+config :phoenix_test_jsdom,
+  setup_files: [
+    Path.expand("../deps/phoenix_test_jsdom/examples/hello/assets/js/jsdom_setup.js", __DIR__),
+    Path.expand("../test/support/jsdom_setup.js", __DIR__)
+  ],
+  cwd: Path.expand("../assets", __DIR__)
+
 config :opentelemetry,
   sdk_disabled: false,
   span_processor: :simple,

mix.exs

@@ -17,7 +17,7 @@
         logflare: [
           version: version(),
           include_executables_for: [:unix],
           applications: [
             runtime_tools: :permanent,
             ssl: :permanent,
             opentelemetry_exporter: :permanent,
@@ -257,7 +257,21 @@
       {:otel_metric_exporter,
        git: "https://github.com/supabase/elixir-otel-metric-exporter", ref: "2a6de91"},
       {:live_monaco_editor, "~> 0.2"}
-    ]
+    ] ++ phoenix_test_jsdom_dep()
+  end
+
+  defp phoenix_test_jsdom_dep do
+    if System.get_env("JSDOM") in ["true", "1"] do
+      [
+        {:phoenix_test_jsdom,
+         github: "msmithstubbs/phoenix_test_jsdom",
+         branch: "feat/cookie-sessions",
+         only: :test,
+         runtime: false}
+      ]
+    else
+      []
+    end
   end
 
   defp aliases do

mix.lock

@@ -132,6 +132,7 @@
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.2.0", "ff3a5616e1bed6804de7773b92cbccfc0b0f473faf1f63d7daf1206c7aeaaa6f", [:mix], [], "hexpm", "adc313a5bf7136039f63cfd9668fde73bba0765e0614cba80c06ac9460ff3e96"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "phoenix_test": {:hex, :phoenix_test, "0.9.1", "ac58a4d341c594ac57ce52a6ce643200084fad419a91b72896a44881fe84809c", [:mix], [{:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:lazy_html, "~> 0.1.7", [hex: :lazy_html, repo: "hexpm", optional: false]}, {:mime, ">= 1.0.0", [hex: :mime, repo: "hexpm", optional: true]}, {:phoenix, ">= 1.7.10", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "ed453394c0f8987aa58a06e2302e7dd4bc53cd2d25eff5a18c4a5775241ebe61"},
+  "phoenix_test_jsdom": {:git, "https://github.com/msmithstubbs/phoenix_test_jsdom.git", "563733bfb46a0f2289fd3a48ebe708f265d43e95", [branch: "feat/cookie-sessions"]},
   "phoenix_test_playwright": {:hex, :phoenix_test_playwright, "0.11.1", "02a03006d148993da544a1593034026938a367aba1906c678ccbd764ceaaf7cb", [:mix], [{:ecto_sql, "~> 3.10", [hex: :ecto_sql, repo: "hexpm", optional: true]}, {:nimble_options, "~> 1.1", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.7", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_ecto, "~> 4.5", [hex: :phoenix_ecto, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_test, "~> 0.8", [hex: :phoenix_test, repo: "hexpm", optional: false]}, {:playwright_ex, "~> 0.4", [hex: :playwright_ex, repo: "hexpm", optional: false]}, {:websockex, "~> 0.4", [hex: :websockex, repo: "hexpm", optional: true]}], "hexpm", "a792fbc8c5c34f53a77c6933fce0a3e05471bda0c6bf4c5ed23e7dca5acf6da7"},
   "phoenix_view": {:hex, :phoenix_view, "2.0.4", "b45c9d9cf15b3a1af5fb555c674b525391b6a1fe975f040fb4d913397b31abf4", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "4e992022ce14f31fe57335db27a28154afcc94e9983266835bb3040243eb620b"},
   "playwright_ex": {:hex, :playwright_ex, "0.5.0", "87db628ad39afc0eaf864a9f5919ffc1a224ea267ef7c813507839f85fd432e2", [:mix], [{:nimble_options, "~> 1.1", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:websockex, "~> 0.4", [hex: :websockex, repo: "hexpm", optional: true]}], "hexpm", "afe8db4f6fd9bb6cc0f3df2f45edef337b86fc69947aecaa390428e3a7a86d16"},

test/jsdom/query_live_test.exs

@@ -0,0 +1,52 @@
+defmodule LogflareWeb.Jsdom.QueryLiveTest do
+  use LogflareWeb.ConnCase
+
+  @moduletag :jsdom
+
+  setup %{conn: conn} do
+    insert(:plan)
+    user = insert(:user)
+    conn = login_user(conn, user)
+    {:ok, user: user, conn: conn}
+  end
+
+  describe "query page" do
+    test "run a valid query", %{conn: conn} do
+      start_supervised!(PhoenixTestJsdom)
+
+      GoogleApi.BigQuery.V2.Api.Jobs
+      |> expect(:bigquery_jobs_query, 1, fn _conn, _proj_id, opts ->
+        assert [body: %_{useQueryCache: false}] = opts
+
+        {:ok, TestUtils.gen_bq_response([%{"ts" => "some-data"}])}
+      end)
+
+      query = "select current_timestamp() as ts"
+
+      {:ok, view, _html} = live_with_redirect(conn, ~p"/query") |> PhoenixTestJsdom.mount()
+
+      view
+      |> PhoenixTestJsdom.wait_for(".monaco-editor textarea.inputarea", 10_000)
+
+      assert {:ok, ^query} =
+               PhoenixTestJsdom.exec_js(view, """
+               const query = #{Jason.encode!(query)};
+               const model = window.monaco.editor.getModels()[0];
+               model.setValue(query);
+               model.getValue();
+               """)
+
+      view
+      |> PhoenixTestJsdom.click("Run query", selector: "button")
+      |> PhoenixTestJsdom.wait_for("table", 10_000)
+
+      html = PhoenixTestJsdom.render(view)
+
+      assert html =~ "Ran query successfully"
+      assert html =~ ~r/1 .+ processed/
+
+      assert PhoenixTestJsdom.current_path(view) =~ ~r/current_timestamp/
+      assert html =~ "some-data"
+    end
+  end
+end

test/support/jsdom_setup.js

@@ -0,0 +1,7 @@
+if (!window.document.queryCommandSupported) {
+  window.document.queryCommandSupported = () => false;
+}
+
+window.MonacoEnvironment = {
+  getWorker: () => new window.Worker(),
+};

test/test_helper.exs

@@ -94,6 +94,7 @@ ExUnit.configure(
     not_implemented: true,
     feature: true,
     integration: true,
+    jsdom: true,
     failing: true,
     benchmark: true
   ]