diff --git a/README.md b/README.md index fbd942351..03f32e0b4 100644 --- a/README.md +++ b/README.md @@ -102,3 +102,12 @@ alias Moon.Assets.Icons.IconZoom ```bash mix test ``` + +## Screenshots & tests at all +1. https://github.com/mcrumm/elogram/blob/main/lib/elogram/server.ex#L31 +also some screenshot tests here - +https://stackoverflow.com/questions/58131559/how-to-take-a-screenshot-on-failure-using-hound-elixir +https://github.com/HashNuke/hound - maybe too old + +https://elixirforum.com/t/wallaby-visit-produces-empty-screenshot/45268 +https://github.com/elixir-wallaby/wallaby#screenshots \ No newline at end of file diff --git a/lib/moon/design/accordion/header.ex b/lib/moon/design/accordion/header.ex index 07acd74a5..1481dc391 100644 --- a/lib/moon/design/accordion/header.ex +++ b/lib/moon/design/accordion/header.ex @@ -30,6 +30,8 @@ defmodule Moon.Design.Accordion.Header do data-testid={@testid} type="button" aria-expanded={"#{@is_open}"} + is-content-outside={"#{@is_content_outside}"} + size={"#{@size}"} :on-click={@on_change} {=@value} {=@disabled} diff --git a/lib/moon/design/dropdown/bottom_options.ex b/lib/moon/design/dropdown/bottom_options.ex index 9d65f2b31..16cfdaa21 100644 --- a/lib/moon/design/dropdown/bottom_options.ex +++ b/lib/moon/design/dropdown/bottom_options.ex @@ -53,6 +53,7 @@ defmodule Moon.Design.Dropdown.BottomOptions do {=@id} data-testid={@testid} :on-click-away={@on_close} + role="listbox" > {#if slot_assigned?(:option)} {#for {option, index} <- Enum.with_index(make_list(@option))} diff --git a/lib/moon/design/dropdown/options.ex b/lib/moon/design/dropdown/options.ex index 483e6039c..c59abe7f3 100644 --- a/lib/moon/design/dropdown/options.ex +++ b/lib/moon/design/dropdown/options.ex @@ -44,6 +44,7 @@ defmodule Moon.Design.Dropdown.Options do ])} {=@id} data-testid={@testid} + role="listbox" > {#if slot_assigned?(:option)} {#for {option, index} <- Enum.with_index(make_list(@option))} diff --git a/lib/moon/design/pagination/pages.ex b/lib/moon/design/pagination/pages.ex index 5ce8cec82..2be13b462 100644 --- a/lib/moon/design/pagination/pages.ex +++ b/lib/moon/design/pagination/pages.ex @@ -97,7 +97,7 @@ defmodule Moon.Design.Pagination.Pages do ])} :on-click={@on_change} value={page} - aria-label={"page #{page}"} + aria-label={"page_#{page}"} tabindex={0} > {page} diff --git a/lib/moon/design/popover.ex b/lib/moon/design/popover.ex index e189f2136..042c43d29 100644 --- a/lib/moon/design/popover.ex +++ b/lib/moon/design/popover.ex @@ -16,7 +16,12 @@ defmodule Moon.Design.Popover do ~F"""
-
+
<#slot {@trigger} />
diff --git a/lib/moon_web/examples/design/chip_example/active.ex b/lib/moon_web/examples/design/chip_example/active.ex index 71fe5ecef..cbd83f8d1 100644 --- a/lib/moon_web/examples/design/chip_example/active.ex +++ b/lib/moon_web/examples/design/chip_example/active.ex @@ -8,8 +8,8 @@ defmodule MoonWeb.Examples.Design.ChipExample.Active do def render(assigns) do ~F""" - Active - Active + Active + Active """ end diff --git a/lib/moon_web/examples/design/chip_example/is_stroke.ex b/lib/moon_web/examples/design/chip_example/is_stroke.ex index 399dced90..1f95f8dc6 100644 --- a/lib/moon_web/examples/design/chip_example/is_stroke.ex +++ b/lib/moon_web/examples/design/chip_example/is_stroke.ex @@ -8,10 +8,10 @@ defmodule MoonWeb.Examples.Design.ChipExample.IsStroke do def render(assigns) do ~F""" - + Stroke on hover - Stroke on hover + Stroke on hover """ end diff --git a/lib/moon_web/examples/design/chip_example/modal_example/default.ex b/lib/moon_web/examples/design/chip_example/modal_example/default.ex index 0a9a8f621..e3f6db148 100644 --- a/lib/moon_web/examples/design/chip_example/modal_example/default.ex +++ b/lib/moon_web/examples/design/chip_example/modal_example/default.ex @@ -13,7 +13,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.Default do def render(assigns) do ~F"""
- + @@ -28,7 +28,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.Default do

- +
diff --git a/lib/moon_web/examples/design/chip_example/modal_example/with_big_content.ex b/lib/moon_web/examples/design/chip_example/modal_example/with_big_content.ex index e4a81b710..3c90f49a2 100644 --- a/lib/moon_web/examples/design/chip_example/modal_example/with_big_content.ex +++ b/lib/moon_web/examples/design/chip_example/modal_example/with_big_content.ex @@ -13,7 +13,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithBigContent do def render(assigns) do ~F"""
- + @@ -28,7 +28,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithBigContent do

- +
diff --git a/lib/moon_web/examples/design/chip_example/modal_example/with_select.ex b/lib/moon_web/examples/design/chip_example/modal_example/with_select.ex index 85c39adc6..d274e9735 100644 --- a/lib/moon_web/examples/design/chip_example/modal_example/with_select.ex +++ b/lib/moon_web/examples/design/chip_example/modal_example/with_select.ex @@ -42,7 +42,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithSelect do def render(assigns) do ~F"""
- + @@ -70,7 +70,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithSelect do
- +
diff --git a/lib/moon_web/examples/design/chip_example/sizes.ex b/lib/moon_web/examples/design/chip_example/sizes.ex index 6b0e53eb9..d25e106e7 100644 --- a/lib/moon_web/examples/design/chip_example/sizes.ex +++ b/lib/moon_web/examples/design/chip_example/sizes.ex @@ -8,8 +8,8 @@ defmodule MoonWeb.Examples.Design.ChipExample.Sizes do def render(assigns) do ~F""" - Small - Medium is default + Small + Medium is default """ end diff --git a/lib/moon_web/examples/design/chip_example/variants.ex b/lib/moon_web/examples/design/chip_example/variants.ex index 6253e918c..92df3707b 100644 --- a/lib/moon_web/examples/design/chip_example/variants.ex +++ b/lib/moon_web/examples/design/chip_example/variants.ex @@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.ChipExample.Variants do def render(assigns) do ~F""" - Ghost variant + Ghost variant Default variant """ end diff --git a/lib/moon_web/examples/design/drawer_example/positions.ex b/lib/moon_web/examples/design/drawer_example/positions.ex index 75ad1f20d..88134f124 100644 --- a/lib/moon_web/examples/design/drawer_example/positions.ex +++ b/lib/moon_web/examples/design/drawer_example/positions.ex @@ -10,7 +10,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do def render(assigns) do ~F"""
- @@ -22,7 +22,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do - @@ -34,7 +34,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do - @@ -46,7 +46,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do - diff --git a/lib/moon_web/examples/design/drawer_example/with_close.ex b/lib/moon_web/examples/design/drawer_example/with_close.ex index a15787cf0..6569e2588 100644 --- a/lib/moon_web/examples/design/drawer_example/with_close.ex +++ b/lib/moon_web/examples/design/drawer_example/with_close.ex @@ -11,14 +11,19 @@ defmodule MoonWeb.Examples.Design.DrawerExample.WithClose do def render(assigns) do ~F"""
-

Header

- +
Drawer content
 diff --git a/lib/moon_web/examples/design/pagination_example/with_icons.ex b/lib/moon_web/examples/design/pagination_example/with_icons.ex index ee43e9de7..6aa74900b 100644 --- a/lib/moon_web/examples/design/pagination_example/with_icons.ex +++ b/lib/moon_web/examples/design/pagination_example/with_icons.ex @@ -13,11 +13,11 @@ defmodule MoonWeb.Examples.Design.PaginationExample.WithIcons do def render(assigns) do ~F""" - + - + diff --git a/lib/moon_web/examples/design/pagination_example/with_text.ex b/lib/moon_web/examples/design/pagination_example/with_text.ex index 38f7e1b25..eb0284dbe 100644 --- a/lib/moon_web/examples/design/pagination_example/with_text.ex +++ b/lib/moon_web/examples/design/pagination_example/with_text.ex @@ -11,9 +11,17 @@ defmodule MoonWeb.Examples.Design.PaginationExample.WithText do def render(assigns) do ~F""" - Previous + Previous - Next + Next """ end diff --git a/lib/moon_web/examples/design/popover_example/with_close.ex b/lib/moon_web/examples/design/popover_example/with_close.ex index 6a206a14e..857c441be 100644 --- a/lib/moon_web/examples/design/popover_example/with_close.ex +++ b/lib/moon_web/examples/design/popover_example/with_close.ex @@ -1,7 +1,7 @@ defmodule MoonWeb.Examples.Design.PopoverExample.WithClose do @moduledoc false - use Moon.StatelessComponent + use Moon.StatefulComponent use MoonWeb, :example alias Moon.Design.Popover @@ -15,63 +15,10 @@ defmodule MoonWeb.Examples.Design.PopoverExample.WithClose do MediaMegaphone } - prop(close_panel, :event) - def render(assigns) do ~F""" - - - - - -
- - - - - - Best tournaments with streamers - - - - - - - - Your favourite games - - - - - - - - Your favourite games - - - -
- - - """ - end - - def code() do - """ - alias Moon.Design.Popover - alias Moon.Design.Button - alias Moon.Design.MenuItem - alias Moon.Components.Lego - - alias Moon.Icons.{ - GenericTrophy, - MediaTuner, - MediaMegaphone - } - - ... - - +
+ @@ -101,10 +48,77 @@ defmodule MoonWeb.Examples.Design.PopoverExample.WithClose do Your favourite games - +
+
+ """ + end + + def handle_event("set_close", _, socket) do + Popover.close("popover_id_8") + {:noreply, socket} + end + + def code() do + """ + alias Moon.Design.Popover + alias Moon.Design.Button + alias Moon.Design.MenuItem + alias Moon.Components.Lego + + alias Moon.Icons.{ + GenericTrophy, + MediaTuner, + MediaMegaphone + } + + def render(assigns) do + ~F\\\""" +
+ + + + + +
+ + + + + + Best tournaments with streamers + + + + + + + + Your favourite games + + + + + + + + Your favourite games + + + +
+ + +
+ \\\""" + end + + def handle_event("set_close", _, socket) do + Popover.close("popover_id_8") + {:noreply, socket} + end """ end end diff --git a/lib/moon_web/examples/design/switch_example/sizes.ex b/lib/moon_web/examples/design/switch_example/sizes.ex index 070a2ddd0..78472b4b9 100644 --- a/lib/moon_web/examples/design/switch_example/sizes.ex +++ b/lib/moon_web/examples/design/switch_example/sizes.ex @@ -20,9 +20,9 @@ defmodule MoonWeb.Examples.Design.SwitchExample.Sizes do def render(assigns) do ~F"""
- - - + + +
""" end diff --git a/mix.lock b/mix.lock index 9e41fdb10..0d07ab6bf 100644 --- a/mix.lock +++ b/mix.lock @@ -3,6 +3,7 @@ "bunt": {:hex, :bunt, "0.2.1", "e2d4792f7bc0ced7583ab54922808919518d0e57ee162901a16a1b6664ef3b14", [:mix], [], "hexpm", "a330bfb4245239787b15005e66ae6845c9cd524a288f0d141c148b02603777a5"}, "castore": {:hex, :castore, "1.0.3", "7130ba6d24c8424014194676d608cb989f62ef8039efd50ff4b3f33286d06db8", [:mix], [], "hexpm", "680ab01ef5d15b161ed6a95449fac5c6b8f60055677a8e79acf01b27baa4390b"}, "certifi": {:hex, :certifi, "2.9.0", "6f2a475689dd47f19fb74334859d460a2dc4e3252a3324bd2111b8f0429e7e21", [:rebar3], [], "hexpm", "266da46bdb06d6c6d35fde799bcb28d36d985d424ad7c08b5bb48f5b5cdd4641"}, + "chrome_remote_interface": {:hex, :chrome_remote_interface, "0.4.1", "3fa70207f223fe7021db5e9196dcb72fba405821fb380443ef6d0fa80060c70c", [:mix], [{:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:websockex, "~> 0.4.0", [hex: :websockex, repo: "hexpm", optional: false]}], "hexpm", "79f8b617eb975b272cbd30b7fe10cc41bb45a1ada37996d93b81f05a251962fb"}, "combine": {:hex, :combine, "0.10.0", "eff8224eeb56498a2af13011d142c5e7997a80c8f5b97c499f84c841032e429f", [:mix], [], "hexpm", "1b1dbc1790073076580d0d1d64e42eae2366583e7aecd455d1215b0d16f2451b"}, "cowboy": {:hex, :cowboy, "2.10.0", "ff9ffeff91dae4ae270dd975642997afe2a1179d94b1887863e43f681a203e26", [:make, :rebar3], [{:cowlib, "2.12.1", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "3afdccb7183cc6f143cb14d3cf51fa00e53db9ec80cdcd525482f5e99bc41d6b"}, "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"}, @@ -35,6 +36,7 @@ "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"}, "moon_icons": {:hex, :moon_icons, "0.2.6", "a3cc436ed5388392068e20b9cbe25f783e9b254a10e373ce3947c34bdaddbf7a", [:mix], [{:surface, ">= 0.9.1", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "6b79a50f6cc673dd58d2f6f1b99985c33f1a5f4ea9fc332330e5a00366e25b98"}, "nimble_parsec": {:hex, :nimble_parsec, "1.3.1", "2c54013ecf170e249e9291ed0a62e5832f70a476c61da16f6aac6dca0189f2af", [:mix], [], "hexpm", "2682e3c0b2eb58d90c6375fc0cc30bc7be06f365bf72608804fb9cffa5e1b167"}, + "nimble_pool": {:hex, :nimble_pool, "0.2.6", "91f2f4c357da4c4a0a548286c84a3a28004f68f05609b4534526871a22053cde", [:mix], [], "hexpm", "1c715055095d3f2705c4e236c18b618420a35490da94149ff8b580a2144f653f"}, "parse_trans": {:hex, :parse_trans, "3.3.1", "16328ab840cc09919bd10dab29e431da3af9e9e7e7e6f0089dd5a2d2820011d8", [:rebar3], [], "hexpm", "07cd9577885f56362d414e8c4c4e6bdf10d43a8767abb92d24cbe8b24c54888b"}, "phoenix": {:hex, :phoenix, "1.7.6", "61f0625af7c1d1923d582470446de29b008c0e07ae33d7a3859ede247ddaf59a", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "f6b4be7780402bb060cbc6e83f1b6d3f5673b674ba73cc4a7dd47db0322dfb88"}, "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.2", "b21bd01fdeffcfe2fab49e4942aa938b6d3e89e93a480d4aee58085560a0bc0d", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "70242edd4601d50b69273b057ecf7b684644c19ee750989fd555625ae4ce8f5d"}, @@ -62,4 +64,5 @@ "vega_lite": {:hex, :vega_lite, "0.1.7", "1f1ad850821335702958f7351ca52808a5a109f9ce35fd5c14f9613970bad140", [:mix], [{:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: false]}], "hexpm", "3932382ed5ad77c08c27abc45137257e9a86897916cef1a0da148632c6a91e30"}, "websock": {:hex, :websock, "0.5.2", "b3c08511d8d79ed2c2f589ff430bd1fe799bb389686dafce86d28801783d8351", [:mix], [], "hexpm", "925f5de22fca6813dfa980fb62fd542ec43a2d1a1f83d2caec907483fe66ff05"}, "websock_adapter": {:hex, :websock_adapter, "0.5.3", "4908718e42e4a548fc20e00e70848620a92f11f7a6add8cf0886c4232267498d", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "cbe5b814c1f86b6ea002b52dd99f345aeecf1a1a6964e209d208fb404d930d3d"}, + "websockex": {:hex, :websockex, "0.4.3", "92b7905769c79c6480c02daacaca2ddd49de936d912976a4d3c923723b647bf0", [:mix], [], "hexpm", "95f2e7072b85a3a4cc385602d42115b73ce0b74a9121d0d6dbbf557645ac53e4"}, } diff --git a/test/moon/design/dropdown_test.exs b/test/moon/design/dropdown_test.exs new file mode 100644 index 000000000..07441eb1d --- /dev/null +++ b/test/moon/design/dropdown_test.exs @@ -0,0 +1 @@ +# TODO: try to use live_isolated or https://github.com/Serabe/live_isolated_component or https://gist.github.com/mcrumm/8e6b0a98196dd74a841d850c70805f50 diff --git a/test/moon_web/examples/accordion/content_outside_test.exs b/test/moon_web/examples/accordion/content_outside_test.exs new file mode 100644 index 000000000..43c4b1c10 --- /dev/null +++ b/test/moon_web/examples/accordion/content_outside_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Accordion.ContentOutsideTest do + use MoonWeb.ConnCase, async: true + + test "should contain example with content outside", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.ContentOutside") + + assert view + |> element("#outside-accordion button[value=0][is-content-outside=true]") + |> has_element?() + + refute view + |> element("#outside-accordion button[value=1][is-content-outside=true]") + |> has_element?() + + refute view + |> element("#outside-accordion button[value=2][is-content-outside=true]") + |> has_element?() + end + + # TODO: add screenshot test of default state and expanded state +end diff --git a/test/moon_web/examples/accordion/default_test.exs b/test/moon_web/examples/accordion/default_test.exs new file mode 100644 index 000000000..f698eb327 --- /dev/null +++ b/test/moon_web/examples/accordion/default_test.exs @@ -0,0 +1,85 @@ +defmodule MoonWeb.Examples.Accordion.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should expand and collapse", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.Default") + + refute view + |> element("#simple-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=2][aria-expanded=true]") + |> has_element?() + + view + |> element("#simple-accordion button[value=0]") + |> render_click() + + assert view + |> element("#simple-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=2][aria-expanded=true]") + |> has_element?() + + view + |> element("#simple-accordion button[value=1]") + |> render_click() + + assert view + |> element("#simple-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + assert view + |> element("#simple-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=2][aria-expanded=true]") + |> has_element?() + + view + |> element("#simple-accordion button[value=0]") + |> render_click() + + refute view + |> element("#simple-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + assert view + |> element("#simple-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=2][aria-expanded=true]") + |> has_element?() + + view + |> element("#simple-accordion button[value=1]") + |> render_click() + + refute view + |> element("#simple-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#simple-accordion button[value=2][aria-expanded=true]") + |> has_element?() + end + + # TODO: add screenshot test of default state and expanded state +end diff --git a/test/moon_web/examples/accordion/disabled_item_test.exs b/test/moon_web/examples/accordion/disabled_item_test.exs new file mode 100644 index 000000000..26d15db77 --- /dev/null +++ b/test/moon_web/examples/accordion/disabled_item_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Accordion.DisabledItemTest do + use MoonWeb.ConnCase, async: true + + test "should have one disabled item", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.DisabledItem") + + refute view + |> element("#disabled-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + assert view + |> element("#disabled-accordion button[value=1][disabled]") + |> has_element?() + + refute view + |> element("#disabled-accordion button[value=2][aria-expanded=true]") + |> has_element?() + end + + # TODO: add screenshot test of default state and expanded state +end diff --git a/test/moon_web/examples/accordion/on_change_event_test.exs b/test/moon_web/examples/accordion/on_change_event_test.exs new file mode 100644 index 000000000..2498e347b --- /dev/null +++ b/test/moon_web/examples/accordion/on_change_event_test.exs @@ -0,0 +1,69 @@ +defmodule MoonWeb.Examples.Accordion.OnChangeEventTest do + use MoonWeb.ConnCase, async: true + + test "should change colour", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.OnChangeEvent") + + assert view + |> element("#on-change-accordion button.bg-gohan[value=bg-krillin]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-gohan[value=bg-roshi]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-gohan[value=bg-chichi]") + |> has_element?() + + view + |> element("#on-change-accordion button[value=bg-krillin]") + |> render_click() + + assert view + |> element("#on-change-accordion button.bg-krillin[value=bg-krillin]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-krillin[value=bg-roshi]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-krillin[value=bg-chichi]") + |> has_element?() + + view + |> element("#on-change-accordion button[value=bg-roshi]") + |> render_click() + + assert view + |> element("#on-change-accordion button.bg-roshi[value=bg-krillin]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-roshi[value=bg-roshi]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-roshi[value=bg-chichi]") + |> has_element?() + + view + |> element("#on-change-accordion button[value=bg-chichi]") + |> render_click() + + assert view + |> element("#on-change-accordion button.bg-chichi[value=bg-krillin]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-chichi[value=bg-roshi]") + |> has_element?() + + assert view + |> element("#on-change-accordion button.bg-chichi[value=bg-chichi]") + |> has_element?() + end + + # TODO: add screenshot test of default state and expanded state +end diff --git a/test/moon_web/examples/accordion/open_by_default_test.exs b/test/moon_web/examples/accordion/open_by_default_test.exs new file mode 100644 index 000000000..364faa556 --- /dev/null +++ b/test/moon_web/examples/accordion/open_by_default_test.exs @@ -0,0 +1,41 @@ +defmodule MoonWeb.Examples.Accordion.OpenByDefaultTest do + use MoonWeb.ConnCase, async: true + + test "should be open by default", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.OpenByDefault") + + assert view + |> element("#open-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + assert view + |> element("#open-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + view + |> element("#open-accordion button[value=0]") + |> render_click() + + refute view + |> element("#open-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + assert view + |> element("#open-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + view + |> element("#open-accordion button[value=1]") + |> render_click() + + refute view + |> element("#open-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#open-accordion button[value=1][aria-expanded=true]") + |> has_element?() + end + + # TODO: add screenshot test of default state and collapsed state +end diff --git a/test/moon_web/examples/accordion/single_open_test.exs b/test/moon_web/examples/accordion/single_open_test.exs new file mode 100644 index 000000000..b32b94d12 --- /dev/null +++ b/test/moon_web/examples/accordion/single_open_test.exs @@ -0,0 +1,53 @@ +defmodule MoonWeb.Examples.Accordion.SingleOpenTest do + use MoonWeb.ConnCase, async: true + + test "should expand one and collapse others", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.SingleOpen") + + refute view + |> element("#single-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#single-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#single-accordion button[value=2][aria-expanded=true]") + |> has_element?() + + view + |> element("#single-accordion button[value=0]") + |> render_click() + + assert view + |> element("#single-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#single-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#single-accordion button[value=2][aria-expanded=true]") + |> has_element?() + + view + |> element("#single-accordion button[value=1]") + |> render_click() + + refute view + |> element("#single-accordion button[value=0][aria-expanded=true]") + |> has_element?() + + assert view + |> element("#single-accordion button[value=1][aria-expanded=true]") + |> has_element?() + + refute view + |> element("#single-accordion button[value=2][aria-expanded=true]") + |> has_element?() + end + + # TODO: add screenshot test of default state and expanded state +end diff --git a/test/moon_web/examples/accordion/sizes_test.exs b/test/moon_web/examples/accordion/sizes_test.exs new file mode 100644 index 000000000..9215a688e --- /dev/null +++ b/test/moon_web/examples/accordion/sizes_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Accordion.SizesTest do + use MoonWeb.ConnCase, async: true + + test "should contain Accordion items with all sizes", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes") + + assert view + |> element("#accordion-sizes-xl button[value=0][size=xl]") + |> has_element?() + + assert view + |> element("#accordion-sizes-lg button[value=0][size=lg]") + |> has_element?() + + assert view + |> element("#accordion-sizes-md button[value=0][size=md]") + |> has_element?() + + assert view + |> element("#accordion-sizes-sm button[value=0][size=sm]") + |> has_element?() + end + + # TODO: add screenshot test of default state and expanded state +end diff --git a/test/moon_web/examples/alert/default_test.exs b/test/moon_web/examples/alert/default_test.exs new file mode 100644 index 000000000..2b82d6fbc --- /dev/null +++ b/test/moon_web/examples/alert/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Alert.DefaultTest do + # TODO: add screenshot tests for all alert examples +end diff --git a/test/moon_web/examples/alert/handle_close_test.exs b/test/moon_web/examples/alert/handle_close_test.exs new file mode 100644 index 000000000..6cae270bd --- /dev/null +++ b/test/moon_web/examples/alert/handle_close_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Alert.HandleCloseTest do + use MoonWeb.ConnCase, async: true + + test "should close and open alert", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/AlertExample.HandleClose") + + assert view |> element("div[role=alert] button[data-size=xs]") |> has_element?() + + view + |> element("button[data-size=xs]") + |> render_click() + + assert view |> element("button[data-size=md]") |> has_element?() + + refute view |> element("div[role=alert] button[data-size=xs]") |> has_element?() + + view + |> element("button[data-size=md]") + |> render_click() + + assert view |> element("div[role=alert] button[data-size=xs]") |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/avatar/default_test.exs b/test/moon_web/examples/avatar/default_test.exs new file mode 100644 index 000000000..9fb79fcb8 --- /dev/null +++ b/test/moon_web/examples/avatar/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Avatar.DefaultTest do + # TODO: add screenshot tests for all alert examples +end diff --git a/test/moon_web/examples/bottom_sheet/custom_height_test.exs b/test/moon_web/examples/bottom_sheet/custom_height_test.exs new file mode 100644 index 000000000..d8858884b --- /dev/null +++ b/test/moon_web/examples/bottom_sheet/custom_height_test.exs @@ -0,0 +1,32 @@ +defmodule MoonWeb.Examples.BottomSheet.CustomHeightTest do + use MoonWeb.ConnCase, async: true + + test "should open and close BottomSheet", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BottomSheetExample.CustomHeight") + + button_to_open_bottomsheet = view |> element("button.bg-piccolo[data-size=md]") + assert button_to_open_bottomsheet |> render() =~ "Initialize uncloaking" + + assert view |> element("div.hidden[id=custom_height_bottom_sheet]") |> has_element?() + + button_to_open_bottomsheet |> render_click() + + assert view |> element("div[id=custom_height_bottom_sheet][data-is_open]") |> has_element?() + assert view |> element("#custom_height_bottom_sheet div.moon-backdrop") |> has_element?() + assert view |> element("#custom_height_bottom_sheet div.moon-drag-handle") |> has_element?() + + assert view + |> element("#custom_height_bottom_sheet div[class~=\"h-[77%]\"]") + |> has_element?() + + button_to_close_bottomsheet = view |> element("button.bg-none[data-size=md]") + assert button_to_close_bottomsheet |> render() =~ "I don't wanna see this" + + button_to_close_bottomsheet |> render_click() + + assert view |> element("div.hidden[id=custom_height_bottom_sheet]") |> has_element?() + end + + # TODO: add test case for closing the bottomsheet panel on-click-away + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/bottom_sheet/default_test.exs b/test/moon_web/examples/bottom_sheet/default_test.exs new file mode 100644 index 000000000..1a9eeb79d --- /dev/null +++ b/test/moon_web/examples/bottom_sheet/default_test.exs @@ -0,0 +1,26 @@ +defmodule MoonWeb.Examples.BottomSheet.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should open and close BottomSheet", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BottomSheetExample.Default") + + button_to_open_bottomsheet = view |> element("button[data-size=md]") + assert button_to_open_bottomsheet |> render() =~ "My mind is ready" + + assert view |> element("div.hidden[id=default_bottom_sheet]") |> has_element?() + + button_to_open_bottomsheet |> render_click() + + assert view |> element("div[id=default_bottom_sheet][data-is_open]") |> has_element?() + + button_to_close_bottomsheet = view |> element("button[data-size=lg]") + assert button_to_close_bottomsheet |> render() =~ "I am honestly done" + + button_to_close_bottomsheet |> render_click() + + assert view |> element("div.hidden[id=default_bottom_sheet]") |> has_element?() + end + + # TODO: add test case for closing the bottomsheet panel on-click-away + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/bottom_sheet/optional_extras_test.exs b/test/moon_web/examples/bottom_sheet/optional_extras_test.exs new file mode 100644 index 000000000..d48d0ab1c --- /dev/null +++ b/test/moon_web/examples/bottom_sheet/optional_extras_test.exs @@ -0,0 +1,29 @@ +defmodule MoonWeb.Examples.BottomSheet.OptionalExtrasTest do + use MoonWeb.ConnCase, async: true + + test "should open and close BottomSheet", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BottomSheetExample.LargeWithAllOptionalExtras") + + button_to_open_bottomsheet = view |> element("button[data-size=md]") + assert button_to_open_bottomsheet |> render() =~ "Show it to me!" + + assert view |> element("div.hidden[id=bottom_sheet_extras]") |> has_element?() + + button_to_open_bottomsheet |> render_click() + + assert view |> element("div[id=bottom_sheet_extras][data-is_open]") |> has_element?() + assert view |> element("#bottom_sheet_extras div.moon-backdrop") |> has_element?() + assert view |> element("#bottom_sheet_extras div.moon-drag-handle") |> has_element?() + assert view |> element("#bottom_sheet_extras div.shadow-moon-lg") |> has_element?() + + button_to_close_bottomsheet = view |> element("button[data-size=lg]") + assert button_to_close_bottomsheet |> render() =~ "Send" + + button_to_close_bottomsheet |> render_click() + + assert view |> element("div.hidden[id=bottom_sheet_extras]") |> has_element?() + end + + # TODO: add test case for closing the bottomsheet panel on-click-away + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/bottom_sheet/responsive_test.exs b/test/moon_web/examples/bottom_sheet/responsive_test.exs new file mode 100644 index 000000000..976babb35 --- /dev/null +++ b/test/moon_web/examples/bottom_sheet/responsive_test.exs @@ -0,0 +1,30 @@ +defmodule MoonWeb.Examples.BottomSheet.ResponsiveTest do + use MoonWeb.ConnCase, async: true + + test "should open and close BottomSheet", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BottomSheetExample.Responsive") + + button_to_open_bottomsheet = view |> element("button[data-size=md]") + assert button_to_open_bottomsheet |> render() =~ "Modal" + + assert view |> element("div.hidden[id=modal_bottom_sheet]") |> has_element?() + + button_to_open_bottomsheet |> render_click() + + assert view |> element("div[id=modal_bottom_sheet][data-is_open]") |> has_element?() + assert view |> element("#modal_bottom_sheet div.moon-backdrop") |> has_element?() + assert view |> element("#modal_bottom_sheet div.moon-drag-handle") |> has_element?() + + # TODO: test by position class-> assert view |> element("#modal_bottom_sheet div.lg:align-middle") |> has_element?() + + button_to_close_bottomsheet = view |> element("button[data-size=lg]") + assert button_to_close_bottomsheet |> render() =~ "Got it!" + + button_to_close_bottomsheet |> render_click() + + assert view |> element("div.hidden[id=modal_bottom_sheet]") |> has_element?() + end + + # TODO: add test case for closing the bottomsheet panel on-click-away + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/breadcrumb/five_and_more_items_test.exs b/test/moon_web/examples/breadcrumb/five_and_more_items_test.exs new file mode 100644 index 000000000..23b1b79a3 --- /dev/null +++ b/test/moon_web/examples/breadcrumb/five_and_more_items_test.exs @@ -0,0 +1,30 @@ +defmodule MoonWeb.Examples.Breadcrumb.FiveAndMoreItemsTest do + use MoonWeb.ConnCase, async: true + + # TODO: fix test + + test "should open and close Breadcrumb panel", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BreadcrumbExample.FiveAndMoreItems") + + assert view + |> element("#breadcrumb_5 ol.hidden[id=breadcrumb_5_inner_breadcrumb_flyout]") + |> has_element?() + + assert view |> element("#breadcrumb_5 svg.h-4.moon-icon.w-4") |> has_element?() + assert view |> element("#breadcrumb_5 button.text-trunks[data-size=xs]") |> has_element?() + assert view |> element("#breadcrumb_5 li.text-trunks") |> has_element?() + + assert view + |> element("#breadcrumb_5 svg.moon-icon.fill-none.rtl\\:rotate-180") + |> has_element?() + + # view |> element("#breadcrumb_5 button.text-trunks[data-size=xs]") + # |> render_click() + + # assert view |> element("#breadcrumb_5 ol.flex[id=breadcrumb_5_inner_breadcrumb_flyout]") |> has_element?() + # refute view |> element("#breadcrumb_5 ol.hidden[id=breadcrumb_5_inner_breadcrumb_flyout]") |> has_element?() + end + + # TODO: add test case for closing the panel on-click-away + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/breadcrumb/four_items.exs b/test/moon_web/examples/breadcrumb/four_items.exs new file mode 100644 index 000000000..040ae814f --- /dev/null +++ b/test/moon_web/examples/breadcrumb/four_items.exs @@ -0,0 +1,16 @@ +defmodule MoonWeb.Examples.Breadcrumb.FourItemsTest do + use MoonWeb.ConnCase, async: true + + test "doesn't have collapsed crumbs", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BreadcrumbExample.FourItems") + + refute view |> element("#breadcrumb_4 ol.hidden.absolute") |> has_element?() + refute view |> element("#breadcrumb_4 button.text-trunks[data-size=xs]") |> has_element?() + + assert view + |> element("#breadcrumb_4 svg.moon-icon.fill-none.rtl\\:rotate-180") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/breadcrumb/one_item.exs b/test/moon_web/examples/breadcrumb/one_item.exs new file mode 100644 index 000000000..ec976509f --- /dev/null +++ b/test/moon_web/examples/breadcrumb/one_item.exs @@ -0,0 +1,16 @@ +defmodule MoonWeb.Examples.Breadcrumb.OneItemTest do + use MoonWeb.ConnCase, async: true + + test "doesn't have collapsed crumbs and arrow", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BreadcrumbExample.OneItem") + + refute view |> element("#breadcrumb_1 ol.hidden.absolute") |> has_element?() + refute view |> element("#breadcrumb_1 button.text-trunks[data-size=xs]") |> has_element?() + + refute view + |> element("#breadcrumb_1 svg.moon-icon.fill-none.rtl\\:rotate-180") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/breadcrumb/two_tems.exs b/test/moon_web/examples/breadcrumb/two_tems.exs new file mode 100644 index 000000000..aaad244a7 --- /dev/null +++ b/test/moon_web/examples/breadcrumb/two_tems.exs @@ -0,0 +1,16 @@ +defmodule MoonWeb.Examples.Breadcrumb.TwoItemsTest do + use MoonWeb.ConnCase, async: true + + test "doesn't have collapsed crumbs", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/BreadcrumbExample.TwoItems") + + refute view |> element("#breadcrumb_2 ol.hidden.absolute") |> has_element?() + refute view |> element("#breadcrumb_2 button.text-trunks[data-size=xs]") |> has_element?() + + assert view + |> element("#breadcrumb_2 svg.moon-icon.fill-none.rtl\\:rotate-180") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/button/default_test.exs b/test/moon_web/examples/button/default_test.exs new file mode 100644 index 000000000..7583e6165 --- /dev/null +++ b/test/moon_web/examples/button/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Button.DefaultTest do + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/carousel/autoslide_test.exs b/test/moon_web/examples/carousel/autoslide_test.exs new file mode 100644 index 000000000..ac0a8fd4f --- /dev/null +++ b/test/moon_web/examples/carousel/autoslide_test.exs @@ -0,0 +1,17 @@ +defmodule MoonWeb.Examples.Carousel.AutoslideTest do + use MoonWeb.ConnCase, async: true + + test "should have autoslide", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/CarouselExample.Autoslide") + + refute view |> element("#autoslide button.moon-right-arrow") |> has_element?() + refute view |> element("#autoslide button.moon-left-arrow") |> has_element?() + assert view |> element("#autoslide ul.moon-reel") |> has_element?() + assert view |> element("div[data-autoslide_delay=3000][data-step=1]") |> has_element?() + + # assert view |> element("#default li.[value=6][visible=true]") |> has_element?() + # TODO: seems not to recognize visible=true, because its JS? + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/carousel/customized_arrows.exs b/test/moon_web/examples/carousel/customized_arrows.exs new file mode 100644 index 000000000..fc972cbef --- /dev/null +++ b/test/moon_web/examples/carousel/customized_arrows.exs @@ -0,0 +1,15 @@ +defmodule MoonWeb.Examples.Carousel.CustomizedArrowsTest do + use MoonWeb.ConnCase, async: true + + test "should have reel and customized arrows", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/CarouselExample.CustomizedArrows") + + refute view |> element("#customized_arrows button.moon-right-arrow") |> has_element?() + refute view |> element("#customized_arrows button.moon-left-arrow") |> has_element?() + assert view |> element("#customized_arrows ul.moon-reel") |> has_element?() + # assert view |> element("#default li.[value=6][visible=true]") |> has_element?() + # TODO: seems not to recognize visible=true, because its JS? + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/carousel/default_test.exs b/test/moon_web/examples/carousel/default_test.exs new file mode 100644 index 000000000..43e23c828 --- /dev/null +++ b/test/moon_web/examples/carousel/default_test.exs @@ -0,0 +1,15 @@ +defmodule MoonWeb.Examples.Carousel.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should have arrows and reel", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/CarouselExample.Default") + + assert view |> element("#default button.moon-right-arrow") |> has_element?() + assert view |> element("#default button.moon-left-arrow") |> has_element?() + assert view |> element("#default ul.moon-reel") |> has_element?() + # assert view |> element("#default li.[value=6][visible=true]") |> has_element?() + # TODO: seems not to recognize visible=true, because its JS? + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/carousel/indicators_test.exs b/test/moon_web/examples/carousel/indicators_test.exs new file mode 100644 index 000000000..6111392a2 --- /dev/null +++ b/test/moon_web/examples/carousel/indicators_test.exs @@ -0,0 +1,23 @@ +defmodule MoonWeb.Examples.Carousel.IndicatorsTest do + use MoonWeb.ConnCase, async: true + + test "should have w-80 and indicators", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/CarouselExample.Indicators") + + assert view |> element("div.relative.w-80") |> has_element?() + assert view |> element("#indicators button.moon-right-arrow") |> has_element?() + assert view |> element("#indicators button.moon-left-arrow") |> has_element?() + assert view |> element("#indicators ul.moon-reel") |> has_element?() + + assert view + |> element( + "#indicators button[data-default_bg_color=bg-beerus][data-selected_bg_color=bg-piccolo]" + ) + |> has_element?() + + # assert view |> element("#default li.[value=6][visible=true]") |> has_element?() + # TODO: seems not to recognize visible=true, because its JS? + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/carousel/select_index_test.exs b/test/moon_web/examples/carousel/select_index_test.exs new file mode 100644 index 000000000..7c440b61c --- /dev/null +++ b/test/moon_web/examples/carousel/select_index_test.exs @@ -0,0 +1,23 @@ +defmodule MoonWeb.Examples.Carousel.SelectIndexTest do + use MoonWeb.ConnCase, async: true + + test "should have buttons with index", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/CarouselExample.SelectIndex") + + assert view |> element("div.relative.w-80") |> has_element?() + refute view |> element("#selected_index button.moon-right-arrow") |> has_element?() + refute view |> element("#selected_index button.moon-left-arrow") |> has_element?() + assert view |> element("#selected_index ul.moon-reel") |> has_element?() + + assert view + |> element( + "button.bg-transparent.cursor-pointer.hover\\:bg-heles.rounded-moon-i-sm.text-moon-14 " + ) + |> has_element?() + + # assert view |> element("#default li.[value=6][visible=true]") |> has_element?() + # TODO: seems not to recognize visible=true, because its JS? + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/carousel/spaces_test.exs b/test/moon_web/examples/carousel/spaces_test.exs new file mode 100644 index 000000000..cb75e38a5 --- /dev/null +++ b/test/moon_web/examples/carousel/spaces_test.exs @@ -0,0 +1,11 @@ +defmodule MoonWeb.Examples.Carousel.SpacesTest do + use MoonWeb.ConnCase, async: true + + test "should have reel and customized arrows", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/CarouselExample.Spaces") + + assert view |> element("#spaces ul.moon-reel.gap-10") |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/chip/active_test.exs b/test/moon_web/examples/chip/active_test.exs new file mode 100644 index 000000000..9fb5ce5c9 --- /dev/null +++ b/test/moon_web/examples/chip/active_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Chip.ActiveTest do + use MoonWeb.ConnCase, async: true + + test "active chip", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.Active") + + assert view |> element("button.bg-jiren.text-piccolo[data-testid=active]") |> has_element?() + refute view |> element("button.shadow-interactive[data-testid=active]") |> has_element?() + refute view |> element("button.bg-gohan.text-bulma") |> has_element?() + end + + test "active chip with stroke", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.Active") + + assert view + |> element( + "button.bg-jiren.text-piccolo.shadow-interactive[data-testid=active_stroke]" + ) + |> has_element?() + + refute view |> element("button.bg-gohan.text-bulma") |> has_element?() + end + + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/default_test.exs b/test/moon_web/examples/chip/default_test.exs new file mode 100644 index 000000000..5e117c956 --- /dev/null +++ b/test/moon_web/examples/chip/default_test.exs @@ -0,0 +1,15 @@ +defmodule MoonWeb.Examples.Chip.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "default chip classes", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.Default") + + assert view + |> element( + "button.bg-gohan.text-bulma.hover\\:bg-jiren.hover\\:text-piccolo.h-10.gap-2.py-2.px-3" + ) + |> has_element?() + end + + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/is_stroke_test.exs b/test/moon_web/examples/chip/is_stroke_test.exs new file mode 100644 index 000000000..b6db88f01 --- /dev/null +++ b/test/moon_web/examples/chip/is_stroke_test.exs @@ -0,0 +1,29 @@ +defmodule MoonWeb.Examples.Chip.IsStrokeTest do + use MoonWeb.ConnCase, async: true + + test "small chip with stroke", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.IsStroke") + + assert view + |> element( + "button.h-8.gap-1.py-1.px-2.hover\\:shadow-interactive[data-testid=stroke_sm]" + ) + |> has_element?() + + refute view |> element("button.h-10.gap-2.py-2.px-3[data-testid=stroke_sm]") |> has_element?() + end + + test "medium chip with stroke", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.IsStroke") + + refute view + |> element( + "button.h-8.gap-1.py-1.px-2.hover\\:shadow-interactive[data-testid=stroke_md]" + ) + |> has_element?() + + assert view |> element("button.h-10.gap-2.py-2.px-3[data-testid=stroke_md]") |> has_element?() + end + + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/is_stroke_with_icons_test.exs b/test/moon_web/examples/chip/is_stroke_with_icons_test.exs new file mode 100644 index 000000000..0dc3e10fd --- /dev/null +++ b/test/moon_web/examples/chip/is_stroke_with_icons_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Chip.IsStrokeWithIconsTest do + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/sizes_test.exs b/test/moon_web/examples/chip/sizes_test.exs new file mode 100644 index 000000000..59a6821bb --- /dev/null +++ b/test/moon_web/examples/chip/sizes_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Chip.SizesTest do + use MoonWeb.ConnCase, async: true + + test "small chip classes", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.Sizes") + + assert view |> element("button.h-8.gap-1.py-1.px-2[data-testid=small]") |> has_element?() + refute view |> element("button.h-10.gap-2.py-2.px-3[data-testid=small]") |> has_element?() + end + + test "medium chip classes", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.Sizes") + + refute view |> element("button.h-8.gap-1.py-1.px-2[data-testid=medium]") |> has_element?() + assert view |> element("button.h-10.gap-2.py-2.px-3[data-testid=medium]") |> has_element?() + end + + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/variants_test.exs b/test/moon_web/examples/chip/variants_test.exs new file mode 100644 index 000000000..21c9b80f0 --- /dev/null +++ b/test/moon_web/examples/chip/variants_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Chip.VariantsTest do + use MoonWeb.ConnCase, async: true + + test "should be ghost chip", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.Variants") + + assert view + |> element( + "button.bg-none.text-bulma.hover\\:bg-jiren.hover\\:text-piccolo[data-testid=ghost]" + ) + |> has_element?() + + refute view + |> element( + "button.bg-gohan.text-bulma.hover\\:bg-jiren.hover\\:text-piccolo[data-testid=ghost]" + ) + |> has_element?() + end + + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/with_icons_test.exs b/test/moon_web/examples/chip/with_icons_test.exs new file mode 100644 index 000000000..16a2ed6d8 --- /dev/null +++ b/test/moon_web/examples/chip/with_icons_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Chip.WithIconsTest do + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/chip/with_on_click_test.exs b/test/moon_web/examples/chip/with_on_click_test.exs new file mode 100644 index 000000000..9f2d41dc0 --- /dev/null +++ b/test/moon_web/examples/chip/with_on_click_test.exs @@ -0,0 +1,17 @@ +defmodule MoonWeb.Examples.Chip.WithOnClickTest do + use MoonWeb.ConnCase, async: true + + test "should change", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ChipExample.WithOnClick") + + chip = view |> element("button.bg-gohan") + assert chip |> render() =~ "Click me!" + + chip |> render_click() + + chip = view |> element("button.bg-gohan") + assert chip |> render() =~ "Chip clicked!" + end + + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/drawer/default_test.exs b/test/moon_web/examples/drawer/default_test.exs new file mode 100644 index 000000000..81a039928 --- /dev/null +++ b/test/moon_web/examples/drawer/default_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Drawer.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.Default") + + button_to_open_drawer = view |> element("button[data-size=md]") + assert button_to_open_drawer |> render() =~ "Show default Drawer" + + assert view |> element("div.hidden[id=default_drawer]") |> has_element?() + + button_to_open_drawer |> render_click() + + assert view |> element("div[id=default_drawer][data-is_open]") |> has_element?() + assert view |> element("#default_drawer div.ltr\\:right-0.rtl\\:left-0") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/drawer/positions_test.exs b/test/moon_web/examples/drawer/positions_test.exs new file mode 100644 index 000000000..ffc7da16b --- /dev/null +++ b/test/moon_web/examples/drawer/positions_test.exs @@ -0,0 +1,69 @@ +defmodule MoonWeb.Examples.Drawer.PositionsTest do + use MoonWeb.ConnCase, async: true + + test "should open and close start Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.Positions") + + assert view |> element("button[id=start]") |> has_element?() + assert view |> element("div.hidden[id=start_drawer]") |> has_element?() + + view + |> element("button[id=start]") + |> render_click() + + assert view |> element("div[id=start_drawer][data-is_open]") |> has_element?() + assert view |> element("#start_drawer div.ltr\\:left-0.rtl\\:right-0") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + test "should open and close top Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.Positions") + + assert view |> element("button[id=top]") |> has_element?() + assert view |> element("div.hidden[id=top_drawer]") |> has_element?() + + view + |> element("button[id=top]") + |> render_click() + + assert view |> element("div[id=top_drawer][data-is_open]") |> has_element?() + assert view |> element("#top_drawer div.top-0") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + test "should open and close end Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.Positions") + + assert view |> element("button[id=end]") |> has_element?() + assert view |> element("div.hidden[id=end_drawer]") |> has_element?() + + view + |> element("button[id=end]") + |> render_click() + + assert view |> element("div[id=end_drawer][data-is_open]") |> has_element?() + assert view |> element("#end_drawer div.ltr\\:right-0.rtl\\:left-0") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + test "should open and close bottom Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.Positions") + + assert view |> element("button[id=bottom]") |> has_element?() + assert view |> element("div.hidden[id=bottom_drawer]") |> has_element?() + + view + |> element("button[id=bottom]") + |> render_click() + + assert view |> element("div[id=bottom_drawer][data-is_open]") |> has_element?() + assert view |> element("#bottom_drawer div.bottom-0") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/drawer/with_backdrop_test.exs b/test/moon_web/examples/drawer/with_backdrop_test.exs new file mode 100644 index 000000000..d35998224 --- /dev/null +++ b/test/moon_web/examples/drawer/with_backdrop_test.exs @@ -0,0 +1,22 @@ +defmodule MoonWeb.Examples.Drawer.WithBackdropTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.WithBackdrop") + + button_to_open_drawer = view |> element("button[data-size=md]") + assert button_to_open_drawer |> render() =~ "Show Drawer with Backdrop" + + assert view |> element("div.hidden[id=backdrop_drawer]") |> has_element?() + + button_to_open_drawer |> render_click() + + assert view |> element("div[id=backdrop_drawer][data-is_open]") |> has_element?() + assert view |> element("#backdrop_drawer div.ltr\\:right-0.rtl\\:left-0") |> has_element?() + assert view |> element("#backdrop_drawer div.moon-backdrop") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/drawer/with_close_test.exs b/test/moon_web/examples/drawer/with_close_test.exs new file mode 100644 index 000000000..c0a0ba508 --- /dev/null +++ b/test/moon_web/examples/drawer/with_close_test.exs @@ -0,0 +1,28 @@ +defmodule MoonWeb.Examples.Drawer.WithCloseTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Drawer", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DrawerExample.WithClose") + + assert view |> element("button[id=with_close]") + assert view |> element("div.hidden[id=with_close_drawer]") |> has_element?() + + view + |> element("button[id=with_close]") + |> render_click() + + assert view |> element("div[id=with_close_drawer][data-is_open]") |> has_element?() + assert view |> element("#with_close_drawer div.ltr\\:right-0.rtl\\:left-0") |> has_element?() + assert view |> element("#with_close_drawer button[id=close_drawer]") + + view + |> element("button[id=close_drawer]") + |> render_click() + + assert view |> element("div.hidden[id=with_close_drawer]") |> has_element?() + + # TODO: add test case for closing the bottomsheet panel on-click-away + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/dropdown/datepicker_test.exs b/test/moon_web/examples/dropdown/datepicker_test.exs new file mode 100644 index 000000000..54e49b289 --- /dev/null +++ b/test/moon_web/examples/dropdown/datepicker_test.exs @@ -0,0 +1,5 @@ +defmodule MoonWeb.Examples.Dropdown.DatepickerTest do + use MoonWeb.ConnCase, async: true + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/default_test.exs b/test/moon_web/examples/dropdown/default_test.exs new file mode 100644 index 000000000..38b11494c --- /dev/null +++ b/test/moon_web/examples/dropdown/default_test.exs @@ -0,0 +1,39 @@ +defmodule MoonWeb.Examples.Dropdown.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should open", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Default") + + assert view + |> element("#dropdown-02 div[aria-haspopup=true]") + |> render() =~ "Choose name..." + + assert view |> element("#dropdown-02 div.hidden[role=listbox]") |> has_element?() + + view + |> element("#dropdown-02 div[aria-haspopup=true]") + |> render_click() + + assert view |> element("#dropdown-02 div[role=listbox]") |> has_element?() + refute view |> element("#dropdown-02 div.hidden[role=listbox]") |> has_element?() + end + + test "should select", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Default") + + select = view |> element("#dropdown-02 div[aria-haspopup=true]") + assert select |> render() =~ "Choose name..." + + select |> render_click() + + view + |> element("#dropdown-02 div[role=listbox] button:first-child") + |> render_click() + + assert select |> render() =~ "Wade Cooper" + + assert view |> element("#dropdown-02 div.hidden[role=listbox]") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs b/test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs new file mode 100644 index 000000000..a51000000 --- /dev/null +++ b/test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs @@ -0,0 +1,24 @@ +defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest do + use MoonWeb.ConnCase, async: true + + test "should have checkboxes", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts") + + assert view + |> element("#dropdown-options-03 div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#dropdown-options-03 div.hidden[role=listbox]") |> has_element?() + assert view |> element("#dropdown-options-03 div.border-trunks") |> has_element?() + assert view |> element("#dropdown-options-03 div.border-piccolo.bg-piccolo") |> has_element?() + + view + |> element("#dropdown-options-03 div[aria-haspopup=true]") + |> render_click() + + assert view |> element("#dropdown-options-03 div[role=listbox]") |> has_element?() + refute view |> element("#dropdown-options-03 div.hidden[role=listbox]") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs b/test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs new file mode 100644 index 000000000..c60d68fc3 --- /dev/null +++ b/test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs @@ -0,0 +1,23 @@ +defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithIconsTest do + use MoonWeb.ConnCase, async: true + + test "should open", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts") + + assert view + |> element("#dropdown-options-01 div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#dropdown-options-01 div.hidden[role=listbox]") |> has_element?() + assert view |> element("#dropdown-options-01 svg.moon-icon.fill-none") |> has_element?() + + view + |> element("#dropdown-options-01 div[aria-haspopup=true]") + |> render_click() + + assert view |> element("#dropdown-options-01 div[role=listbox]") |> has_element?() + refute view |> element("#dropdown-options-01 div.hidden[role=listbox]") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs b/test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs new file mode 100644 index 000000000..24e27bd52 --- /dev/null +++ b/test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs @@ -0,0 +1,41 @@ +defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithRadioTest do + use MoonWeb.ConnCase, async: true + + test "should open", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts") + + assert view + |> element("#dropdown-options-02 div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?() + + view + |> element("#dropdown-options-02 div[aria-haspopup=true]") + |> render_click() + + assert view |> element("#dropdown-options-02 div[role=listbox]") |> has_element?() + refute view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?() + end + + test "should have radio and should select", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts") + + assert view |> element("#dropdown-options-02 span.shadow-trunks") |> has_element?() + refute view |> element("#dropdown-options-02 span.shadow-piccolo") |> has_element?() + + select = view |> element("#dropdown-options-02 div[aria-haspopup=true]") + + select |> render_click() + + view + |> element("#dropdown-options-02 div[role=listbox] button:first-child") + |> render_click() + + assert view |> element("#dropdown-options-02 span.shadow-piccolo") |> has_element?() + + assert view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/bottom_end_test.exs b/test/moon_web/examples/dropdown/positions/bottom_end_test.exs new file mode 100644 index 000000000..f7545f3be --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/bottom_end_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.BottomEndTest do + use MoonWeb.ConnCase, async: true + + test "should be placed bottom-end", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-bottom-end div[aria-haspopup=true]") + |> has_element?() + + assert view + |> element("#drop-positions-bottom-end div.hidden[role=listbox]") + |> has_element?() + + assert view + |> element("#drop-positions-bottom-end div.ltr\\:right-0.rtl\\:left-0.top-full") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/bottom_start_test.exs b/test/moon_web/examples/dropdown/positions/bottom_start_test.exs new file mode 100644 index 000000000..e6c03e4c5 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/bottom_start_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.BottomStartTest do + use MoonWeb.ConnCase, async: true + + test "should be placed bottom-start", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-bottom-start div[aria-haspopup=true]") + |> has_element?() + + assert view + |> element("#drop-positions-bottom-start div.hidden[role=listbox]") + |> has_element?() + + assert view + |> element("#drop-positions-bottom-start div.ltr\\:left-0.rtl\\:right-0.top-full") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/bottom_test.exs b/test/moon_web/examples/dropdown/positions/bottom_test.exs new file mode 100644 index 000000000..2d5f99c52 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/bottom_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.BottomTest do + use MoonWeb.ConnCase, async: true + + test "should be placed bottom", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-bottom div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-bottom div.hidden[role=listbox]") |> has_element?() + + assert view + |> element( + "#drop-positions-bottom div.top-full[class~=\"left-1/2\", \"-translate-x-1/2\"]" + ) + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/left_end_test.exs b/test/moon_web/examples/dropdown/positions/left_end_test.exs new file mode 100644 index 000000000..56f2ef427 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/left_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.LeftEndTest do + use MoonWeb.ConnCase, async: true + + test "should be placed left-end", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-left-end div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-left-end div.hidden[role=listbox]") |> has_element?() + + assert view + |> element("#drop-positions-left-end div.ltr\\:right-full.rtl\\:left-full.bottom-0") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/left_start_test.exs b/test/moon_web/examples/dropdown/positions/left_start_test.exs new file mode 100644 index 000000000..f2d92391a --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/left_start_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.LeftStartTest do + use MoonWeb.ConnCase, async: true + + test "should be placed left-start", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-left-start div[aria-haspopup=true]") + |> has_element?() + + assert view + |> element("#drop-positions-left-start div.hidden[role=listbox]") + |> has_element?() + + assert view + |> element("#drop-positions-left-start div.ltr\\:right-full.rtl\\:left-full.top-0") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/left_test.exs b/test/moon_web/examples/dropdown/positions/left_test.exs new file mode 100644 index 000000000..2022bf626 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/left_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.LeftTest do + use MoonWeb.ConnCase, async: true + + test "should be placed left", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-left div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-left div.hidden[role=listbox]") |> has_element?() + + assert view + |> element("#drop-positions-left div.ltr\\:right-full.rtl\\:left-full") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/right_end_test.exs b/test/moon_web/examples/dropdown/positions/right_end_test.exs new file mode 100644 index 000000000..3b13d92f8 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/right_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.RightEndTest do + use MoonWeb.ConnCase, async: true + + test "should be placed right-end", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-right-end div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-right-end div.hidden[role=listbox]") |> has_element?() + + assert view + |> element("#drop-positions-right-end div.ltr\\:left-full.rtl\\:right-full.bottom-0") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/right_start_test.exs b/test/moon_web/examples/dropdown/positions/right_start_test.exs new file mode 100644 index 000000000..333141539 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/right_start_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.RightStartTest do + use MoonWeb.ConnCase, async: true + + test "should be placed right-start", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-right-start div[aria-haspopup=true]") + |> has_element?() + + assert view + |> element("#drop-positions-right-start div.hidden[role=listbox]") + |> has_element?() + + assert view + |> element("#drop-positions-right-start div.ltr\\:left-full.rtl\\:right-full.top-0") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/right_test.exs b/test/moon_web/examples/dropdown/positions/right_test.exs new file mode 100644 index 000000000..bf271b357 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/right_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.RightTest do + use MoonWeb.ConnCase, async: true + + test "should be placed right", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-right div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-right div.hidden[role=listbox]") |> has_element?() + + assert view + |> element("#drop-positions-right div.ltr\\:left-full.rtl\\:right-full") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/top_end_test.exs b/test/moon_web/examples/dropdown/positions/top_end_test.exs new file mode 100644 index 000000000..4511d9e80 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/top_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.TopEndTest do + use MoonWeb.ConnCase, async: true + + test "should be placed top-end", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-top-end div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-top-end div.hidden[role=listbox]") |> has_element?() + + assert view + |> element("#drop-positions-top-end div.ltr\\:right-0.rtl\\:left-0.bottom-full") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/top_start_test.exs b/test/moon_web/examples/dropdown/positions/top_start_test.exs new file mode 100644 index 000000000..10a07245f --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/top_start_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.TopStartTest do + use MoonWeb.ConnCase, async: true + + test "should be placed top-start", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-top-start div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-top-start div.hidden[role=listbox]") |> has_element?() + + assert view + |> element("#drop-positions-top-start div.ltr\\:left-0.rtl\\:right-0.bottom-full") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/positions/top_test.exs b/test/moon_web/examples/dropdown/positions/top_test.exs new file mode 100644 index 000000000..faf38dc10 --- /dev/null +++ b/test/moon_web/examples/dropdown/positions/top_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.Positions.TopTest do + use MoonWeb.ConnCase, async: true + + test "should be placed top", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions") + + assert view + |> element("#drop-positions-top div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-positions-top div.hidden[role=listbox]") |> has_element?() + + assert view + |> element( + "#drop-positions-top div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]" + ) + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/responsive_dropdown_test.exs b/test/moon_web/examples/dropdown/responsive_dropdown_test.exs new file mode 100644 index 000000000..9bd288f10 --- /dev/null +++ b/test/moon_web/examples/dropdown/responsive_dropdown_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Dropdown.ResponsiveDropdownTest do + use MoonWeb.ConnCase, async: true + + test "should act as bottomsheet on small screens", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.ResponsiveDropdown") + + assert view + |> element("#responsive-dropdown div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#responsive-dropdown div.hidden[role=listbox]") |> has_element?() + + assert view + |> element( + "#responsive-dropdown div.bottom-0.fixed.inset-x-0.md\\:absolute.md\\:bottom-auto.md\\:my-2.md\\:rounded-moon-s-md.md\\:top-full.rounded-t-xl" + ) + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/sizes/lg_test.exs b/test/moon_web/examples/dropdown/sizes/lg_test.exs new file mode 100644 index 000000000..acde6d349 --- /dev/null +++ b/test/moon_web/examples/dropdown/sizes/lg_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Dropdown.Sizes.LargeTest do + use MoonWeb.ConnCase, async: true + + test "option should be size lg", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes") + + assert view + |> element("#drop-sizes-lg div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-sizes-lg div.hidden[role=listbox]") |> has_element?() + + assert view |> element("#drop-sizes-lg button.h-12.p-3.rounded-moon-i-sm") |> has_element?() + + refute view + |> element("#drop-sizes-lg button.h-10.py-2.px-3.rounded-moon-i-sm") + |> has_element?() + + refute view + |> element("#drop-sizes-lg button.h-8.py-1.px-2.rounded-moon-i-xs") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/sizes/md_test.exs b/test/moon_web/examples/dropdown/sizes/md_test.exs new file mode 100644 index 000000000..887228680 --- /dev/null +++ b/test/moon_web/examples/dropdown/sizes/md_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Dropdown.Sizes.MediumTest do + use MoonWeb.ConnCase, async: true + + test "option should be size md", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes") + + assert view + |> element("#drop-sizes-md div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-sizes-md div.hidden[role=listbox]") |> has_element?() + + refute view |> element("#drop-sizes-md button.h-12.p-3.rounded-moon-i-sm") |> has_element?() + + assert view + |> element("#drop-sizes-md button.h-10.py-2.px-3.rounded-moon-i-sm") + |> has_element?() + + refute view + |> element("#drop-sizes-md button.h-8.py-1.px-2.rounded-moon-i-xs") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/sizes/sm_test.exs b/test/moon_web/examples/dropdown/sizes/sm_test.exs new file mode 100644 index 000000000..0d71ad0dd --- /dev/null +++ b/test/moon_web/examples/dropdown/sizes/sm_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Dropdown.Sizes.SmallTest do + use MoonWeb.ConnCase, async: true + + test "option should be size sm", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes") + + assert view + |> element("#drop-sizes-sm div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#drop-sizes-sm div.hidden[role=listbox]") |> has_element?() + + refute view |> element("#drop-sizes-sm button.h-12.p-3.rounded-moon-i-sm") |> has_element?() + + refute view + |> element("#drop-sizes-sm button.h-10.py-2.px-3.rounded-moon-i-sm") + |> has_element?() + + assert view + |> element("#drop-sizes-sm button.h-8.py-1.px-2.rounded-moon-i-xs") + |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open state, selected state +end diff --git a/test/moon_web/examples/dropdown/trigger_elements/button_test.exs b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs new file mode 100644 index 000000000..2ca60d73d --- /dev/null +++ b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs @@ -0,0 +1,16 @@ +defmodule MoonWeb.Examples.Dropdown.TriggerElements.ButtonTest do + use MoonWeb.ConnCase, async: true + + test "should have Button as trigger", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements") + + assert view + |> element("#dropdown-trigger-02 div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?() + assert view |> element("#dropdown-trigger-02 button.bg-piccolo") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open non-selected state, open selected state +end diff --git a/test/moon_web/examples/dropdown/trigger_elements/chip_with_arrow_test.exs b/test/moon_web/examples/dropdown/trigger_elements/chip_with_arrow_test.exs new file mode 100644 index 000000000..5321d1dc0 --- /dev/null +++ b/test/moon_web/examples/dropdown/trigger_elements/chip_with_arrow_test.exs @@ -0,0 +1,26 @@ +defmodule MoonWeb.Examples.Dropdown.TriggerElements.ChipWithArrowTest do + use MoonWeb.ConnCase, async: true + + test "should have Chip with animated icon as trigger", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements") + + assert view + |> element("#dropdown-trigger-03 div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#dropdown-trigger-03 div.hidden[role=listbox]") |> has_element?() + assert view |> element("#dropdown-trigger-03 button.bg-gohan") |> has_element?() + assert view |> element("#dropdown-trigger-03 svg.moon-icon") |> has_element?() + refute view |> element("#dropdown-trigger-03 svg.moon-icon.rotate-180") |> has_element?() + + view + |> element("#dropdown-trigger-03 div[aria-haspopup=true]") + |> render_click() + + assert view |> element("#dropdown-trigger-03 div[role=listbox]") |> has_element?() + refute view |> element("#dropdown-trigger-03 div.hidden[role=listbox]") |> has_element?() + assert view |> element("#dropdown-trigger-03 svg.moon-icon.rotate-180") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open non-selected state, open selected state +end diff --git a/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs b/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs new file mode 100644 index 000000000..6aaa8898e --- /dev/null +++ b/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs @@ -0,0 +1,16 @@ +defmodule MoonWeb.Examples.Dropdown.TriggerElements.IconButtonTest do + use MoonWeb.ConnCase, async: true + + test "should have IconButton as trigger", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements") + + assert view + |> element("#dropdown-trigger-01 div[aria-haspopup=true]") + |> has_element?() + + assert view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?() + assert view |> element("#dropdown-trigger-01 svg.h-6.w-6.moon-icon") |> has_element?() + end + + # TODO: add screenshot test of default state, hover state, open non-selected state, open selected state +end diff --git a/test/moon_web/examples/icon_button/default_test.exs b/test/moon_web/examples/icon_button/default_test.exs new file mode 100644 index 000000000..aa08e1def --- /dev/null +++ b/test/moon_web/examples/icon_button/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.IconButton.DefaultTest do + # TODO: add screenshot test for default and hover state +end diff --git a/test/moon_web/examples/loader/colours_test.exs b/test/moon_web/examples/loader/colours_test.exs new file mode 100644 index 000000000..8f005c29e --- /dev/null +++ b/test/moon_web/examples/loader/colours_test.exs @@ -0,0 +1,11 @@ +defmodule MoonWeb.Examples.Loader.ColoursTest do + use MoonWeb.ConnCase, async: true + + test "Default loader", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/LoaderExample.Colours") + + assert view |> element("div.border-dodoria.animate-loader") |> has_element?() + assert view |> element("div.border-trunks.animate-loader") |> has_element?() + assert view |> element("div.border-raditz.animate-loader") |> has_element?() + end +end diff --git a/test/moon_web/examples/loader/default_test.exs b/test/moon_web/examples/loader/default_test.exs new file mode 100644 index 000000000..dca7268ec --- /dev/null +++ b/test/moon_web/examples/loader/default_test.exs @@ -0,0 +1,10 @@ +defmodule MoonWeb.Examples.Loader.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "Default loader", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/LoaderExample.Default") + + assert view |> element("div.w-10.h-10") |> has_element?() + assert view |> element("div.border-hit.animate-loader") |> has_element?() + end +end diff --git a/test/moon_web/examples/loader/sizes_test.exs b/test/moon_web/examples/loader/sizes_test.exs new file mode 100644 index 000000000..576746bce --- /dev/null +++ b/test/moon_web/examples/loader/sizes_test.exs @@ -0,0 +1,13 @@ +defmodule MoonWeb.Examples.Loader.SizesTest do + use MoonWeb.ConnCase, async: true + + test "Loaders with different sizes", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/LoaderExample.Sizes") + + assert view |> element("div.w-4.h-4") |> has_element?() + assert view |> element("div.w-6.h-6") |> has_element?() + assert view |> element("div.w-8.h-8") |> has_element?() + assert view |> element("div.w-10.h-10") |> has_element?() + assert view |> element("div.w-12.h-12") |> has_element?() + end +end diff --git a/test/moon_web/examples/modal/big_content_test.exs b/test/moon_web/examples/modal/big_content_test.exs new file mode 100644 index 000000000..5bda4b07d --- /dev/null +++ b/test/moon_web/examples/modal/big_content_test.exs @@ -0,0 +1,26 @@ +defmodule MoonWeb.Examples.Modal.BigContentTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Modal", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ModalExample.ExampleWithBigContent") + + assert view |> element("button[data-testid=open-modal]") |> has_element?() + assert view |> element("div.hidden[id=big_content_modal]") |> has_element?() + + view + |> element("button[data-testid=open-modal]") + |> render_click() + + assert view |> element("div[id=big_content_modal][data-is_open]") |> has_element?() + assert view |> element("#big_content_modal div.moon-backdrop") |> has_element?() + assert view |> element("button[data-testid=close-modal]") |> has_element?() + + view + |> element("button[data-testid=close-modal]") + |> render_click() + + assert view |> element("div.hidden[id=big_content_modal]") |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/modal/default_test.exs b/test/moon_web/examples/modal/default_test.exs new file mode 100644 index 000000000..0f78179c1 --- /dev/null +++ b/test/moon_web/examples/modal/default_test.exs @@ -0,0 +1,27 @@ +defmodule MoonWeb.Examples.Modal.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Modal", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ModalExample.Default") + + assert view |> element("button[data-testid=open-modal]") |> has_element?() + assert view |> element("div.hidden[id=default_modal]") |> has_element?() + + view + |> element("button[data-testid=open-modal]") + |> render_click() + + assert view |> element("div[id=default_modal][data-is_open]") |> has_element?() + assert view |> element("#default_modal div.moon-backdrop") |> has_element?() + assert view |> element("button[data-testid=close-modal]") |> has_element?() + + view + |> element("button[data-testid=close-modal]") + |> render_click() + + assert view |> element("div.hidden[id=default_modal]") |> has_element?() + end + + # TODO: add test case for closing the modal panel on-click-away + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/modal/styled_content_test.exs b/test/moon_web/examples/modal/styled_content_test.exs new file mode 100644 index 000000000..c6452dfb9 --- /dev/null +++ b/test/moon_web/examples/modal/styled_content_test.exs @@ -0,0 +1,45 @@ +defmodule MoonWeb.Examples.Modal.StyledContentTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Modal", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ModalExample.ExampleWithStyledContent") + + assert view |> element("button.bg-piccolo") |> has_element?() + assert view |> element("div.hidden[id=styled_modal]") |> has_element?() + + view + |> element("button.bg-piccolo") + |> render_click() + + assert view |> element("div[id=styled_modal][data-is_open]") |> has_element?() + assert view |> element("#styled_modal div.moon-backdrop") |> has_element?() + assert view |> element("#styled_modal div.bg-roshi.moon-panel") |> has_element?() + assert view |> element("button.bg-transparent") |> has_element?() + assert view |> element("svg.moon-icon") |> has_element?() + + view + |> element("button.bg-transparent") + |> render_click() + + assert view |> element("button.bg-piccolo") |> has_element?() + assert view |> element("div.hidden[id=styled_modal]") |> has_element?() + + view + |> element("button.bg-piccolo") + |> render_click() + + assert view |> element("div[id=styled_modal][data-is_open]") |> has_element?() + assert view |> element("#styled_modal div.bg-roshi.moon-panel") |> has_element?() + assert view |> element("#styled_modal div.moon-backdrop") |> has_element?() + assert view |> element("button.bg-transparent") |> has_element?() + assert view |> element("svg.moon-icon") |> has_element?() + + view + |> element("svg.moon-icon") + |> render_click() + + assert view |> element("div.hidden[id=styled_modal]") |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/modal/with_select_test.exs b/test/moon_web/examples/modal/with_select_test.exs new file mode 100644 index 000000000..cbde2c72a --- /dev/null +++ b/test/moon_web/examples/modal/with_select_test.exs @@ -0,0 +1,30 @@ +defmodule MoonWeb.Examples.WithSelectTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Modal", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/ModalExample.ExampleWithSelect") + + assert view |> element("button[data-testid=open-modal]") |> has_element?() + assert view |> element("div.hidden[id=with_select_modal]") |> has_element?() + + view + |> element("button[data-testid=open-modal]") + |> render_click() + + assert view |> element("div[id=with_select_modal][data-is_open]") |> has_element?() + assert view |> element("#with_select_modal div.moon-backdrop") |> has_element?() + assert view |> element("#with_select_modal select[id=user_size]") |> has_element?() + assert view |> element("#with_select_modal select[id=user_color]") |> has_element?() + assert view |> element("#with_select_modal select[id=user_material]") |> has_element?() + + assert view |> element("button[data-testid=close-modal]") |> has_element?() + + view + |> element("button[data-testid=close-modal]") + |> render_click() + + assert view |> element("div.hidden[id=with_select_modal]") |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/pagination/with_icons_test.exs b/test/moon_web/examples/pagination/with_icons_test.exs new file mode 100644 index 000000000..2e483daa6 --- /dev/null +++ b/test/moon_web/examples/pagination/with_icons_test.exs @@ -0,0 +1,79 @@ +defmodule MoonWeb.Examples.Pagination.WithIconsTest do + use MoonWeb.ConnCase, async: true + + test "should switch active page to last and disable next arrow", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PaginationExample.WithIcons") + + assert view |> element("#with_buttons svg.moon-icon.fill-none.text-moon-24.rtl:rotate-180") + + assert view + |> element("#with_buttons button[data-testid=prev_button][value=0][disabled]") + |> has_element?() + + assert view + |> element("#with_buttons button[data-testid=next_button][value=2]") + |> has_element?() + + assert view |> element("#with_buttons nav[aria-label=pagination]") |> has_element?() + assert view |> element("#with_buttons button.bg-piccolo[aria-label=page_1]") |> has_element?() + assert view |> element("#with_buttons button.bg-none[aria-label=page_2]") |> has_element?() + + view + |> element("#with_buttons button.bg-none[aria-label=page_26]") + |> render_click() + + assert view |> element("#with_buttons button.bg-none[aria-label=page_1]") |> has_element?() + + assert view + |> element("#with_buttons button.bg-piccolo[aria-label=page_26]") + |> has_element?() + + refute view + |> element("#with_buttons button[data-testid=prev_button][value=25][disabled]") + |> has_element?() + + assert view + |> element("#with_buttons button[data-testid=prev_button][value=25]") + |> has_element?() + + assert view + |> element("#with_buttons button[data-testid=next_button][value=27][disabled]") + |> has_element?() + end + + test "should switch active pages with arrows", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PaginationExample.WithIcons") + + assert view + |> element("#with_buttons button[data-testid=prev_button][value=0][disabled]") + |> has_element?() + + view + |> element("#with_buttons button[data-testid=next_button][value=2]") + |> render_click() + + assert view |> element("#with_buttons button.bg-none[aria-label=page_1]") |> has_element?() + assert view |> element("#with_buttons button.bg-piccolo[aria-label=page_2]") |> has_element?() + + refute view + |> element("#with_buttons button[data-testid=prev_button][value=1][disabled]") + |> has_element?() + + assert view + |> element("#with_buttons button[data-testid=prev_button][value=1]") + |> has_element?() + + view + |> element("#with_buttons button[data-testid=prev_button][value=1]") + |> render_click() + + assert view + |> element("#with_buttons button[data-testid=prev_button][value=0][disabled]") + |> has_element?() + + assert view |> element("#with_buttons button.bg-none[aria-label=page_2]") |> has_element?() + assert view |> element("#with_buttons button.bg-piccolo[aria-label=page_1]") |> has_element?() + end + + # TODO: add screenshot test if needed +end diff --git a/test/moon_web/examples/pagination/with_text_test.exs b/test/moon_web/examples/pagination/with_text_test.exs new file mode 100644 index 000000000..a8d1bd1c2 --- /dev/null +++ b/test/moon_web/examples/pagination/with_text_test.exs @@ -0,0 +1,77 @@ +defmodule MoonWeb.Examples.Pagination.WithTextTest do + use MoonWeb.ConnCase, async: true + + test "should switch active page to last and disable next arrow", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PaginationExample.WithText") + + assert view + |> element("#default button[data-testid=prev_button][value=0][disabled]") + |> has_element?() + + assert view + |> element("#default button[data-testid=next_button][value=2]") + |> has_element?() + + assert view |> element("#default nav[aria-label=pagination]") |> has_element?() + assert view |> element("#default button.bg-piccolo[aria-label=page_1]") |> has_element?() + assert view |> element("#default button.bg-none[aria-label=page_2]") |> has_element?() + + view + |> element("#default button.bg-none[aria-label=page_11]") + |> render_click() + + assert view |> element("#default button.bg-none[aria-label=page_1]") |> has_element?() + + assert view + |> element("#default button.bg-piccolo[aria-label=page_11]") + |> has_element?() + + refute view + |> element("#default button[data-testid=prev_button][value=10][disabled]") + |> has_element?() + + assert view + |> element("#default button[data-testid=prev_button][value=10]") + |> has_element?() + + assert view + |> element("#default button[data-testid=next_button][value=12][disabled]") + |> has_element?() + end + + test "should switch active pages with arrows", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PaginationExample.WithText") + + assert view + |> element("#default button[data-testid=prev_button][value=0][disabled]") + |> has_element?() + + view + |> element("#default button[data-testid=next_button][value=2]") + |> render_click() + + assert view |> element("#default button.bg-none[aria-label=page_1]") |> has_element?() + assert view |> element("#default button.bg-piccolo[aria-label=page_2]") |> has_element?() + + refute view + |> element("#default button[data-testid=prev_button][value=1][disabled]") + |> has_element?() + + assert view + |> element("#default button[data-testid=prev_button][value=1]") + |> has_element?() + + view + |> element("#default button[data-testid=prev_button][value=1]") + |> render_click() + + assert view + |> element("#default button[data-testid=prev_button][value=0][disabled]") + |> has_element?() + + assert view |> element("#default button.bg-none[aria-label=page_2]") |> has_element?() + assert view |> element("#default button.bg-piccolo[aria-label=page_1]") |> has_element?() + end + + # TODO: add screenshot test if needed +end diff --git a/test/moon_web/examples/popover/default_test.exs b/test/moon_web/examples/popover/default_test.exs new file mode 100644 index 000000000..f250f5931 --- /dev/null +++ b/test/moon_web/examples/popover/default_test.exs @@ -0,0 +1,32 @@ +defmodule MoonWeb.Examples.Popover.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Default") + + assert view |> element("#popover_id_1 div[role=button]") + assert view |> element("#popover_id_1 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_1 div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover_id_1 div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]") + |> has_element?() + + view + |> element("#popover_id_1 div[role=button]") + |> render_click() + + assert view |> element("#popover_id_1 div[aria-expanded=true]") |> has_element?() + refute view |> element("#popover_id_1 div.hidden[aria-expanded=false]") |> has_element?() + + view + |> element("#popover_id_1 div[role=button]") + |> render_click() + + assert view |> element("#popover_id_1 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_1 div[aria-expanded=true]") |> has_element?() + end + + # TODO: add test case for closing the popover panel on-click-away + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/bottom_end_test.exs b/test/moon_web/examples/popover/positions/bottom_end_test.exs new file mode 100644 index 000000000..a66855c8e --- /dev/null +++ b/test/moon_web/examples/popover/positions/bottom_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.BottomEndTest do + use MoonWeb.ConnCase, async: true + + test "should be bottom-end popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-bottom-end div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-bottom-end div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-bottom-end div.ltr\\:right-0.rtl\\:left-0.top-full") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/bottom_start_test.exs b/test/moon_web/examples/popover/positions/bottom_start_test.exs new file mode 100644 index 000000000..6530ad1bb --- /dev/null +++ b/test/moon_web/examples/popover/positions/bottom_start_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.BottomStartTest do + use MoonWeb.ConnCase, async: true + + test "should be bottom-start popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-bottom-start div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-bottom-start div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-bottom-start div.ltr\\:left-0.rtl\\:right-0.top-full") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/bottom_test.exs b/test/moon_web/examples/popover/positions/bottom_test.exs new file mode 100644 index 000000000..249908164 --- /dev/null +++ b/test/moon_web/examples/popover/positions/bottom_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Popover.Positions.BottomTest do + use MoonWeb.ConnCase, async: true + + test "should be bottom popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-bottom div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-bottom div[aria-expanded=true]") |> has_element?() + + assert view + |> element( + "#popover-ex-bottom div.top-full[class~=\"left-1/2\", \"-translate-x-1/2\"]" + ) + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/left_end_test.exs b/test/moon_web/examples/popover/positions/left_end_test.exs new file mode 100644 index 000000000..e9d6bd032 --- /dev/null +++ b/test/moon_web/examples/popover/positions/left_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.LeftEndTest do + use MoonWeb.ConnCase, async: true + + test "should be left-end popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-left-end div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-left-end div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-left-end div.ltr\\:right-full.rtl\\:left-full.bottom-0") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/left_start_test.exs b/test/moon_web/examples/popover/positions/left_start_test.exs new file mode 100644 index 000000000..1a452160b --- /dev/null +++ b/test/moon_web/examples/popover/positions/left_start_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.LeftStartTest do + use MoonWeb.ConnCase, async: true + + test "should be left-start popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-left-start div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-left-start div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-left-start div.ltr\\:right-full.rtl\\:left-full.top-0") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/left_test.exs b/test/moon_web/examples/popover/positions/left_test.exs new file mode 100644 index 000000000..de997a2a0 --- /dev/null +++ b/test/moon_web/examples/popover/positions/left_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.LeftTest do + use MoonWeb.ConnCase, async: true + + test "should be left popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-left div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-left div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-left div.ltr\\:right-full.rtl\\:left-full") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/right_end_test.exs b/test/moon_web/examples/popover/positions/right_end_test.exs new file mode 100644 index 000000000..be072cbd6 --- /dev/null +++ b/test/moon_web/examples/popover/positions/right_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.RightEndTest do + use MoonWeb.ConnCase, async: true + + test "should be right-end popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-right-end div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-right-end div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-right-end div.ltr\\:left-full.rtl\\:right-full.bottom-0") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/right_start_test.exs b/test/moon_web/examples/popover/positions/right_start_test.exs new file mode 100644 index 000000000..bd1281c79 --- /dev/null +++ b/test/moon_web/examples/popover/positions/right_start_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.RightStartTest do + use MoonWeb.ConnCase, async: true + + test "should be right-start popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-right-start div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-right-start div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-right-start div.ltr\\:left-full.rtl\\:right-full.top-0") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/right_test.exs b/test/moon_web/examples/popover/positions/right_test.exs new file mode 100644 index 000000000..a7d62fe97 --- /dev/null +++ b/test/moon_web/examples/popover/positions/right_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.RightTest do + use MoonWeb.ConnCase, async: true + + test "should be right popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-right div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-right div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-right div.ltr\\:left-full.rtl\\:right-full") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/top_end_test.exs b/test/moon_web/examples/popover/positions/top_end_test.exs new file mode 100644 index 000000000..ac84726cc --- /dev/null +++ b/test/moon_web/examples/popover/positions/top_end_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.TopEndTest do + use MoonWeb.ConnCase, async: true + + test "should be top-end popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-top-end div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-top-end div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-top-end div.ltr\\:right-0.rtl\\:left-0.bottom-full") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/top_start_test.exs b/test/moon_web/examples/popover/positions/top_start_test.exs new file mode 100644 index 000000000..6c9a4aa3a --- /dev/null +++ b/test/moon_web/examples/popover/positions/top_start_test.exs @@ -0,0 +1,19 @@ +defmodule MoonWeb.Examples.Popover.Positions.TopStartTest do + use MoonWeb.ConnCase, async: true + + test "should be top-start popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-top-start div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-top-start div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover-ex-top-start div.ltr\\:left-0.rtl\\:right-0.bottom-full") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/positions/top_test.exs b/test/moon_web/examples/popover/positions/top_test.exs new file mode 100644 index 000000000..04f68557e --- /dev/null +++ b/test/moon_web/examples/popover/positions/top_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Popover.Positions.TopTest do + use MoonWeb.ConnCase, async: true + + test "should be top popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.Position") + + assert view + |> element("#popover-ex-top div.hidden[aria-expanded=false]") + |> has_element?() + + refute view |> element("#popover-ex-top div[aria-expanded=true]") |> has_element?() + + assert view + |> element( + "#popover-ex-top div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]" + ) + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/trigger_elements/button_test.exs b/test/moon_web/examples/popover/trigger_elements/button_test.exs new file mode 100644 index 000000000..749f5187d --- /dev/null +++ b/test/moon_web/examples/popover/trigger_elements/button_test.exs @@ -0,0 +1,17 @@ +defmodule MoonWeb.Examples.Popover.TriggerElements.ButtonTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.TriggerElements") + + assert view |> element("#popover_id_5 button.bg-piccolo[data-size=md]") |> has_element?() + assert view |> element("#popover_id_5 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_5 div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover_id_5 div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/trigger_elements/icon_button_test.exs b/test/moon_web/examples/popover/trigger_elements/icon_button_test.exs new file mode 100644 index 000000000..421a40d5d --- /dev/null +++ b/test/moon_web/examples/popover/trigger_elements/icon_button_test.exs @@ -0,0 +1,17 @@ +defmodule MoonWeb.Examples.Popover.TriggerElements.IconButtonTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.TriggerElements") + + assert view |> element("#popover_id_6 svg.h-6.w-6.moon-icon") |> has_element?() + assert view |> element("#popover_id_6 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_6 div[aria-expanded=true]") |> has_element?() + + assert view + |> element("#popover_id_6 div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/trigger_elements/span_test.exs b/test/moon_web/examples/popover/trigger_elements/span_test.exs new file mode 100644 index 000000000..568b23019 --- /dev/null +++ b/test/moon_web/examples/popover/trigger_elements/span_test.exs @@ -0,0 +1,17 @@ +defmodule MoonWeb.Examples.Popover.TriggerElements.SpanTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.TriggerElements") + + assert view |> element("#popover_id_7 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_7 div[aria-expanded=true]") |> has_element?() + assert view |> element("#popover_id_7 span.text-moon-14.text-trunks") |> has_element?() + + assert view + |> element("#popover_id_7 div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]") + |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/popover/with_close_test.exs b/test/moon_web/examples/popover/with_close_test.exs new file mode 100644 index 000000000..bac7d1618 --- /dev/null +++ b/test/moon_web/examples/popover/with_close_test.exs @@ -0,0 +1,27 @@ +defmodule MoonWeb.Examples.Popover.WithCloseTest do + use MoonWeb.ConnCase, async: true + + test "should open and close Popover", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/PopoverExample.WithClose") + + assert view |> element("#popover_id_8 div[data-testid=-trigger]") + assert view |> element("#popover_id_8 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_8 div[aria-expanded=true]") |> has_element?() + + view + |> element("#popover_id_8 div[data-testid=-trigger]") + |> render_click() + + assert view |> element("#popover_id_8 div[aria-expanded=true]") |> has_element?() + refute view |> element("#popover_id_8 div.hidden[aria-expanded=false]") |> has_element?() + + view + |> element("#popover_id_8 button[data-testid=close_popover]") + |> render_click() + + assert view |> element("#popover_id_8 div.hidden[aria-expanded=false]") |> has_element?() + refute view |> element("#popover_id_8 div[aria-expanded=true]") |> has_element?() + end + + # TODO: add screenshot test of open panel, default and hover +end diff --git a/test/moon_web/examples/progress/circular_progress/default_test.exs b/test/moon_web/examples/progress/circular_progress/default_test.exs new file mode 100644 index 000000000..4d21ab81a --- /dev/null +++ b/test/moon_web/examples/progress/circular_progress/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Progress.CircularProgress.DefaultTest do + # TODO: add screenshot tests for all examples +end diff --git a/test/moon_web/examples/progress/linear_progress/default_test.exs b/test/moon_web/examples/progress/linear_progress/default_test.exs new file mode 100644 index 000000000..2c4b9c7ed --- /dev/null +++ b/test/moon_web/examples/progress/linear_progress/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Progress.LinearProgress.DefaultTest do + # TODO: add screenshot tests for all examples +end diff --git a/test/moon_web/examples/snackbar/auto_close_test.exs b/test/moon_web/examples/snackbar/auto_close_test.exs new file mode 100644 index 000000000..d91bcb280 --- /dev/null +++ b/test/moon_web/examples/snackbar/auto_close_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Snackbar.AutoCloseTest do + use MoonWeb.ConnCase, async: true + + test "should after 1 sec", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.AutoClose") + + assert view + |> element( + "div[id=snackbar_16][data-autoclose=true][data-timeout=1000][data-animate_class=animate-rightslide]" + ) + |> has_element?() + end + + test "should after 3 sec", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.AutoClose") + + assert view + |> element( + "div[id=snackbar_17][data-autoclose=true][data-timeout=3000][data-animate_class=animate-rightslide]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/customization/border_radius_test.exs b/test/moon_web/examples/snackbar/customization/border_radius_test.exs new file mode 100644 index 000000000..5ee363bf0 --- /dev/null +++ b/test/moon_web/examples/snackbar/customization/border_radius_test.exs @@ -0,0 +1,5 @@ +defmodule MoonWeb.Examples.Snackbar.Customization.BorderRadiusTest do + use MoonWeb.ConnCase, async: true + + # TODO: add screenshot tests for all customized examples +end diff --git a/test/moon_web/examples/snackbar/default_test.exs b/test/moon_web/examples/snackbar/default_test.exs new file mode 100644 index 000000000..973e81401 --- /dev/null +++ b/test/moon_web/examples/snackbar/default_test.exs @@ -0,0 +1,37 @@ +defmodule MoonWeb.Examples.Snackbar.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should open top right snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Default") + + assert view + |> element( + "div[id=snackbar_default][data-autoclose=true][data-timeout=5000][data-animate_class=animate-rightslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_default div[data-testid=snackbar_default-trigger]") + |> has_element?() + + assert view + |> element( + "#snackbar_default div.hidden.justify-end.top-4.right-4[data-testid=snackbar_default-content]" + ) + |> has_element?() + + view + |> element("#snackbar_default div[data-testid=snackbar_default-trigger]") + |> render_click() + + assert view + |> element( + "#snackbar_default div.justify-end.top-4.right-4[data-testid=snackbar_default-content]" + ) + |> has_element?() + + # TODO: cannot check refute hidden, bacause it is added after timeout + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/options/with_close_test.exs b/test/moon_web/examples/snackbar/options/with_close_test.exs new file mode 100644 index 000000000..b8d10839b --- /dev/null +++ b/test/moon_web/examples/snackbar/options/with_close_test.exs @@ -0,0 +1,5 @@ +defmodule MoonWeb.Examples.Snackbar.Options.WithCloseTest do + use MoonWeb.ConnCase, async: true + + # TODO: add screenshot tests for all options +end diff --git a/test/moon_web/examples/snackbar/positions/bottom_center_test.exs b/test/moon_web/examples/snackbar/positions/bottom_center_test.exs new file mode 100644 index 000000000..cee87d056 --- /dev/null +++ b/test/moon_web/examples/snackbar/positions/bottom_center_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Snackbar.Positions.BottomCenterTest do + use MoonWeb.ConnCase, async: true + + test "should be top left snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Positions") + + assert view + |> element( + "div[id=snackbar_5][data-autoclose=true][data-timeout=5000][data-animate_class=animate-bottomslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_5 div[data-testid=snackbar_5-trigger]") + |> has_element?() + + assert view + |> element( + "#snackbar_5 div.hidden.bottom-4.left-4.justify-center[data-testid=snackbar_5-content]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/positions/bottom_left_test.exs b/test/moon_web/examples/snackbar/positions/bottom_left_test.exs new file mode 100644 index 000000000..437612901 --- /dev/null +++ b/test/moon_web/examples/snackbar/positions/bottom_left_test.exs @@ -0,0 +1,23 @@ +defmodule MoonWeb.Examples.Snackbar.Positions.BottomLeftTest do + use MoonWeb.ConnCase, async: true + + test "should be top left snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Positions") + + assert view + |> element( + "div[id=snackbar_4][data-autoclose=true][data-timeout=5000][data-animate_class=animate-leftslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_4 div[data-testid=snackbar_4-trigger]") + |> has_element?() + + assert view + |> element("#snackbar_4 div.hidden.bottom-4.left-4[data-testid=snackbar_4-content]") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/positions/bottom_right_test.exs b/test/moon_web/examples/snackbar/positions/bottom_right_test.exs new file mode 100644 index 000000000..c99830bc7 --- /dev/null +++ b/test/moon_web/examples/snackbar/positions/bottom_right_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Snackbar.Positions.BottomRightTest do + use MoonWeb.ConnCase, async: true + + test "should be top left snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Positions") + + assert view + |> element( + "div[id=snackbar_6][data-autoclose=true][data-timeout=5000][data-animate_class=animate-rightslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_6 div[data-testid=snackbar_6-trigger]") + |> has_element?() + + assert view + |> element( + "#snackbar_6 div.hidden.bottom-4.right-4.justify-end[data-testid=snackbar_6-content]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/positions/top_center_test.exs b/test/moon_web/examples/snackbar/positions/top_center_test.exs new file mode 100644 index 000000000..04f6e0198 --- /dev/null +++ b/test/moon_web/examples/snackbar/positions/top_center_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Snackbar.Positions.TopCenterTest do + use MoonWeb.ConnCase, async: true + + test "should be top left snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Positions") + + assert view + |> element( + "div[id=snackbar_2][data-autoclose=true][data-timeout=5000][data-animate_class=animate-topslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_2 div[data-testid=snackbar_2-trigger]") + |> has_element?() + + assert view + |> element( + "#snackbar_2 div.hidden.top-4.left-4.justify-center[data-testid=snackbar_2-content]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/positions/top_left_test.exs b/test/moon_web/examples/snackbar/positions/top_left_test.exs new file mode 100644 index 000000000..d2070c367 --- /dev/null +++ b/test/moon_web/examples/snackbar/positions/top_left_test.exs @@ -0,0 +1,23 @@ +defmodule MoonWeb.Examples.Snackbar.Positions.TopLeftTest do + use MoonWeb.ConnCase, async: true + + test "should be top left snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Positions") + + assert view + |> element( + "div[id=snackbar_1][data-autoclose=true][data-timeout=5000][data-animate_class=animate-leftslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_1 div[data-testid=snackbar_1-trigger]") + |> has_element?() + + assert view + |> element("#snackbar_1 div.hidden.top-4.left-4[data-testid=snackbar_1-content]") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/positions/top_right_test.exs b/test/moon_web/examples/snackbar/positions/top_right_test.exs new file mode 100644 index 000000000..2926b7435 --- /dev/null +++ b/test/moon_web/examples/snackbar/positions/top_right_test.exs @@ -0,0 +1,25 @@ +defmodule MoonWeb.Examples.Snackbar.Positions.TopRightTest do + use MoonWeb.ConnCase, async: true + + test "should be top left snackbar", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SnackbarExample.Positions") + + assert view + |> element( + "div[id=snackbar_3][data-autoclose=true][data-timeout=5000][data-animate_class=animate-rightslide]" + ) + |> has_element?() + + assert view + |> element("#snackbar_3 div[data-testid=snackbar_3-trigger]") + |> has_element?() + + assert view + |> element( + "#snackbar_3 div.hidden.top-4.right-4.justify-end[data-testid=snackbar_3-content]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/snackbar/semantic_types/success_test.exs b/test/moon_web/examples/snackbar/semantic_types/success_test.exs new file mode 100644 index 000000000..0a3453bbb --- /dev/null +++ b/test/moon_web/examples/snackbar/semantic_types/success_test.exs @@ -0,0 +1,5 @@ +defmodule MoonWeb.Examples.Snackbar.SemanticTypes.SuccessTest do + use MoonWeb.ConnCase, async: true + + # TODO: add screenshot tests for all semantic types +end diff --git a/test/moon_web/examples/switch/custom_background_test.exs b/test/moon_web/examples/switch/custom_background_test.exs new file mode 100644 index 000000000..8ee6017bf --- /dev/null +++ b/test/moon_web/examples/switch/custom_background_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Switch.CustomBackgroundTest do + # TODO: add screenshot tests +end diff --git a/test/moon_web/examples/switch/default_test.exs b/test/moon_web/examples/switch/default_test.exs new file mode 100644 index 000000000..d3a4b9db5 --- /dev/null +++ b/test/moon_web/examples/switch/default_test.exs @@ -0,0 +1,55 @@ +defmodule MoonWeb.Examples.Switch.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should switch", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SwitchExample.Default") + + assert view + |> element( + "button.bg-piccolo.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=true][value=false]" + ) + |> has_element?() + + assert view + |> element( + "span.w-6.h-6.bg-goten[class~=\"ltr:left-[calc(100%-24px)]\", \"rtl:right-[calc(100%-24px)]\"][aria-hidden=true]" + ) + |> has_element?() + + view + |> element( + "button.bg-piccolo.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=true][value=false]" + ) + |> render_click() + + assert view + |> element( + "button.bg-beerus.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=false][value=true]" + ) + |> has_element?() + + assert view + |> element("span.ltr\\:left-0.rtl\\:right-0[aria-hidden=true]") + |> has_element?() + + view + |> element( + "button.bg-beerus.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=false][value=true]" + ) + |> render_click() + + assert view + |> element( + "button.bg-piccolo.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=true][value=false]" + ) + |> has_element?() + + assert view + |> element( + "span[class~=\"ltr:left-[calc(100%-24px)]\", \"rtl:right-[calc(100%-24px)]\", \"w-6\", \"bg-goten\"][aria-hidden=true]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/switch/disabled_test.exs b/test/moon_web/examples/switch/disabled_test.exs new file mode 100644 index 000000000..7a9ecba99 --- /dev/null +++ b/test/moon_web/examples/switch/disabled_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Switch.DisabledTest do + # TODO: add screenshot tests +end diff --git a/test/moon_web/examples/switch/sizes_test.exs b/test/moon_web/examples/switch/sizes_test.exs new file mode 100644 index 000000000..a9d8ede98 --- /dev/null +++ b/test/moon_web/examples/switch/sizes_test.exs @@ -0,0 +1,81 @@ +defmodule MoonWeb.Examples.Switch.SizesTest do + use MoonWeb.ConnCase, async: true + + test "should be 2xs", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SwitchExample.Sizes") + + assert view + |> element( + "button.bg-beerus.h-4.w-7.rounded-full.transition[class~=\"p-0.5\"][aria-pressed=false][value=true][data-testid=2xs]" + ) + |> has_element?() + + assert view + |> element("#[data-testid=2xs] span.w-3.h-3.ltr\\:left-0.rtl\\:right-0") + |> has_element?() + + view + |> element( + "button.bg-beerus.h-4.w-7.rounded-full.transition[class~=\"p-0.5\"][aria-pressed=false][value=true][data-testid=2xs]" + ) + |> render_click() + + assert view + |> element( + "#[data-testid=2xs] span.w-3.h-3[class~=\"ltr:left-[calc(100%-12px)]\", \"rtl:right-[calc(100%-12px)]\"]" + ) + |> has_element?() + end + + test "should be xs", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SwitchExample.Sizes") + + assert view + |> element( + "button.bg-piccolo.h-6.w-11.p-1.rounded-full.transition[aria-pressed=true][value=false][data-testid=xs]" + ) + |> has_element?() + + assert view + |> element( + "#[data-testid=xs] span.w-4.h-4[class~=\"ltr:left-[calc(100%-16px)]\", \"rtl:right-[calc(100%-16px)]\"]" + ) + |> has_element?() + + view + |> element("button.bg-piccolo.h-6.w-11.p-1.rounded-full.transition[data-testid=xs]") + |> render_click() + + assert view + |> element("#[data-testid=xs] span.w-4.h-4.ltr\\:left-0.rtl\\:right-0") + |> has_element?() + end + + test "should be md", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/SwitchExample.Sizes") + + assert view + |> element( + "button.bg-beerus.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=false][value=true][data-testid=default]" + ) + |> has_element?() + + assert view + |> element("#[data-testid=default] span.w-6.h-6.ltr\\:left-0.rtl\\:right-0") + |> has_element?() + + view + |> element( + "button.bg-beerus.h-8.p-1.rounded-full.transition[class~=\"w-[3.75rem]\"][aria-pressed=false][value=true][data-testid=default]" + ) + |> render_click() + + assert view + |> element( + "#[data-testid=default] span.w-6.h-6[class~=\"ltr:left-[calc(100%-24px)]\", \"rtl:right-[calc(100%-24px)]\"]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/switch/using_with_forms_test.exs b/test/moon_web/examples/switch/using_with_forms_test.exs new file mode 100644 index 000000000..83feea8ae --- /dev/null +++ b/test/moon_web/examples/switch/using_with_forms_test.exs @@ -0,0 +1,4 @@ +defmodule MoonWeb.Examples.Switch.UsingWithFormsTest do + # TODO: add test + # TODO: add screenshot tests +end diff --git a/test/moon_web/examples/switch/with_icons_test.exs b/test/moon_web/examples/switch/with_icons_test.exs new file mode 100644 index 000000000..48ee90a4c --- /dev/null +++ b/test/moon_web/examples/switch/with_icons_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Switch.WithIconsTest do + # TODO: add screenshot tests +end diff --git a/test/moon_web/examples/table/checkboxes_test.exs b/test/moon_web/examples/table/checkboxes_test.exs new file mode 100644 index 000000000..8792160f7 --- /dev/null +++ b/test/moon_web/examples/table/checkboxes_test.exs @@ -0,0 +1,53 @@ +defmodule MoonWeb.Examples.Table.CheckboxesTest do + use MoonWeb.ConnCase, async: true + + test "should check and uncheck", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TableExample.Checkboxes") + + assert view + |> element("tr.bg-gohan[data-testid=row-0]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0] span[phx-value-id=1]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0] div.w-4.h-4.border-trunks") + |> has_element?() + + view + |> element("#[data-testid=row-0] span[phx-value-id=1]") + |> render_click() + + assert view + |> element("tr.bg-beerus[data-testid=row-0]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0] span[phx-value-id=1]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0] div.w-4.h-4.border-piccolo.bg-piccolo") + |> has_element?() + + view + |> element("#[data-testid=row-0] span[phx-value-id=1]") + |> render_click() + + assert view + |> element("tr.bg-gohan[data-testid=row-0]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0] span[phx-value-id=1]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0] div.w-4.h-4.border-trunks") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/clickable_rows_test.exs b/test/moon_web/examples/table/clickable_rows_test.exs new file mode 100644 index 000000000..b56addb02 --- /dev/null +++ b/test/moon_web/examples/table/clickable_rows_test.exs @@ -0,0 +1,29 @@ +defmodule MoonWeb.Examples.Table.ClickableRowsTest do + use MoonWeb.ConnCase, async: true + + test "rows should be clickable", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TableExample.ClickableRows") + + assert view + |> element("tr.bg-gohan[data-testid=row-0]") + |> has_element?() + + assert view + |> element("tr.bg-gohan[data-testid=row-1]") + |> has_element?() + + view + |> element("tr.bg-gohan[data-testid=row-0]") + |> render_click() + + assert view + |> element("tr.bg-beerus[data-testid=row-0]") + |> has_element?() + + assert view + |> element("tr.bg-gohan[data-testid=row-1]") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/default_test.exs b/test/moon_web/examples/table/default_test.exs new file mode 100644 index 000000000..cfaaa0866 --- /dev/null +++ b/test/moon_web/examples/table/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Table.DefaultTest do + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/different_row_gaps_test.exs b/test/moon_web/examples/table/different_row_gaps_test.exs new file mode 100644 index 000000000..b7f95cc8d --- /dev/null +++ b/test/moon_web/examples/table/different_row_gaps_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Table.DifferentRowGapsTest do + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/different_row_sizes.exs b/test/moon_web/examples/table/different_row_sizes.exs new file mode 100644 index 000000000..421b4a4ca --- /dev/null +++ b/test/moon_web/examples/table/different_row_sizes.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Table.DifferentRowSizesTest do + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/editable_test.exs b/test/moon_web/examples/table/editable_test.exs new file mode 100644 index 000000000..92169250f --- /dev/null +++ b/test/moon_web/examples/table/editable_test.exs @@ -0,0 +1,21 @@ +defmodule MoonWeb.Examples.Table.EditableTest do + use MoonWeb.ConnCase, async: true + + test "should have editable fields", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TableExample.Editable") + + assert view + |> element("#[data-testid=row-0-col-0] input[autocomplete=off]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0-col-1] input[autocomplete=off]") + |> has_element?() + + assert view + |> element("#[data-testid=row-0-col-2] input[autocomplete=off]") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/headless_test.exs b/test/moon_web/examples/table/headless_test.exs new file mode 100644 index 000000000..e70bfc990 --- /dev/null +++ b/test/moon_web/examples/table/headless_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Table.HeadlessTest do + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/responsive_test.exs b/test/moon_web/examples/table/responsive_test.exs new file mode 100644 index 000000000..3882f926b --- /dev/null +++ b/test/moon_web/examples/table/responsive_test.exs @@ -0,0 +1,11 @@ +defmodule MoonWeb.Examples.Table.ResponsiveTest do + use MoonWeb.ConnCase, async: true + + # test "should have editable fields", %{conn: conn} do + # {:ok, view, _html} = live(conn, "/example/TableExample.Responsive") + + # #TODO: add test + # end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/sorting_test.exs b/test/moon_web/examples/table/sorting_test.exs new file mode 100644 index 000000000..691f5fcec --- /dev/null +++ b/test/moon_web/examples/table/sorting_test.exs @@ -0,0 +1,47 @@ +defmodule MoonWeb.Examples.Table.SortingTest do + use MoonWeb.ConnCase, async: true + + test "should sort", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TableExample.Sorting") + + assert view + |> element( + "th[phx-value-sort-dir=ASC][phx-value-sort-key=id][data-testid=sort-column-id]" + ) + |> has_element?() + + assert view + |> element( + "th[phx-value-sort-dir=DESC][phx-value-sort-key=name][data-testid=sort-column-name]" + ) + |> has_element?() + + assert view + |> element( + "th[phx-value-sort-dir=ASC][phx-value-sort-key=user][data-testid=sort-column-user]" + ) + |> has_element?() + + assert view + |> element( + "th[phx-value-sort-dir=ASC][phx-value-sort-key=created_at][data-testid=sort-column-created_at]" + ) + |> has_element?() + + assert view + |> element("th[phx-value-sort-dir=ASC][data-testid=sort-column-]") + |> has_element?() + + view + |> element("th[phx-value-sort-dir=ASC][phx-value-sort-key=id][data-testid=sort-column-id]") + |> render_click() + + assert view + |> element( + "th[phx-value-sort-dir=DESC][phx-value-sort-key=id][data-testid=sort-column-id]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/with_cell_borders_test.exs b/test/moon_web/examples/table/with_cell_borders_test.exs new file mode 100644 index 000000000..6b05c6eb9 --- /dev/null +++ b/test/moon_web/examples/table/with_cell_borders_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Table.WithCellBordersTest do + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/with_paging_test.exs b/test/moon_web/examples/table/with_paging_test.exs new file mode 100644 index 000000000..e0c4b64ad --- /dev/null +++ b/test/moon_web/examples/table/with_paging_test.exs @@ -0,0 +1,109 @@ +defmodule MoonWeb.Examples.Table.WithPagingTest do + use MoonWeb.ConnCase, async: true + + test "should change page with button", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TableExample.WithPaging") + + assert view + |> element("#with_buttons nav[aria-label=pagination]") + |> has_element?() + + assert view + |> element("#[aria-label=pagination] button.bg-piccolo[aria-label=page_1]") + |> has_element?() + + assert view + |> element("#[aria-label=pagination] button.bg-none[aria-label=page_2]") + |> has_element?() + + assert view + |> element("tr[phx-value-selected=1]") + |> has_element?() + + refute view + |> element("tr[phx-value-selected=11]") + |> has_element?() + + view + |> element("#[aria-label=pagination] button.bg-none[aria-label=page_2]") + |> render_click() + + assert view + |> element("#[aria-label=pagination] button.bg-piccolo[aria-label=page_2]") + |> has_element?() + + assert view + |> element("#[aria-label=pagination] button.bg-none[aria-label=page_1]") + |> has_element?() + + refute view + |> element("tr[phx-value-selected=1]") + |> has_element?() + + assert view + |> element("tr[phx-value-selected=11]") + |> has_element?() + end + + test "should change page with arrows", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TableExample.WithPaging") + + assert view + |> element("#with_buttons button[disabled][value=0]") + |> has_element?() + + assert view + |> element("#with_buttons button.bg-transparent[value=2]") + |> has_element?() + + view + |> element("#with_buttons button.bg-transparent[value=2]") + |> render_click() + + assert view + |> element("#with_buttons button.bg-transparent[value=1]") + |> has_element?() + + refute view + |> element("#with_buttons button.bg-transparent[disabled][value=1]") + |> has_element?() + + assert view + |> element("#[aria-label=pagination] button.bg-piccolo[aria-label=page_2]") + |> has_element?() + + assert view + |> element("#[aria-label=pagination] button.bg-none[aria-label=page_1]") + |> has_element?() + + refute view + |> element("tr[phx-value-selected=1]") + |> has_element?() + + assert view + |> element("tr[phx-value-selected=11]") + |> has_element?() + + view + |> element("#with_buttons button.bg-transparent[value=1]") + |> render_click() + + assert view + |> element("#[aria-label=pagination] button.bg-piccolo[aria-label=page_1]") + |> has_element?() + + assert view + |> element("#[aria-label=pagination] button.bg-none[aria-label=page_2]") + |> has_element?() + + assert view + |> element("tr[phx-value-selected=1]") + |> has_element?() + + refute view + |> element("tr[phx-value-selected=11]") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/table/zebra_style_test.exs b/test/moon_web/examples/table/zebra_style_test.exs new file mode 100644 index 000000000..06a0c5809 --- /dev/null +++ b/test/moon_web/examples/table/zebra_style_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Table.ZebraStyleTest do + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/tabs/default_test.exs b/test/moon_web/examples/tabs/default_test.exs new file mode 100644 index 000000000..7786291be --- /dev/null +++ b/test/moon_web/examples/tabs/default_test.exs @@ -0,0 +1,65 @@ +defmodule MoonWeb.Examples.Tabs.DefaultTest do + use MoonWeb.ConnCase, async: true + + test "should switch tab and panel", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TabsExample.Default") + + assert view + |> element( + "#tabs-ex-1 button.text-piccolo[value=0][tabindex=0][role=tab][aria-selected=true]" + ) + |> has_element?() + + assert view + |> element("#tabs-ex-1 button.text-bulma[value=1][tabindex=1][role=tab]") + |> has_element?() + + assert view + |> element("#tabs-ex-1 button.text-bulma[value=2][tabindex=2][role=tab]") + |> has_element?() + + assert view + |> element("#tabs-ex-1 div[tabindex=0][role=tabpanel]") + |> has_element?() + + refute view + |> element("#tabs-ex-1 div[tabindex=1][role=tabpanel]") + |> has_element?() + + refute view + |> element("#tabs-ex-1 div[tabindex=2][role=tabpanel]") + |> has_element?() + + view + |> element("#tabs-ex-1 button.text-bulma[value=1][tabindex=1][role=tab]") + |> render_click() + + assert view + |> element("#tabs-ex-1 button.text-bulma[value=0][tabindex=0][role=tab]") + |> has_element?() + + assert view + |> element( + "#tabs-ex-1 button.text-piccolo[value=1][tabindex=1][role=tab][aria-selected=true]" + ) + |> has_element?() + + assert view + |> element("#tabs-ex-1 button.text-bulma[value=2][tabindex=2][role=tab]") + |> has_element?() + + refute view + |> element("#tabs-ex-1 div[tabindex=0][role=tabpanel]") + |> has_element?() + + assert view + |> element("#tabs-ex-1 div[tabindex=1][role=tabpanel]") + |> has_element?() + + refute view + |> element("#tabs-ex-1 div[tabindex=2][role=tabpanel]") + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/tabs/sizes_test.exs b/test/moon_web/examples/tabs/sizes_test.exs new file mode 100644 index 000000000..ca28081cc --- /dev/null +++ b/test/moon_web/examples/tabs/sizes_test.exs @@ -0,0 +1,11 @@ +defmodule MoonWeb.Examples.Tabs.SizestTest do + use MoonWeb.ConnCase, async: true + + # test "should", %{conn: conn} do + # {:ok, view, _html} = live(conn, "/example/TabsExample.Sizes") + + # #TODO: add test + # end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/tabs/with_pills_test.exs b/test/moon_web/examples/tabs/with_pills_test.exs new file mode 100644 index 000000000..a7d7bf2ba --- /dev/null +++ b/test/moon_web/examples/tabs/with_pills_test.exs @@ -0,0 +1,39 @@ +defmodule MoonWeb.Examples.Tabs.WithPillsTest do + use MoonWeb.ConnCase, async: true + + test "should switch have pill", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TabsExample.WithPills") + + assert view + |> element( + "#tabs-with-pills button.bg-gohan.transition-colors.rounded-moon-i-sm[value=0][tabindex=0][role=tab][aria-selected=true]" + ) + |> has_element?() + + assert view + |> element( + "#tabs-with-pills button.transition-colors.rounded-moon-i-sm[value=1][tabindex=1][role=tab]" + ) + |> has_element?() + + refute view + |> element( + "#tabs-with-pills button.bg-gohan.transition-colors.rounded-moon-i-sm[value=1][tabindex=1][role=tab]" + ) + |> has_element?() + + assert view + |> element( + "#tabs-with-pills button.transition-colors.rounded-moon-i-sm[value=2][tabindex=2][role=tab]" + ) + |> has_element?() + + refute view + |> element( + "#tabs-with-pills button.bg-gohan.transition-colors.rounded-moon-i-sm[value=2][tabindex=2][role=tab]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/tabs/with_segments_test.exs b/test/moon_web/examples/tabs/with_segments_test.exs new file mode 100644 index 000000000..0329185bd --- /dev/null +++ b/test/moon_web/examples/tabs/with_segments_test.exs @@ -0,0 +1,39 @@ +defmodule MoonWeb.Examples.Tabs.WithSegmentsTest do + use MoonWeb.ConnCase, async: true + + test "should have segments", %{conn: conn} do + {:ok, view, _html} = live(conn, "/example/TabsExample.WithSegments") + + assert view + |> element( + "#tabs-with-segments button.bg-gohan.transition-colors.rounded-moon-i-sm[value=0][tabindex=0][role=tab][aria-selected=true]" + ) + |> has_element?() + + assert view + |> element( + "#tabs-with-segments button.transition-colors.rounded-moon-i-sm[value=1][tabindex=1][role=tab]" + ) + |> has_element?() + + refute view + |> element( + "#tabs-with-segments button.bg-gohan.transition-colors.rounded-moon-i-sm[value=1][tabindex=1][role=tab]" + ) + |> has_element?() + + assert view + |> element( + "#tabs-with-segments button.transition-colors.rounded-moon-i-sm[value=2][tabindex=2][role=tab]" + ) + |> has_element?() + + refute view + |> element( + "#tabs-with-segments button.bg-gohan.transition-colors.rounded-moon-i-sm[value=2][tabindex=2][role=tab]" + ) + |> has_element?() + end + + # TODO: add screenshot test +end diff --git a/test/moon_web/examples/tag/default_test.exs b/test/moon_web/examples/tag/default_test.exs new file mode 100644 index 000000000..1ff9f77e8 --- /dev/null +++ b/test/moon_web/examples/tag/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Tag.DefaultTest do + # TODO: add screenshot tests for all examples +end diff --git a/test/moon_web/examples/tooltip/default_test.exs b/test/moon_web/examples/tooltip/default_test.exs new file mode 100644 index 000000000..405d1216a --- /dev/null +++ b/test/moon_web/examples/tooltip/default_test.exs @@ -0,0 +1,3 @@ +defmodule MoonWeb.Examples.Tooltip.DefaultTest do + # TODO: add screenshot tests for all examples +end diff --git a/test/moon_web/pages/examples_test.exs b/test/moon_web/pages/examples_test.exs new file mode 100644 index 000000000..a458015b7 --- /dev/null +++ b/test/moon_web/pages/examples_test.exs @@ -0,0 +1,33 @@ +defmodule MoonWeb.Pages.ExamplesTest do + use MoonWeb.ConnCase + + use Phoenix.VerifiedRoutes, + endpoint: MoonWeb.Endpoint, + router: MoonWeb.Router, + statics: MoonWeb.static_paths() + + test "all examples open", %{conn: conn} do + with {:ok, list} <- :application.get_key(:moon, :modules) do + list + |> Enum.filter(&(&1 |> Module.split() |> Enum.take(2) == ~w|MoonWeb Examples|)) + |> Enum.each(fn example -> + path = + MoonWeb.Router.Helpers.live_path( + MoonWeb.Endpoint, + MoonWeb.Pages.ExamplePage, + "#{example}" |> String.replace("Elixir.MoonWeb.Examples.Design.", "") + ) + + try do + conn = get(conn, path) + assert response(conn, 200) + rescue + e -> + flunk( + "Error on example #{example}\n\n#{Map.get(e, :message, "Message not available")}" + ) + end + end) + end + end +end