Add ipPolicy and ipWidget tests #18
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe recent updates introduce new constants and stories to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant IpPolicyAccordion
participant IpWidget
User->>IpPolicyAccordion: Selects IP policy
IpPolicyAccordion->>IpWidget: Sends policy type
IpWidget->>User: Updates UI based on policy type
User->>IpWidget: Interacts with navigation
IpWidget->>IpPolicyAccordion: Sends navigation state
IpPolicyAccordion->>User: Updates UI based on navigation
Poem
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range and nitpick comments (1)
packages/storykit/src/components/IpPolicyAccordion/__docs__/IpPolicyAccordion.stories.tsx (1)
7-11: Add comprehensive documentation forTERMS_TYPE.The
TERMS_TYPEconstant is crucial for understanding the different policy types. Consider adding detailed comments explaining each type to enhance code readability and maintainability.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- packages/storykit/src/components/IpPolicyAccordion/docs/IpPolicyAccordion.stories.tsx (2 hunks)
- packages/storykit/src/components/IpWidget/docs/IpWidget.stories.tsx (7 hunks)
Additional comments not posted (5)
packages/storykit/src/components/IpWidget/__docs__/IpWidget.stories.tsx (3)
100-103: Consistency in asynchronous patterns is maintained.The changes in
BottomNavigationstory maintain consistency with theTopNavigationstory, ensuring uniform behavior across different navigation types.Also applies to: 122-122
156-161: Validate theisBottomNavargument's impact.#!/bin/bash # Description: Verify the impact of `isBottomNav: true` on the `IpFoundOverview` story. # Test: Search for the usage of `isBottomNav` in the story. Expect: Proper handling of the argument. rg --type typescript $'isBottomNav: true' packages/storykit/src/components/IpWidget/__docs__/IpWidget.stories.tsx
181-186: Check for potential data inconsistencies.#!/bin/bash # Description: Verify the `ipId` consistency across stories. # Test: Search for the usage of `ipId` in the story. Expect: Consistent `ipId` values across stories. rg --type typescript $'ipId' packages/storykit/src/components/IpWidget/__docs__/IpWidget.stories.tsxpackages/storykit/src/components/IpPolicyAccordion/__docs__/IpPolicyAccordion.stories.tsx (2)
105-142: Validate the size parameter's impact in theIpOfCommercialUsestory.#!/bin/bash # Description: Verify the impact of different `size` values on the `IpOfCommercialUse` story. # Test: Search for the usage of `size` in the story. Expect: Proper handling and visible effects of different sizes. rg --type typescript $'size' packages/storykit/src/components/IpPolicyAccordion/__docs__/IpPolicyAccordion.stories.tsx
145-182: Check for potential data inconsistencies inIpOfNonCommercialSocialRemixing.#!/bin/bash # Description: Verify the `ipId` consistency across stories in `IpPolicyAccordion`. # Test: Search for the usage of `ipId` in the story. Expect: Consistent `ipId` values across stories. rg --type typescript $'ipId' packages/storykit/src/components/IpPolicyAccordion/__docs__/IpPolicyAccordion.stories.tsx
| argTypes: { | ||
| ipId: { options: ["0x22Fe8C376919586F344fED952A9448df442b10f2"] }, | ||
| isBottomNav: { control: false }, | ||
| }, |
There was a problem hiding this comment.
Ensure asynchronous event handling is robust.
The use of await userEvent.click followed by await waitFor is correct, but consider adding error handling for potential exceptions during these asynchronous operations.
Also applies to: 66-66
| argTypes: { | ||
| ipId: { options: ["0x22Fe8C376919586F344fED952A9448df442b10f2"] }, | ||
| }, | ||
| args: { | ||
| ipId: "0x22Fe8C376919586F344fED952A9448df442b10f2", | ||
| isBottomNav: true, | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText("11155111: Example NFT #4367")).toBeInTheDocument() | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByRole("button", { expanded: false })) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByRole("menu").getAttribute("data-headlessui-state")).toBe("open") | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByRole("button", { expanded: true })) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.queryByRole("menu")).toBeNull() | ||
| }, | ||
| { timeout: 10000 } | ||
| ) |
There was a problem hiding this comment.
Enhance user interaction handling in the MenuOpenAndClose story.
Consider adding more detailed comments or logs within the play function to better trace the sequence of user interactions and their effects, improving maintainability and debuggability.
| export const IpNoPolicy: Story = { | ||
| argTypes: { | ||
| ipId: { | ||
| options: ["0x0aEcA721aDceb65fbE81F450a1C59978fF903124"], | ||
| }, | ||
| }, | ||
| args: { | ||
| ipId: "0x0aEcA721aDceb65fbE81F450a1C59978fF903124", | ||
| size: "medium", | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement) | ||
| await waitFor(() => { | ||
| expect(canvas.getByText("No Policy")).toBeInTheDocument() | ||
| }) | ||
| }, |
There was a problem hiding this comment.
Ensure robust error handling in the IpNoPolicy story.
The asynchronous operations in the play function lack error handling. Consider wrapping these operations in try-catch blocks to handle potential exceptions gracefully.
| export const IpOfCommercialRemix: Story = { | ||
| argTypes: { | ||
| ipId: { | ||
| options: ["0x9344852e16A4aCC2592FDeD4301eDcC58E8E0128"], | ||
| }, | ||
| }, | ||
| args: { | ||
| ipId: "0x9344852e16A4aCC2592FDeD4301eDcC58E8E0128", | ||
| size: "large", | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX)).toBeInTheDocument() | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX)) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX).nextElementSibling?.classList).not.toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX)) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX).nextElementSibling?.classList).toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| }, | ||
| { timeout: 10000 } | ||
| ) |
There was a problem hiding this comment.
Optimize repeated code in the IpOfCommercialRemix story.
The repeated calls to userEvent.click and waitFor can be abstracted into a helper function to reduce code duplication and improve maintainability.
| export const IpOfMultiplePolicies: Story = { | ||
| argTypes: { | ||
| ipId: { | ||
| options: ["0x2CFc4F2F086cf9a859d87119dA0d54bB88173516"], | ||
| }, | ||
| }, | ||
| args: { | ||
| ipId: "0x2CFc4F2F086cf9a859d87119dA0d54bB88173516", | ||
| size: "medium", | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX)).toBeInTheDocument() | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_USE)).toBeInTheDocument() | ||
| expect(canvas.getByText(TERMS_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING)).toBeInTheDocument() | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX).nextElementSibling?.classList).toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_USE).nextElementSibling?.classList).not.toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| expect(canvas.getByText(TERMS_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING).nextElementSibling?.classList).not.toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByText(TERMS_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING)) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING).nextElementSibling?.classList).toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_REMIX).nextElementSibling?.classList).not.toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByText(TERMS_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING)) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING).nextElementSibling?.classList).not.toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
|
|
||
| await userEvent.click(canvas.getByText(TERMS_TYPE.COMMERCIAL_USE)) | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByText(TERMS_TYPE.COMMERCIAL_USE).nextElementSibling?.classList).toContain( | ||
| "skIpPolicyAccordion__item-list--expanded" | ||
| ) | ||
| }, | ||
| { timeout: 10000 } | ||
| ) | ||
| }, |
There was a problem hiding this comment.
Enhance interaction handling in the IpOfMultiplePolicies story.
Consider adding more detailed comments or logs within the play function to better trace the sequence of user interactions and their effects, improving maintainability and debuggability.
packages/storykit/src/components/IpPolicyAccordion/__docs__/IpPolicyAccordion.stories.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/storykit/src/components/IpPolicyAccordion/docs/IpPolicyAccordion.stories.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/storykit/src/components/IpPolicyAccordion/docs/IpPolicyAccordion.stories.tsx
Summary by CodeRabbit
New Features
IpPolicyAccordioncomponent, showcasing different policy scenarios.IpWidgetstories with additional configurations and interactions, including top and bottom navigation options.Improvements
IpWidgetstories for a more accurate simulation.