particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateImageWizardV2: fix pagination when search is empty

Browse source
This commit is contained in:
Sanne Raymaekers 2024-06-14 23:39:21 +02:00 • committed by Klara Simickova
parent 3cb9fe0670
commit d0f52bb1d6
2 changed files with 67 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
View file

@ -1351,8 +1351,15 @@ const Packages = () => {
</ToolbarItem>
<ToolbarItem variant="pagination">
<Pagination
data-testid="packages-pagination-top"
itemCount={
transformedPackages.length + transformedGroups.length
searchTerm === '' && toggleSelected === 'toggle-available'
? 0
: showPackages && showGroups
? transformedPackages.length + transformedGroups.length
: showPackages
? transformedPackages.length
: transformedGroups.length
}
perPage={perPage}
page={page}
@ -1389,7 +1396,16 @@ const Packages = () => {
<Tbody>{bodyContent}</Tbody>
</Table>
<Pagination
itemCount={transformedPackages.length + transformedGroups.length}
data-testid="packages-pagination-bottom"
itemCount={
searchTerm === '' && toggleSelected === 'toggle-available'
? 0
: showPackages && showGroups
? transformedPackages.length + transformedGroups.length
: showPackages
? transformedPackages.length
: transformedGroups.length
}
perPage={perPage}
page={page}
onSetPage={handleSetPage}

49
src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx
View file

@ -84,6 +84,13 @@ const searchForGroup = async () => {
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');
});
});