chore: tests for highlightFirstOnOpen flag

brnrdog · Jul 4, 2022 · a885d50 · a885d50
1 parent 7aedcb1
commit a885d50
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 21 deletions.
diff --git a/tests/DropdownTest.bs.js b/tests/DropdownTest.bs.js
diff --git a/tests/DropdownTest.res b/tests/DropdownTest.res
@@ -2,19 +2,21 @@ open ReactTestingLibrary
 open Jest
 include TestUtils
 
+@send external focus: Dom.element => unit = "focus"
+
 module DropdownListboxComponent = {
   let options = ["Red", "Green", "Blue"]
 
   @react.component
-  let make = (~multiSelect=false) => {
+  let make = (~multiSelect=false, ~highlightFirstOnOpen=false) => {
     let {
       highlightedIndex,
       menuVisible,
       selectedIndexes,
       getOptionProps,
       getDropdownProps,
       getContainerProps,
-    } = Listboxkit.useDropdownListbox(options, ~multiSelect, ())
+    } = Listboxkit.useDropdownListbox(options, ~multiSelect, ~highlightFirstOnOpen, ())
 
     let {role, tabIndex, onKeyDown, onFocus} = getContainerProps()
 
@@ -25,7 +27,6 @@ module DropdownListboxComponent = {
       ->Belt.Array.joinWith(", ", s => Belt.Option.getUnsafe(s))
       ->String.trim
       ->React.string
-
     <div>
       <button
         role=dropdownProps.role
@@ -52,7 +53,8 @@ module DropdownListboxComponent = {
   }
 }
 
-let component = (~multiSelect=false, ()) => <DropdownListboxComponent multiSelect />
+let component = (~multiSelect=false, ~highlightFirstOnOpen=false, ()) =>
+  <DropdownListboxComponent multiSelect highlightFirstOnOpen />
 
 test("select option when clicked", () => {
   let component = component() |> render
@@ -99,3 +101,34 @@ test("hide listbox when focusing out from listbox", () => {
   screen->getByText(~matcher=#Str("Focus out"))->FireEvent.click
   screen->queryAllByRole(~matcher=#Str("listbox"))->Array.length->Expect.expect->toEqual(0)
 })
+
+test("highlight first option on open with keyboard down when highlightFirstOnOpen is true", () => {
+  let component = <DropdownListboxComponent highlightFirstOnOpen=true /> |> render
+  component->getByRole(~matcher=#Str("combobox"))->focus
+  FireEvent.pressKeyboardDown()
+  component->getOption("* Red")->expect->toBeVisible
+})
+test("highlight first option on open with keyboard enter when highlightFirstOnOpen is true", () => {
+  let component = <DropdownListboxComponent highlightFirstOnOpen=true /> |> render
+  component->getByRole(~matcher=#Str("combobox"))->focus
+  FireEvent.pressKeyboardEnter()
+  component->getOption("* Red")->expect->toBeVisible
+})
+test("highlight first option on open with keyboard up when highlightFirstOnOpen is true", () => {
+  let component = <DropdownListboxComponent highlightFirstOnOpen=true /> |> render
+  component->getByRole(~matcher=#Str("combobox"))->focus
+  FireEvent.pressKeyboardUp()
+  component->getOption("* Red")->expect->toBeVisible
+})
+test("highlight first option on open with keyboard space when highlightFirstOnOpen is true", () => {
+  let component = <DropdownListboxComponent highlightFirstOnOpen=true /> |> render
+  component->getByRole(~matcher=#Str("combobox"))->focus
+  FireEvent.pressKeyboardSpace()
+  component->getOption("* Red")->expect->toBeVisible
+})
+
+test("highlight first option on open with click when highlightFirstOnOpen is true", () => {
+  let component = <DropdownListboxComponent highlightFirstOnOpen=true /> |> render
+  component->getByRole(~matcher=#Str("combobox"))->FireEvent.click
+  component->getOption("* Red")->expect->toBeVisible
+})
diff --git a/tests/TestUtils.bs.js b/tests/TestUtils.bs.js
diff --git a/tests/TestUtils.res b/tests/TestUtils.res
@@ -16,16 +16,21 @@ module FireEvent = {
     let upShift = "{shift}{arrowUp}"
   }
 
-  let pressDown      = e => e->ReactTestingLibrary.UserEvent.type_(Keyboard.down)
+  let pressKeyboardDown = () => keyboard(Keyboard.down)
+  let pressKeyboardUp = () => keyboard(Keyboard.up)
+  let pressKeyboardEnter = () => keyboard(Keyboard.enter)
+  let pressKeyboardSpace = () => keyboard(Keyboard.space)
+
+  let pressDown = e => e->type_(Keyboard.down)
   let pressDownShift = e => e->type_(Keyboard.downShift)
-  let pressEnd       = e => e->type_(Keyboard.end)
-  let pressEnter     = e => e->type_(Keyboard.enter)
-  let pressEsc       = e => e->type_(Keyboard.esc)
-  let pressHome      = e => e->type_(Keyboard.home)
-  let pressSpace     = e => e->type_(Keyboard.space)
-  let pressTab       = e => e->type_(Keyboard.tab)
-  let pressUp        = e => e->type_(Keyboard.up)
-  let pressUpShift   = e => e->type_(Keyboard.upShift)
+  let pressEnd = e => e->type_(Keyboard.end)
+  let pressEnter = e => e->type_(Keyboard.enter)
+  let pressEsc = e => e->type_(Keyboard.esc)
+  let pressHome = e => e->type_(Keyboard.home)
+  let pressSpace = e => e->type_(Keyboard.space)
+  let pressTab = e => e->type_(Keyboard.tab)
+  let pressUp = e => e->type_(Keyboard.up)
+  let pressUpShift = e => e->type_(Keyboard.upShift)
 
   let click = e => e->click
   // Not implemented