Create label atom #60
Conversation
📝 WalkthroughWalkthroughAdds a new Label atom (component and props) and two test suites: one for the Label atom and one for the Header layout component, covering rendering, prop wiring, conditional UI, and user interaction behaviors. Changes
Sequence Diagram(s)(omitted — changes are component additions and tests without multi-component runtime control flow requiring visualization) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In @src/components/atoms/Label/Label.test.tsx:
- Around line 6-10: The test in Label.test.tsx uses a non-semantic name and
query: rename the spec for the Label component to start with "should" (e.g.,
"should render the label text for the associated control") and replace
screen.getByText("Email Address") with an accessibility-focused query such as
screen.getByLabelText or screen.getByRole (targeting the associated input/role
by accessible name) to assert the label is tied to the control; apply the same
naming and semantic-query changes to the other tests referenced (lines 12-17,
19-27, 29-33) so all tests use "should" prefixes and prefer
getByLabelText/getByRole over getByText.
In @src/components/layout/Header/Header.test.tsx:
- Around line 13-16: Rename the test titles to start with "should" and make them
descriptive: e.g., change it("renders the navbar container", ...) to it("should
render the navbar container", ...) and similarly update the other test
descriptions around the Header component tests that call render(<Header
{...defaultProps} />) and assertions like
expect(screen.getByRole("banner")).toBeInTheDocument(); and the tests that check
links, buttons, and conditional items; keep the test bodies unchanged, only
update the string descriptions for lines mentioned (and the other ranges) so all
test names begin with "should".
- Around line 48-55: The test should use async/await with userEvent instead of
fireEvent: make the test callback async, replace fireEvent.click(profileButton)
with await userEvent.click(profileButton), and ensure userEvent is imported (or
available) in Header.test.tsx so the user interaction is simulated realistically
when asserting mockLogout in the "calls onLogout when profile button is clicked"
test.
- Line 1: Replace the use of fireEvent with @testing-library/user-event: update
the import line to import userEvent (instead of fireEvent) alongside render and
screen, then replace occurrences of fireEvent.* in Header.test.tsx with the
corresponding userEvent.* calls (e.g., userEvent.click) and make the test
async/await where necessary to account for userEvent's async behavior so
interactions behave like real users.
🧹 Nitpick comments (3)
src/components/atoms/Label/Label.test.tsx (1)
5-34: Add missing test coverage for accessibility and edge cases.Based on learnings, tests should include coverage for: default props, variants, accessibility. Consider adding tests for:
- Accessibility: verify the label element has proper ARIA attributes
- Default behavior: test without htmlFor prop
- Class names/styling variants (if applicable)
- Empty or undefined children
📝 Example additional tests
it("should be accessible without htmlFor attribute", () => { render(<Label>Label without htmlFor</Label>); const label = screen.getByText("Label without htmlFor"); expect(label.tagName).toBe("LABEL"); }); it("should handle empty children gracefully", () => { render(<Label htmlFor="test" />); const label = screen.getByLabelText("", { selector: 'label' }); expect(label).toBeInTheDocument(); });src/components/layout/Header/Header.test.tsx (2)
23-27: Use more specific query instead of index-based selection.Using
getAllByRole("link")[0]is brittle. Consider using a more specific query withnameoption orgetByRole("link", { name: /menu/i })to target the specific link.♻️ More specific query example
it("should render the hamburger menu link", () => { render(<Header {...defaultProps} />); - const menuLink = screen.getAllByRole("link")[0]; + const menuLink = screen.getByRole("link", { name: /menu|hamburger/i }); expect(menuLink).toHaveAttribute("href", "/"); });Note: Adjust the regex pattern based on the actual accessible name of the hamburger menu link.
29-32: Use more specific query when multiple buttons exist.
getByRole("button")may be ambiguous if the Header contains multiple buttons. Consider usinggetByRole("button", { name: "..." })or a more specific query to target the exact button.♻️ More specific query example
it("should render profile button", () => { render(<Header {...defaultProps} />); - expect(screen.getByRole("button")).toBeInTheDocument(); + expect(screen.getByRole("button", { name: /profile|logout/i })).toBeInTheDocument(); }); it("should call onLogout when profile button is clicked", async () => { render(<Header {...defaultProps} />); - const profileButton = screen.getByRole("button"); + const profileButton = screen.getByRole("button", { name: /profile|logout/i }); await userEvent.click(profileButton); expect(mockLogout).toHaveBeenCalledOnce(); });Note: Adjust the name pattern based on the actual accessible name of the profile button.
Also applies to: 48-55
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/atoms/Label/Label.test.tsxsrc/components/atoms/Label/Label.tsxsrc/components/layout/Header/Header.test.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Use TypeScript for all files
Prefertypefor unions and primitives,interfacefor object shapes
Use?.optional chaining and??nullish coalescing
Files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
src/components/**/[!.]*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Define interfaces for all component props in separate
[ComponentName]Props.tsfiles
Files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.tsx: Use function components (not arrow functions for exported components). Export named components:export function ComponentName() {}
Use destructuring for props, but keep the full props object for clarity in React components
Use React 19 features when appropriate
Use JSDoc comments for component documentation with@exampletags
Use TailwindCSS v4 utility classes exclusively for styling
Use DaisyUI component classes (e.g.,btn,card,input) and variants (e.g.,btn-primary,btn-secondary,btn-sm,btn-md,btn-lg)
Build dynamic class names using arrays and.join(' ')
Component files: PascalCase (e.g.,Button.tsx,UserProfile.tsx)
Follow established component directory structure:/src/components/[category]/[ComponentName]/with ComponentName.tsx, ComponentNameProps.ts, ComponentName.test.tsx, ComponentName.stories.tsx files
Files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
src/**/*.test.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.test.tsx: Test files: PascalCase with.test.tsxsuffix (e.g.,Button.test.tsx)
Always write tests before implementation when adding new features (Test-Driven Development - TDD Red-Green-Refactor cycle)
Use Vitest as the test runner
Use React Testing Library for component testing
Use @testing-library/user-event for user interactions in tests
Follow the Arrange-Act-Assert (AAA) pattern in tests
Use descriptive test names starting with 'should'
Use semantic queries in order of preference: getByRole, getByLabelText, getByPlaceholderText, getByText, getByTestId (last resort)
Always use async/await with user events in tests
Mock functions withvi.fn()(notjest.fn()) in Vitest
Test user interactions, not implementation details
Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
Files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
🧠 Learnings (11)
📓 Common learnings
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Test user interactions, not implementation details
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Follow the Arrange-Act-Assert (AAA) pattern in tests
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use semantic queries in order of preference: getByRole, getByLabelText, getByPlaceholderText, getByText, getByTestId (last resort)
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Test files: PascalCase with `.test.tsx` suffix (e.g., `Button.test.tsx`)
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
Applied to files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Test user interactions, not implementation details
Applied to files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use descriptive test names starting with 'should'
Applied to files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Test files: PascalCase with `.test.tsx` suffix (e.g., `Button.test.tsx`)
Applied to files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Follow the Arrange-Act-Assert (AAA) pattern in tests
Applied to files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use React Testing Library for component testing
Applied to files:
src/components/layout/Header/Header.test.tsxsrc/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Mock functions with `vi.fn()` (not `jest.fn()`) in Vitest
Applied to files:
src/components/layout/Header/Header.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use semantic queries in order of preference: getByRole, getByLabelText, getByPlaceholderText, getByText, getByTestId (last resort)
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Always write tests before implementation when adding new features (Test-Driven Development - TDD Red-Green-Refactor cycle)
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use Vitest as the test runner
Applied to files:
src/components/atoms/Label/Label.test.tsx
| it("renders the label text correctly", () => { | ||
| render(<Label htmlFor="email">Email Address</Label>); | ||
|
|
||
| expect(screen.getByText("Email Address")).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use "should" prefix for test names and semantic queries.
Test names should start with "should" per coding guidelines. Additionally, prefer semantic queries like getByLabelText or getByRole over getByText for better accessibility testing.
As per coding guidelines, test names should be descriptive and start with 'should'.
♻️ Proposed refactor with semantic queries and proper naming
- it("renders the label text correctly", () => {
+ it("should render the label text correctly", () => {
render(<Label htmlFor="email">Email Address</Label>);
- expect(screen.getByText("Email Address")).toBeInTheDocument();
+ const label = screen.getByLabelText("Email Address", { selector: 'label' });
+ expect(label).toBeInTheDocument();
});
- it("applies the htmlFor attribute correctly", () => {
+ it("should apply the htmlFor attribute correctly", () => {
render(<Label htmlFor="email">Email</Label>);
const label = screen.getByText("Email");
expect(label).toHaveAttribute("for", "email");
});
- it("shows required indicator when required prop is true", () => {
+ it("should show required indicator when required prop is true", () => {
render(
<Label htmlFor="email" required>
Email
</Label>
);
expect(screen.getByText("*")).toBeInTheDocument();
});
- it("does not show required indicator when required is false", () => {
+ it("should not show required indicator when required is false", () => {
render(<Label htmlFor="email">Email</Label>);
expect(screen.queryByText("*")).not.toBeInTheDocument();
});Also applies to: 12-17, 19-27, 29-33
🤖 Prompt for AI Agents
In @src/components/atoms/Label/Label.test.tsx around lines 6 - 10, The test in
Label.test.tsx uses a non-semantic name and query: rename the spec for the Label
component to start with "should" (e.g., "should render the label text for the
associated control") and replace screen.getByText("Email Address") with an
accessibility-focused query such as screen.getByLabelText or screen.getByRole
(targeting the associated input/role by accessible name) to assert the label is
tied to the control; apply the same naming and semantic-query changes to the
other tests referenced (lines 12-17, 19-27, 29-33) so all tests use "should"
prefixes and prefer getByLabelText/getByRole over getByText.
| @@ -0,0 +1,56 @@ | |||
| import { render, screen, fireEvent } from "@testing-library/react"; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Import userEvent instead of using fireEvent.
Per coding guidelines, use @testing-library/user-event for user interactions, not fireEvent. This provides more realistic user interaction simulation.
As per coding guidelines, use @testing-library/user-event for user interactions in tests.
♻️ Update imports
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi } from "vitest";
import Header from "./Header";Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In @src/components/layout/Header/Header.test.tsx at line 1, Replace the use of
fireEvent with @testing-library/user-event: update the import line to import
userEvent (instead of fireEvent) alongside render and screen, then replace
occurrences of fireEvent.* in Header.test.tsx with the corresponding userEvent.*
calls (e.g., userEvent.click) and make the test async/await where necessary to
account for userEvent's async behavior so interactions behave like real users.
| it("renders the navbar container", () => { | ||
| render(<Header {...defaultProps} />); | ||
| expect(screen.getByRole("banner")).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use "should" prefix for test names.
Per coding guidelines, test names should be descriptive and start with "should".
As per coding guidelines, use descriptive test names starting with 'should'.
♻️ Update test names
- it("renders the navbar container", () => {
+ it("should render the navbar container", () => {
render(<Header {...defaultProps} />);
expect(screen.getByRole("banner")).toBeInTheDocument();
});
- it("renders the app title", () => {
+ it("should render the app title", () => {
render(<Header {...defaultProps} />);
expect(screen.getByText("daisyUI")).toBeInTheDocument();
});
- it("renders the hamburger menu link", () => {
+ it("should render the hamburger menu link", () => {
render(<Header {...defaultProps} />);
const menuLink = screen.getAllByRole("link")[0];
expect(menuLink).toHaveAttribute("href", "/");
});
- it("renders profile button", () => {
+ it("should render profile button", () => {
render(<Header {...defaultProps} />);
expect(screen.getByRole("button")).toBeInTheDocument();
});
- it("shows the first letter of the user's name in profile image", () => {
+ it("should show the first letter of the user's name in profile image", () => {
render(<Header {...defaultProps} />);
const profileImg = screen.getByAltText("Karuna profile");
expect(profileImg).toHaveAttribute(
"src",
expect.stringContaining("K")
);
});
- it("uses fallback text when user is undefined", () => {
+ it("should use fallback text when user is undefined", () => {
render(<Header onLogout={mockLogout} />);
expect(screen.getByAltText("User profile")).toBeInTheDocument();
});
- it("calls onLogout when profile button is clicked", () => {
+ it("should call onLogout when profile button is clicked", async () => {
render(<Header {...defaultProps} />);
const profileButton = screen.getByRole("button");
- fireEvent.click(profileButton);
+ await userEvent.click(profileButton);
expect(mockLogout).toHaveBeenCalledOnce();
});Also applies to: 18-21, 23-27, 29-32, 34-41, 43-46, 48-55
🤖 Prompt for AI Agents
In @src/components/layout/Header/Header.test.tsx around lines 13 - 16, Rename
the test titles to start with "should" and make them descriptive: e.g., change
it("renders the navbar container", ...) to it("should render the navbar
container", ...) and similarly update the other test descriptions around the
Header component tests that call render(<Header {...defaultProps} />) and
assertions like expect(screen.getByRole("banner")).toBeInTheDocument(); and the
tests that check links, buttons, and conditional items; keep the test bodies
unchanged, only update the string descriptions for lines mentioned (and the
other ranges) so all test names begin with "should".
| it("calls onLogout when profile button is clicked", () => { | ||
| render(<Header {...defaultProps} />); | ||
| const profileButton = screen.getByRole("button"); | ||
|
|
||
| fireEvent.click(profileButton); | ||
|
|
||
| expect(mockLogout).toHaveBeenCalledOnce(); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use userEvent.click() with async/await instead of fireEvent.click().
Per coding guidelines, always use async/await with user events. Replace fireEvent.click() with userEvent.click() for more realistic user interaction simulation.
As per coding guidelines, always use async/await with user events in tests.
♻️ Refactor to use userEvent
- it("calls onLogout when profile button is clicked", () => {
+ it("calls onLogout when profile button is clicked", async () => {
render(<Header {...defaultProps} />);
const profileButton = screen.getByRole("button");
- fireEvent.click(profileButton);
+ await userEvent.click(profileButton);
expect(mockLogout).toHaveBeenCalledOnce();
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| it("calls onLogout when profile button is clicked", () => { | |
| render(<Header {...defaultProps} />); | |
| const profileButton = screen.getByRole("button"); | |
| fireEvent.click(profileButton); | |
| expect(mockLogout).toHaveBeenCalledOnce(); | |
| }); | |
| it("calls onLogout when profile button is clicked", async () => { | |
| render(<Header {...defaultProps} />); | |
| const profileButton = screen.getByRole("button"); | |
| await userEvent.click(profileButton); | |
| expect(mockLogout).toHaveBeenCalledOnce(); | |
| }); |
🤖 Prompt for AI Agents
In @src/components/layout/Header/Header.test.tsx around lines 48 - 55, The test
should use async/await with userEvent instead of fireEvent: make the test
callback async, replace fireEvent.click(profileButton) with await
userEvent.click(profileButton), and ensure userEvent is imported (or available)
in Header.test.tsx so the user interaction is simulated realistically when
asserting mockLogout in the "calls onLogout when profile button is clicked"
test.
There was a problem hiding this comment.
Pull request overview
This PR introduces test suites for two components following Test-Driven Development (TDD) practices: a new Label atom component and the existing Header layout component. The tests are written first, with the Label component implementation to follow (TDD Red phase).
Key Changes
- Added comprehensive test coverage for the Label atom component covering rendering, htmlFor attribute binding, and required indicator behavior
- Added test suite for the Header component validating navigation elements, user profile rendering, and logout functionality
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| src/components/atoms/Label/Label.test.tsx | Test suite for Label component with 4 test cases covering label text rendering, htmlFor attribute, and required indicator functionality |
| src/components/atoms/Label/Label.tsx | Empty component file following TDD approach (tests written first, implementation to follow) |
| src/components/layout/Header/Header.test.tsx | Test suite for Header component with 6 test cases covering navbar rendering, navigation elements, profile display, and logout interaction |
| it("renders the navbar container", () => { | ||
| render(<Header {...defaultProps} />); | ||
| expect(screen.getByRole("banner")).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
According to the project's testing standards, test descriptions should start with "should" for consistency. For example: "should render the navbar container" instead of "renders the navbar container". This pattern is established in the coding guidelines and helps maintain a consistent AAA (Arrange-Act-Assert) testing pattern throughout the project.
|
|
||
| it("renders the hamburger menu link", () => { | ||
| render(<Header {...defaultProps} />); | ||
| const menuLink = screen.getAllByRole("link")[0]; |
There was a problem hiding this comment.
Using getAllByRole with array indexing [0] is fragile and can lead to brittle tests. Instead, use a more specific query that uniquely identifies the hamburger menu link, such as checking for the specific link that contains the SVG icon or using a more descriptive role query. Consider using getByRole('link', { name: /menu/i }) if the link has accessible text, or add a test-id if necessary as a last resort.
| const menuLink = screen.getAllByRole("link")[0]; | |
| const menuLink = screen.getByRole("link", { name: /daisyUI/i }); |
| render(<Header {...defaultProps} />); | ||
| const profileButton = screen.getByRole("button"); | ||
|
|
||
| fireEvent.click(profileButton); |
There was a problem hiding this comment.
According to the project's coding guidelines, fireEvent should be replaced with userEvent from '@testing-library/user-event' for more realistic user interaction simulation. The guidelines specifically state "Use @testing-library/user-event for user interactions" and "Always use async/await with user events".
The code should be:
const user = userEvent.setup();
await user.click(profileButton);Note that the test function would also need to be made async.
| @@ -0,0 +1,56 @@ | |||
| import { render, screen, fireEvent } from "@testing-library/react"; | |||
There was a problem hiding this comment.
The test file is missing the import for userEvent from '@testing-library/user-event', which is needed for proper user interaction testing according to the project's coding guidelines. Add the import:
import userEvent from '@testing-library/user-event';
This is required for following the guideline: "Use @testing-library/user-event for user interactions".
| @@ -0,0 +1,34 @@ | |||
| import { render, screen } from "@testing-library/react"; | |||
| import { describe, it, expect } from "vitest"; | |||
| import Label from "./Label"; | |||
There was a problem hiding this comment.
The import statement uses a default import, but based on the project's coding guidelines, components should be exported as named exports, not default exports. This should be:
import { Label } from "./Label";
This aligns with the pattern used in other components like Button, which uses export function Button().
| import Label from "./Label"; | |
| import { Label } from "./Label"; |
| it("renders the label text correctly", () => { | ||
| render(<Label htmlFor="email">Email Address</Label>); | ||
|
|
||
| expect(screen.getByText("Email Address")).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
The test descriptions should start with "should" for consistency with the project's TDD patterns. For example: "should render the label text correctly" instead of "renders the label text correctly". This follows the AAA (Arrange-Act-Assert) pattern used in other test files like Button.test.tsx.
| @@ -0,0 +1,56 @@ | |||
| import { render, screen, fireEvent } from "@testing-library/react"; | |||
| import { describe, it, expect, vi } from "vitest"; | |||
| import Header from "./Header"; | |||
There was a problem hiding this comment.
The import statement uses a default import instead of a named import. Based on the project's coding guidelines, components should be exported as named exports using export function ComponentName(). The import should be:
import { Header } from "./Header";
This follows the pattern established in other components like Button.
| import Header from "./Header"; | |
| import { Header } from "./Header"; |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/components/atoms/Label/Label.tsx:
- Around line 26-33: The required asterisk in Label.tsx is hidden from screen
readers (span with aria-hidden="true") but there is no accessible indication of
required fields; when props.required is true, keep the visual asterisk (span
aria-hidden="true") and add a sibling screen-reader-only element (e.g., a span
with a "sr-only" class or aria-label text) that reads "required" for assistive
tech; update the Label component's tests to assert that the accessible
"required" text exists when props.required is true (reference props.required,
the existing aria-hidden span, and the Label component).
- Around line 10-11: The component currently uses a default export and raw
props; change it to a named export "export function Label" and destructure
incoming props (e.g., { size = "md", ... } : LabelProps) so size defaulting
happens in the parameter list instead of inside the function, and add a JSDoc
block above the function including a brief description and an @example showing
typical usage (using the Label and size prop) so the component follows
guidelines; keep the LabelProps type reference in the JSDoc and update any
imports/exports that relied on the default export to use the named export.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/atoms/Label/Label.tsxsrc/components/atoms/Label/LabelProps.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Use TypeScript for all files
Prefertypefor unions and primitives,interfacefor object shapes
Use?.optional chaining and??nullish coalescing
Files:
src/components/atoms/Label/LabelProps.tssrc/components/atoms/Label/Label.tsx
src/components/**/*Props.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Props files: PascalCase with
Props.tssuffix (e.g.,ButtonProps.ts)
Files:
src/components/atoms/Label/LabelProps.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Other files: camelCase (e.g.,
setupTests.ts)
Files:
src/components/atoms/Label/LabelProps.ts
src/components/**/[!.]*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Define interfaces for all component props in separate
[ComponentName]Props.tsfiles
Files:
src/components/atoms/Label/Label.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.tsx: Use function components (not arrow functions for exported components). Export named components:export function ComponentName() {}
Use destructuring for props, but keep the full props object for clarity in React components
Use React 19 features when appropriate
Use JSDoc comments for component documentation with@exampletags
Use TailwindCSS v4 utility classes exclusively for styling
Use DaisyUI component classes (e.g.,btn,card,input) and variants (e.g.,btn-primary,btn-secondary,btn-sm,btn-md,btn-lg)
Build dynamic class names using arrays and.join(' ')
Component files: PascalCase (e.g.,Button.tsx,UserProfile.tsx)
Follow established component directory structure:/src/components/[category]/[ComponentName]/with ComponentName.tsx, ComponentNameProps.ts, ComponentName.test.tsx, ComponentName.stories.tsx files
Files:
src/components/atoms/Label/Label.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*Props.ts : Props files: PascalCase with `Props.ts` suffix (e.g., `ButtonProps.ts`)
Applied to files:
src/components/atoms/Label/LabelProps.ts
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/[!.]*.tsx : Define interfaces for all component props in separate `[ComponentName]Props.ts` files
Applied to files:
src/components/atoms/Label/LabelProps.ts
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Use function components (not arrow functions for exported components). Export named components: `export function ComponentName() {}`
Applied to files:
src/components/atoms/Label/Label.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Use React 19 features when appropriate
Applied to files:
src/components/atoms/Label/Label.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
Applied to files:
src/components/atoms/Label/Label.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Use DaisyUI component classes (e.g., `btn`, `card`, `input`) and variants (e.g., `btn-primary`, `btn-secondary`, `btn-sm`, `btn-md`, `btn-lg`)
Applied to files:
src/components/atoms/Label/Label.tsx
🧬 Code graph analysis (1)
src/components/atoms/Label/Label.tsx (1)
src/components/atoms/Label/LabelProps.ts (1)
LabelProps(6-24)
🔇 Additional comments (2)
src/components/atoms/Label/LabelProps.ts (1)
1-24: LGTM!The props file follows the coding guidelines correctly:
- Uses
typefor the union (LabelSize)- Uses
interfacefor the object shape (LabelProps)- Includes JSDoc comments for all props
- Correct naming convention with PascalCase and
Props.tssuffixsrc/components/atoms/Label/Label.tsx (1)
15-22: Class construction follows guidelines.Good use of the array and
.filter(Boolean).join(" ")pattern for dynamic class names as specified in the coding guidelines.
src/components/atoms/Label/Label.tsx
Outdated
| export default function Label(props: Readonly<LabelProps>) { | ||
| const size = props.size ?? "md"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use named export and add JSDoc documentation.
Per coding guidelines, components should use named exports and include JSDoc comments with @example tags.
Suggested changes
+/**
+ * Label atom for form inputs with size variants and required indicator.
+ *
+ * @example
+ * <Label htmlFor="email" required>Email Address</Label>
+ */
-export default function Label(props: Readonly<LabelProps>) {
- const size = props.size ?? "md";
+export function Label({
+ htmlFor,
+ children,
+ required = false,
+ size = "md",
+ disabled = false,
+ className,
+}: Readonly<LabelProps>) {As per coding guidelines, use destructuring for props and named exports for components.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export default function Label(props: Readonly<LabelProps>) { | |
| const size = props.size ?? "md"; | |
| /** | |
| * Label atom for form inputs with size variants and required indicator. | |
| * | |
| * @example | |
| * <Label htmlFor="email" required>Email Address</Label> | |
| */ | |
| export function Label({ | |
| htmlFor, | |
| children, | |
| required = false, | |
| size = "md", | |
| disabled = false, | |
| className, | |
| }: Readonly<LabelProps>) { |
🤖 Prompt for AI Agents
In @src/components/atoms/Label/Label.tsx around lines 10 - 11, The component
currently uses a default export and raw props; change it to a named export
"export function Label" and destructure incoming props (e.g., { size = "md", ...
} : LabelProps) so size defaulting happens in the parameter list instead of
inside the function, and add a JSDoc block above the function including a brief
description and an @example showing typical usage (using the Label and size
prop) so the component follows guidelines; keep the LabelProps type reference in
the JSDoc and update any imports/exports that relied on the default export to
use the named export.
…g and accessibility features
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/atoms/Label/Label.test.tsx:
- Around line 5-34: Tests for the Label atom are missing coverage for default
props, size variants, disabled state, custom className and accessibility; update
src/components/atoms/Label/Label.test.tsx to add tests that render the Label
component and assert its role and classes: use render(<Label ... />) and
screen.getByRole('label', { name: /email/i }) to verify the default size maps to
the "md" styling (expect class like "text-sm"), verify size="sm" yields
"text-xs" and size="lg" yields "text-base", verify disabled prop adds
"opacity-50" and "cursor-not-allowed", and verify passing className (e.g.
"custom-class") is applied; keep existing tests for text, htmlFor and required
indicator and ensure assertions use toHaveClass / toHaveAttribute /
toBeInTheDocument as appropriate.
🧹 Nitpick comments (4)
src/components/atoms/Label/Label.test.tsx (4)
6-10: Test name should start with "should".Per coding guidelines, test names should start with "should" for consistency. Additionally, consider using
getByRole('label')instead ofgetByTextfor more semantic queries.♻️ Suggested refactor
- it("renders the label text correctly", () => { + it("should render the label text correctly", () => { render(<Label htmlFor="email">Email Address</Label>); - expect(screen.getByText("Email Address")).toBeInTheDocument(); + expect(screen.getByRole('label', { name: /email address/i })).toBeInTheDocument(); });Based on coding guidelines.
12-17: Test name should start with "should" and use semantic queries.Use
getByRole('label')for more semantic querying of label elements.♻️ Suggested refactor
- it("applies the htmlFor attribute correctly", () => { + it("should apply the htmlFor attribute correctly", () => { render(<Label htmlFor="email">Email</Label>); - const label = screen.getByText("Email"); + const label = screen.getByRole('label', { name: /email/i }); expect(label).toHaveAttribute("for", "email"); });Based on coding guidelines.
19-27: Test accessibility features rather than implementation details.The test checks for the asterisk "*", which is an implementation detail. Per coding guidelines, tests should verify behavior and accessibility features. Consider testing for the screen-reader text "(required)" or aria attributes instead.
♻️ Suggested refactor
- it("shows required indicator when required prop is true", () => { + it("should show required indicator when required prop is true", () => { render( <Label htmlFor="email" required> Email </Label> ); - expect(screen.getByText("*")).toBeInTheDocument(); + expect(screen.getByText("(required)")).toBeInTheDocument(); });Based on coding guidelines.
29-33: Test name should start with "should".Update the test name to follow coding guidelines. Also consider testing for the absence of the screen-reader text "(required)" instead of the asterisk.
♻️ Suggested refactor
- it("does not show required indicator when required is false", () => { + it("should not show required indicator when required is false", () => { render(<Label htmlFor="email">Email</Label>); - expect(screen.queryByText("*")).not.toBeInTheDocument(); + expect(screen.queryByText("(required)")).not.toBeInTheDocument(); });Based on coding guidelines.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/atoms/Label/Label.test.tsxsrc/components/atoms/Label/Label.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/atoms/Label/Label.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Use TypeScript for all files
Prefertypefor unions and primitives,interfacefor object shapes
Use?.optional chaining and??nullish coalescing
Files:
src/components/atoms/Label/Label.test.tsx
src/components/**/[!.]*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Define interfaces for all component props in separate
[ComponentName]Props.tsfiles
Files:
src/components/atoms/Label/Label.test.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.tsx: Use function components (not arrow functions for exported components). Export named components:export function ComponentName() {}
Use destructuring for props, but keep the full props object for clarity in React components
Use React 19 features when appropriate
Use JSDoc comments for component documentation with@exampletags
Use TailwindCSS v4 utility classes exclusively for styling
Use DaisyUI component classes (e.g.,btn,card,input) and variants (e.g.,btn-primary,btn-secondary,btn-sm,btn-md,btn-lg)
Build dynamic class names using arrays and.join(' ')
Component files: PascalCase (e.g.,Button.tsx,UserProfile.tsx)
Follow established component directory structure:/src/components/[category]/[ComponentName]/with ComponentName.tsx, ComponentNameProps.ts, ComponentName.test.tsx, ComponentName.stories.tsx files
Files:
src/components/atoms/Label/Label.test.tsx
src/**/*.test.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.test.tsx: Test files: PascalCase with.test.tsxsuffix (e.g.,Button.test.tsx)
Always write tests before implementation when adding new features (Test-Driven Development - TDD Red-Green-Refactor cycle)
Use Vitest as the test runner
Use React Testing Library for component testing
Use @testing-library/user-event for user interactions in tests
Follow the Arrange-Act-Assert (AAA) pattern in tests
Use descriptive test names starting with 'should'
Use semantic queries in order of preference: getByRole, getByLabelText, getByPlaceholderText, getByText, getByTestId (last resort)
Always use async/await with user events in tests
Mock functions withvi.fn()(notjest.fn()) in Vitest
Test user interactions, not implementation details
Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
Files:
src/components/atoms/Label/Label.test.tsx
🧠 Learnings (15)
📓 Common learnings
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Include tests for: default props, variants, interactions, disabled state, accessibility in component tests
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use React Testing Library for component testing
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Test files: PascalCase with `.test.tsx` suffix (e.g., `Button.test.tsx`)
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Test user interactions, not implementation details
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use semantic queries in order of preference: getByRole, getByLabelText, getByPlaceholderText, getByText, getByTestId (last resort)
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Follow the Arrange-Act-Assert (AAA) pattern in tests
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use descriptive test names starting with 'should'
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Use Vitest as the test runner
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Always write tests before implementation when adding new features (Test-Driven Development - TDD Red-Green-Refactor cycle)
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/**/*.test.tsx : Always use async/await with user events in tests
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Use React 19 features when appropriate
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Use function components (not arrow functions for exported components). Export named components: `export function ComponentName() {}`
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Component files: PascalCase (e.g., `Button.tsx`, `UserProfile.tsx`)
Applied to files:
src/components/atoms/Label/Label.test.tsx
📚 Learning: 2025-12-23T08:13:56.218Z
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*Props.ts : Props files: PascalCase with `Props.ts` suffix (e.g., `ButtonProps.ts`)
Applied to files:
src/components/atoms/Label/Label.test.tsx
🧬 Code graph analysis (1)
src/components/atoms/Label/Label.test.tsx (1)
src/components/atoms/Label/Label.tsx (1)
Label(18-58)
| describe("Label Atom", () => { | ||
| it("renders the label text correctly", () => { | ||
| render(<Label htmlFor="email">Email Address</Label>); | ||
|
|
||
| expect(screen.getByText("Email Address")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("applies the htmlFor attribute correctly", () => { | ||
| render(<Label htmlFor="email">Email</Label>); | ||
|
|
||
| const label = screen.getByText("Email"); | ||
| expect(label).toHaveAttribute("for", "email"); | ||
| }); | ||
|
|
||
| it("shows required indicator when required prop is true", () => { | ||
| render( | ||
| <Label htmlFor="email" required> | ||
| </Label> | ||
| ); | ||
|
|
||
| expect(screen.getByText("*")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("does not show required indicator when required is false", () => { | ||
| render(<Label htmlFor="email">Email</Label>); | ||
|
|
||
| expect(screen.queryByText("*")).not.toBeInTheDocument(); | ||
| }); | ||
| }); No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add missing test coverage for variants, disabled state, default props, and accessibility.
Per coding guidelines, component tests must include coverage for default props, variants, disabled state, and accessibility. The Label component has a size prop with variants ("sm", "md", "lg"), a disabled prop, and a default size of "md", but these are not tested.
📋 Suggested additional tests
Add the following test cases to ensure complete coverage:
it("should apply default size (md) when no size prop is provided", () => {
render(<Label htmlFor="email">Email</Label>);
const label = screen.getByRole('label', { name: /email/i });
expect(label).toHaveClass('text-sm'); // md size maps to text-sm
});
it("should apply small size styling", () => {
render(<Label htmlFor="email" size="sm">Email</Label>);
const label = screen.getByRole('label', { name: /email/i });
expect(label).toHaveClass('text-xs');
});
it("should apply large size styling", () => {
render(<Label htmlFor="email" size="lg">Email</Label>);
const label = screen.getByRole('label', { name: /email/i });
expect(label).toHaveClass('text-base');
});
it("should apply disabled styling when disabled prop is true", () => {
render(<Label htmlFor="email" disabled>Email</Label>);
const label = screen.getByRole('label', { name: /email/i });
expect(label).toHaveClass('opacity-50');
expect(label).toHaveClass('cursor-not-allowed');
});
it("should apply custom className", () => {
render(<Label htmlFor="email" className="custom-class">Email</Label>);
const label = screen.getByRole('label', { name: /email/i });
expect(label).toHaveClass('custom-class');
});Based on coding guidelines.
🤖 Prompt for AI Agents
In @src/components/atoms/Label/Label.test.tsx around lines 5 - 34, Tests for the
Label atom are missing coverage for default props, size variants, disabled
state, custom className and accessibility; update
src/components/atoms/Label/Label.test.tsx to add tests that render the Label
component and assert its role and classes: use render(<Label ... />) and
screen.getByRole('label', { name: /email/i }) to verify the default size maps to
the "md" styling (expect class like "text-sm"), verify size="sm" yields
"text-xs" and size="lg" yields "text-base", verify disabled prop adds
"opacity-50" and "cursor-not-allowed", and verify passing className (e.g.
"custom-class") is applied; keep existing tests for text, htmlFor and required
indicator and ensure assertions use toHaveClass / toHaveAttribute /
toBeInTheDocument as appropriate.
Summary by CodeRabbit
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.