chore: example tests, part1

* tests initiated * fix: initiating example tests * formattings fix * trigger elements tests and structure * all the examples test * dropdown tests + accordion tests started * fixing some existing tests, adding new * fixes and additions * pagination, carousel, breadcrumb tests * snackbar, swithc, table tests * table and tabs tests --------- Co-authored-by: Triin Kullisaar <[email protected]>
coingaming · Aug 17, 2023 · 8de017c · 8de017c
1 parent f26bc3b
commit 8de017c
Show file tree

Hide file tree

Showing 148 changed files with 3,103 additions and 86 deletions.
diff --git 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
diff --git a/lib/moon/design/accordion/header.ex b/lib/moon/design/accordion/header.ex
@@ -30,6 +30,8 @@ defmodule Moon.Design.Accordion.Header do
         data-testid={@testid}
         type="button"
         aria-expanded={"#{@is_open}"}
+        is-content-outside={"#{@is_content_outside}"}
+        size={"#{@size}"}
         :on-click={@on_change}
         {=@value}
         {=@disabled}

diff --git a/lib/moon/design/dropdown/bottom_options.ex b/lib/moon/design/dropdown/bottom_options.ex
@@ -53,6 +53,7 @@ defmodule Moon.Design.Dropdown.BottomOptions do
       {=@id}
       data-testid={@testid}
       :on-click-away={@on_close}
+      role="listbox"
     >
       {#if slot_assigned?(:option)}
         {#for {option, index} <- Enum.with_index(make_list(@option))}

diff --git a/lib/moon/design/dropdown/options.ex b/lib/moon/design/dropdown/options.ex
@@ -44,6 +44,7 @@ defmodule Moon.Design.Dropdown.Options do
       ])}
       {=@id}
       data-testid={@testid}
+      role="listbox"
     >
       {#if slot_assigned?(:option)}
         {#for {option, index} <- Enum.with_index(make_list(@option))}

diff --git a/lib/moon/design/pagination/pages.ex b/lib/moon/design/pagination/pages.ex
@@ -97,7 +97,7 @@ defmodule Moon.Design.Pagination.Pages do
           ])}
           :on-click={@on_change}
           value={page}
-          aria-label={"page #{page}"}
+          aria-label={"page_#{page}"}
           tabindex={0}
         >
           {page}

diff --git a/lib/moon/design/popover.ex b/lib/moon/design/popover.ex
@@ -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/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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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
@@ -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/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
@@ -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