Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-03 21:05:23 +02:00
Code Issues Releases Activity

fix(app): datatable global checkbox doesn't reflect the selected state (#520)

Browse source
This commit is contained in:
James Player 2025-03-17 15:35:51 +13:00 • committed by GitHub
parent b0de6d41b7
commit d5981a4be9
10 changed files with 114 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/react/components/datatables/Datatable.test.tsx
View file

@ -1,4 +1,5 @@
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import {
createColumnHelper,
@ -154,6 +155,9 @@ describe('Datatable', () => {
);
expect(screen.getByText('No data available')).toBeInTheDocument();
const selectAllCheckbox: HTMLInputElement =
screen.getByLabelText('Select all rows');
expect(selectAllCheckbox.checked).toBe(false);
});
it('selects/deselects only page rows when select all is clicked', () => {
@ -170,7 +174,7 @@ describe('Datatable', () => {
fireEvent.click(selectAllCheckbox);
// Check if all rows on the page are selected
expect(screen.getByText('2 item(s) selected')).toBeInTheDocument();
expect(screen.getByText('2 items selected')).toBeInTheDocument();
// Deselect
fireEvent.click(selectAllCheckbox);
@ -192,13 +196,44 @@ describe('Datatable', () => {
fireEvent.click(selectAllCheckbox, { shiftKey: true });
// Check if all rows on the page are selected
expect(screen.getByText('3 item(s) selected')).toBeInTheDocument();
expect(screen.getByText('3 items selected')).toBeInTheDocument();
// Deselect
fireEvent.click(selectAllCheckbox, { shiftKey: true });
const checkboxes: HTMLInputElement[] = screen.queryAllByRole('checkbox');
expect(checkboxes.filter((checkbox) => checkbox.checked).length).toBe(0);
});
it('shows indeterminate state and correct footer text when hidden rows are selected', async () => {
const user = userEvent.setup();
render(
<DatatableWithStore
dataset={mockData}
columns={mockColumns}
data-cy="test-table"
title="Test table with search"
/>
);
// Select Jane
const checkboxes = screen.getAllByRole('checkbox');
await user.click(checkboxes[2]); // Select the second row
// Search for John (will hide selected Jane)
const searchInput = screen.getByPlaceholderText('Search...');
await user.type(searchInput, 'John');
// Check if the footer text is correct
expect(
await screen.findByText('1 item selected (1 hidden by filters)')
).toBeInTheDocument();
// Check if the checkbox is indeterminate
const selectAllCheckbox: HTMLInputElement =
screen.getByLabelText('Select all rows');
expect(selectAllCheckbox.indeterminate).toBe(true);
expect(selectAllCheckbox.checked).toBe(false);
});
});
// Test the defaultGlobalFilterFn used in searches