diff --git a/lib/public/components/Pagination/amountSelector.js b/lib/public/components/Pagination/amountSelector.js index 3d2da543f8..4986b60cbb 100644 --- a/lib/public/components/Pagination/amountSelector.js +++ b/lib/public/components/Pagination/amountSelector.js @@ -50,12 +50,7 @@ const perPageAmountInputComponent = (onCustomChoiceConfirm, paginationModel) => oninput: ({ target }) => { paginationModel.customItemsPerPage = target.value; }, - onkeyup: ({ key }) => { - if (key === 'Enter') { - onCustomChoiceConfirm(); - } - }, - onblur: onCustomChoiceConfirm, + onchange: onCustomChoiceConfirm, }); /** diff --git a/test/public/flps/index.js b/test/public/flps/index.js index 1e9c07de13..d41f96315f 100644 --- a/test/public/flps/index.js +++ b/test/public/flps/index.js @@ -12,11 +12,9 @@ */ const OverviewSuite = require('./overview.test'); -// eslint-disable-next-line capitalized-comments const DetailSuite = require('./detail.test'); module.exports = () => { describe('Overview Page', OverviewSuite); - // eslint-disable-next-line capitalized-comments describe('Detail Page', DetailSuite); }; diff --git a/test/public/flps/overview.test.js b/test/public/flps/overview.test.js index 1762e4e4b2..4a741e2ff3 100644 --- a/test/public/flps/overview.test.js +++ b/test/public/flps/overview.test.js @@ -21,6 +21,7 @@ const { waitForTableLength, goToPage, getInnerText, + fillInput, } = require('../defaults.js'); const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js'); @@ -33,6 +34,9 @@ module.exports = () => { let table; let firstRowId; + const amountSelectorSelector = '#amountSelector'; + const amountSelectorButtonSelector = `${amountSelectorSelector} button`; + before(async () => { [page, browser] = await defaultBefore(page, browser); await page.setViewport({ @@ -108,8 +112,6 @@ module.exports = () => { await page.waitForSelector('table tbody tr:nth-child(2)'); expect(await page.$(`table tbody tr:nth-child(${INFINITE_SCROLL_CHUNK})`)).to.be.null; - const amountSelectorButtonSelector = '#amountSelector button'; - // Expect the dropdown options to be visible when it is selected await pressElement(page, amountSelectorButtonSelector); @@ -133,23 +135,19 @@ module.exports = () => { it('can set how many flps are available per page', async () => { // Expect the amount selector to currently be set to Infinite (after the previous test) - const amountSelectorId = '#amountSelector'; - await expectInnerText(page, `${amountSelectorId} button`, 'Rows per page: Infinite '); + await expectInnerText(page, `${amountSelectorSelector} button`, 'Rows per page: Infinite '); - await pressElement(page, `${amountSelectorId} button`); - await page.waitForSelector(`${amountSelectorId} .dropup-menu`); + await pressElement(page, `${amountSelectorSelector} button`); + await page.waitForSelector(`${amountSelectorSelector} .dropup-menu`); // Expect the amount of visible flps to reduce when the first option (5) is selected - await pressElement(page, `${amountSelectorId} .dropup-menu .menu-item`); + await pressElement(page, `${amountSelectorSelector} .dropup-menu .menu-item`); await waitForTableLength(page, 5); }); it('dynamically switches between visible pages in the page selector', async () => { - // Override the amount of flps visible per page manually - await page.evaluate(() => { - // eslint-disable-next-line no-undef - model.flps.pagination.itemsPerPage = 1; - }); + await pressElement(page, amountSelectorButtonSelector); + await fillInput(page, `${amountSelectorSelector} input`, '1', ['input', 'change']); await waitForTableLength(page, 1); // Expect the page five button to now be visible, but no more than that @@ -164,22 +162,13 @@ module.exports = () => { }); it('notifies if table loading returned an error', async () => { - /* - * As an example, override the amount of flps visible per page manually - * We know the limit is 100 as specified by the Dto - */ - await page.evaluate(() => { - // eslint-disable-next-line no-undef - model.flps.pagination.itemsPerPage = 200; - }); + await pressElement(page, amountSelectorButtonSelector); + await fillInput(page, `${amountSelectorSelector} input`, '200', ['input', 'change']); // We expect there to be a fitting error message await expectInnerText(page, '.alert-danger', 'Invalid Attribute: "query.page.limit" must be less than or equal to 100'); - // Revert changes for next test - await page.evaluate(() => { - // eslint-disable-next-line no-undef - model.flps.pagination.itemsPerPage = 10; - }); + await pressElement(page, amountSelectorButtonSelector); + await fillInput(page, `${amountSelectorSelector} input`, '10', ['input', 'change']); }); };