From de9e86b7f667248dd37e48364d3eb10340985fa0 Mon Sep 17 00:00:00 2001
From: phgrey <phgrey@gmail.com>
Date: Fri, 14 Jul 2023 08:14:34 +0200
Subject: [PATCH 01/11] tests initiated

---
 README.md                                     |  9 +++++
 lib/moon/design/dropdown/options.ex           |  1 +
 mix.exs                                       |  1 +
 mix.lock                                      |  3 ++
 test/moon/design/dropdown_test.exs            |  1 +
 .../examples/dropdown/default_test.exs        | 40 +++++++++++++++++++
 test/test_helper.exs                          |  1 +
 7 files changed, 56 insertions(+)
 create mode 100644 test/moon/design/dropdown_test.exs
 create mode 100644 test/moon_web/examples/dropdown/default_test.exs

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/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/mix.exs b/mix.exs
index d4a7d839e..f97ccaf3a 100644
--- a/mix.exs
+++ b/mix.exs
@@ -95,6 +95,7 @@ defmodule Moon.MixProject do
       {:excoveralls, "~> 0.10", only: :test},
       {:floki, ">= 0.27.0", only: :test},
       {:snapshy, "~> 0.3.0", only: :test},
+      {:elogram, path: "../elogram"},
 
       # dev
       {:credo, "~> 1.5", only: [:dev, :test], runtime: false},
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/dropdown/default_test.exs b/test/moon_web/examples/dropdown/default_test.exs
new file mode 100644
index 000000000..67dbaf117
--- /dev/null
+++ b/test/moon_web/examples/dropdown/default_test.exs
@@ -0,0 +1,40 @@
+defmodule MoonWeb.Examples.Dropdown.DefaultTest do
+  use MoonWeb.ConnCase, async: true
+
+  import Elogram.CaptureScreenshot
+
+  test "should open", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Default")
+
+    assert view
+           |> capture_screenshot(name: "default01.png")
+           |> 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
+end
diff --git a/test/test_helper.exs b/test/test_helper.exs
index 869559e70..b9bd48856 100644
--- a/test/test_helper.exs
+++ b/test/test_helper.exs
@@ -1 +1,2 @@
+Elogram.start([])
 ExUnit.start()

From 9c0b0b795dd4f3ca046f891c5eb4eb55549b39b7 Mon Sep 17 00:00:00 2001
From: phgrey <phgrey@gmail.com>
Date: Mon, 24 Jul 2023 16:42:49 +0200
Subject: [PATCH 02/11] fix: initiating example tests

---
 mix.exs                                          | 1 -
 test/moon_web/examples/dropdown/default_test.exs | 2 --
 test/test_helper.exs                             | 1 -
 3 files changed, 4 deletions(-)

diff --git a/mix.exs b/mix.exs
index f97ccaf3a..d4a7d839e 100644
--- a/mix.exs
+++ b/mix.exs
@@ -95,7 +95,6 @@ defmodule Moon.MixProject do
       {:excoveralls, "~> 0.10", only: :test},
       {:floki, ">= 0.27.0", only: :test},
       {:snapshy, "~> 0.3.0", only: :test},
-      {:elogram, path: "../elogram"},
 
       # dev
       {:credo, "~> 1.5", only: [:dev, :test], runtime: false},
diff --git a/test/moon_web/examples/dropdown/default_test.exs b/test/moon_web/examples/dropdown/default_test.exs
index 67dbaf117..b60a4b7b4 100644
--- a/test/moon_web/examples/dropdown/default_test.exs
+++ b/test/moon_web/examples/dropdown/default_test.exs
@@ -1,13 +1,11 @@
 defmodule MoonWeb.Examples.Dropdown.DefaultTest do
   use MoonWeb.ConnCase, async: true
 
-  import Elogram.CaptureScreenshot
 
   test "should open", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Default")
 
     assert view
-           |> capture_screenshot(name: "default01.png")
            |> element("#dropdown-02 div[aria-haspopup=true]")
            |> render() =~ "Choose name..."
 
diff --git a/test/test_helper.exs b/test/test_helper.exs
index b9bd48856..869559e70 100644
--- a/test/test_helper.exs
+++ b/test/test_helper.exs
@@ -1,2 +1 @@
-Elogram.start([])
 ExUnit.start()

From b7bc1905a5297d06772e57582ef5d28c1b379ec2 Mon Sep 17 00:00:00 2001
From: phgrey <phgrey@gmail.com>
Date: Mon, 24 Jul 2023 16:57:45 +0200
Subject: [PATCH 03/11] formattings fix

---
 test/moon_web/examples/dropdown/default_test.exs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/moon_web/examples/dropdown/default_test.exs b/test/moon_web/examples/dropdown/default_test.exs
index b60a4b7b4..f8a22bd3d 100644
--- a/test/moon_web/examples/dropdown/default_test.exs
+++ b/test/moon_web/examples/dropdown/default_test.exs
@@ -1,7 +1,6 @@
 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")
 

From df7645795aee1a0fdd72250be0d9e55776feb608 Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Thu, 27 Jul 2023 11:51:18 +0300
Subject: [PATCH 04/11] trigger elements tests and structure

---
 .../examples/dropdown/datepicker_test.exs     |  0
 .../option_layouts/select_countries_test.exs  |  0
 .../option_layouts/select_language_test.exs   |  0
 .../dropdown/option_layouts/sort_by_test.exs  |  0
 .../dropdown/positions/bottom_end_test.exs    |  0
 .../dropdown/positions/bottom_start_test.exs  |  0
 .../dropdown/positions/bottom_test.exs        |  0
 .../dropdown/positions/left_end_test.exs      |  0
 .../dropdown/positions/left_start_test.exs    |  0
 .../examples/dropdown/positions/left_test.exs |  0
 .../dropdown/positions/right_end_test.exs     |  0
 .../dropdown/positions/right_start_test.exs   |  0
 .../dropdown/positions/right_test.exs         |  0
 .../dropdown/positions/top_end_test.exs       |  0
 .../dropdown/positions/top_start_test.exs     |  0
 .../examples/dropdown/positions/top_test.exs  |  0
 .../dropdown/responsive_dropdown_test.exs     |  0
 .../examples/dropdown/sizes/lg_test.exs       |  0
 .../examples/dropdown/sizes/md_test.exs       |  0
 .../examples/dropdown/sizes/sm_test.exs       |  0
 .../dropdown/trigger_elements/button_test.exs | 37 +++++++++++++++++
 .../trigger_elements/chip_with_arrow_test.exs | 40 +++++++++++++++++++
 .../trigger_elements/icon_button_test.exs     | 40 +++++++++++++++++++
 23 files changed, 117 insertions(+)
 create mode 100644 test/moon_web/examples/dropdown/datepicker_test.exs
 create mode 100644 test/moon_web/examples/dropdown/option_layouts/select_countries_test.exs
 create mode 100644 test/moon_web/examples/dropdown/option_layouts/select_language_test.exs
 create mode 100644 test/moon_web/examples/dropdown/option_layouts/sort_by_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/bottom_end_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/bottom_start_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/bottom_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/left_end_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/left_start_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/left_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/right_end_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/right_start_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/right_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/top_end_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/top_start_test.exs
 create mode 100644 test/moon_web/examples/dropdown/positions/top_test.exs
 create mode 100644 test/moon_web/examples/dropdown/responsive_dropdown_test.exs
 create mode 100644 test/moon_web/examples/dropdown/sizes/lg_test.exs
 create mode 100644 test/moon_web/examples/dropdown/sizes/md_test.exs
 create mode 100644 test/moon_web/examples/dropdown/sizes/sm_test.exs
 create mode 100644 test/moon_web/examples/dropdown/trigger_elements/button_test.exs
 create mode 100644 test/moon_web/examples/dropdown/trigger_elements/chip_with_arrow_test.exs
 create mode 100644 test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs

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..e69de29bb
diff --git a/test/moon_web/examples/dropdown/option_layouts/select_countries_test.exs b/test/moon_web/examples/dropdown/option_layouts/select_countries_test.exs
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/moon_web/examples/dropdown/option_layouts/select_language_test.exs b/test/moon_web/examples/dropdown/option_layouts/select_language_test.exs
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/moon_web/examples/dropdown/option_layouts/sort_by_test.exs b/test/moon_web/examples/dropdown/option_layouts/sort_by_test.exs
new file mode 100644
index 000000000..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..e69de29bb
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..8afa578b4
--- /dev/null
+++ b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
@@ -0,0 +1,37 @@
+defmodule MoonWeb.Examples.Dropdown.TriggerElements.ButtonTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "Button should open", %{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?()
+
+    view
+    |> element("#dropdown-trigger-02 div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#dropdown-trigger-02 div[role=listbox]") |> has_element?()
+    refute view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "Button should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
+
+    select = view |> element("#dropdown-trigger-02 div[aria-haspopup=true]")
+    select |> render_click()
+
+    view
+    |> element("#dropdown-trigger-02 div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?()
+  end
+
+  # TODO: should screenshot test be added down here or separate?
+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..c7e8fe713
--- /dev/null
+++ b/test/moon_web/examples/dropdown/trigger_elements/chip_with_arrow_test.exs
@@ -0,0 +1,40 @@
+defmodule MoonWeb.Examples.Dropdown.TriggerElements.ChipWithArrowTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "Chip with arrow should open", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
+
+    assert view
+           |> element("#dropdown-trigger-03 div[aria-haspopup=true]")
+           # TODO: |> render() =~ should we check icon presence here?
+           |> has_element?()
+
+    assert view |> element("#dropdown-trigger-03 div.hidden[role=listbox]") |> 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?()
+  end
+
+  test "Chip with arrow should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
+
+    select = view |> element("#dropdown-trigger-03 div[aria-haspopup=true]")
+    # TODO: assert select |> render() =~ should we check icon presence here?
+
+    select |> render_click()
+
+    view
+    |> element("#dropdown-trigger-03 div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#dropdown-trigger-03 div.hidden[role=listbox]") |> has_element?()
+  end
+
+  # TODO: should screenshot test be added down here or separate?
+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..2e300ca24
--- /dev/null
+++ b/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs
@@ -0,0 +1,40 @@
+defmodule MoonWeb.Examples.Dropdown.TriggerElements.IconButtonTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "IconButton should open", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
+
+    assert view
+           |> element("#dropdown-trigger-01 div[aria-haspopup=true]")
+           # TODO: |> render() =~ should we check icon presence here?
+           |> has_element?()
+
+    assert view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?()
+
+    view
+    |> element("#dropdown-trigger-01 div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#dropdown-trigger-01 div[role=listbox]") |> has_element?()
+    refute view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "IconButton should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
+
+    select = view |> element("#dropdown-trigger-01 div[aria-haspopup=true]")
+    # assert select |> render() =~ should we check icon presence here?
+
+    select |> render_click()
+
+    view
+    |> element("#dropdown-trigger-01 div[role=listbox] button:first-child")
+    |> render_click()
+
+    # assert select |> render() ("button[class=bg-heles]")"??  should it be checked based on bg-colour?
+
+    assert view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?()
+  end
+
+  # TODO: should screenshot test be added down here or separate?
+end

From efef92d6997a2ad1cc3c3191480c88c116ce31bc Mon Sep 17 00:00:00 2001
From: phgrey <phgrey@gmail.com>
Date: Thu, 27 Jul 2023 14:07:44 +0200
Subject: [PATCH 05/11] all the examples test

---
 test/moon_web/pages/examples_test.exs | 33 +++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 test/moon_web/pages/examples_test.exs

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

From aa5a800e069717b28e15396e9dae804ca287ddb4 Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Tue, 1 Aug 2023 10:14:25 +0300
Subject: [PATCH 06/11] dropdown tests + accordion tests started

---
 lib/moon/design/dropdown/bottom_options.ex    |  1 +
 .../examples/accordion/default_test.exs       | 65 +++++++++++++++++++
 .../examples/dropdown/datepicker_test.exs     |  5 ++
 .../examples/dropdown/default_test.exs        |  2 +
 .../option_layouts/select_countries_test.exs  |  0
 .../option_layouts/select_language_test.exs   |  0
 .../dropdown/option_layouts/sort_by_test.exs  |  0
 .../option_layouts/with_checkbox_test.exs     | 38 +++++++++++
 .../option_layouts/with_icons_test.exs        | 38 +++++++++++
 .../option_layouts/with_radio_test.exs        | 38 +++++++++++
 .../dropdown/positions/bottom_end_test.exs    | 45 +++++++++++++
 .../dropdown/positions/bottom_start_test.exs  | 45 +++++++++++++
 .../dropdown/positions/bottom_test.exs        | 38 +++++++++++
 .../dropdown/positions/left_end_test.exs      | 38 +++++++++++
 .../dropdown/positions/left_start_test.exs    | 45 +++++++++++++
 .../examples/dropdown/positions/left_test.exs | 38 +++++++++++
 .../dropdown/positions/right_end_test.exs     | 38 +++++++++++
 .../dropdown/positions/right_start_test.exs   | 45 +++++++++++++
 .../dropdown/positions/right_test.exs         | 38 +++++++++++
 .../dropdown/positions/top_end_test.exs       | 38 +++++++++++
 .../dropdown/positions/top_start_test.exs     | 38 +++++++++++
 .../examples/dropdown/positions/top_test.exs  | 38 +++++++++++
 .../dropdown/responsive_dropdown_test.exs     | 38 +++++++++++
 .../examples/dropdown/sizes/lg_test.exs       | 38 +++++++++++
 .../examples/dropdown/sizes/md_test.exs       | 38 +++++++++++
 .../examples/dropdown/sizes/sm_test.exs       | 38 +++++++++++
 .../dropdown/trigger_elements/button_test.exs |  2 +-
 .../trigger_elements/chip_with_arrow_test.exs |  2 +-
 .../trigger_elements/icon_button_test.exs     |  2 +-
 29 files changed, 826 insertions(+), 3 deletions(-)
 create mode 100644 test/moon_web/examples/accordion/default_test.exs
 delete mode 100644 test/moon_web/examples/dropdown/option_layouts/select_countries_test.exs
 delete mode 100644 test/moon_web/examples/dropdown/option_layouts/select_language_test.exs
 delete mode 100644 test/moon_web/examples/dropdown/option_layouts/sort_by_test.exs
 create mode 100644 test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs
 create mode 100644 test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs
 create mode 100644 test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs

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/test/moon_web/examples/accordion/default_test.exs b/test/moon_web/examples/accordion/default_test.exs
new file mode 100644
index 000000000..879306016
--- /dev/null
+++ b/test/moon_web/examples/accordion/default_test.exs
@@ -0,0 +1,65 @@
+defmodule MoonWeb.Examples.Accordion.DefaultTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should expand and collapse 1st", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
+
+    assert view
+           |> element("#simple-accordion button[value=0]")
+           |> render() =~ "Lorem"
+
+    view
+    |> element("#simple-accordion button[value=0]")
+    |> render_click()
+
+    assert view |> element("#simple-accordion div[role=region]") |> has_element?()
+
+    view
+    |> element("#simple-accordion button[value=0]")
+    |> render_click()
+
+    refute view |> element("#simple-accordion div[role=region]") |> has_element?()
+  end
+
+  test "should expand and collapse 2nd", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
+
+    assert view
+           |> element("#simple-accordion button[value=1]")
+           |> render() =~ "Beerus bg"
+
+    view
+    |> element("#simple-accordion button[value=1]")
+    |> render_click()
+
+    assert view |> element("#simple-accordion div[role=region]") |> has_element?()
+
+    view
+    |> element("#simple-accordion button[value=1]")
+    |> render_click()
+
+    refute view |> element("#simple-accordion div[role=region]") |> has_element?()
+  end
+
+  test "should expand and collapse 3rd", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
+
+    assert view
+           |> element("#simple-accordion button[value=2]")
+           |> render() =~ "Dolor"
+
+    view
+    |> element("#simple-accordion button[value=2]")
+    |> render_click()
+
+    assert view |> element("#simple-accordion div[role=region]") |> has_element?()
+
+    view
+    |> element("#simple-accordion button[value=2]")
+    |> render_click()
+
+    refute view |> element("#simple-accordion div[role=region]") |> has_element?()
+  end
+
+  # TODO: add screenshot test of default state and expanded state
+end
diff --git a/test/moon_web/examples/dropdown/datepicker_test.exs b/test/moon_web/examples/dropdown/datepicker_test.exs
index e69de29bb..54e49b289 100644
--- a/test/moon_web/examples/dropdown/datepicker_test.exs
+++ 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
index f8a22bd3d..38b11494c 100644
--- a/test/moon_web/examples/dropdown/default_test.exs
+++ b/test/moon_web/examples/dropdown/default_test.exs
@@ -34,4 +34,6 @@ defmodule MoonWeb.Examples.Dropdown.DefaultTest do
 
     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/select_countries_test.exs b/test/moon_web/examples/dropdown/option_layouts/select_countries_test.exs
deleted file mode 100644
index e69de29bb..000000000
diff --git a/test/moon_web/examples/dropdown/option_layouts/select_language_test.exs b/test/moon_web/examples/dropdown/option_layouts/select_language_test.exs
deleted file mode 100644
index e69de29bb..000000000
diff --git a/test/moon_web/examples/dropdown/option_layouts/sort_by_test.exs b/test/moon_web/examples/dropdown/option_layouts/sort_by_test.exs
deleted file mode 100644
index e69de29bb..000000000
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..4c9e8c8e6
--- /dev/null
+++ b/test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest 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-03 div[aria-haspopup=true]")
+           |> has_element?()
+
+    assert view |> element("#dropdown-options-03 div.hidden[role=listbox]") |> 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
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts")
+
+    select = view |> element("#dropdown-options-03 div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#dropdown-options-03 div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+
+    # assert 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..236820e49
--- /dev/null
+++ b/test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs
@@ -0,0 +1,38 @@
+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?()
+
+    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
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts")
+
+    select = view |> element("#dropdown-options-01 div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#dropdown-options-01 div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert 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..a77e422ae
--- /dev/null
+++ b/test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs
@@ -0,0 +1,38 @@
+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 select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts")
+
+    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()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if radio is checked?
+
+    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
index e69de29bb..8c1a79fb3 100644
--- a/test/moon_web/examples/dropdown/positions/bottom_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/bottom_end_test.exs
@@ -0,0 +1,45 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.BottomEndTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-bottom-end div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-bottom-end div[role=listbox]") |> has_element?()
+
+    refute view
+           |> element("#drop-positions-bottom-end div.hidden[role=listbox]")
+           |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-bottom-end div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-bottom-end div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view
+           |> element("#drop-positions-bottom-end 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_start_test.exs b/test/moon_web/examples/dropdown/positions/bottom_start_test.exs
index e69de29bb..f68179025 100644
--- a/test/moon_web/examples/dropdown/positions/bottom_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/bottom_start_test.exs
@@ -0,0 +1,45 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.BottomStartTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-bottom-start div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-bottom-start div[role=listbox]") |> has_element?()
+
+    refute view
+           |> element("#drop-positions-bottom-start div.hidden[role=listbox]")
+           |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-bottom-start div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-bottom-start div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view
+           |> element("#drop-positions-bottom-start 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_test.exs b/test/moon_web/examples/dropdown/positions/bottom_test.exs
index e69de29bb..28eb1ac11 100644
--- a/test/moon_web/examples/dropdown/positions/bottom_test.exs
+++ b/test/moon_web/examples/dropdown/positions/bottom_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.BottomTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-bottom div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-bottom div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-bottom div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-bottom div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-bottom div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-bottom 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/left_end_test.exs b/test/moon_web/examples/dropdown/positions/left_end_test.exs
index e69de29bb..cc6d750f7 100644
--- a/test/moon_web/examples/dropdown/positions/left_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/left_end_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.LeftEndTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-left-end div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-left-end div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-left-end div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-left-end div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-left-end div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-left-end 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/left_start_test.exs b/test/moon_web/examples/dropdown/positions/left_start_test.exs
index e69de29bb..445ce7b1b 100644
--- a/test/moon_web/examples/dropdown/positions/left_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/left_start_test.exs
@@ -0,0 +1,45 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.LeftStartTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-left-start div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-left-start div[role=listbox]") |> has_element?()
+
+    refute view
+           |> element("#drop-positions-left-start div.hidden[role=listbox]")
+           |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-left-start div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-left-start div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view
+           |> element("#drop-positions-left-start 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/left_test.exs b/test/moon_web/examples/dropdown/positions/left_test.exs
index e69de29bb..9525c0a98 100644
--- a/test/moon_web/examples/dropdown/positions/left_test.exs
+++ b/test/moon_web/examples/dropdown/positions/left_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.LeftTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-left div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-left div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-left div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-left div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-left div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-left 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/right_end_test.exs b/test/moon_web/examples/dropdown/positions/right_end_test.exs
index e69de29bb..9ecfd7482 100644
--- a/test/moon_web/examples/dropdown/positions/right_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/right_end_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.RightEndTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-right-end div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-right-end div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-right-end div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-right-end div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-right-end div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-right-end 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/right_start_test.exs b/test/moon_web/examples/dropdown/positions/right_start_test.exs
index e69de29bb..b9c5bcc71 100644
--- a/test/moon_web/examples/dropdown/positions/right_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/right_start_test.exs
@@ -0,0 +1,45 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.RightStartTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-right-start div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-right-start div[role=listbox]") |> has_element?()
+
+    refute view
+           |> element("#drop-positions-right-start div.hidden[role=listbox]")
+           |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-right-start div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-right-start div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view
+           |> element("#drop-positions-right-start 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/right_test.exs b/test/moon_web/examples/dropdown/positions/right_test.exs
index e69de29bb..8a4dfd612 100644
--- a/test/moon_web/examples/dropdown/positions/right_test.exs
+++ b/test/moon_web/examples/dropdown/positions/right_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.RightTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-right div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-right div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-right div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-right div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-right div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-right 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/top_end_test.exs b/test/moon_web/examples/dropdown/positions/top_end_test.exs
index e69de29bb..27bf6c6f0 100644
--- a/test/moon_web/examples/dropdown/positions/top_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/top_end_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.TopEndTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-top-end div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-top-end div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-top-end div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-top-end div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-top-end div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-top-end 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/top_start_test.exs b/test/moon_web/examples/dropdown/positions/top_start_test.exs
index e69de29bb..719be7859 100644
--- a/test/moon_web/examples/dropdown/positions/top_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/top_start_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.TopStartTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-top-start div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-top-start div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-top-start div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-top-start div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-top-start div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-top-start 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/top_test.exs b/test/moon_web/examples/dropdown/positions/top_test.exs
index e69de29bb..b40b96376 100644
--- a/test/moon_web/examples/dropdown/positions/top_test.exs
+++ b/test/moon_web/examples/dropdown/positions/top_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Positions.TopTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-positions-top div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-positions-top div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-positions-top div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
+
+    select = view |> element("#drop-positions-top div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-positions-top div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
+
+    assert view |> element("#drop-positions-top 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/responsive_dropdown_test.exs b/test/moon_web/examples/dropdown/responsive_dropdown_test.exs
index e69de29bb..ce095827f 100644
--- a/test/moon_web/examples/dropdown/responsive_dropdown_test.exs
+++ b/test/moon_web/examples/dropdown/responsive_dropdown_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.ResponsiveDropdownTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#responsive-dropdown div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#responsive-dropdown div[role=listbox]") |> has_element?()
+    refute view |> element("#responsive-dropdown div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.ResponsiveDropdown")
+
+    select = view |> element("#responsive-dropdown div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#responsive-dropdown div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+
+    # assert view |> element("#responsive-dropdown 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/sizes/lg_test.exs b/test/moon_web/examples/dropdown/sizes/lg_test.exs
index e69de29bb..d0787f4b2 100644
--- a/test/moon_web/examples/dropdown/sizes/lg_test.exs
+++ b/test/moon_web/examples/dropdown/sizes/lg_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Sizes.LargeTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-sizes-lg div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-sizes-lg div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-sizes-lg div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
+
+    select = view |> element("#drop-sizes-lg div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-sizes-lg div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+
+    # assert view |> element("#drop-sizes-lg 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/sizes/md_test.exs b/test/moon_web/examples/dropdown/sizes/md_test.exs
index e69de29bb..302225878 100644
--- a/test/moon_web/examples/dropdown/sizes/md_test.exs
+++ b/test/moon_web/examples/dropdown/sizes/md_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Sizes.MediumTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-sizes-md div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-sizes-md div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-sizes-md div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
+
+    select = view |> element("#drop-sizes-md div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-sizes-md div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+
+    # assert view |> element("#drop-sizes-md 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/sizes/sm_test.exs b/test/moon_web/examples/dropdown/sizes/sm_test.exs
index e69de29bb..94cf48991 100644
--- a/test/moon_web/examples/dropdown/sizes/sm_test.exs
+++ b/test/moon_web/examples/dropdown/sizes/sm_test.exs
@@ -0,0 +1,38 @@
+defmodule MoonWeb.Examples.Dropdown.Sizes.SmallTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should open", %{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?()
+
+    view
+    |> element("#drop-sizes-sm div[aria-haspopup=true]")
+    |> render_click()
+
+    assert view |> element("#drop-sizes-sm div[role=listbox]") |> has_element?()
+    refute view |> element("#drop-sizes-sm div.hidden[role=listbox]") |> has_element?()
+  end
+
+  test "should select", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
+
+    select = view |> element("#drop-sizes-sm div[aria-haspopup=true]")
+
+    select |> render_click()
+
+    view
+    |> element("#drop-sizes-sm div[role=listbox] button:first-child")
+    |> render_click()
+
+    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+
+    # assert view |> element("#drop-sizes-sm 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/trigger_elements/button_test.exs b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
index 8afa578b4..c723becde 100644
--- a/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
+++ b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
@@ -33,5 +33,5 @@ defmodule MoonWeb.Examples.Dropdown.TriggerElements.ButtonTest do
     assert view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?()
   end
 
-  # TODO: should screenshot test be added down here or separate?
+  # 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
index c7e8fe713..4294b9514 100644
--- 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
@@ -36,5 +36,5 @@ defmodule MoonWeb.Examples.Dropdown.TriggerElements.ChipWithArrowTest do
     assert view |> element("#dropdown-trigger-03 div.hidden[role=listbox]") |> has_element?()
   end
 
-  # TODO: should screenshot test be added down here or separate?
+  # 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
index 2e300ca24..0ac9c42ff 100644
--- a/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs
+++ b/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs
@@ -36,5 +36,5 @@ defmodule MoonWeb.Examples.Dropdown.TriggerElements.IconButtonTest do
     assert view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?()
   end
 
-  # TODO: should screenshot test be added down here or separate?
+  # TODO: add screenshot test of default state, hover state, open non-selected state, open selected state
 end

From 5b5aac14f4dfc567ef5c6b1dcf760c9ce624527d Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Wed, 2 Aug 2023 17:02:40 +0300
Subject: [PATCH 07/11] fixing some existing tests, adding new

---
 lib/moon/design/accordion/header.ex           |   2 +
 .../design/bottom_sheet_example/default.ex    |   2 +-
 .../design/drawer_example/positions.ex        |   8 +-
 .../design/drawer_example/with_close.ex       |   9 +-
 .../accordion/content_outside_test.exs        | 123 ++++++++++++++++
 .../examples/accordion/default_test.exs       |  80 +++++++----
 .../examples/accordion/disabled_item_test.exs |  85 +++++++++++
 .../accordion/on_change_event_test.exs        |  69 +++++++++
 .../accordion/open_by_default_test.exs        |  41 ++++++
 .../examples/accordion/single_open_test.exs   |  69 +++++++++
 .../examples/accordion/sizes_test.exs         | 133 ++++++++++++++++++
 test/moon_web/examples/alert/default_test.exs |   3 +
 .../examples/alert/handle_close_test.exs      |  25 ++++
 .../moon_web/examples/avatar/default_test.exs |   3 +
 .../bottom_sheet/custom_height_test.exs       |  30 ++++
 .../examples/bottom_sheet/default_test.exs    |  26 ++++
 .../bottom_sheet/optional_extras_test.exs     |  29 ++++
 .../examples/bottom_sheet/responsive_test.exs |  30 ++++
 test/moon_web/examples/chip/active_test.exs   |   3 +
 test/moon_web/examples/chip/default_test.exs  |   3 +
 .../moon_web/examples/chip/is_stroke_test.exs |   3 +
 .../chip/is_stroke_with_icons_test.exs        |   3 +
 test/moon_web/examples/chip/sizes_test.exs    |   3 +
 test/moon_web/examples/chip/variants_test.exs |   3 +
 .../examples/chip/with_icons_test.exs         |   3 +
 .../examples/chip/with_on_click_test.exs      |  17 +++
 .../moon_web/examples/drawer/default_test.exs |  22 +++
 .../examples/drawer/positions_test.exs        |  71 ++++++++++
 .../examples/drawer/with_backdrop_test.exs    |  23 +++
 .../examples/drawer/with_close_test.exs       |  29 ++++
 .../moon_web/examples/loader/colours_test.exs |  11 ++
 .../moon_web/examples/loader/default_test.exs |  10 ++
 test/moon_web/examples/loader/sizes_test.exs  |  13 ++
 33 files changed, 951 insertions(+), 33 deletions(-)
 create mode 100644 test/moon_web/examples/accordion/content_outside_test.exs
 create mode 100644 test/moon_web/examples/accordion/disabled_item_test.exs
 create mode 100644 test/moon_web/examples/accordion/on_change_event_test.exs
 create mode 100644 test/moon_web/examples/accordion/open_by_default_test.exs
 create mode 100644 test/moon_web/examples/accordion/single_open_test.exs
 create mode 100644 test/moon_web/examples/accordion/sizes_test.exs
 create mode 100644 test/moon_web/examples/alert/default_test.exs
 create mode 100644 test/moon_web/examples/alert/handle_close_test.exs
 create mode 100644 test/moon_web/examples/avatar/default_test.exs
 create mode 100644 test/moon_web/examples/bottom_sheet/custom_height_test.exs
 create mode 100644 test/moon_web/examples/bottom_sheet/default_test.exs
 create mode 100644 test/moon_web/examples/bottom_sheet/optional_extras_test.exs
 create mode 100644 test/moon_web/examples/bottom_sheet/responsive_test.exs
 create mode 100644 test/moon_web/examples/chip/active_test.exs
 create mode 100644 test/moon_web/examples/chip/default_test.exs
 create mode 100644 test/moon_web/examples/chip/is_stroke_test.exs
 create mode 100644 test/moon_web/examples/chip/is_stroke_with_icons_test.exs
 create mode 100644 test/moon_web/examples/chip/sizes_test.exs
 create mode 100644 test/moon_web/examples/chip/variants_test.exs
 create mode 100644 test/moon_web/examples/chip/with_icons_test.exs
 create mode 100644 test/moon_web/examples/chip/with_on_click_test.exs
 create mode 100644 test/moon_web/examples/drawer/default_test.exs
 create mode 100644 test/moon_web/examples/drawer/positions_test.exs
 create mode 100644 test/moon_web/examples/drawer/with_backdrop_test.exs
 create mode 100644 test/moon_web/examples/drawer/with_close_test.exs
 create mode 100644 test/moon_web/examples/loader/colours_test.exs
 create mode 100644 test/moon_web/examples/loader/default_test.exs
 create mode 100644 test/moon_web/examples/loader/sizes_test.exs

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_web/examples/design/bottom_sheet_example/default.ex b/lib/moon_web/examples/design/bottom_sheet_example/default.ex
index 5ed1a8b44..6c812cd58 100644
--- a/lib/moon_web/examples/design/bottom_sheet_example/default.ex
+++ b/lib/moon_web/examples/design/bottom_sheet_example/default.ex
@@ -30,7 +30,7 @@ defmodule MoonWeb.Examples.Design.BottomSheetExample.Default do
           </p>
           <div class="p-4">
             <Button size="lg" full_width on_click="set_close">
-              I'm honestly done
+              I am honestly done
             </Button>
           </div>
         </BottomSheet.Panel>
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"""
     <div class="flex flex-wrap items-center justify-around gap-2 w-full">
-      <Button variant="secondary" on_click="open_start_drawer">
+      <Button variant="secondary" on_click="open_start_drawer" id="start">
         Show Drawer at start of screen
       </Button>
       <Drawer id="start_drawer">
@@ -22,7 +22,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do
         </Drawer.Panel>
       </Drawer>
 
-      <Button variant="secondary" on_click="open_top_drawer">
+      <Button variant="secondary" on_click="open_top_drawer" id="top">
         Show Drawer at top of screen
       </Button>
       <Drawer id="top_drawer">
@@ -34,7 +34,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do
         </Drawer.Panel>
       </Drawer>
 
-      <Button variant="secondary" on_click="open_end_drawer">
+      <Button variant="secondary" on_click="open_end_drawer" id="end">
         Show Drawer at end of screen
       </Button>
       <Drawer id="end_drawer">
@@ -46,7 +46,7 @@ defmodule MoonWeb.Examples.Design.DrawerExample.Positions do
         </Drawer.Panel>
       </Drawer>
 
-      <Button variant="secondary" on_click="open_bottom_drawer">
+      <Button variant="secondary" on_click="open_bottom_drawer" id="bottom">
         Show Drawer at bottom of screen
       </Button>
       <Drawer id="bottom_drawer">
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"""
     <div>
-      <Button variant="secondary" on_click="set_open">
+      <Button variant="secondary" on_click="set_open" id="with_close">
         Show Drawer with Close button
       </Button>
       <Drawer id="with_close_drawer">
         <Drawer.Panel>
           <div class="flex justify-between items-center p-3 border-b border-trunks">
             <p>Header</p>
-            <IconButton icon_only="controls_close_small" variant="ghost" on_click="set_close" />
+            <IconButton
+              icon_only="controls_close_small"
+              variant="ghost"
+              on_click="set_close"
+              id="close_drawer"
+            />
           </div>
           <div class="p-3">Drawer content</div>
         </Drawer.Panel>
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..a34a71724
--- /dev/null
+++ b/test/moon_web/examples/accordion/content_outside_test.exs
@@ -0,0 +1,123 @@
+defmodule MoonWeb.Examples.Accordion.ContentOutsideTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should expand and collapse", %{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?()
+
+    view
+    |> element("#outside-accordion button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element(
+             "#outside-accordion button[value=0][is-content-outside=true][aria-expanded=true]"
+           )
+           |> has_element?()
+
+    refute view
+           |> element("#outside-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
+
+    refute view
+           |> element("#outside-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#outside-accordion button[value=1]")
+    |> render_click()
+
+    assert view
+           |> element(
+             "#outside-accordion button[value=0][is-content-outside=true][aria-expanded=true]"
+           )
+           |> has_element?()
+
+    assert view
+           |> element("#outside-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
+
+    refute view
+           |> element("#outside-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#outside-accordion button[value=2]")
+    |> render_click()
+
+    assert view
+           |> element(
+             "#outside-accordion button[value=0][is-content-outside=true][aria-expanded=true]"
+           )
+           |> has_element?()
+
+    assert view
+           |> element("#outside-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
+
+    assert view
+           |> element("#outside-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#outside-accordion button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#outside-accordion button[value=0][is-content-outside=true]")
+           |> has_element?()
+
+    assert view
+           |> element("#outside-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
+
+    assert view
+           |> element("#outside-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#outside-accordion button[value=1]")
+    |> render_click()
+
+    assert view
+           |> element("#outside-accordion button[value=0][is-content-outside=true]")
+           |> has_element?()
+
+    refute view
+           |> element("#outside-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
+
+    assert view
+           |> element("#outside-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#outside-accordion button[value=2]")
+    |> render_click()
+
+    assert view
+           |> element("#outside-accordion button[value=0][is-content-outside=true]")
+           |> has_element?()
+
+    refute view
+           |> element("#outside-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
+
+    refute view
+           |> element("#outside-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/default_test.exs b/test/moon_web/examples/accordion/default_test.exs
index 879306016..8258c9e4a 100644
--- a/test/moon_web/examples/accordion/default_test.exs
+++ b/test/moon_web/examples/accordion/default_test.exs
@@ -1,64 +1,92 @@
 defmodule MoonWeb.Examples.Accordion.DefaultTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should expand and collapse 1st", %{conn: conn} do
+  test "should expand and collapse", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
 
-    assert view
-           |> element("#simple-accordion button[value=0]")
-           |> render() =~ "Lorem"
+    refute view
+           |> element("#simple-accordion button[value=0][aria-expanded=true]")
+           |> has_element?()
 
-    view
-    |> element("#simple-accordion button[value=0]")
-    |> render_click()
+    refute view
+           |> element("#simple-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
 
-    assert view |> element("#simple-accordion div[role=region]") |> 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 div[role=region]") |> has_element?()
-  end
+    assert view
+           |> element("#simple-accordion button[value=0][aria-expanded=true]")
+           |> has_element?()
 
-  test "should expand and collapse 2nd", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
+    refute view
+           |> element("#simple-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
 
-    assert view
-           |> element("#simple-accordion button[value=1]")
-           |> render() =~ "Beerus bg"
+    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 div[role=region]") |> has_element?()
+    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=1]")
+    |> element("#simple-accordion button[value=2]")
     |> render_click()
 
-    refute view |> element("#simple-accordion div[role=region]") |> has_element?()
-  end
+    assert view
+           |> element("#simple-accordion button[value=0][aria-expanded=true]")
+           |> has_element?()
 
-  test "should expand and collapse 3rd", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
+    assert view
+           |> element("#simple-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
 
     assert view
-           |> element("#simple-accordion button[value=2]")
-           |> render() =~ "Dolor"
+           |> element("#simple-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
 
     view
-    |> element("#simple-accordion button[value=2]")
+    |> element("#simple-accordion button[value=0]")
+    |> render_click()
+
+    refute view
+           |> element("#simple-accordion button[value=0][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#simple-accordion button[value=1]")
     |> render_click()
 
-    assert view |> element("#simple-accordion div[role=region]") |> has_element?()
+    refute view
+           |> element("#simple-accordion button[value=1][aria-expanded=true]")
+           |> has_element?()
 
     view
     |> element("#simple-accordion button[value=2]")
     |> render_click()
 
-    refute view |> element("#simple-accordion div[role=region]") |> 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
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..2dbfd7b43
--- /dev/null
+++ b/test/moon_web/examples/accordion/disabled_item_test.exs
@@ -0,0 +1,85 @@
+defmodule MoonWeb.Examples.Accordion.DisabledItemTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should expand and collapse", %{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?()
+
+    view
+    |> element("#disabled-accordion button[value=0]")
+    |> render_click()
+
+    assert 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?()
+
+    view
+    |> element("#disabled-accordion button[value=2]")
+    |> render_click()
+
+    assert view
+           |> element("#disabled-accordion button[value=0][aria-expanded=true]")
+           |> has_element?()
+
+    assert view
+           |> element("#disabled-accordion button[value=1][disabled]")
+           |> has_element?()
+
+    assert view
+           |> element("#disabled-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#disabled-accordion button[value=0]")
+    |> render_click()
+
+    refute view
+           |> element("#disabled-accordion button[value=0][aria-expanded=true]")
+           |> has_element?()
+
+    assert view
+           |> element("#disabled-accordion button[value=1][disabled]")
+           |> has_element?()
+
+    assert view
+           |> element("#disabled-accordion button[value=2][aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#disabled-accordion button[value=2]")
+    |> render_click()
+
+    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..730bb3f95
--- /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 collapse and expand", %{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..3d568193e
--- /dev/null
+++ b/test/moon_web/examples/accordion/single_open_test.exs
@@ -0,0 +1,69 @@
+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?()
+
+    view
+    |> element("#single-accordion button[value=2]")
+    |> render_click()
+
+    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?()
+
+    assert 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..4205ac245
--- /dev/null
+++ b/test/moon_web/examples/accordion/sizes_test.exs
@@ -0,0 +1,133 @@
+defmodule MoonWeb.Examples.Accordion.SizesTest do
+  use MoonWeb.ConnCase, async: true
+
+  test "should expand and collapse xl", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
+
+    assert view
+           |> element("#accordion-sizes-xl button[value=0][size=xl]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-xl button[aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-xl button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-xl button[value=0][aria-expanded=true][size=xl]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-xl button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-xl button[value=0][size=xl]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-xl button[aria-expanded=true]")
+           |> has_element?()
+  end
+
+  test "should expand and collapse lg", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
+
+    assert view
+           |> element("#accordion-sizes-lg button[value=0][size=lg]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-lg button[aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-lg button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-lg button[value=0][aria-expanded=true][size=lg]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-lg button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-lg button[value=0][size=lg]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-lg button[aria-expanded=true]")
+           |> has_element?()
+  end
+
+  test "should expand and collapse md", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
+
+    assert view
+           |> element("#accordion-sizes-md button[value=0][size=md]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-md button[aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-md button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-md button[value=0][aria-expanded=true][size=md]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-md button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-md button[value=0][size=md]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-md button[aria-expanded=true]")
+           |> has_element?()
+  end
+
+  test "should expand and collapse sm", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
+
+    assert view
+           |> element("#accordion-sizes-sm button[value=0][size=sm]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-sm button[aria-expanded=true]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-sm button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-sm button[value=0][aria-expanded=true][size=sm]")
+           |> has_element?()
+
+    view
+    |> element("#accordion-sizes-sm button[value=0]")
+    |> render_click()
+
+    assert view
+           |> element("#accordion-sizes-sm button[value=0][size=sm]")
+           |> has_element?()
+
+    refute view
+           |> element("#accordion-sizes-sm button[aria-expanded=true]")
+           |> 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..2c97810aa
--- /dev/null
+++ b/test/moon_web/examples/bottom_sheet/custom_height_test.exs
@@ -0,0 +1,30 @@
+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?()
+
+    # TODO: add height test if needed-> assert view |> element("#custom_height_bottom_sheet div.h-[77%]") |> has_element?()
+
+    button_to_close_bottomsheet = view |> element("button.bg-none[data-size=md]")
+    assert button_to_close_bottomsheet |> render() =~ "I don&#39;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/chip/active_test.exs b/test/moon_web/examples/chip/active_test.exs
new file mode 100644
index 000000000..8a4033fff
--- /dev/null
+++ b/test/moon_web/examples/chip/active_test.exs
@@ -0,0 +1,3 @@
+defmodule MoonWeb.Examples.Chip.ActiveTest do
+  # 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..67b27a1fa
--- /dev/null
+++ b/test/moon_web/examples/chip/default_test.exs
@@ -0,0 +1,3 @@
+defmodule MoonWeb.Examples.Chip.DefaultTest do
+  # 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..d967ec1e5
--- /dev/null
+++ b/test/moon_web/examples/chip/is_stroke_test.exs
@@ -0,0 +1,3 @@
+defmodule MoonWeb.Examples.Chip.IsStrokeTest do
+  # 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..14abae576
--- /dev/null
+++ b/test/moon_web/examples/chip/sizes_test.exs
@@ -0,0 +1,3 @@
+defmodule MoonWeb.Examples.Chip.SizesTest do
+  # 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..7c7007ccf
--- /dev/null
+++ b/test/moon_web/examples/chip/variants_test.exs
@@ -0,0 +1,3 @@
+defmodule MoonWeb.Examples.Chip.VariantsTest do
+  # 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..099586525
--- /dev/null
+++ b/test/moon_web/examples/drawer/default_test.exs
@@ -0,0 +1,22 @@
+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?()
+    # TODO: replace with ltr:right-0 class?
+    assert view |> element("#default_drawer div.inset-y-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..9d6c94546
--- /dev/null
+++ b/test/moon_web/examples/drawer/positions_test.exs
@@ -0,0 +1,71 @@
+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?()
+    # TODO: replace with ltr:left-0 class?
+    assert view |> element("#start_drawer div.inset-y-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?()
+    # TODO: replace with ltr:right-0 class?
+    assert view |> element("#end_drawer div.inset-y-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..5f63698b9
--- /dev/null
+++ b/test/moon_web/examples/drawer/with_backdrop_test.exs
@@ -0,0 +1,23 @@
+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?()
+    # TODO: replace with ltr:right-0 class?
+    assert view |> element("#backdrop_drawer div.inset-y-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..99342dc4c
--- /dev/null
+++ b/test/moon_web/examples/drawer/with_close_test.exs
@@ -0,0 +1,29 @@
+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?()
+    # TODO: replace with ltr:right-0 class?
+    assert view |> element("#with_close_drawer div.inset-y-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/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

From bae6ba5c3dbae1a007cdaa9b146736aab29dc5ea Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Thu, 3 Aug 2023 17:15:54 +0300
Subject: [PATCH 08/11] fixes and additions

---
 lib/moon/design/popover.ex                    |   7 +-
 .../examples/design/chip_example/active.ex    |   4 +-
 .../examples/design/chip_example/is_stroke.ex |   4 +-
 .../chip_example/modal_example/default.ex     |   4 +-
 .../modal_example/with_big_content.ex         |   4 +-
 .../chip_example/modal_example/with_select.ex |   4 +-
 .../examples/design/chip_example/sizes.ex     |   4 +-
 .../examples/design/chip_example/variants.ex  |   2 +-
 .../design/popover_example/with_close.ex      |  79 +++++++------
 .../accordion/content_outside_test.exs        | 104 +----------------
 .../examples/accordion/default_test.exs       |  16 +--
 .../examples/accordion/disabled_item_test.exs |  66 +----------
 .../accordion/open_by_default_test.exs        |   2 +-
 .../examples/accordion/single_open_test.exs   |  16 ---
 .../examples/accordion/sizes_test.exs         | 110 +-----------------
 .../bottom_sheet/custom_height_test.exs       |   4 +-
 test/moon_web/examples/chip/active_test.exs   |  22 ++++
 test/moon_web/examples/chip/default_test.exs  |  12 ++
 .../moon_web/examples/chip/is_stroke_test.exs |  26 +++++
 test/moon_web/examples/chip/sizes_test.exs    |  16 +++
 test/moon_web/examples/chip/variants_test.exs |  18 +++
 .../moon_web/examples/drawer/default_test.exs |   3 +-
 .../examples/drawer/positions_test.exs        |   6 +-
 .../examples/drawer/with_backdrop_test.exs    |   3 +-
 .../examples/drawer/with_close_test.exs       |   3 +-
 .../option_layouts/with_checkbox_test.exs     |  20 +---
 .../option_layouts/with_icons_test.exs        |  17 +--
 .../option_layouts/with_radio_test.exs        |   7 +-
 .../dropdown/positions/bottom_end_test.exs    |  28 +----
 .../dropdown/positions/bottom_start_test.exs  |  28 +----
 .../dropdown/positions/bottom_test.exs        |  29 +----
 .../dropdown/positions/left_end_test.exs      |  27 +----
 .../dropdown/positions/left_start_test.exs    |  28 +----
 .../examples/dropdown/positions/left_test.exs |  27 +----
 .../dropdown/positions/right_end_test.exs     |  27 +----
 .../dropdown/positions/right_start_test.exs   |  28 +----
 .../dropdown/positions/right_test.exs         |  27 +----
 .../dropdown/positions/top_end_test.exs       |  27 +----
 .../dropdown/positions/top_start_test.exs     |  27 +----
 .../examples/dropdown/positions/top_test.exs  |  29 +----
 .../dropdown/responsive_dropdown_test.exs     |  29 +----
 .../examples/dropdown/sizes/lg_test.exs       |  29 ++---
 .../examples/dropdown/sizes/md_test.exs       |  29 ++---
 .../examples/dropdown/sizes/sm_test.exs       |  29 ++---
 .../dropdown/trigger_elements/button_test.exs |  25 +---
 .../trigger_elements/chip_with_arrow_test.exs |  24 +---
 .../trigger_elements/icon_button_test.exs     |  28 +----
 .../examples/modal/big_content_test.exs       |  26 +++++
 test/moon_web/examples/modal/default_test.exs |  27 +++++
 .../examples/modal/styled_content_test.exs    |  45 +++++++
 .../examples/modal/with_select_test.exs       |  30 +++++
 .../examples/popover/default_test.exs         |  32 +++++
 .../popover/positions/bottom_end_test.exs     |  19 +++
 .../popover/positions/bottom_start_test.exs   |  19 +++
 .../popover/positions/bottom_test.exs         |  21 ++++
 .../popover/positions/left_end_test.exs       |  19 +++
 .../popover/positions/left_start_test.exs     |  19 +++
 .../examples/popover/positions/left_test.exs  |  19 +++
 .../popover/positions/right_end_test.exs      |  19 +++
 .../popover/positions/right_start_test.exs    |  19 +++
 .../examples/popover/positions/right_test.exs |  19 +++
 .../popover/positions/top_end_test.exs        |  19 +++
 .../popover/positions/top_start_test.exs      |  19 +++
 .../examples/popover/positions/top_test.exs   |  21 ++++
 .../popover/trigger_elements/button_test.exs  |  17 +++
 .../trigger_elements/icon_button_test.exs     |  17 +++
 .../popover/trigger_elements/span_test.exs    |  17 +++
 .../examples/popover/with_close_test.exs      |  27 +++++
 68 files changed, 733 insertions(+), 845 deletions(-)
 create mode 100644 test/moon_web/examples/modal/big_content_test.exs
 create mode 100644 test/moon_web/examples/modal/default_test.exs
 create mode 100644 test/moon_web/examples/modal/styled_content_test.exs
 create mode 100644 test/moon_web/examples/modal/with_select_test.exs
 create mode 100644 test/moon_web/examples/popover/default_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/bottom_end_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/bottom_start_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/bottom_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/left_end_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/left_start_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/left_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/right_end_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/right_start_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/right_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/top_end_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/top_start_test.exs
 create mode 100644 test/moon_web/examples/popover/positions/top_test.exs
 create mode 100644 test/moon_web/examples/popover/trigger_elements/button_test.exs
 create mode 100644 test/moon_web/examples/popover/trigger_elements/icon_button_test.exs
 create mode 100644 test/moon_web/examples/popover/trigger_elements/span_test.exs
 create mode 100644 test/moon_web/examples/popover/with_close_test.exs

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"""
     <div {=@id} data-testid={@testid} class={@class} :on-click-away="close_panel">
       <div class="relative">
-        <div :if={slot_assigned?(:trigger)} role="button" :on-click={@on_click || "toggle_open"}>
+        <div
+          :if={slot_assigned?(:trigger)}
+          role="button"
+          :on-click={@on_click || "toggle_open"}
+          data-testid={"#{@testid}-trigger"}
+        >
           <#slot {@trigger} />
         </div>
         <div
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"""
-    <Chip is_active size="sm">Active</Chip>
-    <Chip is_active is_stroke>Active</Chip>
+    <Chip is_active size="sm" testid="active">Active</Chip>
+    <Chip is_active is_stroke testid="active_stroke">Active</Chip>
     """
   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"""
-    <Chip is_stroke size="sm">
+    <Chip is_stroke size="sm" testid="stroke_sm">
       Stroke on hover
     </Chip>
-    <Chip is_stroke>Stroke on hover</Chip>
+    <Chip is_stroke testid="stroke_md">Stroke on hover</Chip>
     """
   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"""
     <div>
-      <Button on_click="set_open">Open dialog</Button>
+      <Button on_click="set_open" testid="open-modal">Open dialog</Button>
       <Modal id="default_modal">
         <Modal.Backdrop />
         <Modal.Panel>
@@ -28,7 +28,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.Default do
             </p>
           </div>
           <div class="p-4 border-t-2 border-beerus">
-            <Button on_click="set_close">Got it, thanks!</Button>
+            <Button on_click="set_close" testid="close-modal">Got it, thanks!</Button>
           </div>
         </Modal.Panel>
       </Modal>
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"""
     <div>
-      <Button on_click="set_open">Open dialog</Button>
+      <Button on_click="set_open" testid="open-modal">Open dialog</Button>
       <Modal id="big_content_modal">
         <Modal.Backdrop />
         <Modal.Panel>
@@ -28,7 +28,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithBigContent do
             </p>
           </div>
           <div class="p-4 border-t-2 border-beerus">
-            <Button on_click="set_close">Got it, thanks!</Button>
+            <Button on_click="set_close" testid="close-modal">Got it, thanks!</Button>
           </div>
         </Modal.Panel>
       </Modal>
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"""
     <div>
-      <Button on_click="set_open">Open dialog</Button>
+      <Button on_click="set_open" testid="open-modal">Open dialog</Button>
       <Modal id="with_select_modal">
         <Modal.Backdrop />
         <Modal.Panel>
@@ -70,7 +70,7 @@ defmodule MoonWeb.Examples.Design.ModalExample.ExampleWithSelect do
             </Form>
           </div>
           <div class="flex gap-2 p-4 justify-end pt-2">
-            <Button variant="secondary" on_click="set_close">Cancel</Button>
+            <Button variant="secondary" on_click="set_close" testid="close-modal">Cancel</Button>
             <Button on_click="set_close">Create</Button>
           </div>
         </Modal.Panel>
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"""
-    <Chip size="sm">Small</Chip>
-    <Chip>Medium is default</Chip>
+    <Chip size="sm" testid="small">Small</Chip>
+    <Chip testid="medium">Medium is default</Chip>
     """
   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"""
-    <Chip variant="ghost">Ghost variant</Chip>
+    <Chip variant="ghost" testid="ghost">Ghost variant</Chip>
     <Chip>Default variant</Chip>
     """
   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..4ceeba430 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,47 +15,52 @@ defmodule MoonWeb.Examples.Design.PopoverExample.WithClose do
     MediaMegaphone
   }
 
-  prop(close_panel, :event)
-
   def render(assigns) do
     ~F"""
-    <Popover id="popover_id_8">
-      <Popover.Trigger>
-        <Button>Toggle Popover</Button>
-      </Popover.Trigger>
-      <Popover.Panel class="!w-96">
-        <div class="p-6 flex flex-col gap-6">
-          <MenuItem>
-            <span class="flex w-11 h-11 bg-goku items-center justify-center rounded-lg">
-              <GenericTrophy class="text-bulma text-[1.5rem]" />
-            </span>
-            <Lego.MultiTitle title="Tournaments">
-              Best tournaments with streamers
-            </Lego.MultiTitle>
-          </MenuItem>
-          <MenuItem>
-            <span class="flex w-11 h-11 bg-goku items-center justify-center">
-              <MediaMegaphone class="text-bulma text-[1.5rem]" />
-            </span>
-            <Lego.MultiTitle title="Promotions">
-              Your favourite games
-            </Lego.MultiTitle>
-          </MenuItem>
-          <MenuItem>
-            <span class="flex w-11 h-11 bg-goku items-center justify-center">
-              <MediaTuner class="text-bulma text-[1.5rem]" />
-            </span>
-            <Lego.MultiTitle title="Providers">
-              Your favourite games
-            </Lego.MultiTitle>
-          </MenuItem>
-          <Button on_click="close_panel">Close</Button>
-        </div>
-      </Popover.Panel>
-    </Popover>
+    <div>
+      <Popover id="popover_id_8">
+        <Popover.Trigger>
+          <Button>Toggle Popover</Button>
+        </Popover.Trigger>
+        <Popover.Panel class="!w-96">
+          <div class="p-6 flex flex-col gap-6">
+            <MenuItem>
+              <span class="flex w-11 h-11 bg-goku items-center justify-center rounded-lg">
+                <GenericTrophy class="text-bulma text-[1.5rem]" />
+              </span>
+              <Lego.MultiTitle title="Tournaments">
+                Best tournaments with streamers
+              </Lego.MultiTitle>
+            </MenuItem>
+            <MenuItem>
+              <span class="flex w-11 h-11 bg-goku items-center justify-center">
+                <MediaMegaphone class="text-bulma text-[1.5rem]" />
+              </span>
+              <Lego.MultiTitle title="Promotions">
+                Your favourite games
+              </Lego.MultiTitle>
+            </MenuItem>
+            <MenuItem>
+              <span class="flex w-11 h-11 bg-goku items-center justify-center">
+                <MediaTuner class="text-bulma text-[1.5rem]" />
+              </span>
+              <Lego.MultiTitle title="Providers">
+                Your favourite games
+              </Lego.MultiTitle>
+            </MenuItem>
+            <Button on_click="set_close" testid="close_popover">Close</Button>
+          </div>
+        </Popover.Panel>
+      </Popover>
+    </div>
     """
   end
 
+  def handle_event("set_close", _, socket) do
+    Popover.close("popover_id_8")
+    {:noreply, socket}
+  end
+
   def code() do
     """
     alias Moon.Design.Popover
diff --git a/test/moon_web/examples/accordion/content_outside_test.exs b/test/moon_web/examples/accordion/content_outside_test.exs
index a34a71724..43c4b1c10 100644
--- a/test/moon_web/examples/accordion/content_outside_test.exs
+++ b/test/moon_web/examples/accordion/content_outside_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Accordion.ContentOutsideTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should expand and collapse", %{conn: conn} do
+  test "should contain example with content outside", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/AccordionExample.ContentOutside")
 
     assert view
@@ -15,108 +15,6 @@ defmodule MoonWeb.Examples.Accordion.ContentOutsideTest do
     refute view
            |> element("#outside-accordion button[value=2][is-content-outside=true]")
            |> has_element?()
-
-    view
-    |> element("#outside-accordion button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element(
-             "#outside-accordion button[value=0][is-content-outside=true][aria-expanded=true]"
-           )
-           |> has_element?()
-
-    refute view
-           |> element("#outside-accordion button[value=1][aria-expanded=true]")
-           |> has_element?()
-
-    refute view
-           |> element("#outside-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#outside-accordion button[value=1]")
-    |> render_click()
-
-    assert view
-           |> element(
-             "#outside-accordion button[value=0][is-content-outside=true][aria-expanded=true]"
-           )
-           |> has_element?()
-
-    assert view
-           |> element("#outside-accordion button[value=1][aria-expanded=true]")
-           |> has_element?()
-
-    refute view
-           |> element("#outside-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#outside-accordion button[value=2]")
-    |> render_click()
-
-    assert view
-           |> element(
-             "#outside-accordion button[value=0][is-content-outside=true][aria-expanded=true]"
-           )
-           |> has_element?()
-
-    assert view
-           |> element("#outside-accordion button[value=1][aria-expanded=true]")
-           |> has_element?()
-
-    assert view
-           |> element("#outside-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#outside-accordion button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#outside-accordion button[value=0][is-content-outside=true]")
-           |> has_element?()
-
-    assert view
-           |> element("#outside-accordion button[value=1][aria-expanded=true]")
-           |> has_element?()
-
-    assert view
-           |> element("#outside-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#outside-accordion button[value=1]")
-    |> render_click()
-
-    assert view
-           |> element("#outside-accordion button[value=0][is-content-outside=true]")
-           |> has_element?()
-
-    refute view
-           |> element("#outside-accordion button[value=1][aria-expanded=true]")
-           |> has_element?()
-
-    assert view
-           |> element("#outside-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#outside-accordion button[value=2]")
-    |> render_click()
-
-    assert view
-           |> element("#outside-accordion button[value=0][is-content-outside=true]")
-           |> has_element?()
-
-    refute view
-           |> element("#outside-accordion button[value=1][aria-expanded=true]")
-           |> has_element?()
-
-    refute view
-           |> element("#outside-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
   end
 
   # TODO: add screenshot test of default state and expanded state
diff --git a/test/moon_web/examples/accordion/default_test.exs b/test/moon_web/examples/accordion/default_test.exs
index 8258c9e4a..f698eb327 100644
--- a/test/moon_web/examples/accordion/default_test.exs
+++ b/test/moon_web/examples/accordion/default_test.exs
@@ -49,10 +49,10 @@ defmodule MoonWeb.Examples.Accordion.DefaultTest do
            |> has_element?()
 
     view
-    |> element("#simple-accordion button[value=2]")
+    |> element("#simple-accordion button[value=0]")
     |> render_click()
 
-    assert view
+    refute view
            |> element("#simple-accordion button[value=0][aria-expanded=true]")
            |> has_element?()
 
@@ -60,30 +60,22 @@ defmodule MoonWeb.Examples.Accordion.DefaultTest do
            |> element("#simple-accordion button[value=1][aria-expanded=true]")
            |> has_element?()
 
-    assert view
+    refute view
            |> element("#simple-accordion button[value=2][aria-expanded=true]")
            |> has_element?()
 
     view
-    |> element("#simple-accordion button[value=0]")
+    |> element("#simple-accordion button[value=1]")
     |> render_click()
 
     refute view
            |> element("#simple-accordion button[value=0][aria-expanded=true]")
            |> has_element?()
 
-    view
-    |> element("#simple-accordion button[value=1]")
-    |> render_click()
-
     refute view
            |> element("#simple-accordion button[value=1][aria-expanded=true]")
            |> has_element?()
 
-    view
-    |> element("#simple-accordion button[value=2]")
-    |> render_click()
-
     refute view
            |> element("#simple-accordion button[value=2][aria-expanded=true]")
            |> has_element?()
diff --git a/test/moon_web/examples/accordion/disabled_item_test.exs b/test/moon_web/examples/accordion/disabled_item_test.exs
index 2dbfd7b43..26d15db77 100644
--- a/test/moon_web/examples/accordion/disabled_item_test.exs
+++ b/test/moon_web/examples/accordion/disabled_item_test.exs
@@ -1,73 +1,9 @@
 defmodule MoonWeb.Examples.Accordion.DisabledItemTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should expand and collapse", %{conn: conn} do
+  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?()
-
-    view
-    |> element("#disabled-accordion button[value=0]")
-    |> render_click()
-
-    assert 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?()
-
-    view
-    |> element("#disabled-accordion button[value=2]")
-    |> render_click()
-
-    assert view
-           |> element("#disabled-accordion button[value=0][aria-expanded=true]")
-           |> has_element?()
-
-    assert view
-           |> element("#disabled-accordion button[value=1][disabled]")
-           |> has_element?()
-
-    assert view
-           |> element("#disabled-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#disabled-accordion button[value=0]")
-    |> render_click()
-
-    refute view
-           |> element("#disabled-accordion button[value=0][aria-expanded=true]")
-           |> has_element?()
-
-    assert view
-           |> element("#disabled-accordion button[value=1][disabled]")
-           |> has_element?()
-
-    assert view
-           |> element("#disabled-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#disabled-accordion button[value=2]")
-    |> render_click()
-
     refute view
            |> element("#disabled-accordion button[value=0][aria-expanded=true]")
            |> has_element?()
diff --git a/test/moon_web/examples/accordion/open_by_default_test.exs b/test/moon_web/examples/accordion/open_by_default_test.exs
index 730bb3f95..364faa556 100644
--- a/test/moon_web/examples/accordion/open_by_default_test.exs
+++ b/test/moon_web/examples/accordion/open_by_default_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Accordion.OpenByDefaultTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should collapse and expand", %{conn: conn} do
+  test "should be open by default", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/AccordionExample.OpenByDefault")
 
     assert view
diff --git a/test/moon_web/examples/accordion/single_open_test.exs b/test/moon_web/examples/accordion/single_open_test.exs
index 3d568193e..b32b94d12 100644
--- a/test/moon_web/examples/accordion/single_open_test.exs
+++ b/test/moon_web/examples/accordion/single_open_test.exs
@@ -47,22 +47,6 @@ defmodule MoonWeb.Examples.Accordion.SingleOpenTest do
     refute view
            |> element("#single-accordion button[value=2][aria-expanded=true]")
            |> has_element?()
-
-    view
-    |> element("#single-accordion button[value=2]")
-    |> render_click()
-
-    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?()
-
-    assert view
-           |> element("#single-accordion button[value=2][aria-expanded=true]")
-           |> has_element?()
   end
 
   # TODO: add screenshot test of default state and expanded state
diff --git a/test/moon_web/examples/accordion/sizes_test.exs b/test/moon_web/examples/accordion/sizes_test.exs
index 4205ac245..9215a688e 100644
--- a/test/moon_web/examples/accordion/sizes_test.exs
+++ b/test/moon_web/examples/accordion/sizes_test.exs
@@ -1,132 +1,24 @@
 defmodule MoonWeb.Examples.Accordion.SizesTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should expand and collapse xl", %{conn: conn} do
+  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?()
 
-    refute view
-           |> element("#accordion-sizes-xl button[aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-xl button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-xl button[value=0][aria-expanded=true][size=xl]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-xl button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-xl button[value=0][size=xl]")
-           |> has_element?()
-
-    refute view
-           |> element("#accordion-sizes-xl button[aria-expanded=true]")
-           |> has_element?()
-  end
-
-  test "should expand and collapse lg", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
-
     assert view
            |> element("#accordion-sizes-lg button[value=0][size=lg]")
            |> has_element?()
 
-    refute view
-           |> element("#accordion-sizes-lg button[aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-lg button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-lg button[value=0][aria-expanded=true][size=lg]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-lg button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-lg button[value=0][size=lg]")
-           |> has_element?()
-
-    refute view
-           |> element("#accordion-sizes-lg button[aria-expanded=true]")
-           |> has_element?()
-  end
-
-  test "should expand and collapse md", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
-
     assert view
            |> element("#accordion-sizes-md button[value=0][size=md]")
            |> has_element?()
 
-    refute view
-           |> element("#accordion-sizes-md button[aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-md button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-md button[value=0][aria-expanded=true][size=md]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-md button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-md button[value=0][size=md]")
-           |> has_element?()
-
-    refute view
-           |> element("#accordion-sizes-md button[aria-expanded=true]")
-           |> has_element?()
-  end
-
-  test "should expand and collapse sm", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
-
-    assert view
-           |> element("#accordion-sizes-sm button[value=0][size=sm]")
-           |> has_element?()
-
-    refute view
-           |> element("#accordion-sizes-sm button[aria-expanded=true]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-sm button[value=0]")
-    |> render_click()
-
-    assert view
-           |> element("#accordion-sizes-sm button[value=0][aria-expanded=true][size=sm]")
-           |> has_element?()
-
-    view
-    |> element("#accordion-sizes-sm button[value=0]")
-    |> render_click()
-
     assert view
            |> element("#accordion-sizes-sm button[value=0][size=sm]")
            |> has_element?()
-
-    refute view
-           |> element("#accordion-sizes-sm button[aria-expanded=true]")
-           |> has_element?()
   end
 
   # TODO: add screenshot test of default state and expanded state
diff --git a/test/moon_web/examples/bottom_sheet/custom_height_test.exs b/test/moon_web/examples/bottom_sheet/custom_height_test.exs
index 2c97810aa..d8858884b 100644
--- a/test/moon_web/examples/bottom_sheet/custom_height_test.exs
+++ b/test/moon_web/examples/bottom_sheet/custom_height_test.exs
@@ -15,7 +15,9 @@ defmodule MoonWeb.Examples.BottomSheet.CustomHeightTest do
     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?()
 
-    # TODO: add height test if needed-> assert view |> element("#custom_height_bottom_sheet div.h-[77%]") |> 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&#39;t wanna see this"
diff --git a/test/moon_web/examples/chip/active_test.exs b/test/moon_web/examples/chip/active_test.exs
index 8a4033fff..9fb5ce5c9 100644
--- a/test/moon_web/examples/chip/active_test.exs
+++ b/test/moon_web/examples/chip/active_test.exs
@@ -1,3 +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
index 67b27a1fa..5e117c956 100644
--- a/test/moon_web/examples/chip/default_test.exs
+++ b/test/moon_web/examples/chip/default_test.exs
@@ -1,3 +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
index d967ec1e5..b6db88f01 100644
--- a/test/moon_web/examples/chip/is_stroke_test.exs
+++ b/test/moon_web/examples/chip/is_stroke_test.exs
@@ -1,3 +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/sizes_test.exs b/test/moon_web/examples/chip/sizes_test.exs
index 14abae576..59a6821bb 100644
--- a/test/moon_web/examples/chip/sizes_test.exs
+++ b/test/moon_web/examples/chip/sizes_test.exs
@@ -1,3 +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
index 7c7007ccf..21c9b80f0 100644
--- a/test/moon_web/examples/chip/variants_test.exs
+++ b/test/moon_web/examples/chip/variants_test.exs
@@ -1,3 +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/drawer/default_test.exs b/test/moon_web/examples/drawer/default_test.exs
index 099586525..81a039928 100644
--- a/test/moon_web/examples/drawer/default_test.exs
+++ b/test/moon_web/examples/drawer/default_test.exs
@@ -12,8 +12,7 @@ defmodule MoonWeb.Examples.Drawer.DefaultTest do
     button_to_open_drawer |> render_click()
 
     assert view |> element("div[id=default_drawer][data-is_open]") |> has_element?()
-    # TODO: replace with ltr:right-0 class?
-    assert view |> element("#default_drawer div.inset-y-0") |> 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
diff --git a/test/moon_web/examples/drawer/positions_test.exs b/test/moon_web/examples/drawer/positions_test.exs
index 9d6c94546..ffc7da16b 100644
--- a/test/moon_web/examples/drawer/positions_test.exs
+++ b/test/moon_web/examples/drawer/positions_test.exs
@@ -12,8 +12,7 @@ defmodule MoonWeb.Examples.Drawer.PositionsTest do
     |> render_click()
 
     assert view |> element("div[id=start_drawer][data-is_open]") |> has_element?()
-    # TODO: replace with ltr:left-0 class?
-    assert view |> element("#start_drawer div.inset-y-0") |> 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
@@ -45,8 +44,7 @@ defmodule MoonWeb.Examples.Drawer.PositionsTest do
     |> render_click()
 
     assert view |> element("div[id=end_drawer][data-is_open]") |> has_element?()
-    # TODO: replace with ltr:right-0 class?
-    assert view |> element("#end_drawer div.inset-y-0") |> 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
diff --git a/test/moon_web/examples/drawer/with_backdrop_test.exs b/test/moon_web/examples/drawer/with_backdrop_test.exs
index 5f63698b9..d35998224 100644
--- a/test/moon_web/examples/drawer/with_backdrop_test.exs
+++ b/test/moon_web/examples/drawer/with_backdrop_test.exs
@@ -12,8 +12,7 @@ defmodule MoonWeb.Examples.Drawer.WithBackdropTest do
     button_to_open_drawer |> render_click()
 
     assert view |> element("div[id=backdrop_drawer][data-is_open]") |> has_element?()
-    # TODO: replace with ltr:right-0 class?
-    assert view |> element("#backdrop_drawer div.inset-y-0") |> 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
diff --git a/test/moon_web/examples/drawer/with_close_test.exs b/test/moon_web/examples/drawer/with_close_test.exs
index 99342dc4c..c0a0ba508 100644
--- a/test/moon_web/examples/drawer/with_close_test.exs
+++ b/test/moon_web/examples/drawer/with_close_test.exs
@@ -12,8 +12,7 @@ defmodule MoonWeb.Examples.Drawer.WithCloseTest do
     |> render_click()
 
     assert view |> element("div[id=with_close_drawer][data-is_open]") |> has_element?()
-    # TODO: replace with ltr:right-0 class?
-    assert view |> element("#with_close_drawer div.inset-y-0") |> 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
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
index 4c9e8c8e6..a51000000 100644
--- a/test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs
+++ b/test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should have checkboxes", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts")
 
     assert view
@@ -9,6 +9,8 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest do
            |> 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]")
@@ -18,21 +20,5 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest do
     refute view |> element("#dropdown-options-03 div.hidden[role=listbox]") |> has_element?()
   end
 
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts")
-
-    select = view |> element("#dropdown-options-03 div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#dropdown-options-03 div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
-
-    # assert 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
index 236820e49..c60d68fc3 100644
--- a/test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs
+++ b/test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs
@@ -9,6 +9,7 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithIconsTest do
            |> 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]")
@@ -18,21 +19,5 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithIconsTest do
     refute view |> element("#dropdown-options-01 div.hidden[role=listbox]") |> has_element?()
   end
 
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.OptionLayouts")
-
-    select = view |> element("#dropdown-options-01 div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#dropdown-options-01 div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    assert 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
index a77e422ae..24e27bd52 100644
--- a/test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs
+++ b/test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs
@@ -18,9 +18,12 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithRadioTest do
     refute view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?()
   end
 
-  test "should select", %{conn: conn} do
+  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()
@@ -29,7 +32,7 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithRadioTest do
     |> element("#dropdown-options-02 div[role=listbox] button:first-child")
     |> render_click()
 
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if radio is checked?
+    assert view |> element("#dropdown-options-02 span.shadow-piccolo") |> has_element?()
 
     assert view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?()
   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
index 8c1a79fb3..f7545f3be 100644
--- a/test/moon_web/examples/dropdown/positions/bottom_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/bottom_end_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.BottomEndTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed bottom-end", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -12,32 +12,8 @@ defmodule MoonWeb.Examples.Dropdown.Positions.BottomEndTest do
            |> element("#drop-positions-bottom-end div.hidden[role=listbox]")
            |> has_element?()
 
-    view
-    |> element("#drop-positions-bottom-end div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-bottom-end div[role=listbox]") |> has_element?()
-
-    refute view
-           |> element("#drop-positions-bottom-end div.hidden[role=listbox]")
-           |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-bottom-end div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-bottom-end div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
     assert view
-           |> element("#drop-positions-bottom-end div.hidden[role=listbox]")
+           |> element("#drop-positions-bottom-end div.ltr\\:right-0.rtl\\:left-0.top-full")
            |> has_element?()
   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
index f68179025..e6c03e4c5 100644
--- a/test/moon_web/examples/dropdown/positions/bottom_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/bottom_start_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.BottomStartTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed bottom-start", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -12,32 +12,8 @@ defmodule MoonWeb.Examples.Dropdown.Positions.BottomStartTest do
            |> element("#drop-positions-bottom-start div.hidden[role=listbox]")
            |> has_element?()
 
-    view
-    |> element("#drop-positions-bottom-start div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-bottom-start div[role=listbox]") |> has_element?()
-
-    refute view
-           |> element("#drop-positions-bottom-start div.hidden[role=listbox]")
-           |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-bottom-start div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-bottom-start div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
     assert view
-           |> element("#drop-positions-bottom-start div.hidden[role=listbox]")
+           |> element("#drop-positions-bottom-start div.ltr\\:left-0.rtl\\:right-0.top-full")
            |> has_element?()
   end
 
diff --git a/test/moon_web/examples/dropdown/positions/bottom_test.exs b/test/moon_web/examples/dropdown/positions/bottom_test.exs
index 28eb1ac11..2d5f99c52 100644
--- a/test/moon_web/examples/dropdown/positions/bottom_test.exs
+++ b/test/moon_web/examples/dropdown/positions/bottom_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.BottomTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed bottom", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.BottomTest do
 
     assert view |> element("#drop-positions-bottom div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-bottom div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-bottom div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-bottom div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-bottom div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-bottom div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/left_end_test.exs b/test/moon_web/examples/dropdown/positions/left_end_test.exs
index cc6d750f7..56f2ef427 100644
--- a/test/moon_web/examples/dropdown/positions/left_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/left_end_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.LeftEndTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed left-end", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.LeftEndTest do
 
     assert view |> element("#drop-positions-left-end div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-left-end div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-left-end div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-left-end div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-left-end div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-left-end div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/left_start_test.exs b/test/moon_web/examples/dropdown/positions/left_start_test.exs
index 445ce7b1b..f2d92391a 100644
--- a/test/moon_web/examples/dropdown/positions/left_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/left_start_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.LeftStartTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed left-start", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -12,32 +12,8 @@ defmodule MoonWeb.Examples.Dropdown.Positions.LeftStartTest do
            |> element("#drop-positions-left-start div.hidden[role=listbox]")
            |> has_element?()
 
-    view
-    |> element("#drop-positions-left-start div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-left-start div[role=listbox]") |> has_element?()
-
-    refute view
-           |> element("#drop-positions-left-start div.hidden[role=listbox]")
-           |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-left-start div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-left-start div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
     assert view
-           |> element("#drop-positions-left-start div.hidden[role=listbox]")
+           |> element("#drop-positions-left-start div.ltr\\:right-full.rtl\\:left-full.top-0")
            |> has_element?()
   end
 
diff --git a/test/moon_web/examples/dropdown/positions/left_test.exs b/test/moon_web/examples/dropdown/positions/left_test.exs
index 9525c0a98..2022bf626 100644
--- a/test/moon_web/examples/dropdown/positions/left_test.exs
+++ b/test/moon_web/examples/dropdown/positions/left_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.LeftTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed left", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.LeftTest do
 
     assert view |> element("#drop-positions-left div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-left div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-left div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-left div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-left div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-left div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/right_end_test.exs b/test/moon_web/examples/dropdown/positions/right_end_test.exs
index 9ecfd7482..3b13d92f8 100644
--- a/test/moon_web/examples/dropdown/positions/right_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/right_end_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.RightEndTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed right-end", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.RightEndTest do
 
     assert view |> element("#drop-positions-right-end div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-right-end div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-right-end div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-right-end div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-right-end div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-right-end div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/right_start_test.exs b/test/moon_web/examples/dropdown/positions/right_start_test.exs
index b9c5bcc71..333141539 100644
--- a/test/moon_web/examples/dropdown/positions/right_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/right_start_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.RightStartTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed right-start", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -12,32 +12,8 @@ defmodule MoonWeb.Examples.Dropdown.Positions.RightStartTest do
            |> element("#drop-positions-right-start div.hidden[role=listbox]")
            |> has_element?()
 
-    view
-    |> element("#drop-positions-right-start div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-right-start div[role=listbox]") |> has_element?()
-
-    refute view
-           |> element("#drop-positions-right-start div.hidden[role=listbox]")
-           |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-right-start div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-right-start div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
     assert view
-           |> element("#drop-positions-right-start div.hidden[role=listbox]")
+           |> element("#drop-positions-right-start div.ltr\\:left-full.rtl\\:right-full.top-0")
            |> has_element?()
   end
 
diff --git a/test/moon_web/examples/dropdown/positions/right_test.exs b/test/moon_web/examples/dropdown/positions/right_test.exs
index 8a4dfd612..bf271b357 100644
--- a/test/moon_web/examples/dropdown/positions/right_test.exs
+++ b/test/moon_web/examples/dropdown/positions/right_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.RightTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed right", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.RightTest do
 
     assert view |> element("#drop-positions-right div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-right div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-right div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-right div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-right div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-right div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/top_end_test.exs b/test/moon_web/examples/dropdown/positions/top_end_test.exs
index 27bf6c6f0..4511d9e80 100644
--- a/test/moon_web/examples/dropdown/positions/top_end_test.exs
+++ b/test/moon_web/examples/dropdown/positions/top_end_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.TopEndTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed top-end", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.TopEndTest do
 
     assert view |> element("#drop-positions-top-end div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-top-end div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-top-end div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-top-end div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-top-end div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-top-end div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/top_start_test.exs b/test/moon_web/examples/dropdown/positions/top_start_test.exs
index 719be7859..10a07245f 100644
--- a/test/moon_web/examples/dropdown/positions/top_start_test.exs
+++ b/test/moon_web/examples/dropdown/positions/top_start_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.TopStartTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed top-start", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.TopStartTest do
 
     assert view |> element("#drop-positions-top-start div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-top-start div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-top-start div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-top-start div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-top-start div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-top-start div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/positions/top_test.exs b/test/moon_web/examples/dropdown/positions/top_test.exs
index b40b96376..faf38dc10 100644
--- a/test/moon_web/examples/dropdown/positions/top_test.exs
+++ b/test/moon_web/examples/dropdown/positions/top_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Positions.TopTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should be placed top", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
 
     assert view
@@ -10,28 +10,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.TopTest do
 
     assert view |> element("#drop-positions-top div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-positions-top div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#drop-positions-top div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-positions-top div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Positions")
-
-    select = view |> element("#drop-positions-top div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-positions-top div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
diff --git a/test/moon_web/examples/dropdown/responsive_dropdown_test.exs b/test/moon_web/examples/dropdown/responsive_dropdown_test.exs
index ce095827f..9bd288f10 100644
--- a/test/moon_web/examples/dropdown/responsive_dropdown_test.exs
+++ b/test/moon_web/examples/dropdown/responsive_dropdown_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.ResponsiveDropdownTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "should act as bottomsheet on small screens", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.ResponsiveDropdown")
 
     assert view
@@ -10,28 +10,11 @@ defmodule MoonWeb.Examples.Dropdown.ResponsiveDropdownTest do
 
     assert view |> element("#responsive-dropdown div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#responsive-dropdown div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#responsive-dropdown div[role=listbox]") |> has_element?()
-    refute view |> element("#responsive-dropdown div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.ResponsiveDropdown")
-
-    select = view |> element("#responsive-dropdown div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#responsive-dropdown div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
-
-    # 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
diff --git a/test/moon_web/examples/dropdown/sizes/lg_test.exs b/test/moon_web/examples/dropdown/sizes/lg_test.exs
index d0787f4b2..acde6d349 100644
--- a/test/moon_web/examples/dropdown/sizes/lg_test.exs
+++ b/test/moon_web/examples/dropdown/sizes/lg_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Sizes.LargeTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "option should be size lg", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
 
     assert view
@@ -10,28 +10,15 @@ defmodule MoonWeb.Examples.Dropdown.Sizes.LargeTest do
 
     assert view |> element("#drop-sizes-lg div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-sizes-lg div[aria-haspopup=true]")
-    |> render_click()
+    assert view |> element("#drop-sizes-lg button.h-12.p-3.rounded-moon-i-sm") |> has_element?()
 
-    assert view |> element("#drop-sizes-lg div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-sizes-lg div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
-
-    select = view |> element("#drop-sizes-lg div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-sizes-lg div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+    refute view
+           |> element("#drop-sizes-lg button.h-10.py-2.px-3.rounded-moon-i-sm")
+           |> has_element?()
 
-    # assert view |> element("#drop-sizes-lg div.hidden[role=listbox]") |> 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
diff --git a/test/moon_web/examples/dropdown/sizes/md_test.exs b/test/moon_web/examples/dropdown/sizes/md_test.exs
index 302225878..887228680 100644
--- a/test/moon_web/examples/dropdown/sizes/md_test.exs
+++ b/test/moon_web/examples/dropdown/sizes/md_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Sizes.MediumTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "option should be size md", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
 
     assert view
@@ -10,28 +10,15 @@ defmodule MoonWeb.Examples.Dropdown.Sizes.MediumTest do
 
     assert view |> element("#drop-sizes-md div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-sizes-md div[aria-haspopup=true]")
-    |> render_click()
+    refute view |> element("#drop-sizes-md button.h-12.p-3.rounded-moon-i-sm") |> has_element?()
 
-    assert view |> element("#drop-sizes-md div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-sizes-md div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
-
-    select = view |> element("#drop-sizes-md div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-sizes-md div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+    assert view
+           |> element("#drop-sizes-md button.h-10.py-2.px-3.rounded-moon-i-sm")
+           |> has_element?()
 
-    # assert view |> element("#drop-sizes-md div.hidden[role=listbox]") |> 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
diff --git a/test/moon_web/examples/dropdown/sizes/sm_test.exs b/test/moon_web/examples/dropdown/sizes/sm_test.exs
index 94cf48991..0d71ad0dd 100644
--- a/test/moon_web/examples/dropdown/sizes/sm_test.exs
+++ b/test/moon_web/examples/dropdown/sizes/sm_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.Sizes.SmallTest do
   use MoonWeb.ConnCase, async: true
 
-  test "should open", %{conn: conn} do
+  test "option should be size sm", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
 
     assert view
@@ -10,28 +10,15 @@ defmodule MoonWeb.Examples.Dropdown.Sizes.SmallTest do
 
     assert view |> element("#drop-sizes-sm div.hidden[role=listbox]") |> has_element?()
 
-    view
-    |> element("#drop-sizes-sm div[aria-haspopup=true]")
-    |> render_click()
+    refute view |> element("#drop-sizes-sm button.h-12.p-3.rounded-moon-i-sm") |> has_element?()
 
-    assert view |> element("#drop-sizes-sm div[role=listbox]") |> has_element?()
-    refute view |> element("#drop-sizes-sm div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.Sizes")
-
-    select = view |> element("#drop-sizes-sm div[aria-haspopup=true]")
-
-    select |> render_click()
-
-    view
-    |> element("#drop-sizes-sm div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour? and if checkbox is checked?
+    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 div.hidden[role=listbox]") |> 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
diff --git a/test/moon_web/examples/dropdown/trigger_elements/button_test.exs b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
index c723becde..2ca60d73d 100644
--- a/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
+++ b/test/moon_web/examples/dropdown/trigger_elements/button_test.exs
@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Dropdown.TriggerElements.ButtonTest do
   use MoonWeb.ConnCase, async: true
 
-  test "Button should open", %{conn: conn} do
+  test "should have Button as trigger", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
 
     assert view
@@ -9,28 +9,7 @@ defmodule MoonWeb.Examples.Dropdown.TriggerElements.ButtonTest do
            |> has_element?()
 
     assert view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?()
-
-    view
-    |> element("#dropdown-trigger-02 div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#dropdown-trigger-02 div[role=listbox]") |> has_element?()
-    refute view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "Button should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
-
-    select = view |> element("#dropdown-trigger-02 div[aria-haspopup=true]")
-    select |> render_click()
-
-    view
-    |> element("#dropdown-trigger-02 div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    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
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
index 4294b9514..5321d1dc0 100644
--- 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
@@ -1,15 +1,17 @@
 defmodule MoonWeb.Examples.Dropdown.TriggerElements.ChipWithArrowTest do
   use MoonWeb.ConnCase, async: true
 
-  test "Chip with arrow should open", %{conn: conn} do
+  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]")
-           # TODO: |> render() =~ should we check icon presence here?
            |> 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]")
@@ -17,23 +19,7 @@ defmodule MoonWeb.Examples.Dropdown.TriggerElements.ChipWithArrowTest do
 
     assert view |> element("#dropdown-trigger-03 div[role=listbox]") |> has_element?()
     refute view |> element("#dropdown-trigger-03 div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "Chip with arrow should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
-
-    select = view |> element("#dropdown-trigger-03 div[aria-haspopup=true]")
-    # TODO: assert select |> render() =~ should we check icon presence here?
-
-    select |> render_click()
-
-    view
-    |> element("#dropdown-trigger-03 div[role=listbox] button:first-child")
-    |> render_click()
-
-    # TODO: assert select |> render() ("button[class=bg-heles]")" should it be checked based on bg-colour?
-
-    assert 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
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
index 0ac9c42ff..6aaa8898e 100644
--- a/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs
+++ b/test/moon_web/examples/dropdown/trigger_elements/icon_button_test.exs
@@ -1,39 +1,15 @@
 defmodule MoonWeb.Examples.Dropdown.TriggerElements.IconButtonTest do
   use MoonWeb.ConnCase, async: true
 
-  test "IconButton should open", %{conn: conn} do
+  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]")
-           # TODO: |> render() =~ should we check icon presence here?
            |> has_element?()
 
     assert view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?()
-
-    view
-    |> element("#dropdown-trigger-01 div[aria-haspopup=true]")
-    |> render_click()
-
-    assert view |> element("#dropdown-trigger-01 div[role=listbox]") |> has_element?()
-    refute view |> element("#dropdown-trigger-01 div.hidden[role=listbox]") |> has_element?()
-  end
-
-  test "IconButton should select", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/DropdownExample.TriggerElements")
-
-    select = view |> element("#dropdown-trigger-01 div[aria-haspopup=true]")
-    # assert select |> render() =~ should we check icon presence here?
-
-    select |> render_click()
-
-    view
-    |> element("#dropdown-trigger-01 div[role=listbox] button:first-child")
-    |> render_click()
-
-    # assert select |> render() ("button[class=bg-heles]")"??  should it be checked based on bg-colour?
-
-    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
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/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

From c6c8f74bb8e6ab835fd5b68aec980de37946cbb7 Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Fri, 4 Aug 2023 18:42:26 +0300
Subject: [PATCH 09/11] pagination, carousel, breadcrumb tests

---
 lib/moon/design/pagination/pages.ex           |  2 +-
 .../design/pagination_example/with_icons.ex   |  4 +-
 .../design/pagination_example/with_text.ex    | 12 ++-
 .../design/popover_example/with_close.ex      | 79 +++++++++++--------
 .../breadcrumb/five_and_more_items_test.exs   | 30 +++++++
 .../examples/breadcrumb/four_items.exs        | 16 ++++
 .../moon_web/examples/breadcrumb/one_item.exs | 16 ++++
 .../moon_web/examples/breadcrumb/two_tems.exs | 16 ++++
 .../moon_web/examples/button/default_test.exs |  3 +
 .../examples/carousel/autoslide_test.exs      | 17 ++++
 .../examples/carousel/customized_arrows.exs   | 15 ++++
 .../examples/carousel/default_test.exs        | 15 ++++
 .../examples/carousel/indicators_test.exs     | 23 ++++++
 .../examples/carousel/select_index_test.exs   | 23 ++++++
 .../examples/carousel/spaces_test.exs         | 11 +++
 .../examples/icon_button/default_test.exs     |  3 +
 .../examples/pagination/with_icons_test.exs   | 79 +++++++++++++++++++
 .../examples/pagination/with_text_test.ex     | 79 +++++++++++++++++++
 18 files changed, 403 insertions(+), 40 deletions(-)
 create mode 100644 test/moon_web/examples/breadcrumb/five_and_more_items_test.exs
 create mode 100644 test/moon_web/examples/breadcrumb/four_items.exs
 create mode 100644 test/moon_web/examples/breadcrumb/one_item.exs
 create mode 100644 test/moon_web/examples/breadcrumb/two_tems.exs
 create mode 100644 test/moon_web/examples/button/default_test.exs
 create mode 100644 test/moon_web/examples/carousel/autoslide_test.exs
 create mode 100644 test/moon_web/examples/carousel/customized_arrows.exs
 create mode 100644 test/moon_web/examples/carousel/default_test.exs
 create mode 100644 test/moon_web/examples/carousel/indicators_test.exs
 create mode 100644 test/moon_web/examples/carousel/select_index_test.exs
 create mode 100644 test/moon_web/examples/carousel/spaces_test.exs
 create mode 100644 test/moon_web/examples/icon_button/default_test.exs
 create mode 100644 test/moon_web/examples/pagination/with_icons_test.exs
 create mode 100644 test/moon_web/examples/pagination/with_text_test.ex

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_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"""
     <Pagination id="with_buttons" total_pages={26} value={@current_page} on_change="set_current_page">
-      <Pagination.PrevButton>
+      <Pagination.PrevButton testid="prev_button">
         <ControlsChevronLeft class="text-moon-24 rtl:rotate-180" />
       </Pagination.PrevButton>
       <Pagination.Pages />
-      <Pagination.NextButton>
+      <Pagination.NextButton testid="next_button">
         <ControlsChevronRight class="text-moon-24 rtl:rotate-180" />
       </Pagination.NextButton>
     </Pagination>
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"""
     <Pagination id="default" total_pages={11} value={@current_page} on_change="set_current_page">
-      <Pagination.PrevButton class="border-none font-regular" hover_bg_class="group-hover:bg-none">Previous</Pagination.PrevButton>
+      <Pagination.PrevButton
+        class="border-none font-regular"
+        hover_bg_class="group-hover:bg-none"
+        testid="prev_button"
+      >Previous</Pagination.PrevButton>
       <Pagination.Pages />
-      <Pagination.NextButton class="border-none font-regular" hover_bg_class="group-hover:bg-none">Next</Pagination.NextButton>
+      <Pagination.NextButton
+        class="border-none font-regular"
+        hover_bg_class="group-hover:bg-none"
+        testid="next_button"
+      >Next</Pagination.NextButton>
     </Pagination>
     """
   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 4ceeba430..857c441be 100644
--- a/lib/moon_web/examples/design/popover_example/with_close.ex
+++ b/lib/moon_web/examples/design/popover_example/with_close.ex
@@ -74,42 +74,51 @@ defmodule MoonWeb.Examples.Design.PopoverExample.WithClose do
       MediaMegaphone
     }
 
-    ...
+    def render(assigns) do
+      ~F\\\"""
+      <div>
+        <Popover id="popover_id_8">
+          <Popover.Trigger>
+            <Button>Toggle Popover</Button>
+          </Popover.Trigger>
+          <Popover.Panel class="!w-96">
+            <div class="p-6 flex flex-col gap-6">
+              <MenuItem>
+                <span class="flex w-11 h-11 bg-goku items-center justify-center rounded-lg">
+                  <GenericTrophy class="text-bulma text-[1.5rem]" />
+                </span>
+                <Lego.MultiTitle title="Tournaments">
+                  Best tournaments with streamers
+                </Lego.MultiTitle>
+              </MenuItem>
+              <MenuItem>
+                <span class="flex w-11 h-11 bg-goku items-center justify-center">
+                  <MediaMegaphone class="text-bulma text-[1.5rem]" />
+                </span>
+                <Lego.MultiTitle title="Promotions">
+                  Your favourite games
+                </Lego.MultiTitle>
+              </MenuItem>
+              <MenuItem>
+                <span class="flex w-11 h-11 bg-goku items-center justify-center">
+                  <MediaTuner class="text-bulma text-[1.5rem]" />
+                </span>
+                <Lego.MultiTitle title="Providers">
+                  Your favourite games
+                </Lego.MultiTitle>
+              </MenuItem>
+              <Button on_click="set_close" testid="close_popover">Close</Button>
+            </div>
+          </Popover.Panel>
+        </Popover>
+      </div>
+      \\\"""
+    end
 
-    <Popover id="popover_id_8">
-        <Popover.Trigger>
-          <Button>Toggle Popover</Button>
-        </Popover.Trigger>
-        <Popover.Panel class="!w-96">
-          <div class="p-6 flex flex-col gap-6">
-            <MenuItem>
-              <span class="flex w-11 h-11 bg-goku items-center justify-center rounded-lg">
-                <GenericTrophy class="text-bulma text-[1.5rem]" />
-              </span>
-              <Lego.MultiTitle title="Tournaments">
-                Best tournaments with streamers
-              </Lego.MultiTitle>
-            </MenuItem>
-            <MenuItem>
-              <span class="flex w-11 h-11 bg-goku items-center justify-center">
-                <MediaMegaphone class="text-bulma text-[1.5rem]" />
-              </span>
-              <Lego.MultiTitle title="Promotions">
-                Your favourite games
-              </Lego.MultiTitle>
-            </MenuItem>
-            <MenuItem>
-              <span class="flex w-11 h-11 bg-goku items-center justify-center">
-                <MediaTuner class="text-bulma text-[1.5rem]" />
-              </span>
-              <Lego.MultiTitle title="Providers">
-                Your favourite games
-              </Lego.MultiTitle>
-            </MenuItem>
-            <Button close="close_panel">Close</Button>
-          </div>
-        </Popover.Panel>
-      </Popover>
+    def handle_event("set_close", _, socket) do
+      Popover.close("popover_id_8")
+      {:noreply, socket}
+    end
     """
   end
 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/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/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.ex b/test/moon_web/examples/pagination/with_text_test.ex
new file mode 100644
index 000000000..bf28223c6
--- /dev/null
+++ b/test/moon_web/examples/pagination/with_text_test.ex
@@ -0,0 +1,79 @@
+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")
+
+    refute view |> element("#default svg.moon-icon.fill-none.text-moon-24.rtl:rotate-180")
+
+    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.WithIcons")
+
+    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

From 2b1a0afb1301036c735bde9fff2ac4af61b073e9 Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Mon, 7 Aug 2023 17:37:07 +0300
Subject: [PATCH 10/11] snackbar, swithc, table tests

---
 .../examples/design/switch_example/sizes.ex   |  6 +-
 .../{with_text_test.ex => with_text_test.exs} |  4 +-
 .../circular_progress/default_test.exs        |  3 +
 .../progress/linear_progress/default_test.exs |  3 +
 .../examples/snackbar/auto_close_test.exs     | 25 ++++++
 .../customization/border_radius_test.exs      |  5 ++
 .../examples/snackbar/default_test.exs        | 37 +++++++++
 .../snackbar/options/with_close_test.exs      |  5 ++
 .../snackbar/positions/bottom_center_test.exs | 25 ++++++
 .../snackbar/positions/bottom_left_test.exs   | 23 ++++++
 .../snackbar/positions/bottom_right_test.exs  | 25 ++++++
 .../snackbar/positions/top_center_test.exs    | 25 ++++++
 .../snackbar/positions/top_left_test.exs      | 23 ++++++
 .../snackbar/positions/top_right_test.exs     | 25 ++++++
 .../snackbar/semantic_types/success_test.exs  |  5 ++
 .../switch/custom_background_test.exs         |  3 +
 .../moon_web/examples/switch/default_test.exs | 55 +++++++++++++
 .../examples/switch/disabled_test.exs         |  3 +
 test/moon_web/examples/switch/sizes_test.exs  | 81 +++++++++++++++++++
 .../examples/switch/using_with_forms_test.exs |  4 +
 .../examples/switch/with_icons_test.exs       |  3 +
 .../examples/table/checkboxes_test.exs        | 53 ++++++++++++
 .../examples/table/clickable_rows_test.exs    | 29 +++++++
 test/moon_web/examples/table/default_test.exs |  3 +
 .../table/different_row_gaps_test.exs         |  3 +
 .../examples/table/different_row_sizes.exs    |  3 +
 .../moon_web/examples/table/headless_test.exs |  3 +
 .../examples/table/with_cell_borders_test.exs |  3 +
 .../examples/table/zebra_style_test.exs       |  3 +
 .../moon_web/examples/tag/default_example.exs |  3 +
 30 files changed, 485 insertions(+), 6 deletions(-)
 rename test/moon_web/examples/pagination/{with_text_test.ex => with_text_test.exs} (96%)
 create mode 100644 test/moon_web/examples/progress/circular_progress/default_test.exs
 create mode 100644 test/moon_web/examples/progress/linear_progress/default_test.exs
 create mode 100644 test/moon_web/examples/snackbar/auto_close_test.exs
 create mode 100644 test/moon_web/examples/snackbar/customization/border_radius_test.exs
 create mode 100644 test/moon_web/examples/snackbar/default_test.exs
 create mode 100644 test/moon_web/examples/snackbar/options/with_close_test.exs
 create mode 100644 test/moon_web/examples/snackbar/positions/bottom_center_test.exs
 create mode 100644 test/moon_web/examples/snackbar/positions/bottom_left_test.exs
 create mode 100644 test/moon_web/examples/snackbar/positions/bottom_right_test.exs
 create mode 100644 test/moon_web/examples/snackbar/positions/top_center_test.exs
 create mode 100644 test/moon_web/examples/snackbar/positions/top_left_test.exs
 create mode 100644 test/moon_web/examples/snackbar/positions/top_right_test.exs
 create mode 100644 test/moon_web/examples/snackbar/semantic_types/success_test.exs
 create mode 100644 test/moon_web/examples/switch/custom_background_test.exs
 create mode 100644 test/moon_web/examples/switch/default_test.exs
 create mode 100644 test/moon_web/examples/switch/disabled_test.exs
 create mode 100644 test/moon_web/examples/switch/sizes_test.exs
 create mode 100644 test/moon_web/examples/switch/using_with_forms_test.exs
 create mode 100644 test/moon_web/examples/switch/with_icons_test.exs
 create mode 100644 test/moon_web/examples/table/checkboxes_test.exs
 create mode 100644 test/moon_web/examples/table/clickable_rows_test.exs
 create mode 100644 test/moon_web/examples/table/default_test.exs
 create mode 100644 test/moon_web/examples/table/different_row_gaps_test.exs
 create mode 100644 test/moon_web/examples/table/different_row_sizes.exs
 create mode 100644 test/moon_web/examples/table/headless_test.exs
 create mode 100644 test/moon_web/examples/table/with_cell_borders_test.exs
 create mode 100644 test/moon_web/examples/table/zebra_style_test.exs
 create mode 100644 test/moon_web/examples/tag/default_example.exs

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"""
     <div class="w-full flex items-center justify-around">
-      <Switch size="2xs" {=@checked} on_change="toggle_switch" />
-      <Switch size="xs" checked={@checked1} on_change="toggle_switch1" />
-      <Switch {=@checked} on_change="toggle_switch" />
+      <Switch size="2xs" {=@checked} on_change="toggle_switch" testid="2xs" />
+      <Switch size="xs" checked={@checked1} on_change="toggle_switch1" testid="xs" />
+      <Switch {=@checked} on_change="toggle_switch" testid="default" />
     </div>
     """
   end
diff --git a/test/moon_web/examples/pagination/with_text_test.ex b/test/moon_web/examples/pagination/with_text_test.exs
similarity index 96%
rename from test/moon_web/examples/pagination/with_text_test.ex
rename to test/moon_web/examples/pagination/with_text_test.exs
index bf28223c6..a8d1bd1c2 100644
--- a/test/moon_web/examples/pagination/with_text_test.ex
+++ b/test/moon_web/examples/pagination/with_text_test.exs
@@ -4,8 +4,6 @@ defmodule MoonWeb.Examples.Pagination.WithTextTest do
   test "should switch active page to last and disable next arrow", %{conn: conn} do
     {:ok, view, _html} = live(conn, "/example/PaginationExample.WithText")
 
-    refute view |> element("#default svg.moon-icon.fill-none.text-moon-24.rtl:rotate-180")
-
     assert view
            |> element("#default button[data-testid=prev_button][value=0][disabled]")
            |> has_element?()
@@ -42,7 +40,7 @@ defmodule MoonWeb.Examples.Pagination.WithTextTest do
   end
 
   test "should switch active pages with arrows", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/PaginationExample.WithIcons")
+    {:ok, view, _html} = live(conn, "/example/PaginationExample.WithText")
 
     assert view
            |> element("#default button[data-testid=prev_button][value=0][disabled]")
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/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/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/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/tag/default_example.exs b/test/moon_web/examples/tag/default_example.exs
new file mode 100644
index 000000000..1ff9f77e8
--- /dev/null
+++ b/test/moon_web/examples/tag/default_example.exs
@@ -0,0 +1,3 @@
+defmodule MoonWeb.Examples.Tag.DefaultTest do
+  # TODO: add screenshot tests for all examples
+end

From a6eb4a0a493e4447e00f6ddade937f87568b1992 Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Tue, 8 Aug 2023 12:12:08 +0300
Subject: [PATCH 11/11] table and tabs tests

---
 .../moon_web/examples/table/editable_test.exs |  21 ++++
 .../examples/table/responsive_test.exs        |  11 ++
 test/moon_web/examples/table/sorting_test.exs |  47 ++++++++
 .../examples/table/with_paging_test.exs       | 109 ++++++++++++++++++
 test/moon_web/examples/tabs/default_test.exs  |  65 +++++++++++
 test/moon_web/examples/tabs/sizes_test.exs    |  11 ++
 .../examples/tabs/with_pills_test.exs         |  39 +++++++
 .../examples/tabs/with_segments_test.exs      |  39 +++++++
 .../{default_example.exs => default_test.exs} |   0
 .../examples/tooltip/default_test.exs         |   3 +
 10 files changed, 345 insertions(+)
 create mode 100644 test/moon_web/examples/table/editable_test.exs
 create mode 100644 test/moon_web/examples/table/responsive_test.exs
 create mode 100644 test/moon_web/examples/table/sorting_test.exs
 create mode 100644 test/moon_web/examples/table/with_paging_test.exs
 create mode 100644 test/moon_web/examples/tabs/default_test.exs
 create mode 100644 test/moon_web/examples/tabs/sizes_test.exs
 create mode 100644 test/moon_web/examples/tabs/with_pills_test.exs
 create mode 100644 test/moon_web/examples/tabs/with_segments_test.exs
 rename test/moon_web/examples/tag/{default_example.exs => default_test.exs} (100%)
 create mode 100644 test/moon_web/examples/tooltip/default_test.exs

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/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_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/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_example.exs b/test/moon_web/examples/tag/default_test.exs
similarity index 100%
rename from test/moon_web/examples/tag/default_example.exs
rename to test/moon_web/examples/tag/default_test.exs
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