2018-10-14 17:00:46 +02:00
describe ( 'Choices - select multiple' , ( ) = > {
2018-10-13 17:38:51 +02:00
beforeEach ( ( ) = > {
2021-12-25 21:29:31 +01:00
cy . visit ( '/select-multiple' , {
onBeforeLoad ( win ) {
cy . stub ( win . console , 'warn' ) . as ( 'consoleWarn' ) ;
} ,
} ) ;
2018-10-13 17:38:51 +02:00
} ) ;
2018-10-27 17:25:46 +02:00
describe ( 'scenarios' , ( ) = > {
describe ( 'basic setup' , ( ) = > {
2018-10-17 23:36:37 +02:00
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
} ) ;
2018-10-13 17:38:51 +02:00
2018-10-28 10:32:35 +01:00
describe ( 'focusing on text input' , ( ) = > {
it ( 'displays a dropdown of choices' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. should ( 'have.length' , 4 )
. each ( ( $choice , index ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( ` Choice ${ index + 1 } ` ) ;
} ) ;
} ) ;
2018-10-13 17:38:51 +02:00
2018-10-28 10:32:35 +01:00
describe ( 'pressing escape' , ( ) = > {
beforeEach ( ( ) = > {
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
2018-10-28 10:32:35 +01:00
. find ( '.choices__input--cloned' )
. type ( '{esc}' ) ;
} ) ;
2018-10-13 17:38:51 +02:00
2018-10-28 10:32:35 +01:00
it ( 'closes the dropdown' , ( ) = > {
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
2018-10-28 10:32:35 +01:00
. find ( '.choices__list--dropdown' )
. should ( 'not.be.visible' ) ;
2018-10-13 17:38:51 +02:00
} ) ;
2018-10-28 10:32:35 +01:00
describe ( 'typing more into the input' , ( ) = > {
it ( 're-opens the dropdown' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( 'test' ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' ) ;
} ) ;
} ) ;
} ) ;
} ) ;
describe ( 'selecting choices' , ( ) = > {
describe ( 'selecting a single choice' , ( ) = > {
let selectedChoiceText ;
beforeEach ( ( ) = > {
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. then ( ( $choice ) = > {
2018-10-28 10:32:35 +01:00
selectedChoiceText = $choice . text ( ) . trim ( ) ;
} )
2018-10-13 17:38:51 +02:00
. click ( ) ;
2018-10-28 10:32:35 +01:00
} ) ;
2018-10-13 17:38:51 +02:00
2019-02-22 23:04:55 +01:00
it ( 'allows selecting choices from dropdown' , ( ) = > {
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-17 22:26:52 +01:00
. should ( ( $item ) = > {
2018-10-13 17:38:51 +02:00
expect ( $item ) . to . contain ( selectedChoiceText ) ;
} ) ;
} ) ;
2018-10-28 10:32:35 +01:00
it ( 'updates the value of the original input' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
2019-10-24 19:09:44 +02:00
. find ( '.choices__input[hidden]' )
2021-12-17 22:26:52 +01:00
. should ( ( $select ) = > {
2018-10-28 10:32:35 +01:00
expect ( $select . val ( ) ) . to . contain ( selectedChoiceText ) ;
} ) ;
2018-10-13 17:38:51 +02:00
} ) ;
2018-10-14 17:00:46 +02:00
it ( 'removes selected choice from dropdown list' , ( ) = > {
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
2021-12-17 22:26:52 +01:00
. each ( ( $choice ) = > {
2018-10-13 17:38:51 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . not . equal ( selectedChoiceText ) ;
} ) ;
} ) ;
2018-10-28 10:32:35 +01:00
} ) ;
2018-10-13 17:38:51 +02:00
2018-10-28 10:32:35 +01:00
describe ( 'selecting all available choices' , ( ) = > {
beforeEach ( ( ) = > {
for ( let index = 0 ; index <= 4 ; index ++ ) {
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
2018-10-28 10:32:35 +01:00
. focus ( ) ;
2018-10-13 17:38:51 +02:00
cy . get ( '[data-test-hook=basic]' )
2018-10-28 10:32:35 +01:00
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
. click ( ) ;
}
} ) ;
2018-10-13 17:38:51 +02:00
2018-10-28 10:32:35 +01:00
it ( 'displays "no choices to choose" prompt' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' )
2021-12-17 22:26:52 +01:00
. should ( ( $dropdown ) = > {
2018-10-28 10:32:35 +01:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal ( 'No choices to choose from' ) ;
2018-10-13 17:38:51 +02:00
} ) ;
} ) ;
} ) ;
} ) ;
describe ( 'removing choices' , ( ) = > {
2018-10-28 10:32:35 +01:00
let removedChoiceText ;
2018-10-13 17:38:51 +02:00
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. last ( )
2021-12-17 22:26:52 +01:00
. then ( ( $choice ) = > {
2018-10-28 10:32:35 +01:00
removedChoiceText = $choice . text ( ) . trim ( ) ;
} )
2018-10-13 17:38:51 +02:00
. click ( ) ;
2018-10-28 10:32:35 +01:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( '{backspace}' ) ;
2018-10-13 17:38:51 +02:00
} ) ;
2018-10-17 23:36:37 +02:00
describe ( 'on backspace' , ( ) = > {
2018-10-13 17:38:51 +02:00
it ( 'removes last choice' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--multiple' )
. children ( )
. should ( 'have.length' , 0 ) ;
} ) ;
2018-10-28 10:32:35 +01:00
it ( 'updates the value of the original input' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
2019-10-24 19:09:44 +02:00
. find ( '.choices__input[hidden]' )
2021-12-17 22:26:52 +01:00
. should ( ( $select ) = > {
2018-10-28 10:32:35 +01:00
const val = $select . val ( ) || [ ] ;
expect ( val ) . to . not . contain ( removedChoiceText ) ;
} ) ;
} ) ;
2018-10-13 17:38:51 +02:00
} ) ;
2018-10-17 23:36:37 +02:00
} ) ;
2018-10-13 17:38:51 +02:00
2018-10-17 23:36:37 +02:00
describe ( 'searching choices' , ( ) = > {
describe ( 'on input' , ( ) = > {
describe ( 'searching by label' , ( ) = > {
2018-10-18 00:13:24 +02:00
it ( 'displays choices filtered by inputted value' , ( ) = > {
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( 'item 2' ) ;
2018-10-13 17:38:51 +02:00
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-27 22:00:49 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 2' ) ;
2018-10-17 23:36:37 +02:00
} ) ;
} ) ;
2018-10-13 17:38:51 +02:00
} ) ;
2018-10-17 23:36:37 +02:00
describe ( 'searching by value' , ( ) = > {
2018-10-18 00:13:24 +02:00
it ( 'displays choices filtered by inputted value' , ( ) = > {
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( 'find me' ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-27 22:00:49 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 3' ) ;
2018-10-17 23:36:37 +02:00
} ) ;
} ) ;
} ) ;
describe ( 'no results found' , ( ) = > {
it ( 'displays "no results found" prompt' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( 'faergge' ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' )
2021-12-17 22:26:52 +01:00
. should ( ( $dropdown ) = > {
2018-10-17 23:36:37 +02:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal ( 'No results found' ) ;
} ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-11-03 13:26:02 +01:00
2018-11-09 09:38:12 +01:00
describe ( 'disabling' , ( ) = > {
describe ( 'on disable' , ( ) = > {
it ( 'disables the search input' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( 'button.disable' )
. focus ( )
. click ( ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. should ( 'be.disabled' ) ;
} ) ;
} ) ;
} ) ;
describe ( 'enabling' , ( ) = > {
describe ( 'on enable' , ( ) = > {
it ( 'enables the search input' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( 'button.enable' )
. focus ( )
. click ( ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. should ( 'not.be.disabled' ) ;
} ) ;
} ) ;
2018-11-03 13:26:02 +01:00
} ) ;
2018-10-17 23:36:37 +02:00
} ) ;
describe ( 'remove button' , ( ) = > {
2018-10-18 00:13:24 +02:00
/ *
{
removeItemButton : true ,
} ;
* /
2018-10-17 23:36:37 +02:00
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. last ( )
. click ( ) ;
} ) ;
describe ( 'on click' , ( ) = > {
it ( 'removes respective choice' , ( ) = > {
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
. find ( '.choices__button' )
. focus ( )
. click ( ) ;
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--multiple' )
. children ( )
. should ( 'have.length' , 0 ) ;
2018-10-13 17:38:51 +02:00
} ) ;
} ) ;
} ) ;
describe ( 'disabled choice' , ( ) = > {
describe ( 'selecting a disabled choice' , ( ) = > {
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=disabled-choice]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
cy . get ( '[data-test-hook=disabled-choice]' )
. find ( '.choices__list--dropdown .choices__item--disabled' )
. click ( ) ;
} ) ;
it ( 'does not select choice' , ( ) = > {
cy . get ( '[data-test-hook=disabled-choice]' )
. find ( '.choices__list--multiple .choices__item' )
. should ( 'have.length' , 0 ) ;
} ) ;
it ( 'keeps choice dropdown open' , ( ) = > {
cy . get ( '[data-test-hook=disabled-choice]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' ) ;
} ) ;
} ) ;
} ) ;
2018-10-14 17:00:46 +02:00
2018-10-21 20:26:19 +02:00
describe ( 'adding items disabled' , ( ) = > {
/ *
{
addItems : false ,
}
* /
it ( 'disables the search input' , ( ) = > {
cy . get ( '[data-test-hook=add-items-disabled]' )
. find ( '.choices__input--cloned' )
. should ( 'be.disabled' ) ;
} ) ;
describe ( 'on click' , ( ) = > {
2018-10-30 21:28:40 +01:00
it ( 'does not open choice dropdown' , ( ) = > {
2018-10-30 22:21:11 +01:00
cy . get ( '[data-test-hook=add-items-disabled]' )
. find ( '.choices' )
2018-10-30 22:33:35 +01:00
. click ( )
2018-10-21 20:26:19 +02:00
. find ( '.choices__list--dropdown' )
2018-10-30 22:44:58 +01:00
. should ( 'not.have.class' , 'is-active' ) ;
2018-10-21 20:26:19 +02:00
} ) ;
} ) ;
} ) ;
2018-10-30 21:21:52 +01:00
describe ( 'disabled via attribute' , ( ) = > {
it ( 'disables the search input' , ( ) = > {
cy . get ( '[data-test-hook=disabled-via-attr]' )
. find ( '.choices__input--cloned' )
. should ( 'be.disabled' ) ;
} ) ;
describe ( 'on click' , ( ) = > {
2019-10-21 22:43:38 +02:00
it ( 'does not open choice dropdown' , ( ) = > {
2018-10-30 22:21:11 +01:00
cy . get ( '[data-test-hook=disabled-via-attr]' )
. find ( '.choices' )
2018-10-30 22:33:35 +01:00
. click ( )
2018-10-30 21:21:52 +01:00
. find ( '.choices__list--dropdown' )
2018-10-30 22:44:58 +01:00
. should ( 'not.have.class' , 'is-active' ) ;
2018-10-30 21:21:52 +01:00
} ) ;
} ) ;
} ) ;
2018-10-14 17:00:46 +02:00
describe ( 'selection limit' , ( ) = > {
2018-10-18 00:13:24 +02:00
/ *
2021-12-17 22:26:52 +01:00
{
maxItemCount : 5 ,
}
* /
2018-10-14 17:00:46 +02:00
const selectionLimit = 5 ;
beforeEach ( ( ) = > {
for ( let index = 0 ; index < selectionLimit ; index ++ ) {
cy . get ( '[data-test-hook=selection-limit]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
cy . get ( '[data-test-hook=selection-limit]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
. click ( ) ;
}
} ) ;
2018-10-17 23:36:37 +02:00
it ( 'displays "limit reached" prompt' , ( ) = > {
2018-10-14 17:00:46 +02:00
cy . get ( '[data-test-hook=selection-limit]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' )
2021-12-17 22:26:52 +01:00
. should ( ( $dropdown ) = > {
2018-10-14 17:00:46 +02:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal (
` Only ${ selectionLimit } values can be added ` ,
) ;
} ) ;
} ) ;
} ) ;
describe ( 'prepend/append' , ( ) = > {
2018-10-18 00:13:24 +02:00
/ *
{
prependValue : 'before-' ,
appendValue : '-after' ,
2018-10-21 20:26:19 +02:00
}
2018-10-18 00:13:24 +02:00
* /
2018-10-14 17:00:46 +02:00
let selectedChoiceText ;
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=prepend-append]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
cy . get ( '[data-test-hook=prepend-append]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. last ( )
2021-12-17 22:26:52 +01:00
. then ( ( $choice ) = > {
2018-10-14 17:00:46 +02:00
selectedChoiceText = $choice . text ( ) . trim ( ) ;
} )
. click ( ) ;
} ) ;
it ( 'prepends and appends value to inputted value' , ( ) = > {
cy . get ( '[data-test-hook=prepend-append]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-14 17:00:46 +02:00
expect ( $choice . data ( 'value' ) ) . to . equal (
` before- ${ selectedChoiceText } -after ` ,
) ;
} ) ;
} ) ;
it ( 'displays just the inputted value to the user' , ( ) = > {
cy . get ( '[data-test-hook=prepend-append]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-14 17:00:46 +02:00
expect ( $choice . text ( ) ) . to . not . contain (
` before- ${ selectedChoiceText } -after ` ,
) ;
expect ( $choice . text ( ) ) . to . contain ( selectedChoiceText ) ;
} ) ;
} ) ;
} ) ;
2018-10-17 23:36:37 +02:00
2018-10-18 00:13:24 +02:00
describe ( 'render choice limit' , ( ) = > {
/ *
{
renderChoiceLimit : 1 ,
2018-10-21 20:26:19 +02:00
}
2018-10-18 00:13:24 +02:00
* /
it ( 'only displays given number of choices in the dropdown' , ( ) = > {
cy . get ( '[data-test-hook=render-choice-limit]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. should ( 'have.length' , 1 ) ;
} ) ;
} ) ;
describe ( 'search floor' , ( ) = > {
/ *
{
searchFloor : 10 ,
2018-10-21 20:26:19 +02:00
}
2018-10-18 00:13:24 +02:00
* /
describe ( 'on input' , ( ) = > {
describe ( 'search floor not reached' , ( ) = > {
it ( 'displays choices not filtered by inputted value' , ( ) = > {
const searchTerm = 'item 2' ;
cy . get ( '[data-test-hook=search-floor]' )
. find ( '.choices__input--cloned' )
. type ( searchTerm ) ;
cy . get ( '[data-test-hook=search-floor]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-18 00:13:24 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . not . contain ( searchTerm ) ;
} ) ;
} ) ;
} ) ;
describe ( 'search floor reached' , ( ) = > {
it ( 'displays choices filtered by inputted value' , ( ) = > {
2018-10-27 22:00:49 +02:00
const searchTerm = 'Choice 2' ;
2018-10-18 00:13:24 +02:00
cy . get ( '[data-test-hook=search-floor]' )
. find ( '.choices__input--cloned' )
. type ( searchTerm ) ;
cy . get ( '[data-test-hook=search-floor]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-18 00:13:24 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . contain ( searchTerm ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-10-17 23:36:37 +02:00
} ) ;
2018-10-18 23:18:17 +02:00
2019-11-02 14:49:33 +01:00
describe ( 'placeholder via empty option value' , ( ) = > {
describe ( 'when no value has been inputted' , ( ) = > {
it ( 'displays a placeholder' , ( ) = > {
cy . get ( '[data-test-hook=placeholder-via-option-value]' )
. find ( '.choices__input--cloned' )
. should ( 'have.attr' , 'placeholder' , 'I am a placeholder' ) ;
} ) ;
} ) ;
describe ( 'when a value has been inputted' , ( ) = > {
it ( 'does not display a placeholder' , ( ) = > {
cy . get ( '[data-test-hook=placeholder-via-option-value]' )
. find ( '.choices__input--cloned' )
. type ( 'test' )
. should ( 'not.have.value' , 'I am a placeholder' ) ;
} ) ;
} ) ;
} ) ;
describe ( 'placeholder via option attribute' , ( ) = > {
2018-10-18 23:18:17 +02:00
describe ( 'when no value has been inputted' , ( ) = > {
it ( 'displays a placeholder' , ( ) = > {
2019-11-02 14:49:33 +01:00
cy . get ( '[data-test-hook=placeholder-via-option-attr]' )
2018-10-18 23:18:17 +02:00
. find ( '.choices__input--cloned' )
. should ( 'have.attr' , 'placeholder' , 'I am a placeholder' ) ;
} ) ;
} ) ;
2019-11-02 14:49:33 +01:00
describe ( 'when a value has been inputted' , ( ) = > {
it ( 'does not display a placeholder' , ( ) = > {
cy . get ( '[data-test-hook=placeholder-via-option-attr]' )
. find ( '.choices__input--cloned' )
. type ( 'test' )
. should ( 'not.have.value' , 'I am a placeholder' ) ;
} ) ;
} ) ;
2018-10-18 23:18:17 +02:00
} ) ;
2018-10-20 14:32:58 +02:00
describe ( 'remote data' , ( ) = > {
beforeEach ( ( ) = > {
cy . reload ( true ) ;
} ) ;
describe ( 'when loading data' , ( ) = > {
it ( 'shows a loading message as a placeholder' , ( ) = > {
cy . get ( '[data-test-hook=remote-data]' )
. find ( '.choices__input--cloned' )
. should ( 'have.attr' , 'placeholder' , 'Loading...' ) ;
} ) ;
2018-11-03 14:24:52 +01:00
describe ( 'on click' , ( ) = > {
2019-10-21 22:43:38 +02:00
it ( 'does not open choice dropdown' , ( ) = > {
2018-10-20 14:32:58 +02:00
cy . get ( '[data-test-hook=remote-data]' )
2018-11-03 14:24:52 +01:00
. find ( '.choices' )
. click ( )
2018-10-20 14:32:58 +02:00
. find ( '.choices__list--dropdown' )
2018-11-03 14:24:52 +01:00
. should ( 'not.have.class' , 'is-active' ) ;
2018-10-20 14:32:58 +02:00
} ) ;
} ) ;
} ) ;
describe ( 'when data has loaded' , ( ) = > {
describe ( 'opening the dropdown' , ( ) = > {
it ( 'displays the loaded data' , ( ) = > {
2018-11-03 13:26:02 +01:00
cy . wait ( 1000 ) ;
2018-10-20 14:32:58 +02:00
cy . get ( '[data-test-hook=remote-data]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. should ( 'have.length' , 50 )
. each ( ( $choice , index ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( ` Label ${ index + 1 } ` ) ;
expect ( $choice . data ( 'value' ) ) . to . equal ( ` Value ${ index + 1 } ` ) ;
} ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-10-27 17:25:46 +02:00
describe ( 'dropdown scrolling' , ( ) = > {
2021-12-19 04:36:40 +01:00
let choicesCount ;
2018-10-27 17:25:46 +02:00
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__list--dropdown .choices__list .choices__item' )
2021-12-17 22:26:52 +01:00
. then ( ( $choices ) = > {
2018-10-27 17:25:46 +02:00
choicesCount = $choices . length ;
} ) ;
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
} ) ;
it ( 'highlights first choice on dropdown open' , ( ) = > {
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__list--dropdown .choices__list .is-highlighted' )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-10-27 22:00:49 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 1' ) ;
2018-10-27 17:25:46 +02:00
} ) ;
} ) ;
it ( 'scrolls to next choice on down arrow' , ( ) = > {
2021-12-19 04:36:40 +01:00
for ( let index = 1 ; index <= choicesCount ; index ++ ) {
2019-10-21 22:43:38 +02:00
cy . wait ( 100 ) ;
2018-10-27 17:25:46 +02:00
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__list--dropdown .choices__list .is-highlighted' )
2021-12-19 04:36:40 +01:00
. invoke ( 'text' )
. then ( ( text ) = > {
expect ( text . trim ( ) ) . to . equal ( ` Choice ${ index } ` ) ;
2018-10-27 17:25:46 +02:00
} ) ;
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__input--cloned' )
. type ( '{downarrow}' ) ;
}
} ) ;
it ( 'scrolls up to previous choice on up arrow' , ( ) = > {
// scroll to last choice
for ( let index = 0 ; index < choicesCount ; index ++ ) {
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__input--cloned' )
. type ( '{downarrow}' ) ;
}
// scroll up to first choice
for ( let index = choicesCount ; index > 0 ; index -- ) {
cy . wait ( 100 ) ; // allow for dropdown animation to finish
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__list--dropdown .choices__list .is-highlighted' )
2021-12-19 04:36:40 +01:00
. invoke ( 'text' )
. then ( ( text ) = > {
expect ( text . trim ( ) ) . to . equal ( ` Choice ${ index } ` ) ;
2018-10-27 17:25:46 +02:00
} ) ;
cy . get ( '[data-test-hook=scrolling-dropdown]' )
. find ( '.choices__input--cloned' )
. type ( '{uparrow}' ) ;
}
} ) ;
} ) ;
2018-10-27 19:12:15 +02:00
describe ( 'choice groups' , ( ) = > {
const choicesInGroup = 3 ;
let groupValue ;
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__list--dropdown .choices__list .choices__group' )
. first ( )
2021-12-17 22:26:52 +01:00
. then ( ( $group ) = > {
2018-10-27 19:12:15 +02:00
groupValue = $group . text ( ) . trim ( ) ;
} ) ;
} ) ;
describe ( 'selecting all choices in group' , ( ) = > {
it ( 'removes group from dropdown' , ( ) = > {
for ( let index = 0 ; index < choicesInGroup ; index ++ ) {
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__list--dropdown .choices__list .choices__item' )
. first ( )
. click ( ) ;
}
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__list--dropdown .choices__list .choices__group' )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $group ) = > {
2018-10-27 19:12:15 +02:00
expect ( $group . text ( ) . trim ( ) ) . to . not . equal ( groupValue ) ;
} ) ;
} ) ;
} ) ;
describe ( 'deselecting all choices in group' , ( ) = > {
beforeEach ( ( ) = > {
for ( let index = 0 ; index < choicesInGroup ; index ++ ) {
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__list--dropdown .choices__list .choices__item' )
. first ( )
. click ( ) ;
}
} ) ;
it ( 'shows group in dropdown' , ( ) = > {
for ( let index = 0 ; index < choicesInGroup ; index ++ ) {
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__input--cloned' )
. focus ( )
. type ( '{backspace}' ) ;
}
cy . get ( '[data-test-hook=groups]' )
. find ( '.choices__list--dropdown .choices__list .choices__group' )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $group ) = > {
2018-10-27 19:12:15 +02:00
expect ( $group . text ( ) . trim ( ) ) . to . equal ( groupValue ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-11-03 13:00:37 +01:00
describe ( 'custom properties' , ( ) = > {
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=custom-properties]' )
. find ( '.choices__input--cloned' )
. focus ( ) ;
} ) ;
describe ( 'on input' , ( ) = > {
it ( 'filters choices based on custom property' , ( ) = > {
const data = [
{
country : 'Germany' ,
city : 'Berlin' ,
} ,
{
country : 'United Kingdom' ,
city : 'London' ,
} ,
{
country : 'Portugal' ,
city : 'Lisbon' ,
} ,
] ;
data . forEach ( ( { country , city } ) = > {
cy . get ( '[data-test-hook=custom-properties]' )
. find ( '.choices__input--cloned' )
. type ( country ) ;
cy . get ( '[data-test-hook=custom-properties]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-11-03 13:00:37 +01:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( city ) ;
} ) ;
cy . get ( '[data-test-hook=custom-properties]' )
. find ( '.choices__input--cloned' )
. type ( '{selectall}{del}' ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-11-24 18:48:03 +01:00
2019-02-22 23:04:55 +01:00
describe ( 'non-string values' , ( ) = > {
beforeEach ( ( ) = > {
2021-12-17 22:26:52 +01:00
cy . get ( '[data-test-hook=non-string-values]' ) . find ( '.choices' ) . click ( ) ;
2019-02-22 23:04:55 +01:00
} ) ;
it ( 'displays expected amount of choices in dropdown' , ( ) = > {
cy . get ( '[data-test-hook=non-string-values]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. should ( 'have.length' , 4 ) ;
} ) ;
it ( 'allows selecting choices from dropdown' , ( ) = > {
let $selectedChoice ;
cy . get ( '[data-test-hook=non-string-values]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. then ( ( $choice ) = > {
2019-02-22 23:04:55 +01:00
$selectedChoice = $choice ;
} )
. click ( ) ;
cy . get ( '[data-test-hook=non-string-values]' )
. find ( '.choices__list--single .choices__item' )
. last ( )
2021-12-17 22:26:52 +01:00
. should ( ( $item ) = > {
2019-02-22 23:04:55 +01:00
expect ( $item . text ( ) . trim ( ) ) . to . equal ( $selectedChoice . text ( ) . trim ( ) ) ;
} ) ;
} ) ;
} ) ;
2018-11-24 18:48:03 +01:00
describe ( 'within form' , ( ) = > {
describe ( 'selecting choice' , ( ) = > {
describe ( 'on enter key' , ( ) = > {
2019-10-22 18:08:43 +02:00
it ( 'selects choice' , ( ) = > {
2021-12-17 22:26:52 +01:00
cy . get ( '[data-test-hook=within-form] form' ) . then ( ( $form ) = > {
2018-11-24 18:48:03 +01:00
$form . submit ( ( ) = > {
// this will fail the test if the form submits
throw new Error ( 'Form submitted' ) ;
} ) ;
} ) ;
cy . get ( '[data-test-hook=within-form]' )
. find ( '.choices__input--cloned' )
2019-10-22 18:08:43 +02:00
. click ( )
2018-11-24 18:48:03 +01:00
. type ( '{enter}' ) ;
cy . get ( '[data-test-hook=within-form]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-17 22:26:52 +01:00
. should ( ( $item ) = > {
2018-11-24 18:48:03 +01:00
expect ( $item ) . to . contain ( 'Choice 1' ) ;
} ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-11-25 13:48:49 +01:00
describe ( 'dynamically setting choice by value' , ( ) = > {
const dynamicallySelectedChoiceValue = 'Choice 2' ;
it ( 'selects choice' , ( ) = > {
cy . get ( '[data-test-hook=set-choice-by-value]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2018-11-25 13:48:49 +01:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal (
dynamicallySelectedChoiceValue ,
) ;
} ) ;
} ) ;
it ( 'removes choice from dropdown list' , ( ) = > {
cy . get ( '[data-test-hook=set-choice-by-value]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
2021-12-17 22:26:52 +01:00
. each ( ( $choice ) = > {
2018-11-25 13:48:49 +01:00
expect ( $choice . text ( ) . trim ( ) ) . to . not . equal (
dynamicallySelectedChoiceValue ,
) ;
} ) ;
} ) ;
it ( 'updates the value of the original input' , ( ) = > {
cy . get ( '[data-test-hook=set-choice-by-value]' )
2019-10-24 19:09:44 +02:00
. find ( '.choices__input[hidden]' )
2021-12-17 22:26:52 +01:00
. should ( ( $select ) = > {
2018-11-25 13:48:49 +01:00
const val = $select . val ( ) || [ ] ;
expect ( val ) . to . contain ( dynamicallySelectedChoiceValue ) ;
} ) ;
} ) ;
} ) ;
2019-01-19 15:47:22 +01:00
describe ( 'searching by label only' , ( ) = > {
it ( 'gets zero results when searching by value' , ( ) = > {
cy . get ( '[data-test-hook=search-by-label]' )
. find ( '.choices__input--cloned' )
. type ( 'value1' ) ;
cy . get ( '[data-test-hook=search-by-label]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2019-01-19 15:47:22 +01:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'No results found' ) ;
} ) ;
} ) ;
it ( 'gets a result when searching by label' , ( ) = > {
cy . get ( '[data-test-hook=search-by-label]' )
. find ( '.choices__input--cloned' )
. type ( 'label1' ) ;
cy . get ( '[data-test-hook=search-by-label]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
2021-12-17 22:26:52 +01:00
. should ( ( $choice ) = > {
2019-01-19 15:47:22 +01:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'label1' ) ;
} ) ;
} ) ;
} ) ;
2021-12-25 21:29:31 +01:00
describe ( 'allow html' , ( ) = > {
describe ( 'is undefined' , ( ) = > {
it ( 'logs a deprecation warning' , ( ) = > {
cy . get ( '@consoleWarn' ) . should (
'be.calledOnceWithExactly' ,
2021-12-26 15:36:12 +01:00
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.' ,
2021-12-25 21:29:31 +01:00
) ;
} ) ;
it ( 'does not show as text when selected' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-undefined]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 1' ) ;
} ) ;
} ) ;
it ( 'does not show html as text in dropdown' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-undefined]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 2' ) ;
} ) ;
} ) ;
} ) ;
describe ( 'set to true' , ( ) = > {
it ( 'does not show as text when selected' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-true]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 1' ) ;
} ) ;
} ) ;
it ( 'does not show html as text in dropdown' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-true]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Choice 2' ) ;
} ) ;
} ) ;
} ) ;
describe ( 'set to false' , ( ) = > {
it ( 'shows html as text when selected' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-false]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( '<b>Choice 1</b>' ) ;
} ) ;
} ) ;
it ( 'shows html as text' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-false]' )
. find ( '.choices__list--dropdown .choices__list' )
. children ( )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( '<b>Choice 2</b>' ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-10-17 23:36:37 +02:00
} ) ;
2018-10-13 17:38:51 +02:00
} ) ;