Skip to content

frontend: Fix several issues with storybook tests#3580

Merged
sniok merged 7 commits intokubernetes-sigs:mainfrom
sniok:msw-issues-fixes
Jul 7, 2025
Merged

frontend: Fix several issues with storybook tests#3580
sniok merged 7 commits intokubernetes-sigs:mainfrom
sniok:msw-issues-fixes

Conversation

@sniok
Copy link
Contributor

@sniok sniok commented Jul 7, 2025

Fixes following issues with MSW configuration in storybook tests:

  • Add missing mocks that would cause flaky results
  • Fix definition of certain MSW handlers, when parameters.msw.handlers is an array it overrides base mocks.
  • Add a check for missing network mocks

Steps to Test

cd frontend && npm run test

@k8s-ci-robot k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Jul 7, 2025
@k8s-ci-robot k8s-ci-robot added the size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. label Jul 7, 2025
@sniok sniok requested a review from skoeva July 7, 2025 12:38
@sniok sniok force-pushed the msw-issues-fixes branch from 8f93ccd to 88ff05a Compare July 7, 2025 14:49
@illume illume requested a review from Copilot July 7, 2025 14:50
Copy link
Contributor

@illume illume left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 thanks

The check will be quite useful.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR strengthens Storybook test reliability by catching unmocked network requests, improves MSW handler configuration to merge base and story-level mocks, and refreshes snapshots for newly rendered UI elements.

  • Added detection for unhandled requests and enhanced error messages in storybook.test.tsx
  • Changed parameters.msw.handlers from arrays to an object schema (story/storyBase) in many stories
  • Updated Storyshots to include missing buttons and table markup

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

File Description
frontend/src/storybook.test.tsx Added unhandledRequests tracking, request:unhandled listener, and more detailed fetch-error output
frontend/src/components//.stories.tsx Refactored MSW config to use { handlers: { story, storyBase }}
frontend/src/components//snapshots//*.storyshot Refreshed snapshots to include newly rendered buttons and table structure
frontend/src/components/resourceMap/GraphView.stories.tsx Imported http & HttpResponse to mock HTTP endpoints
Comments suppressed due to low confidence (2)

frontend/src/storybook.test.tsx:202

  • Jest’s expect doesn’t support a custom failure message as a second argument. Consider using expect(unhandledRequests).toHaveLength(0) and move the explanatory text into the test name or a comment.
          ).toEqual([]);

frontend/src/storybook.test.tsx:168

  • [nitpick] If this listener setup is moved to a shared context (e.g., beforeEach), remember to clear unhandledRequests between tests to avoid state leakage.
          const unhandledRequests: Array<string> = [];

Copy link
Contributor

@skoeva skoeva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@k8s-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume, skoeva, sniok

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@sniok sniok merged commit eb07de2 into kubernetes-sigs:main Jul 7, 2025
11 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants