test: add tests for GadgetWithDataSource component - #56
Conversation
Signed-off-by: mrhapile <allinonegaming3456@gmail.com>
There was a problem hiding this comment.
Pull request overview
Adds Vitest + React Testing Library coverage for GadgetWithDataSource to improve confidence in rendering and interaction behavior (Issue #20).
Changes:
- Introduces a new
index.test.tsxsuite covering instant-run/error rendering, filter application, and start/stop behaviors. - Adds coverage for metric vs. table rendering paths and loading/empty-data edge cases.
- Mocks external UI dependencies (Headlamp components, Iconify, MetricChart, GadgetFilters) to isolate component logic.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| import React from 'react'; | ||
| import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react'; |
There was a problem hiding this comment.
React and waitFor are imported but not used in this test file. Unused imports can cause lint failures and add noise—please remove them (or start using waitFor if it was intended for async assertions).
| import React from 'react'; | |
| import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react'; | |
| import { render, screen, fireEvent, cleanup } from '@testing-library/react'; |
| test('renders with fallback default callbacks if not provided', () => { | ||
| const propsWithoutCallbacks = { ...defaultProps }; | ||
| delete propsWithoutCallbacks.headlessGadgetDeleteCallback; | ||
| delete propsWithoutCallbacks.headlessGadgetRunCallback; | ||
| delete propsWithoutCallbacks.handleRun; | ||
|
|
||
| render(<GadgetWithDataSource {...propsWithoutCallbacks} gadgetInstance={{ id: '123' }} gadgetRunningStatus={true} />); | ||
| const stopBtn = screen.getByRole('button', { name: /Stop/i }); | ||
| fireEvent.click(stopBtn); | ||
| // It shouldn't crash | ||
| expect(true).toBe(true); | ||
| }); |
There was a problem hiding this comment.
These tests use expect(true).toBe(true), which will pass even if the component behavior regresses. Replace with a meaningful assertion (e.g., assert the click does not throw and/or verify that the expected callback mocks were/weren’t called).
| test('renders with fallback default handleRun if not provided', () => { | ||
| const propsWithoutCallbacks = { ...defaultProps }; | ||
| delete propsWithoutCallbacks.headlessGadgetDeleteCallback; | ||
| delete propsWithoutCallbacks.headlessGadgetRunCallback; | ||
| delete propsWithoutCallbacks.handleRun; | ||
|
|
||
| render(<GadgetWithDataSource {...propsWithoutCallbacks} gadgetRunningStatus={false} />); | ||
| const startBtn = screen.getByRole('button', { name: /Start/i }); | ||
| fireEvent.click(startBtn); | ||
| // It shouldn't crash | ||
| expect(true).toBe(true); | ||
| }); |
There was a problem hiding this comment.
This test also uses a no-op assertion (expect(true).toBe(true)), so it won’t catch failures. Please assert observable behavior (e.g., the button remains in the document after clicking, or callback mocks are not invoked, and/or the click does not throw).
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
illume
left a comment
illume
left a comment
There was a problem hiding this comment.
Thanks for your contributions!
Please let us know if you want to continue this by addressing the review comments? If not that's ok, we can take over the PR (and finish it or close it ourselves).
Add tests for GadgetWithDataSource component
ref #20
This PR adds a test file for the
GadgetWithDataSourcecomponent located insrc/common/GadgetWithDataSource/index.tsx.The tests verify that the component renders correctly and that it properly handles the provided data source. The tests also ensure that conditional rendering works as expected when data is present or absent.
How to use
Reviewers can validate this PR by running the test suite locally.
Steps:
Testing done
Commands executed:
npm install
npm test
Result:
All tests passed successfully and the new test file
src/common/GadgetWithDataSource/index.test.tsxexecuted without errors.