Added tests for autoconfigure modal

Author: sanne-san

lib/plausible_web/live/goal_settings/form.ex

@@ -30,15 +30,19 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
         assigns[:goal_type] || "custom_events"
       end
 
-    event_name_options_count = length(assigns.event_name_options)
+    event_name_options_count = length(assigns.event_name_options || [])
 
     show_autoconfigure_modal =
-      if Map.has_key?(socket.assigns, :show_autoconfigure_modal) do
-        socket.assigns.show_autoconfigure_modal
+      if event_name_options_count == 0 do
+        false
       else
-        is_nil(assigns.goal) &&
-          form_type == "custom_events" &&
-          event_name_options_count > 0
+        if Map.has_key?(socket.assigns, :show_autoconfigure_modal) do
+          socket.assigns.show_autoconfigure_modal
+        else
+          is_nil(assigns.goal) &&
+            form_type == "custom_events" &&
+            event_name_options_count > 0
+        end
       end
 
     socket =
@@ -122,7 +126,9 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     ~H"""
     <div>
       <.title>
-        We detected {@event_name_options_count} custom {if @event_name_options_count == 1, do: "event", else: "events"}.
+        We detected {@event_name_options_count} custom {if @event_name_options_count == 1,
+          do: "event",
+          else: "events"}.
       </.title>
 
       <p class="mt-2 py-2 text-sm text-gray-600 dark:text-gray-400 text-pretty">
@@ -142,7 +148,9 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
           phx-target={@myself}
         >
           <Heroicons.plus class="size-4" />
-          Add {@event_name_options_count} {if @event_name_options_count == 1, do: "event", else: "events"}
+          Add {@event_name_options_count} {if @event_name_options_count == 1,
+            do: "event",
+            else: "events"}
         </.button>
       </div>
     </div>
@@ -197,7 +205,8 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     ~H"""
     <div id="pageviews-form" class="py-2" {@rest}>
       <div class="text-sm pb-6 text-gray-600 dark:text-gray-400 text-pretty">
-        Pageview goals allow you to measure how many people visit a specific page or section of your site. <.styled_link
+        Pageview goals allow you to measure how many people visit a specific page or section of your site.
+        <.styled_link
           href="https://plausible.io/docs/pageview-goals"
           new_tab={true}
         >
@@ -275,7 +284,8 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     ~H"""
     <div id="scroll-form" class="py-2" x-data={@js} {@rest}>
       <div class="text-sm pb-6 text-gray-500 dark:text-gray-400 text-justify rounded-md">
-        Scroll Depth goals allow you to see how many people scroll beyond your desired scroll depth percentage threshold. <.styled_link
+        Scroll Depth goals allow you to see how many people scroll beyond your desired scroll depth percentage threshold.
+        <.styled_link
           href="https://plausible.io/docs/scroll-depth"
           new_tab={true}
         >

test/plausible_web/live/goal_settings/form_test.exs

@@ -405,6 +405,15 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do
 
       lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events")
 
+      # If autoconfigure modal shows, click "Add manually" to get to the regular form
+      html = render(lv)
+
+      if html =~ "We detected" do
+        lv
+        |> element("button[phx-click='add-manually']")
+        |> render_click()
+      end
+
       type_into_combo(lv, "event_name_input_modalseq0", "One")
       html = render(lv)
 
@@ -436,6 +445,99 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do
     end
   end
 
+  describe "Autoconfigure modal" do
+    setup [:create_user, :log_in, :create_site]
+
+    test "shows autoconfigure modal when opening custom events modal with available events", %{
+      conn: conn,
+      site: site
+    } do
+      populate_stats(site, [
+        build(:event, name: "Signup"),
+        build(:event, name: "Newsletter Signup"),
+        build(:event, name: "Purchase")
+      ])
+
+      lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events")
+
+      html = render(lv)
+      assert html =~ "We detected 3 custom"
+      assert html =~ "These events have been sent from your site in the past 6 months"
+    end
+
+    test "clicking 'Add manually' shows the regular form", %{conn: conn, site: site} do
+      populate_stats(site, [
+        build(:event, name: "Signup"),
+        build(:event, name: "Newsletter Signup"),
+        build(:event, name: "Purchase")
+      ])
+
+      lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events")
+
+      html = render(lv)
+      assert html =~ "We detected 3 custom"
+
+      lv
+      |> element("button[phx-click='add-manually']")
+      |> render_click()
+
+      html = render(lv)
+      refute html =~ "We detected"
+      assert html =~ "Add goal for"
+    end
+
+    test "autoconfigure button adds all events", %{conn: conn, site: site} do
+      populate_stats(site, [
+        build(:event, name: "Signup"),
+        build(:event, name: "Newsletter Signup"),
+        build(:event, name: "Purchase")
+      ])
+
+      lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events")
+
+      lv
+      |> element("button[phx-click='autoconfigure']")
+      |> render_click()
+
+      # Render again to process the async :autoconfigure message
+      _html = render(lv)
+
+      goals = Plausible.Goals.for_site(site)
+      assert length(goals) == 3
+      assert Enum.any?(goals, &(&1.event_name == "Signup"))
+      assert Enum.any?(goals, &(&1.event_name == "Newsletter Signup"))
+      assert Enum.any?(goals, &(&1.event_name == "Purchase"))
+    end
+
+    test "autoconfigure modal does not show when all events are already goals", %{
+      conn: conn,
+      site: site
+    } do
+      populate_stats(site, [
+        build(:event, name: "Signup"),
+        build(:event, name: "Newsletter Signup"),
+        build(:event, name: "Purchase")
+      ])
+
+      lv = get_liveview(conn, site)
+
+      lv = open_modal_with_goal_type(lv, "custom_events")
+
+      lv
+      |> element("button[phx-click='autoconfigure']")
+      |> render_click()
+
+      # Render again to process the async :autoconfigure message and modal close event
+      _html = render(lv)
+
+      lv = open_modal_with_goal_type(lv, "custom_events")
+
+      html = render(lv)
+      refute html =~ "We detected"
+      refute html =~ "from the last 6 months"
+    end
+  end
+
   defp type_into_combo(lv, id, text) do
     lv
     |> element("input##{id}")

test/plausible_web/live/goal_settings_test.exs

@@ -246,53 +246,6 @@ defmodule PlausibleWeb.Live.GoalSettingsTest do
 
       refute html =~ "No goals found for this site. Please refine or"
     end
-
-    test "auto-configuring custom event goals", %{conn: conn, site: site} do
-      populate_stats(site, [
-        build(:event, name: "Signup"),
-        build(:event, name: "Newsletter Signup"),
-        build(:event, name: "Purchase")
-      ])
-
-      autoconfigure_button_selector = ~s/button[phx-click="autoconfigure"]/
-
-      assert_suggested_event_name_count = fn html, number ->
-        assert text_of_element(html, autoconfigure_button_selector) =~
-                 "found #{number} custom events from the last 6 months that are not yet configured as goals"
-      end
-
-      {lv, html} = get_liveview(conn, site, with_html?: true)
-
-      # At first, 3 event names are suggested
-      assert_suggested_event_name_count.(html, 3)
-
-      # Add one goal
-      lv
-      |> element("#goals-form-modal form")
-      |> render_submit(%{goal: %{event_name: "Signup"}})
-
-      html = render(lv)
-
-      # Now two goals are suggested because one is already added
-      assert_suggested_event_name_count.(html, 2)
-
-      # Delete the goal
-      goal = Plausible.Repo.get_by(Plausible.Goal, site_id: site.id, event_name: "Signup")
-      html = lv |> element(~s/button#delete-goal-#{goal.id}/) |> render_click()
-
-      # Suggested event name count should be 3 again
-      assert_suggested_event_name_count.(html, 3)
-
-      # Autoconfigure all custom event goals
-      lv
-      |> element(autoconfigure_button_selector)
-      |> render_click()
-
-      html = render(lv)
-
-      # All possible goals exist - no suggestions anymore
-      refute html =~ "from the last 6 months"
-    end
   end
 
   on_ee do