diff --git a/lib/plausible_web/components/billing/plan_box.ex b/lib/plausible_web/components/billing/plan_box.ex index c9fb44c071d2..c649fc722f46 100644 --- a/lib/plausible_web/components/billing/plan_box.ex +++ b/lib/plausible_web/components/billing/plan_box.ex @@ -39,7 +39,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do ]}> {String.capitalize(to_string(@kind))} - <.pill :if={@highlight} text={@highlight} /> + <.highlight_pill :if={@highlight} text={@highlight} />
@@ -95,7 +95,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do """ end - defp pill(assigns) do + defp highlight_pill(assigns) do ~H"""

-

+
{render_slot(@inner_block)}
@@ -793,7 +793,7 @@ defmodule PlausibleWeb.Components.Generic do -
-
-
+
+
+ +
@@ -1038,7 +1043,7 @@ defmodule PlausibleWeb.Components.Generic do type="text" name="filter-text" id="filter-text" - class="w-full max-w-64 pl-8 text-sm dark:bg-gray-750 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block border-gray-300 dark:border-gray-750 rounded-md dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500" + class="w-full max-w-80 pl-8 text-sm dark:bg-gray-750 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block border-gray-300 dark:border-gray-750 rounded-md dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500" placeholder="Press / to search" x-ref="filter_text" phx-debounce={200} @@ -1140,13 +1145,41 @@ defmodule PlausibleWeb.Components.Generic do """ end - def settings_badge(%{type: :new} = assigns) do + attr(:class, :string, default: "") + attr(:color, :atom, default: :gray, values: [:gray, :indigo, :yellow, :green]) + attr(:rest, :global) + slot(:inner_block, required: true) + + def pill(assigns) do + assigns = assign(assigns, :color_classes, get_pill_color_classes(assigns.color)) + ~H""" - - NEW 🔥 + + {render_slot(@inner_block)} """ end - def settings_badge(assigns), do: ~H"" + defp get_pill_color_classes(:gray) do + "bg-gray-100 text-gray-800 dark:bg-gray-750 dark:text-gray-200" + end + + defp get_pill_color_classes(:indigo) do + "bg-indigo-100/60 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-300" + end + + defp get_pill_color_classes(:yellow) do + "bg-yellow-100/80 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300" + end + + defp get_pill_color_classes(:green) do + "bg-green-100/70 text-green-800 dark:bg-green-900/40 dark:text-green-300" + end end diff --git a/lib/plausible_web/components/layout.ex b/lib/plausible_web/components/layout.ex index db5505c93475..89075d6d1b89 100644 --- a/lib/plausible_web/components/layout.ex +++ b/lib/plausible_web/components/layout.ex @@ -140,7 +140,9 @@ defmodule PlausibleWeb.Components.Layout do class="size-5 mr-2" /> {@text} - + + NEW 🔥 + {render_slot(@inner_block)} diff --git a/lib/plausible_web/live/goal_settings.ex b/lib/plausible_web/live/goal_settings.ex index 8e8212b3f1db..fc168888b88f 100644 --- a/lib/plausible_web/live/goal_settings.ex +++ b/lib/plausible_web/live/goal_settings.ex @@ -43,7 +43,8 @@ defmodule PlausibleWeb.Live.GoalSettings do domain: domain, displayed_goals: socket.assigns.all_goals, filter_text: "", - form_goal: nil + form_goal: nil, + goal_type: nil )} end @@ -88,6 +89,7 @@ defmodule PlausibleWeb.Live.GoalSettings do site_team={@site_team} existing_goals={@all_goals} goal={@form_goal} + goal_type={@goal_type} on_save_goal={ fn goal, socket -> send(self(), {:goal_added, goal}) @@ -137,8 +139,12 @@ defmodule PlausibleWeb.Live.GoalSettings do {:noreply, socket} end - def handle_event("add-goal", _, socket) do - socket = socket |> assign(form_goal: nil) |> Modal.open("goals-form-modal") + def handle_event("add-goal", %{"goal-type" => goal_type}, socket) do + socket = + socket + |> assign(form_goal: nil, goal_type: goal_type) + |> Modal.open("goals-form-modal") + {:noreply, socket} end @@ -181,7 +187,8 @@ defmodule PlausibleWeb.Live.GoalSettings do event_name_options: Enum.reject(socket.assigns.event_name_options, &(&1 == goal.event_name)), displayed_goals: all_goals, - form_goal: nil + form_goal: nil, + goal_type: nil ) |> put_live_flash(:success, "Goal saved successfully") diff --git a/lib/plausible_web/live/goal_settings/form.ex b/lib/plausible_web/live/goal_settings/form.ex index 1871bf0cc33a..435bd829fc28 100644 --- a/lib/plausible_web/live/goal_settings/form.ex +++ b/lib/plausible_web/live/goal_settings/form.ex @@ -19,11 +19,15 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do |> Plausible.Goal.changeset() |> to_form() - selected_tab = - case assigns.goal do - %{page_path: p, scroll_threshold: s} when not is_nil(p) and s > -1 -> "scroll" - %{page_path: p} when not is_nil(p) -> "pageviews" - _goal_or_nil -> "custom_events" + form_type = + if assigns.goal do + case assigns.goal do + %{page_path: p, scroll_threshold: s} when not is_nil(p) and s > -1 -> "scroll" + %{page_path: p} when not is_nil(p) -> "pageviews" + _ -> "custom_events" + end + else + assigns[:goal_type] || "custom_events" end socket = @@ -37,14 +41,14 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do current_user: assigns.current_user, site_team: assigns.site_team, domain: assigns.domain, - selected_tab: selected_tab, - tab_sequence_id: 0, + form_type: form_type, site: site, has_access_to_revenue_goals?: has_access_to_revenue_goals?, existing_goals: assigns.existing_goals, on_save_goal: assigns.on_save_goal, on_autoconfigure: assigns.on_autoconfigure, - goal: assigns.goal + goal: assigns.goal, + goal_type: assigns[:goal_type] ) {:ok, socket} @@ -68,7 +72,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do <.title>Edit goal for {@domain} <.custom_event_fields - :if={@selected_tab == "custom_events"} + :if={@form_type == "custom_events"} f={f} suffix={@context_unique_id} current_user={@current_user} @@ -80,14 +84,14 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do has_access_to_revenue_goals?={@has_access_to_revenue_goals?} /> <.pageview_fields - :if={@selected_tab == "pageviews"} + :if={@form_type == "pageviews"} f={f} goal={@goal} suffix={@context_unique_id} site={@site} /> <.scroll_fields - :if={@selected_tab == "scroll"} + :if={@form_type == "scroll"} f={f} goal={@goal} suffix={@context_unique_id} @@ -103,58 +107,41 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do def create_form(assigns) do ~H""" - <.form - :let={f} - x-data="{ tabSelectionInProgress: false }" - for={@form} - phx-submit="save-goal" - phx-target={@myself} - > + <.form :let={f} for={@form} phx-submit="save-goal" phx-target={@myself}> <.title> Add goal for {Plausible.Sites.display_name(@site)} - <.tabs current_user={@current_user} site={@site} selected_tab={@selected_tab} myself={@myself} /> - <.custom_event_fields - :if={@selected_tab == "custom_events"} - x-show="!tabSelectionInProgress" + :if={@form_type == "custom_events"} f={f} - suffix={suffix(@context_unique_id, @tab_sequence_id)} + suffix={@context_unique_id} current_user={@current_user} site_team={@site_team} site={@site} existing_goals={@existing_goals} goal_options={@event_name_options} has_access_to_revenue_goals?={@has_access_to_revenue_goals?} - x-init="tabSelectionInProgress = false" /> <.pageview_fields - :if={@selected_tab == "pageviews"} - x-show="!tabSelectionInProgress" + :if={@form_type == "pageviews"} f={f} - suffix={suffix(@context_unique_id, @tab_sequence_id)} + suffix={@context_unique_id} site={@site} - x-init="tabSelectionInProgress = false" /> <.scroll_fields - :if={@selected_tab == "scroll"} - x-show="!tabSelectionInProgress" + :if={@form_type == "scroll"} f={f} - suffix={suffix(@context_unique_id, @tab_sequence_id)} + suffix={@context_unique_id} site={@site} - x-init="tabSelectionInProgress = false" /> -
- <.button type="submit" class="w-full"> - Add goal - -
+ <.button type="submit" class="w-full"> + Add goal +
diff --git a/lib/plausible_web/live/sites.ex b/lib/plausible_web/live/sites.ex index d0c7d93fff4c..0f9a15ac19a4 100644 --- a/lib/plausible_web/live/sites.ex +++ b/lib/plausible_web/live/sites.ex @@ -481,9 +481,9 @@ defmodule PlausibleWeb.Live.Sites do {@site.domain}
- + <.pill color={:green}> Pending invitation - +
<.site_stats hourly_stats={@hourly_stats} />
diff --git a/mix.lock b/mix.lock index 523ec8712d57..eb03596902e7 100644 --- a/mix.lock +++ b/mix.lock @@ -131,11 +131,11 @@ "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"}, "php_serializer": {:hex, :php_serializer, "2.0.0", "b43f31aca22ed7321f32da2b94fe2ddf9b6739a965cb51541969119e572e821d", [:mix], [], "hexpm", "61e402e99d9062c0225a3f4fcf7e43b4cba1b8654944c0e7c139c3ca9de481da"}, "plug": {:hex, :plug, "1.18.1", "5067f26f7745b7e31bc3368bc1a2b818b9779faa959b49c934c17730efc911cf", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "57a57db70df2b422b564437d2d33cf8d33cd16339c1edb190cd11b1a3a546cc2"}, - "plug_cowboy": {:hex, :plug_cowboy, "2.7.4", "729c752d17cf364e2b8da5bdb34fb5804f56251e88bb602aff48ae0bd8673d11", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "9b85632bd7012615bae0a5d70084deb1b25d2bcbb32cab82d1e9a1e023168aa3"}, + "plug_cowboy": {:hex, :plug_cowboy, "2.7.5", "261f21b67aea8162239b2d6d3b4c31efde4daa22a20d80b19c2c0f21b34b270e", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "20884bf58a90ff5a5663420f5d2c368e9e15ed1ad5e911daf0916ea3c57f77ac"}, "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"}, "polymorphic_embed": {:hex, :polymorphic_embed, "5.0.3", "37444e0af941026a2c29b0539b6471bdd6737a6492a19264bf2bb0118e3ac242", [:mix], [{:attrs, "~> 0.6", [hex: :attrs, repo: "hexpm", optional: false]}, {:ecto, "~> 3.12", [hex: :ecto, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 4.1", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_html_helpers, "~> 1.0", [hex: :phoenix_html_helpers, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 0.20 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "2fed44f57abf0a0fc7642e0eb0807a55b65de1562712cc0620772cbbb80e49c1"}, "postgrex": {:hex, :postgrex, "0.19.3", "a0bda6e3bc75ec07fca5b0a89bffd242ca209a4822a9533e7d3e84ee80707e19", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "d31c28053655b78f47f948c85bb1cf86a9c1f8ead346ba1aa0d0df017fa05b61"}, - "prima": {:hex, :prima, "0.1.8", "1f57fb7000046bb463b2a31200b138dd10c86fd78a289f1e947a970f740b68e0", [:mix], [{:esbuild, "~> 0.7", [hex: :esbuild, repo: "hexpm", optional: false]}, {:phoenix, ">= 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 4.2", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "b559ee8213a8302fd40520cc55b0fcafbc884d471d198b262dd1e0a10170de17"}, + "prima": {:hex, :prima, "0.1.9", "34868e3570cf2c4fac42d6254e33678e9d75a8fe3d3253a38ee437f6481a2896", [:mix], [{:esbuild, "~> 0.7", [hex: :esbuild, repo: "hexpm", optional: false]}, {:phoenix, ">= 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 4.2", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "7f24efb617dd94da867bf2d362eeab846897270eff989aeaa261f04590feae3f"}, "prom_ex": {:hex, :prom_ex, "1.11.0", "1f6d67f2dead92224cb4f59beb3e4d319257c5728d9638b4a5e8ceb51a4f9c7e", [:mix], [{:absinthe, ">= 1.7.0", [hex: :absinthe, repo: "hexpm", optional: true]}, {:broadway, ">= 1.1.0", [hex: :broadway, repo: "hexpm", optional: true]}, {:ecto, ">= 3.11.0", [hex: :ecto, repo: "hexpm", optional: true]}, {:finch, "~> 0.18", [hex: :finch, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:oban, ">= 2.10.0", [hex: :oban, repo: "hexpm", optional: true]}, {:octo_fetch, "~> 0.4", [hex: :octo_fetch, repo: "hexpm", optional: false]}, {:peep, "~> 3.0", [hex: :peep, repo: "hexpm", optional: false]}, {:phoenix, ">= 1.7.0", [hex: :phoenix, repo: "hexpm", optional: true]}, {:phoenix_live_view, ">= 0.20.0", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}, {:plug, ">= 1.16.0", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 2.6.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, ">= 1.0.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}, {:telemetry_metrics_prometheus_core, "~> 1.2", [hex: :telemetry_metrics_prometheus_core, repo: "hexpm", optional: false]}, {:telemetry_poller, "~> 1.1", [hex: :telemetry_poller, repo: "hexpm", optional: false]}], "hexpm", "76b074bc3730f0802978a7eb5c7091a65473eaaf07e99ec9e933138dcc327805"}, "public_suffix": {:git, "https://github.com/axelson/publicsuffix-elixir", "fa40c243d4b5d8598b90cff268bc4e33f3bb63f1", []}, "ranch": {:hex, :ranch, "1.8.1", "208169e65292ac5d333d6cdbad49388c1ae198136e4697ae2f474697140f201c", [:make, :rebar3], [], "hexpm", "aed58910f4e21deea992a67bf51632b6d60114895eb03bb392bb733064594dd0"}, diff --git a/test/plausible_web/live/goal_settings/form_test.exs b/test/plausible_web/live/goal_settings/form_test.exs index ef6d2b6afdb0..2da5babc4bc7 100644 --- a/test/plausible_web/live/goal_settings/form_test.exs +++ b/test/plausible_web/live/goal_settings/form_test.exs @@ -12,32 +12,43 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do describe "integration - live rendering" do setup [:create_user, :log_in, :create_site] - test "tabs switching", %{conn: conn, site: site} do + test "form renders with custom events when selected from dropdown", %{conn: conn, site: site} do setup_goals(site) - lv = get_liveview(conn, site) + lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events") - html = lv |> render() + html = render(lv) assert html =~ "Add goal for #{site.domain}" - assert element_exists?(html, ~s/a#pageview-tab/) - assert element_exists?(html, ~s/a#event-tab/) + refute element_exists?(html, "#pageviews-form") + refute element_exists?(html, "#scroll-form") + assert element_exists?(html, "#custom-events-form") - pageview_tab = lv |> element(~s/a#pageview-tab/) |> render_click() - assert pageview_tab =~ "Page path" + assert html =~ "Event name" + end + + test "form renders with pageview when selected from dropdown", %{conn: conn, site: site} do + lv = get_liveview(conn, site) |> open_modal_with_goal_type("pageviews") - event_tab = lv |> element(~s/a#event-tab/) |> render_click() - assert event_tab =~ "Event name" + html = render(lv) + + assert html =~ "Add goal for #{site.domain}" + refute element_exists?(html, "#custom-events-form") + refute element_exists?(html, "#scroll-form") + assert element_exists?(html, "#pageviews-form") + assert html =~ "Page path" end - test "can navigate to scroll tab if scroll_depth feature visible for site/user", - %{conn: conn, site: site} do - lv = get_liveview(conn, site) - lv |> element(~s/a#scroll-tab/) |> render_click() + test "form renders with scroll when selected from dropdown", %{conn: conn, site: site} do + lv = get_liveview(conn, site) |> open_modal_with_goal_type("scroll") + html = render(lv) - input_names = html |> find("#scroll-form input") |> Enum.map(&name_of/1) - assert "goal[scroll_threshold]" in input_names - assert "goal[page_path]" in input_names - assert "goal[display_name]" in input_names + + assert html =~ "Add goal for #{site.domain}" + refute element_exists?(html, "#custom-events-form") + refute element_exists?(html, "#pageviews-form") + assert element_exists?(html, "#scroll-form") + assert html =~ "Scroll percentage threshold" + assert html =~ "Page path" end end @@ -45,8 +56,9 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do setup [:create_user, :log_in, :create_site] @tag :ee_only - test "renders form fields per tab, with currency", %{conn: conn, site: site} do - lv = get_liveview(conn, site) + test "renders form fields for custom events with currency", %{conn: conn, site: site} do + lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events") + html = render(lv) refute element_exists?(html, "#pageviews-form") @@ -55,30 +67,35 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do assert input_names == [ - "display-event_name_input_modalseq0-tabseq0", + "display-event_name_input_modalseq0", "goal[event_name]", "goal[display_name]", - "display-currency_input_modalseq0-tabseq0", + "display-currency_input_modalseq0", "goal[currency]" ] + end - lv |> element(~s/a#pageview-tab/) |> render_click() - html = lv |> render() + @tag :ee_only + test "renders form fields for pageview", %{conn: conn, site: site} do + lv = get_liveview(conn, site) |> open_modal_with_goal_type("pageviews") + + html = render(lv) refute element_exists?(html, "#custom-events-form") input_names = html |> find("#pageviews-form input") |> Enum.map(&name_of/1) assert input_names == [ - "display-page_path_input_modalseq0-tabseq1", + "display-page_path_input_modalseq0", "goal[page_path]", "goal[display_name]" ] end @tag :ce_build_only - test "renders form fields per tab (no currency)", %{conn: conn, site: site} do - lv = get_liveview(conn, site) + test "renders form fields for custom events (no currency)", %{conn: conn, site: site} do + lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events") + html = render(lv) refute element_exists?(html, "#pageviews-form") @@ -87,39 +104,34 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do assert input_names == [ - "display-event_name_input_modalseq0-tabseq0", + "display-event_name_input_modalseq0", "goal[event_name]", "goal[display_name]" ] - - lv |> element(~s/a#pageview-tab/) |> render_click() - html = lv |> render() - - refute element_exists?(html, "#custom-events-form") - - input_names = html |> find("#pageviews-form input") |> Enum.map(&name_of/1) - - assert input_names == [ - "display-page_path_input_modalseq0-tabseq1", - "goal[page_path]", - "goal[display_name]" - ] end test "renders error on empty submission", %{conn: conn, site: site} do - lv = get_liveview(conn, site) + lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events") + lv |> element("#goals-form-modalseq0 form") |> render_submit() html = render(lv) assert html =~ "this field is required and cannot be blank" + end + + test "renders error on empty pageview submission", %{conn: conn, site: site} do + lv = get_liveview(conn, site) |> open_modal_with_goal_type("pageviews") - pageview_tab = lv |> element(~s/a#pageview-tab/) |> render_click() - assert pageview_tab =~ "this field is required and must start with a /" + lv |> element("#goals-form-modalseq0 form") |> render_submit() + html = render(lv) + assert html =~ "this field is required and must start with a /" end test "creates a custom event", %{conn: conn, site: site} do lv = get_liveview(conn, site) refute render(lv) =~ "SampleCustomEvent" + lv = open_modal_with_goal_type(lv, "custom_events") + lv |> element("#goals-form-modalseq0 form") |> render_submit(%{goal: %{event_name: "SampleCustomEvent"}}) @@ -319,15 +331,15 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do @tag :ee_only test "currency combo works", %{conn: conn, site: site} do - lv = get_liveview(conn, site) + lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events") - type_into_combo(lv, "currency_input_modalseq0-tabseq0", "Polish") + type_into_combo(lv, "currency_input_modalseq0", "Polish") html = render(lv) assert element_exists?(html, ~s/a[phx-value-display-value="PLN - Polish Zloty"]/) refute element_exists?(html, ~s/a[phx-value-display-value="EUR - Euro"]/) - type_into_combo(lv, "currency_input_modalseq0-tabseq0", "Euro") + type_into_combo(lv, "currency_input_modalseq0", "Euro") html = render(lv) refute element_exists?(html, ~s/a[phx-value-display-value="PLN - Polish Zloty"]/) @@ -335,10 +347,9 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do end test "pageview combo works", %{conn: conn, site: site} do - lv = get_liveview(conn, site) - lv |> element(~s/a#pageview-tab/) |> render_click() + lv = get_liveview(conn, site) |> open_modal_with_goal_type("pageviews") - html = type_into_combo(lv, "page_path_input_modalseq0-tabseq1", "/hello") + html = type_into_combo(lv, "page_path_input_modalseq0", "/hello") assert html =~ "Create "/hello"" end @@ -349,17 +360,16 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do build(:pageview, pathname: "/go/home") ]) - lv = get_liveview(conn, site) - lv |> element(~s/a#pageview-tab/) |> render_click() + lv = get_liveview(conn, site) |> open_modal_with_goal_type("pageviews") - type_into_combo(lv, "page_path_input_modalseq0-tabseq1", "/go/to/p") + type_into_combo(lv, "page_path_input_modalseq0", "/go/to/p") html = render(lv) assert html =~ "Create "/go/to/p"" assert html =~ "/go/to/page/1" refute html =~ "/go/home" - type_into_combo(lv, "page_path_input_modalseq0-tabseq1", "/go/h") + type_into_combo(lv, "page_path_input_modalseq0", "/go/h") html = render(lv) assert html =~ "/go/home" refute html =~ "/go/to/page/1" @@ -373,17 +383,16 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do build(:imported_pages, page: "/go/home", pageviews: 1) ]) - lv = get_liveview(conn, site) - lv |> element(~s/a#pageview-tab/) |> render_click() + lv = get_liveview(conn, site) |> open_modal_with_goal_type("pageviews") - type_into_combo(lv, "page_path_input_modalseq0-tabseq1", "/go/to/p") + type_into_combo(lv, "page_path_input_modalseq0", "/go/to/p") html = render(lv) assert html =~ "Create "/go/to/p"" assert html =~ "/go/to/page/1" refute html =~ "/go/home" - type_into_combo(lv, "page_path_input_modalseq0-tabseq1", "/go/h") + type_into_combo(lv, "page_path_input_modalseq0", "/go/h") html = render(lv) assert html =~ "/go/home" refute html =~ "/go/to/page/1" @@ -396,9 +405,9 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do build(:event, name: "EventThree") ]) - lv = get_liveview(conn, site) + lv = get_liveview(conn, site) |> open_modal_with_goal_type("custom_events") - type_into_combo(lv, "event_name_input_modalseq0-tabseq0", "One") + type_into_combo(lv, "event_name_input_modalseq0", "One") html = render(lv) assert text_of_element(html, "#goals-form-modalseq0") =~ "EventOne" @@ -451,4 +460,12 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do lv end + + defp open_modal_with_goal_type(lv, goal_type) do + lv + |> element(~s/[phx-click="add-goal"][phx-value-goal-type="#{goal_type}"]/) + |> render_click() + + lv + end end diff --git a/test/plausible_web/live/goal_settings_test.exs b/test/plausible_web/live/goal_settings_test.exs index d869c544ff78..de71b98177d9 100644 --- a/test/plausible_web/live/goal_settings_test.exs +++ b/test/plausible_web/live/goal_settings_test.exs @@ -89,10 +89,33 @@ defmodule PlausibleWeb.Live.GoalSettingsTest do refute resp =~ "Create your first goal" end - test "add goal button is rendered", %{conn: conn, site: site} do + test "add goal dropdown is rendered in empty state", %{conn: conn, site: site} do conn = get(conn, "/#{site.domain}/settings/goals") resp = html_response(conn, 200) - assert element_exists?(resp, ~s/button#add-goal-button[phx-click="add-goal"]/) + assert element_exists?(resp, ~s/[id="add-goal-dropdown-empty"]/) + + assert element_exists?( + resp, + ~s/[phx-click="add-goal"][phx-value-goal-type="custom_events"]/ + ) + + assert element_exists?(resp, ~s/[phx-click="add-goal"][phx-value-goal-type="pageviews"]/) + assert element_exists?(resp, ~s/[phx-click="add-goal"][phx-value-goal-type="scroll"]/) + end + + test "add goal dropdown is rendered in non-empty state", %{conn: conn, site: site} do + {:ok, _goals} = setup_goals(site) + conn = get(conn, "/#{site.domain}/settings/goals") + resp = html_response(conn, 200) + assert element_exists?(resp, ~s/[id="add-goal-dropdown"]/) + + assert element_exists?( + resp, + ~s/[phx-click="add-goal"][phx-value-goal-type="custom_events"]/ + ) + + assert element_exists?(resp, ~s/[phx-click="add-goal"][phx-value-goal-type="pageviews"]/) + assert element_exists?(resp, ~s/[phx-click="add-goal"][phx-value-goal-type="scroll"]/) end test "search goals input is rendered", %{conn: conn, site: site} do