import { Key } from 'protractor' ; import { imageCompare } from '../../common/image-compare' ; import { numberOfCountries } from '../standard/select.po.spec' ; import { SelectFormsPage } from './select-forms.po.spec' ; describe ( 'Select (forms) Tests' , ( ) => { let page ; beforeEach ( async ( ) => { page = new SelectFormsPage ( ) ; await page . getPage ( ) ; } ) ; it ( 'should have correct initial states' , async ( ) => { expect ( await page . confirmDropdownIsExpanded ( ) ) . toBeFalsy ( ) ; expect ( await page . getDropdownPlaceholderText ( false ) ) . toEqual ( 'Select a country' ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( 'null' ) ; expect ( await page . checkSelectedOptionsButton ( ) ) . toBeTruthy ( ) ; expect ( await page . checkSelectedDirectionButton ( ) ) . toBeTruthy ( ) ; expect ( await page . confirmIsChecked ( page . checkboxMulti ) ) . toBeFalsy ( ) ; expect ( await page . confirmIsChecked ( page . checkboxDisabled ) ) . toBeFalsy ( ) ; expect ( await page . confirmIsChecked ( page . checkboxAllowNull ) ) . toBeFalsy ( ) ; expect ( await page . confirmIsChecked ( page . checkboxPaging ) ) . toBeFalsy ( ) ; expect ( await page . confirmAllowNullIsDisabled ( ) ) . toBeFalsy ( ) ; expect ( await page . confirmPageSizeIsDisabled ( ) ) . toBeTruthy ( ) ; expect ( await page . confirmPageSizeButtonIsDisabled ( 'down' ) ) . toBeTruthy ( ) ; expect ( await page . confirmPageSizeButtonIsDisabled ( 'up' ) ) . toBeTruthy ( ) ; expect ( await imageCompare ( 'select-forms-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should display correct text' , async ( ) => { await page . clickOnDropdown ( false ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'United States' ) ; expect ( await page . getCountryText ( false , 124 ) ) . toBe ( 'Latvia' ) ; expect ( await page . getCountryText ( false , 248 ) ) . toBe ( 'Zimbabwe' ) ; expect ( await page . selectedLocation . getText ( ) ) . toBe ( 'Selected location(s): null' ) ; } ) ; it ( 'should expand dropdown list' , async ( ) => { await page . clickOnDropdown ( false ) ; expect ( await page . confirmDropdownIsExpanded ( ) ) . toBeTruthy ( ) ; expect ( await imageCompare ( 'select-forms-dropdown' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should react to button clicks' , async ( ) => { await page . clickOnObjects ( ) ; expect ( await page . checkSelectedOptionsButton ( ) ) . toBeFalsy ( ) ; await page . clickOnStrings ( ) ; expect ( await page . checkSelectedOptionsButton ( ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . confirmIsChecked ( page . checkboxMulti ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . confirmIsChecked ( page . checkboxMulti ) ) . toBeFalsy ( ) ; await page . clickOnCheckbox ( page . checkboxDisabled ) ; expect ( await page . confirmIsChecked ( page . checkboxDisabled ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxDisabled ) ; expect ( await page . confirmIsChecked ( page . checkboxDisabled ) ) . toBeFalsy ( ) ; await page . clickOnCheckbox ( page . checkboxAllowNull ) ; expect ( await page . confirmIsChecked ( page . checkboxAllowNull ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxAllowNull ) ; expect ( await page . confirmIsChecked ( page . checkboxAllowNull ) ) . toBeFalsy ( ) ; await page . clickOnDropDirectionUp ( ) ; expect ( await page . checkSelectedDirectionButton ( ) ) . toBeFalsy ( ) ; await page . clickOnDropDirectionDown ( ) ; expect ( await page . checkSelectedDirectionButton ( ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxPaging ) ; expect ( await page . confirmIsChecked ( page . checkboxPaging ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxPaging ) ; expect ( await page . confirmIsChecked ( page . checkboxPaging ) ) . toBeFalsy ( ) ; } ) ; it ( 'should display the name of the selected country' , async ( ) => { await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 0 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"United States"' ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 248 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Zimbabwe"' ) ; await page . clickOnDropdown ( false ) ; await page . hoverOverCountry ( false , 124 ) ; await page . clickOnCountry ( false , 124 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Latvia"' ) ; } ) ; it ( 'should be possible to filter the list of countries' , async ( ) => { await page . clickOnDropdown ( false ) ; await page . getDropdown ( false ) . sendKeys ( '0' ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( 0 ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( 'ye' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Svalbard and Jan Mayen' ) ; expect ( await page . getCountryText ( false , 1 ) ) . toBe ( 'Yemen' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( 'x' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Luxembourg' ) ; expect ( await page . getCountryText ( false , 1 ) ) . toBe ( 'Mexico' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( 'Q' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Equatorial Guinea' ) ; expect ( await page . getCountryText ( false , 4 ) ) . toBe ( 'Qatar' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( Key . SPACE ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'United States' ) ; expect ( await page . getCountryText ( false , 3 ) ) . toBe ( 'American Samoa' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( '-' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Guinea-bissau' ) ; expect ( await page . getCountryText ( false , 1 ) ) . toBe ( 'Timor-leste' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( ',' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Bolivia, Plurinational State of' ) ; expect ( await page . getCountryText ( false , 8 ) ) . toBe ( 'Moldova, Republic of' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( '(' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Cocos (Keeling) Islands' ) ; expect ( await page . getCountryText ( false , 3 ) ) . toBe ( 'Saint Martin (French part)' ) ; await page . getDropdown ( false ) . clear ( ) ; await page . getDropdown ( false ) . sendKeys ( ')' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Cocos (Keeling) Islands' ) ; expect ( await page . getCountryText ( false , 4 ) ) . toBe ( 'Sint Maarten (Dutch part)' ) ; } ) ; it ( 'should highlight the characters entered for filtering' , async ( ) => { await page . clickOnDropdown ( false ) ; await page . getDropdown ( false ) . sendKeys ( 'ch' ) ; expect ( await page . getFilterText ( 3 ) ) . toBe ( 'Ch' ) ; expect ( await page . getFilterText ( 4 ) ) . toBe ( 'ch' ) ; expect ( await imageCompare ( 'select-forms-highlight' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should be possible to return objects instead of strings' , async ( ) => { await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 100 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Honduras"' ) ; await await page . clickOnObjects ( ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( 'null' ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 100 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '{ "id": 100, "name": "Honduras" }' ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 200 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '{ "id": 200, "name": "Sierra Leone" }' ) ; await await page . clickOnStrings ( ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( 'null' ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 178 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Poland"' ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 113 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Japan"' ) ; } ) ; it ( 'should react to use of the "multiple" checkbox' , async ( ) => { await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 150 ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( 'null' ) ; await page . clickOnDropdown ( true ) ; await page . clickOnCountry ( true , 10 ) ; await page . clickOnCountry ( true , 20 ) ; await page . clickOnCountry ( true , 30 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Antarctica", "Bangladesh", "Bosnia and Herzegovina" ]' ) ; await page . clickOnObjects ( ) ; await page . clickOnDropdown ( true ) ; await page . clickOnCountry ( true , 40 ) ; await page . clickOnCountry ( true , 50 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ { "id": 40, "name": "Cameroon" }, { "id": 50, "name": "Colombia" } ]' ) ; await page . clickOnDropdown ( true ) ; await page . getDropdown ( true ) . sendKeys ( 'ire' ) ; expect ( await page . getCountryText ( true , 2 ) ) . toBe ( 'Ireland' ) ; expect ( await imageCompare ( 'select-forms-multiple' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should disable selected countries when in multiple mode' , async ( ) => { await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnDropdown ( true ) ; expect ( await page . confirmCountryIsDisabled ( true , 60 ) ) . toBeFalsy ( ) ; expect ( await page . confirmCountryIsDisabled ( true , 70 ) ) . toBeFalsy ( ) ; await page . clickOnCountry ( true , 60 ) ; await page . clickOnCountry ( true , 70 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Cyprus", "Eritrea" ]' ) ; expect ( await page . confirmCountryIsDisabled ( true , 60 ) ) . toBeTruthy ( ) ; expect ( await page . confirmCountryIsDisabled ( true , 70 ) ) . toBeTruthy ( ) ; await page . clickOnCountry ( true , 60 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Cyprus", "Eritrea" ]' ) ; await page . clickOnCountry ( true , 70 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Cyprus", "Eritrea" ]' ) ; expect ( await imageCompare ( 'select-forms-multiple-disabled' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should be possible to remove tags' , async ( ) => { await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnDropdown ( true ) ; await page . clickOnCountry ( true , 80 ) ; await page . clickOnCountry ( true , 90 ) ; await page . clickOnCountry ( true , 110 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "French Southern Territories", "Guadeloupe", "Israel" ]' ) ; await page . removeCountry ( 1 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "French Southern Territories", "Israel" ]' ) ; await page . removeCountry ( 0 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Israel" ]' ) ; } ) ; it ( 'should highlight countries hovered over' , async ( ) => { await page . clickOnDropdown ( false ) ; expect ( await page . confirmCountryIsHighlighted ( false , 0 ) ) . toBeTruthy ( ) ; expect ( await page . confirmCountryIsHighlighted ( false , 140 ) ) . toBeFalsy ( ) ; await page . hoverOverCountry ( false , 140 ) ; expect ( await page . confirmCountryIsHighlighted ( false , 0 ) ) . toBeFalsy ( ) ; expect ( await page . confirmCountryIsHighlighted ( false , 140 ) ) . toBeTruthy ( ) ; await page . hoverOverCountry ( false , 0 ) ; expect ( await page . confirmCountryIsHighlighted ( false , 0 ) ) . toBeTruthy ( ) ; expect ( await page . confirmCountryIsHighlighted ( false , 140 ) ) . toBeFalsy ( ) ; await page . clickOnCountry ( false , 140 ) ; await page . clickOnDropdown ( false ) ; expect ( await page . confirmCountryIsHighlighted ( false , 0 ) ) . toBeTruthy ( ) ; expect ( await page . confirmCountryIsHighlighted ( false , 140 ) ) . toBeFalsy ( ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnDropdown ( true ) ; expect ( await page . confirmCountryIsHighlighted ( true , 0 ) ) . toBeTruthy ( ) ; expect ( await page . confirmCountryIsHighlighted ( true , 140 ) ) . toBeFalsy ( ) ; await page . hoverOverCountry ( true , 140 ) ; expect ( await page . confirmCountryIsHighlighted ( true , 0 ) ) . toBeFalsy ( ) ; expect ( await page . confirmCountryIsHighlighted ( true , 140 ) ) . toBeTruthy ( ) ; await page . hoverOverCountry ( true , 0 ) ; expect ( await page . confirmCountryIsHighlighted ( true , 0 ) ) . toBeTruthy ( ) ; expect ( await page . confirmCountryIsHighlighted ( true , 140 ) ) . toBeFalsy ( ) ; await page . clickOnCountry ( true , 140 ) ; expect ( await page . confirmCountryIsHighlighted ( true , 140 ) ) . toBeFalsy ( ) ; expect ( await page . confirmCountryIsDisabled ( true , 140 ) ) . toBeTruthy ( ) ; await page . hoverOverCountry ( true , 140 ) ; expect ( await page . confirmCountryIsHighlighted ( true , 140 ) ) . toBeFalsy ( ) ; } ) ; it ( 'should be possible to disable access to the list of countries' , async ( ) => { await page . clickOnCheckbox ( page . checkboxDisabled ) ; await page . clickOnDropdown ( false ) ; expect ( await page . confirmDropdownIsExpanded ( ) ) . toBeFalsy ( ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( 'null' ) ; await page . clickOnCheckbox ( page . checkboxDisabled ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 160 ) ; await page . clickOnCheckbox ( page . checkboxDisabled ) ; await page . clickOnDropdown ( false ) ; expect ( await page . confirmDropdownIsExpanded ( ) ) . toBeFalsy ( ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"New Zealand"' ) ; await page . clickOnCheckbox ( page . checkboxDisabled ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnDropdown ( true ) ; await page . clickOnCountry ( true , 170 ) ; await page . clickOnCountry ( true , 180 ) ; await page . clickOnCheckbox ( page . checkboxDisabled ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Palau", "Puerto Rico" ]' ) ; await page . removeCountry ( 0 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '[ "Palau", "Puerto Rico" ]' ) ; } ) ; it ( 'should react to changes in the status of the "allowNull" checkbox' , async ( ) => { await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . confirmAllowNullIsDisabled ( ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxAllowNull ) ; expect ( await page . confirmIsChecked ( page . checkboxAllowNull ) ) . toBeFalsy ( ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnCheckbox ( page . checkboxAllowNull ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . confirmIsChecked ( page . checkboxAllowNull ) ) . toBeTruthy ( ) ; expect ( await page . confirmAllowNullIsDisabled ( ) ) . toBeTruthy ( ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . confirmIsChecked ( page . checkboxAllowNull ) ) . toBeTruthy ( ) ; expect ( await page . confirmAllowNullIsDisabled ( ) ) . toBeFalsy ( ) ; await page . clickOnCheckbox ( page . checkboxAllowNull ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 190 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Saint Martin (French part)"' ) ; await page . clickOnDropdown ( false ) ; await page . getDropdown ( false ) . sendKeys ( Key . DELETE ) ; await page . clickOnPlaceholder ( ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Saint Martin (French part)"' ) ; await page . clickOnCheckbox ( page . checkboxAllowNull ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 190 ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( '"Saint Martin (French part)"' ) ; await page . clickOnPlaceholder ( ) ; await page . clickOnDropdown ( false ) ; await page . getDropdown ( false ) . sendKeys ( Key . DELETE ) ; await page . clickOnPlaceholder ( ) ; expect ( await page . getSelectedLocationText ( ) ) . toBe ( 'null' ) ; } ) ; it ( 'should display the placeholder text' , async ( ) => { await page . clickOnPlaceholder ( ) ; await page . getPlaceholder ( ) . clear ( ) ; await page . getPlaceholder ( ) . sendKeys ( 'COUNTRIES' ) ; expect ( await page . getDropdownPlaceholderText ( false ) ) . toEqual ( 'COUNTRIES' ) ; await page . clickOnDropdown ( false ) ; await page . clickOnCountry ( false , 220 ) ; expect ( await page . getDropdownPlaceholderText ( false ) ) . toEqual ( 'COUNTRIES' ) ; await page . clickOnCheckbox ( page . checkboxMulti ) ; expect ( await page . getDropdownPlaceholderText ( true ) ) . toEqual ( 'COUNTRIES' ) ; await page . clickOnPlaceholder ( ) ; await page . getPlaceholder ( ) . clear ( ) ; await page . getPlaceholder ( ) . sendKeys ( 'Pick a country' ) ; expect ( await page . getDropdownPlaceholderText ( true ) ) . toEqual ( 'Pick a country' ) ; await page . clickOnDropdown ( true ) ; await page . clickOnCountry ( true , 230 ) ; expect ( await page . getDropdownPlaceholderText ( true ) ) . toEqual ( 'Pick a country' ) ; } ) ; it ( 'should react to changes in the status of the "Enable Option Paging" button' , async ( ) => { await page . clickOnCheckbox ( page . checkboxPaging ) ; expect ( await page . confirmPageSizeIsDisabled ( ) ) . toBeFalsy ( ) ; expect ( await page . confirmPageSizeButtonIsDisabled ( 'down' ) ) . toBeFalsy ( ) ; expect ( await page . confirmPageSizeButtonIsDisabled ( 'up' ) ) . toBeFalsy ( ) ; await page . clickOnCheckbox ( page . checkboxPaging ) ; expect ( await page . confirmPageSizeIsDisabled ( ) ) . toBeTruthy ( ) ; expect ( await page . confirmPageSizeButtonIsDisabled ( 'down' ) ) . toBeTruthy ( ) ; expect ( await page . confirmPageSizeButtonIsDisabled ( 'up' ) ) . toBeTruthy ( ) ; } ) ; it ( 'should use the paging size' , async ( ) => { await page . clickOnDropdown ( false ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( numberOfCountries ) ; await page . hoverOverLastCountry ( false ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( numberOfCountries ) ; await page . clickOnCheckbox ( page . checkboxPaging ) ; let result ; const pageSize = 20 ; await page . clickOnDropdown ( false ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; await page . clickOnCheckbox ( page . checkboxPaging ) ; await page . clickOnDropdown ( false ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( numberOfCountries ) ; } ) ; it ( 'should allow increases of the paging size' , async ( ) => { await page . clickOnCheckbox ( page . checkboxPaging ) ; let result ; await page . clickOnIncrementPageSize ( ) ; const pageSize = 21 ; expect ( await page . waitForLoadingAfterClickToFinish ( false ) ) . toBeTruthy ( ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; } ) ; it ( 'should allow decreases of the paging size' , async ( ) => { await page . clickOnCheckbox ( page . checkboxPaging ) ; let result ; await page . clickOnDecrementPageSize ( ) ; const pageSize = 19 ; expect ( await page . waitForLoadingAfterClickToFinish ( false ) ) . toBeTruthy ( ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; } ) ; it ( 'should use the paging size in multiple mode' , async ( ) => { await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnCheckbox ( page . checkboxPaging ) ; let result ; const pageSize = 20 ; expect ( await page . waitForLoadingAfterClickToFinish ( true ) ) . toBeTruthy ( ) ; result = await page . calculateNewNumberOfCountries ( true , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( true ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( true ) ) . toEqual ( result ) ; result = await page . calculateNewNumberOfCountries ( true , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( true ) ) . toBeTruthy ( ) ; expect < any > ( await page . getNumberOfCountries ( true ) ) . toEqual ( result ) ; } ) ; it ( 'should use the paging size when filtering the countries' , async ( ) => { await page . clickOnCheckbox ( page . checkboxPaging ) ; let result ; const pageSize = 20 ; expect ( await page . waitForLoadingAfterClickToFinish ( false ) ) . toBeTruthy ( ) ; await page . getDropdown ( false ) . sendKeys ( 'b' ) ; expect ( await page . getCountryText ( false , 0 ) ) . toBe ( 'Albania' ) ; result = await page . calculateNewNumberOfCountries ( false , pageSize ) ; expect ( await page . waitForLoadingAfterHoverToFinish ( false ) ) . toBeTruthy ( ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; expect ( await page . getCountryText ( false , 39 ) ) . toBe ( 'Korea, Democratic People\'s Republic of' ) ; expect ( await page . getNumberOfCountries ( false ) ) . toEqual ( result ) ; } ) ; it ( 'should correctly validate the tag input values' , async ( ) => { await page . clickOnCheckbox ( page . checkboxMulti ) ; await page . clickOnDropdown ( true ) ; await page . clickOnCountry ( true , 0 ) ; expect ( await page . confirmClassExists ( page . dropdown , 'ng-invalid' ) ) . toBe ( true , 'Form should be invalid when the number of tags is fewer than required' ) ; await page . clickOnCountry ( true , 1 ) ; expect ( await page . confirmClassExists ( page . dropdown , 'ng-invalid' ) ) . toBe ( false , 'Form should be valid when the number of tags is within the correct range' ) ; await page . clickOnCountry ( true , 2 ) ; await page . clickOnCountry ( true , 3 ) ; expect ( await page . confirmClassExists ( page . dropdown , 'ng-invalid' ) ) . toBe ( true , 'Form should be invalid when the number of tags is more than required' ) ; expect ( await imageCompare ( 'select-forms-invalid' ) ) . toEqual ( 0 ) ; } ) ; } ) ;