2018-10-13 13:18:02 +02:00
describe ( 'Choices - text element' , ( ) = > {
beforeEach ( ( ) = > {
2021-12-24 18:33:32 +01:00
cy . visit ( '/text' , {
onBeforeLoad ( win ) {
cy . stub ( win . console , 'warn' ) . as ( 'consoleWarn' ) ;
} ,
} ) ;
2018-10-13 13:18:02 +02:00
} ) ;
2018-10-27 17:25:46 +02:00
describe ( 'scenarios' , ( ) = > {
2018-10-13 13:18:02 +02:00
const textInput = 'testing' ;
describe ( 'basic' , ( ) = > {
2018-10-17 23:36:37 +02:00
describe ( 'adding items' , ( ) = > {
it ( 'allows me to input items' , ( ) = > {
2018-10-13 13:18:02 +02:00
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( textInput )
. type ( '{enter}' ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-24 18:33:32 +01:00
. should ( ( $el ) = > {
2018-10-13 13:18:02 +02:00
expect ( $el ) . to . contain ( textInput ) ;
} ) ;
} ) ;
it ( 'updates the value of the original input' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( textInput )
. type ( '{enter}' ) ;
cy . get ( '[data-test-hook=basic]' )
2019-10-24 19:09:44 +02:00
. find ( '.choices__input[hidden]' )
2018-10-13 13:18:02 +02:00
. should ( 'have.value' , textInput ) ;
} ) ;
describe ( 'inputting data' , ( ) = > {
it ( 'shows a dropdown prompt' , ( ) = > {
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__input--cloned' )
. type ( textInput ) ;
cy . get ( '[data-test-hook=basic]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' )
2021-12-24 18:33:32 +01:00
. should ( ( $dropdown ) = > {
2018-10-13 13:18:02 +02:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal (
` Press Enter to add " ${ textInput } " ` ,
) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-10-17 23:36:37 +02:00
} ) ;
2018-10-13 13:18:02 +02:00
2018-10-17 23:36:37 +02:00
describe ( 'editing items' , ( ) = > {
beforeEach ( ( ) = > {
2018-10-27 21:03:53 +02:00
for ( let index = 0 ; index < 3 ; index ++ ) {
cy . get ( '[data-test-hook=edit-items]' )
. find ( '.choices__input--cloned' )
. type ( textInput )
. type ( '{enter}' ) ;
}
2018-10-17 23:36:37 +02:00
} ) ;
describe ( 'on back space' , ( ) = > {
it ( 'allows me to change my entry' , ( ) = > {
cy . get ( '[data-test-hook=edit-items]' )
2018-10-13 13:42:33 +02:00
. find ( '.choices__input--cloned' )
2018-10-17 23:36:37 +02:00
. type ( '{backspace}' )
. type ( '-edited' )
2018-10-13 13:42:33 +02:00
. type ( '{enter}' ) ;
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=edit-items]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-24 18:33:32 +01:00
. should ( ( $choice ) = > {
2018-10-17 23:36:37 +02:00
expect ( $choice . data ( 'value' ) ) . to . equal ( ` ${ textInput } -edited ` ) ;
} ) ;
2018-10-13 13:42:33 +02:00
} ) ;
} ) ;
2018-10-27 21:03:53 +02:00
describe ( 'on cmd+a' , ( ) = > {
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=edit-items]' )
. find ( '.choices__input--cloned' )
. type ( '{cmd}a' ) ;
} ) ;
it ( 'highlights all items' , ( ) = > {
cy . get ( '[data-test-hook=edit-items]' )
. find ( '.choices__list--multiple .choices__item' )
2021-12-24 18:33:32 +01:00
. each ( ( $choice ) = > {
2018-10-27 21:03:53 +02:00
expect ( $choice . hasClass ( 'is-highlighted' ) ) . to . equal ( true ) ;
} ) ;
} ) ;
describe ( 'on backspace' , ( ) = > {
it ( 'clears all inputted values' , ( ) = > {
// two backspaces are needed as Cypress has an issue where
// it will also insert an 'a' character into the text input
cy . get ( '[data-test-hook=edit-items]' )
. find ( '.choices__input--cloned' )
. type ( '{backspace}{backspace}' ) ;
cy . get ( '[data-test-hook=edit-items]' )
. find ( '.choices__list--multiple .choices__item' )
. should ( 'have.length' , 0 ) ;
} ) ;
} ) ;
} ) ;
2018-10-17 23:36:37 +02:00
} ) ;
2018-10-13 13:42:33 +02:00
2018-10-17 23:36:37 +02:00
describe ( 'remove button' , ( ) = > {
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__input--cloned' )
. type ( ` ${ textInput } ` )
. type ( '{enter}' ) ;
} ) ;
2018-10-13 13:18:02 +02:00
2018-10-17 23:36:37 +02:00
describe ( 'on click' , ( ) = > {
it ( 'removes respective choice' , ( ) = > {
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--multiple' )
. children ( )
2021-12-24 18:33:32 +01:00
. should ( ( $items ) = > {
2018-10-17 23:36:37 +02:00
expect ( $items . length ) . to . equal ( 1 ) ;
} ) ;
2018-10-13 13:18:02 +02:00
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
. find ( '.choices__button' )
. focus ( )
. click ( ) ;
2018-10-13 13:18:02 +02:00
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--multiple .choices__item' )
2021-12-24 18:33:32 +01:00
. should ( ( $items ) = > {
2018-10-17 23:36:37 +02:00
expect ( $items . length ) . to . equal ( 0 ) ;
} ) ;
} ) ;
2018-10-13 16:49:44 +02:00
2018-10-17 23:36:37 +02:00
it ( 'updates the value of the original input' , ( ) = > {
cy . get ( '[data-test-hook=remove-button]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
. find ( '.choices__button' )
. focus ( )
. click ( ) ;
2018-10-13 16:49:44 +02:00
2018-10-17 23:36:37 +02:00
cy . get ( '[data-test-hook=remove-button]' )
2019-10-24 19:09:44 +02:00
. find ( '.choices__input[hidden]' )
2021-12-24 18:33:32 +01:00
. then ( ( $input ) = > {
2018-10-17 23:36:37 +02:00
expect ( $input . val ( ) ) . to . not . contain ( textInput ) ;
} ) ;
2018-10-13 13:18:02 +02:00
} ) ;
} ) ;
} ) ;
describe ( 'unique values only' , ( ) = > {
describe ( 'unique values' , ( ) = > {
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=unique-values]' )
. find ( '.choices__input--cloned' )
. type ( ` ${ textInput } ` )
. type ( '{enter}' )
. type ( ` ${ textInput } ` )
. type ( '{enter}' ) ;
} ) ;
it ( 'only allows me to input unique values' , ( ) = > {
cy . get ( '[data-test-hook=unique-values]' )
. find ( '.choices__list--multiple' )
. first ( )
. children ( )
2021-12-24 18:33:32 +01:00
. should ( ( $items ) = > {
2018-10-13 13:18:02 +02:00
expect ( $items . length ) . to . equal ( 1 ) ;
} ) ;
} ) ;
describe ( 'inputting a non-unique value' , ( ) = > {
it ( 'displays dropdown prompt' , ( ) = > {
cy . get ( '[data-test-hook=unique-values]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' )
2021-12-24 18:33:32 +01:00
. should ( ( $dropdown ) = > {
2018-10-13 13:18:02 +02:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal (
2018-10-13 17:38:51 +02:00
'Only unique values can be added' ,
2018-10-13 13:18:02 +02:00
) ;
} ) ;
} ) ;
} ) ;
} ) ;
} ) ;
describe ( 'input limit' , ( ) = > {
2019-02-12 19:35:46 +01:00
const inputLimit = 5 ;
2018-10-13 13:18:02 +02:00
beforeEach ( ( ) = > {
2019-02-12 19:35:46 +01:00
for ( let index = 0 ; index < inputLimit + 1 ; index ++ ) {
2018-10-13 13:18:02 +02:00
cy . get ( '[data-test-hook=input-limit]' )
. find ( '.choices__input--cloned' )
. type ( ` ${ textInput } + ${ index } ` )
. type ( '{enter}' ) ;
}
} ) ;
it ( 'does not let me input more than 5 choices' , ( ) = > {
cy . get ( '[data-test-hook=input-limit]' )
. find ( '.choices__list--multiple' )
. first ( )
. children ( )
2021-12-24 18:33:32 +01:00
. should ( ( $items ) = > {
2019-02-12 19:35:46 +01:00
expect ( $items . length ) . to . equal ( inputLimit ) ;
2018-10-13 13:18:02 +02:00
} ) ;
} ) ;
2019-02-12 19:35:46 +01:00
describe ( 'reaching input limit' , ( ) = > {
it ( 'displays dropdown prompt' , ( ) = > {
cy . get ( '[data-test-hook=input-limit]' )
. find ( '.choices__list--dropdown' )
. should ( 'be.visible' )
2021-12-24 18:33:32 +01:00
. should ( ( $dropdown ) = > {
2019-02-12 19:35:46 +01:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal (
` Only ${ inputLimit } values can be added ` ,
) ;
} ) ;
} ) ;
2018-10-13 13:18:02 +02:00
} ) ;
} ) ;
2019-02-12 19:35:46 +01:00
describe ( 'add item filter' , ( ) = > {
describe ( 'inputting a value that satisfies the filter' , ( ) = > {
2018-10-13 13:18:02 +02:00
const input = 'joe@bloggs.com' ;
it ( 'allows me to add choice' , ( ) = > {
2019-02-12 19:35:46 +01:00
cy . get ( '[data-test-hook=add-item-filter]' )
2018-10-13 13:18:02 +02:00
. find ( '.choices__input--cloned' )
. type ( input )
. type ( '{enter}' ) ;
2019-02-12 19:35:46 +01:00
cy . get ( '[data-test-hook=add-item-filter]' )
2018-10-13 13:42:33 +02:00
. find ( '.choices__list--multiple .choices__item' )
2018-10-13 13:18:02 +02:00
. last ( )
2021-12-24 18:33:32 +01:00
. should ( ( $choice ) = > {
2018-10-13 13:42:33 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( input ) ;
2018-10-13 13:18:02 +02:00
} ) ;
} ) ;
} ) ;
describe ( 'inputting a value that does not satisfy the regex' , ( ) = > {
it ( 'displays dropdown prompt' , ( ) = > {
2019-02-12 19:35:46 +01:00
cy . get ( '[data-test-hook=add-item-filter]' )
2018-10-13 13:18:02 +02:00
. find ( '.choices__input--cloned' )
. type ( ` this is not an email address ` )
. type ( '{enter}' ) ;
2019-02-12 19:35:46 +01:00
cy . get ( '[data-test-hook=add-item-filter]' )
2018-10-13 13:18:02 +02:00
. find ( '.choices__list--dropdown' )
2019-02-12 19:35:46 +01:00
. should ( 'be.visible' )
2021-12-24 18:33:32 +01:00
. should ( ( $dropdown ) = > {
2019-02-12 19:35:46 +01:00
const dropdownText = $dropdown . text ( ) . trim ( ) ;
expect ( dropdownText ) . to . equal (
'Only values matching specific conditions can be added' ,
) ;
} ) ;
2018-10-13 13:18:02 +02:00
} ) ;
} ) ;
} ) ;
describe ( 'prepend/append' , ( ) = > {
beforeEach ( ( ) = > {
cy . get ( '[data-test-hook=prepend-append]' )
. find ( '.choices__input--cloned' )
. type ( textInput )
. type ( '{enter}' ) ;
} ) ;
it ( 'prepends and appends value to inputted value' , ( ) = > {
cy . get ( '[data-test-hook=prepend-append]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-24 18:33:32 +01:00
. should ( ( $choice ) = > {
2018-10-13 13:18:02 +02:00
expect ( $choice . data ( 'value' ) ) . to . equal ( ` before- ${ textInput } -after ` ) ;
} ) ;
} ) ;
2018-10-13 13:42:33 +02:00
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-24 18:33:32 +01:00
. should ( ( $choice ) = > {
2018-10-13 13:42:33 +02:00
expect ( $choice . text ( ) ) . to . not . contain ( ` before- ${ textInput } -after ` ) ;
expect ( $choice . text ( ) ) . to . contain ( textInput ) ;
} ) ;
} ) ;
2018-10-13 13:18:02 +02:00
} ) ;
2018-10-30 21:21:52 +01:00
describe ( 'adding items disabled' , ( ) = > {
2018-10-13 13:18:02 +02:00
it ( 'does not allow me to input data' , ( ) = > {
2018-10-30 21:21:52 +01:00
cy . get ( '[data-test-hook=adding-items-disabled]' )
. find ( '.choices__input--cloned' )
. should ( 'be.disabled' ) ;
} ) ;
} ) ;
describe ( 'disabled via attribute' , ( ) = > {
it ( 'does not allow me to input data' , ( ) = > {
cy . get ( '[data-test-hook=disabled-via-attr]' )
2018-10-13 13:18:02 +02:00
. find ( '.choices__input--cloned' )
. should ( 'be.disabled' ) ;
} ) ;
} ) ;
2018-10-13 13:42:33 +02:00
describe ( 'pre-populated choices' , ( ) = > {
it ( 'pre-populates choices' , ( ) = > {
cy . get ( '[data-test-hook=prepopulated]' )
. find ( '.choices__list--multiple .choices__item' )
2021-12-24 18:33:32 +01:00
. should ( ( $choices ) = > {
2018-10-13 13:42:33 +02:00
expect ( $choices . length ) . to . equal ( 2 ) ;
} ) ;
cy . get ( '[data-test-hook=prepopulated]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
2021-12-24 18:33:32 +01:00
. should ( ( $choice ) = > {
2018-10-13 13:42:33 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Josh Johnson' ) ;
} ) ;
cy . get ( '[data-test-hook=prepopulated]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-24 18:33:32 +01:00
. should ( ( $choice ) = > {
2018-10-13 13:42:33 +02:00
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Joe Bloggs' ) ;
} ) ;
} ) ;
} ) ;
2018-10-18 23:18:17 +02:00
describe ( 'placeholder' , ( ) = > {
/ *
{
placeholder : true ,
placeholderValue : 'I am a placeholder' ,
}
* /
describe ( 'when no value has been inputted' , ( ) = > {
it ( 'displays a placeholder' , ( ) = > {
cy . get ( '[data-test-hook=placeholder]' )
. find ( '.choices__input--cloned' )
. should ( 'have.attr' , 'placeholder' , 'I am a placeholder' ) ;
} ) ;
} ) ;
} ) ;
2018-11-24 18:48:03 +01:00
2021-12-24 18:33:32 +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-24 18:33:32 +01:00
) ;
} ) ;
it ( 'does not show html as text' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-undefined]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Mason Rogers' ) ;
} ) ;
} ) ;
} ) ;
describe ( 'set to true' , ( ) = > {
it ( 'does not show html as text' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-true]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( 'Mason Rogers' ) ;
} ) ;
} ) ;
} ) ;
describe ( 'set to false' , ( ) = > {
it ( 'shows html as text' , ( ) = > {
cy . get ( '[data-test-hook=allowhtml-false]' )
. find ( '.choices__list--multiple .choices__item' )
. first ( )
. should ( ( $choice ) = > {
expect ( $choice . text ( ) . trim ( ) ) . to . equal ( '<b>Mason Rogers</b>' ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-11-24 18:48:03 +01:00
describe ( 'within form' , ( ) = > {
describe ( 'inputting item' , ( ) = > {
describe ( 'on enter key' , ( ) = > {
it ( 'does not submit form' , ( ) = > {
2021-12-24 18:33:32 +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' )
. type ( textInput )
. type ( '{enter}' ) ;
cy . get ( '[data-test-hook=within-form]' )
. find ( '.choices__list--multiple .choices__item' )
. last ( )
2021-12-24 18:33:32 +01:00
. should ( ( $el ) = > {
2018-11-24 18:48:03 +01:00
expect ( $el ) . to . contain ( textInput ) ;
} ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2018-10-13 13:18:02 +02:00
} ) ;
} ) ;