diff --git a/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx b/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx index 1491d898..e5efed16 100644 --- a/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx +++ b/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx @@ -1351,8 +1351,15 @@ const Packages = () => { { {bodyContent} { await userEvent.type(searchBox, '@grouper'); }; +const clearSearchInput = async () => { + const clearSearchBtn = await screen.findByRole('button', { + name: /clear-package-search/i, + }); + await userEvent.click(clearSearchBtn); +}; + const selectFirstPackage = async () => { await userEvent.click( await screen.findByRole('checkbox', { name: /select row 0/i }) @@ -262,3 +269,45 @@ describe('Packages edit mode', () => { expect(receivedRequest).toEqual(expectedRequest); }); }); + +describe('pagination on packages step', () => { + test('itemcount correct after search', async () => { + await renderCreateMode(); + await goToPackagesStep(); + await searchForPackage(); + await selectFirstPackage(); + // the pagination in the top right + const top = await screen.findByTestId('packages-pagination-top'); + await expect(top).toHaveTextContent('of 6'); + const bottom = await screen.findByTestId('packages-pagination-bottom'); + await expect(bottom).toHaveTextContent('of 6'); + }); + + test('itemcount correct after toggling selected', async () => { + await renderCreateMode(); + await goToPackagesStep(); + await searchForPackage(); + await selectFirstPackage(); + await switchToSelected(); + + // the pagination in the top right + const top = await screen.findByTestId('packages-pagination-top'); + await expect(top).toHaveTextContent('of 1'); + const bottom = await screen.findByTestId('packages-pagination-bottom'); + await expect(bottom).toHaveTextContent('of 1'); + }); + + test('itemcount correct after clearing search input', async () => { + await renderCreateMode(); + await goToPackagesStep(); + await searchForPackage(); + await selectFirstPackage(); + await clearSearchInput(); + + // the pagination in the top right + const top = await screen.findByTestId('packages-pagination-top'); + await expect(top).toHaveTextContent('of 0'); + const bottom = await screen.findByTestId('packages-pagination-bottom'); + await expect(bottom).toHaveTextContent('of 0'); + }); +});