Skip to content

Chore/msw mock data#182

Merged
iamitprakash merged 3 commits intodevelopfrom
chore/msw-mock-data
Aug 19, 2025
Merged

Chore/msw mock data#182
iamitprakash merged 3 commits intodevelopfrom
chore/msw-mock-data

Conversation

@AnujChhikara
Copy link
Contributor

@AnujChhikara AnujChhikara commented Aug 15, 2025

Date: 15 Aug, 2025

Developer Name: @AnujChhikara


Issue Ticket Number

Description

  • Added mock data for the MSW handlers.

  • The PR appears slightly larger in size because it mainly consists of mock data files, not new logic or feature changes.

Documentation Updated?

  • Yes
  • No

Under Feature Flag

  • Yes
  • No

Database Changes

  • Yes
  • No

Breaking Changes

  • Yes
  • No

Development Tested?

  • Yes
  • No

Screenshots

Screenshot 1
screen-recording-2025-08-18-at-10852-pm_fvOZ5bHR.mp4

Test Coverage

Screenshot 1

Additional Notes

Description by Korbit AI

What change is being made?

Add mock data and handlers for labels, tasks, teams, users, and watchlist in the MSW setup and initialize MSW conditionally in a new MockServiceWorkerProvider.

Why are these changes being made?

These changes are implemented to facilitate development and testing by simulating API endpoints and responses using Mock Service Worker (MSW). This approach enhances testing efficiency and reliability, as the mock data and handlers enable simulating realistic interactions without the need for live server communication. Additionally, the conditional initialization of MSW ensures it operates only in development environments to prevent interference in production.

Is this description stale? Ask me to generate a new description by commenting /korbit-generate-pr-description

@korbit-ai
Copy link

korbit-ai bot commented Aug 15, 2025

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

@coderabbitai
Copy link

coderabbitai bot commented Aug 15, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Summary by CodeRabbit

  • Refactor

    • In development, a brief “loading msw worker...” message appears while mock services initialize; app content renders after readiness. No changes in production.
  • Tests

    • Added structured mock responses for labels, tasks, teams, users, and watchlist to support testing.
    • Removed outdated task and team mock fixtures.

Walkthrough

Removes legacy mocks for tasks and teams, adds new typed mock data modules for labels, tasks, teams, users, and watchlist. Refactors MSW initialization into a provider with environment gating and readiness state. Removes MSW bootstrap from app layout.

Changes

Cohort / File(s) Summary
Deprecated mocks removed
__mocks__/Task.ts, __mocks__/Team.ts
Deleted old mock fixtures (dummyUsers, initialData, dummyTeams).
New typed mock data modules
__mocks__/data/labels.mock.ts, __mocks__/data/tasks.mock.ts, __mocks__/data/teams.mock.ts, __mocks__/data/users.mock.ts, __mocks__/data/watchlist.mock.ts
Added typed mock response shapes (exported types) and in-file datasets (non-exported) for labels, tasks, teams, users, and watchlist.
MSW provider refactor
components/msw-provider.tsx
Gates MSW by NODE_ENV, initializes via enableMocking(), adds readiness state and loading UI; updates prop typing to PropsWithChildren.
Layout init change
app/layout.tsx
Removes enableMocking import and invocation from root layout.

Sequence Diagram(s)

sequenceDiagram
  participant AppRoot as App Root
  participant Provider as MockServiceWorkerProvider
  participant MSW as enableMocking()

  AppRoot->>Provider: Render with {children}
  alt NODE_ENV !== 'development'
    Provider-->>AppRoot: Render children immediately
  else NODE_ENV === 'development'
    Provider->>MSW: enableMocking()
    MSW-->>Provider: ready
    Provider-->>AppRoot: Render children (after isMswReady)
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

DX

Suggested reviewers

  • iamitprakash
  • MayankBansal12

Poem

A bunny taps the worker’s door—knock knock!
New mocks in burrows, typed by the flock.
Old seeds plucked, fresh greens to chew,
Dev-only paths, clean and true.
When MSW’s ready, ears perk high—
Hop, render, hop—tests fly! 🐇✨

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/msw-mock-data

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@AnujChhikara AnujChhikara marked this pull request as ready for review August 16, 2025 06:52
@coderabbitai coderabbitai bot added the DX Improving the developer experience label Aug 16, 2025
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

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

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Status
Functionality Invalid React Node Type in Loading State ▹ view ✅ Fix detected
Design Component Has Multiple Responsibilities ▹ view ✅ Fix detected
Design Repetitive Assignee Object Structure ▹ view ✅ Fix detected
Design Task Data Structure Duplication ▹ view ✅ Fix detected
Files scanned
File Path Reviewed
app/layout.tsx
components/msw-provider.tsx
mocks/data/users.mock.ts
mocks/data/labels.mock.ts
mocks/data/watchlist.mock.ts
mocks/data/teams.mock.ts
mocks/data/tasks.mock.ts

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 12

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d2ae1ba and bb2586f.

📒 Files selected for processing (9)
  • __mocks__/Task.ts (0 hunks)
  • __mocks__/Team.ts (0 hunks)
  • __mocks__/data/labels.mock.ts (1 hunks)
  • __mocks__/data/tasks.mock.ts (1 hunks)
  • __mocks__/data/teams.mock.ts (1 hunks)
  • __mocks__/data/users.mock.ts (1 hunks)
  • __mocks__/data/watchlist.mock.ts (1 hunks)
  • app/layout.tsx (0 hunks)
  • components/msw-provider.tsx (1 hunks)
💤 Files with no reviewable changes (3)
  • mocks/Team.ts
  • app/layout.tsx
  • mocks/Task.ts
🧰 Additional context used
🧬 Code Graph Analysis (2)
__mocks__/data/watchlist.mock.ts (1)
api/tasks/tasks.types.ts (1)
  • TWatchListTask (91-106)
components/msw-provider.tsx (1)
__mocks__/init.ts (1)
  • enableMocking (3-37)
🔇 Additional comments (4)
__mocks__/data/users.mock.ts (1)

1-39: LGTM! Well-structured mock data module.

The implementation correctly follows the established mock pattern with proper type definitions and realistic user data. The TMockUserProfileResponse type appropriately models an API response structure.

components/msw-provider.tsx (3)

4-6: Props typing is good; minimal and idiomatic

Using PropsWithChildren on the destructured param is concise and correct. With the type-only import tweak above, this remains clean.


19-20: LGTM: Children rendering path is straightforward

Fragment-wrapped children is fine here; no extra nodes added to the tree.


13-14: No additional enableMocking invocations found
Verified via rg that the only runtime call to enableMocking() is in components/msw-provider.tsx (no other call sites exist outside its definition). With the updated effect now gated on process.env.NODE_ENV === 'development', MSW initialization will not run in production.

@AnujChhikara AnujChhikara self-assigned this Aug 16, 2025
const isMswReady = useMswInitialization()

if (process.env.NODE_ENV !== 'development') return children

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated the initialization flow to ensure MSW is properly set up before any API calls are made.

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { enableMocking } from '@/__mocks__/init'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed this since MSW is already being initialized in the provider that wraps the entire project.

Hariom01010
Hariom01010 previously approved these changes Aug 17, 2025
* refactor(mocks): remove unused Task and Team mock files

* fix(mocks): start mocking before API calls to prevent race conditions

* refactor(mocks): export handlers

* refactor(mocks): enhance task labels handling in mock data

* refactor(mocks): integrate user assignment in task creation for mock data

* refactor(mocks): improve error handling and response structure in mock API handlers
@iamitprakash iamitprakash merged commit d278ddf into develop Aug 19, 2025
2 checks passed
@iamitprakash iamitprakash deleted the chore/msw-mock-data branch August 19, 2025 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

DX Improving the developer experience

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants