frontend: UploadDialog: Add Storybook stories for UploadDialog#4842
frontend: UploadDialog: Add Storybook stories for UploadDialog#4842sammy200-ui wants to merge 1 commit intokubernetes-sigs:mainfrom
Conversation
|
|
|
Welcome @sammy200-ui! |
k8s-ci-robot
added
cncf-cla: no
|
/easycla |
k8s-ci-robot
added
cncf-cla: yes
There was a problem hiding this comment.
Pull request overview
This PR adds Storybook stories for the UploadDialog component in frontend/src/components/common/Resource/, increasing Storybook coverage from 3.89% for that component. It addresses issue #4690 by providing six story scenarios: a static default state and five interactive play-function stories covering file selection, upload success, empty file error, URL validation error, and URL network error.
Changes:
- New
UploadDialog.stories.tsxwith six stories covering all major UI states (default, file selected, upload success, empty file error, URL validation error, URL network error) - New
UploadDialog.Default.stories.storyshotsnapshot file capturing the initial rendering of the dialog
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
frontend/src/components/common/Resource/UploadDialog.stories.tsx |
New Storybook story file with 6 stories using MSW, play functions, and action stubs to cover UploadDialog UI states |
frontend/src/components/common/Resource/__snapshots__/UploadDialog.Default.stories.storyshot |
Auto-generated HTML snapshot of the Default story's initial render |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
💡 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.
| FileSelected.play = async () => { | ||
| const file = new File(['apiVersion: v1\nkind: Pod'], 'test.yaml', { | ||
| type: 'application/yaml', | ||
| }); | ||
| const input = document.querySelector('input[type="file"]') as HTMLInputElement; | ||
| await userEvent.upload(input, file); |
sammy200-ui
force-pushed
the
frontend/upload-dialog-stories
branch
from
0a19aa6 to
4338442
Compare
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: sammy200-ui The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
Hello @ashu8912 @vyncent-t just following up of the pr , its ready for review whenever you have some free time do review it and let me know about any changes required |
Summary
Adds Storybook stories for
UploadDialogto increase coverage from 3.89%.Related Issue
Fixes #4690
Changes
Default— empty dialog with Upload File tab activeFileSelected— a YAML file picked via the file input, filename shownUploadSuccess— file loaded successfully,setCode/setUploadFilescallbacks firedEmptyFileError— file selected is empty, shows "Error: All of the files are empty"URLValidationError— invalid URL entered, shows "Please enter a valid URL"URLNetworkError— MSW simulates a network failure on URL fetch, shows fetch errorSteps to Test
cd frontend && npm installnpm run frontend:storybookNotes for the Reviewer
UploadDialogcomponent has no loading or progress state, it reads files synchronously and callsonLoadeddirectly. There is nothing to show a loading bar for without modifying the component itself, which was not part of this issue.