Skip to content

Commit 2d4b243

Browse files
author
Daniel Duong
committed
test(automl+autorag): add tests to validate clicking rows
1 parent 07a6f80 commit 2d4b243

2 files changed

Lines changed: 182 additions & 0 deletions

File tree

‎packages/automl/frontend/src/app/components/common/FileExplorer/__tests__/FileExplorer.spec.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,97 @@ describe('FileExplorer', () => {
180180
expect(mockOnClose).toHaveBeenCalled();
181181
});
182182
});
183+
describe('row click behavior', () => {
184+
it('should select file when clicking directly on the row', () => {
185+
const files = mockFiles(3);
186+
render(<FileExplorer {...defaultProps} files={files} />);
187+
188+
const row = screen.getByTestId('file-explorer-row--file-1-json');
189+
fireEvent.click(row);
190+
191+
expect(screen.getByTestId('file-explorer-details-panel')).toBeInTheDocument();
192+
});
193+
it('should NOT select file when clicking on kebab menu toggle', () => {
194+
const files = mockFiles(3);
195+
render(<FileExplorer {...defaultProps} files={files} selection="checkbox" />);
196+
197+
const row = screen.getByTestId('file-explorer-row--file-1-json');
198+
const kebabToggle = within(row).getByRole('button', { name: /actions/i });
199+
fireEvent.click(kebabToggle);
200+
201+
// File should not be selected
202+
const checkbox = within(row).getByRole('checkbox');
203+
expect(checkbox).not.toBeChecked();
204+
});
205+
it('should NOT select file when clicking on folder link', () => {
206+
const folder = mockFolder({ name: 'my-folder', path: '/my-folder' });
207+
const onFolderClick = jest.fn();
208+
render(
209+
<FileExplorer
210+
{...defaultProps}
211+
files={[folder]}
212+
onFolderClick={onFolderClick}
213+
selection="checkbox"
214+
/>,
215+
);
216+
217+
const row = screen.getByTestId('file-explorer-row--my-folder');
218+
const folderLink = within(row).getByText('my-folder');
219+
fireEvent.click(folderLink);
220+
221+
// Folder link callback should fire
222+
expect(onFolderClick).toHaveBeenCalledWith(folder);
223+
224+
// Folder should not be selected via row click
225+
const checkbox = within(row).getByRole('checkbox');
226+
expect(checkbox).not.toBeChecked();
227+
});
228+
it('should NOT select file when clicking on checkbox in checkbox mode', () => {
229+
const files = mockFiles(3);
230+
const onSelectFile = jest.fn();
231+
render(
232+
<FileExplorer
233+
{...defaultProps}
234+
files={files}
235+
selection="checkbox"
236+
onSelectFile={onSelectFile}
237+
/>,
238+
);
239+
240+
const row = screen.getByTestId('file-explorer-row--file-1-json');
241+
const checkbox = within(row).getByRole('checkbox');
242+
fireEvent.click(checkbox);
243+
244+
// Checkbox should handle selection
245+
expect(checkbox).toBeChecked();
246+
247+
// onSelectFile callback should be called only once (not twice from row click)
248+
expect(onSelectFile).toHaveBeenCalledTimes(1);
249+
});
250+
it('should make selected rows not clickable or selectable', () => {
251+
const files = mockFiles(3);
252+
render(<FileExplorer {...defaultProps} files={files} selection="checkbox" />);
253+
254+
const row = screen.getByTestId('file-explorer-row--file-1-json');
255+
const checkbox = within(row).getByRole('checkbox');
256+
fireEvent.click(checkbox);
257+
258+
// Row should not have clickable styling after selection
259+
expect(row).not.toHaveClass('pf-m-clickable');
260+
});
261+
it('should have file-specific aria-label on kebab menu toggle', () => {
262+
const files = mockFiles(3);
263+
render(<FileExplorer {...defaultProps} files={files} selection="checkbox" />);
264+
265+
const row1 = screen.getByTestId('file-explorer-row--file-1-json');
266+
const kebab1 = within(row1).getByRole('button', { name: /file-1\.json actions/i });
267+
expect(kebab1).toBeInTheDocument();
268+
269+
const row2 = screen.getByTestId('file-explorer-row--file-2-json');
270+
const kebab2 = within(row2).getByRole('button', { name: /file-2\.json actions/i });
271+
expect(kebab2).toBeInTheDocument();
272+
});
273+
});
183274
describe('source selector', () => {
184275
it('should render source labels when sources are provided and no source selected', () => {
185276
const onSelectSource = jest.fn();

‎packages/autorag/frontend/src/app/components/common/FileExplorer/__tests__/FileExplorer.spec.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,97 @@ describe('FileExplorer', () => {
180180
expect(mockOnClose).toHaveBeenCalled();
181181
});
182182
});
183+
describe('row click behavior', () => {
184+
it('should select file when clicking directly on the row', () => {
185+
const files = mockFiles(3);
186+
render(<FileExplorer {...defaultProps} files={files} />);
187+
188+
const row = screen.getByTestId('file-explorer-row--file-1-json');
189+
fireEvent.click(row);
190+
191+
expect(screen.getByTestId('file-explorer-details-panel')).toBeInTheDocument();
192+
});
193+
it('should NOT select file when clicking on kebab menu toggle', () => {
194+
const files = mockFiles(3);
195+
render(<FileExplorer {...defaultProps} files={files} selection="checkbox" />);
196+
197+
const row = screen.getByTestId('file-explorer-row--file-1-json');
198+
const kebabToggle = within(row).getByRole('button', { name: /actions/i });
199+
fireEvent.click(kebabToggle);
200+
201+
// File should not be selected
202+
const checkbox = within(row).getByRole('checkbox');
203+
expect(checkbox).not.toBeChecked();
204+
});
205+
it('should NOT select file when clicking on folder link', () => {
206+
const folder = mockFolder({ name: 'my-folder', path: '/my-folder' });
207+
const onFolderClick = jest.fn();
208+
render(
209+
<FileExplorer
210+
{...defaultProps}
211+
files={[folder]}
212+
onFolderClick={onFolderClick}
213+
selection="checkbox"
214+
/>,
215+
);
216+
217+
const row = screen.getByTestId('file-explorer-row--my-folder');
218+
const folderLink = within(row).getByText('my-folder');
219+
fireEvent.click(folderLink);
220+
221+
// Folder link callback should fire
222+
expect(onFolderClick).toHaveBeenCalledWith(folder);
223+
224+
// Folder should not be selected via row click
225+
const checkbox = within(row).getByRole('checkbox');
226+
expect(checkbox).not.toBeChecked();
227+
});
228+
it('should NOT select file when clicking on checkbox in checkbox mode', () => {
229+
const files = mockFiles(3);
230+
const onSelectFile = jest.fn();
231+
render(
232+
<FileExplorer
233+
{...defaultProps}
234+
files={files}
235+
selection="checkbox"
236+
onSelectFile={onSelectFile}
237+
/>,
238+
);
239+
240+
const row = screen.getByTestId('file-explorer-row--file-1-json');
241+
const checkbox = within(row).getByRole('checkbox');
242+
fireEvent.click(checkbox);
243+
244+
// Checkbox should handle selection
245+
expect(checkbox).toBeChecked();
246+
247+
// onSelectFile callback should be called only once (not twice from row click)
248+
expect(onSelectFile).toHaveBeenCalledTimes(1);
249+
});
250+
it('should make selected rows not clickable or selectable', () => {
251+
const files = mockFiles(3);
252+
render(<FileExplorer {...defaultProps} files={files} selection="checkbox" />);
253+
254+
const row = screen.getByTestId('file-explorer-row--file-1-json');
255+
const checkbox = within(row).getByRole('checkbox');
256+
fireEvent.click(checkbox);
257+
258+
// Row should not have clickable styling after selection
259+
expect(row).not.toHaveClass('pf-m-clickable');
260+
});
261+
it('should have file-specific aria-label on kebab menu toggle', () => {
262+
const files = mockFiles(3);
263+
render(<FileExplorer {...defaultProps} files={files} selection="checkbox" />);
264+
265+
const row1 = screen.getByTestId('file-explorer-row--file-1-json');
266+
const kebab1 = within(row1).getByRole('button', { name: /file-1\.json actions/i });
267+
expect(kebab1).toBeInTheDocument();
268+
269+
const row2 = screen.getByTestId('file-explorer-row--file-2-json');
270+
const kebab2 = within(row2).getByRole('button', { name: /file-2\.json actions/i });
271+
expect(kebab2).toBeInTheDocument();
272+
});
273+
});
183274
describe('source selector', () => {
184275
it('should render source labels when sources are provided and no source selected', () => {
185276
const onSelectSource = jest.fn();

0 commit comments

Comments
 (0)