Docs
Advanced
Tests

Testcases

We want to achieve a well tested and functional diy component experience. To test the hooks functionalities and property generators, there is a central set of testcases. The tested implementation consists of a barebones component connected tightly to the underlying hook.

The testcases are defined in such a way that they represent the constraints defined in the combobox specification (opens in a new tab) by wai-aria. We group them by the expected result achieved by several actions; one for each testcase.

The following tests are already implemented:

      • should render chosen values on init ✅
      • should not display popover initially ✅
      • when input is focused ✅
      • when popover button is clicked ✅
      • when ArrowDown is pressed in input ✅
      • when ArrowUp is pressed in input ✅
      • when Enter is pressed in input ✅
      • when Space is pressed in input ✅
      • when pressing escape ✅
      • when clicking outside ✅
      • when delete button is clicked ✅
      • when backspace is clicked in empty input ✅
      • when active value is deleted with backspace ✅
      • only when query is empty ✅
      • when arrow down key is pressed ✅
      • when arrow up key is pressed ✅
      • when option is hovered ✅
      • looping forwards/arrow down ✅
      • looping backwards/arrow up ✅
      • pressing home and end to jump to the end ✅
      • when option is clicked ✅
      • when enter is pressed on active option ✅
      • when arrow left is pressed ✅
      • when arrow right is pressed ✅
      • when arrow right is pressed on last value go to input ✅
      • when typing in input ✅
      • when matching multiple ✅
      • when typing in input with case sensitivity ✅
      • when typing something not in the options ✅
      • should focus input when clicking on wrapper ✅
      • should not submit form when pressing enter in open popover ✅
      • should have initial a11y props ✅
      • should return true if the query is a substring of the option ✅
      • should return true if the query is a case insensitive substring ✅
      • should return false if the query is not a substring of the option ✅
      • should return true if the query is a substring of the options value ✅
      • should return false if the query is not a substring of the options value ✅
      • should return true if the mapper returns the same value for both options ✅
      • should return false if the mapper returns different values for both options ✅
      • should return true if the mapper returns the same value for both options ✅
      • should return false if the mapper returns different values for both options ✅
    • RolesFAQ