From 36187addbd90cf4798b8e81cce87c41c37eb2a65 Mon Sep 17 00:00:00 2001 From: KARUNANS2004 Date: Fri, 2 Jan 2026 23:13:21 +0530 Subject: [PATCH 1/4] create header test file --- src/components/layout/Header/Header.test.tsx | 56 ++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/components/layout/Header/Header.test.tsx diff --git a/src/components/layout/Header/Header.test.tsx b/src/components/layout/Header/Header.test.tsx new file mode 100644 index 0000000..2465a1a --- /dev/null +++ b/src/components/layout/Header/Header.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"; + +describe("Header component", () => { + const mockLogout = vi.fn(); + + const defaultProps = { + user: { name: "Karuna" }, + onLogout: mockLogout, + }; + + it("renders the navbar container", () => { + render(
); + expect(screen.getByRole("banner")).toBeInTheDocument(); + }); + + it("renders the app title", () => { + render(
); + expect(screen.getByText("daisyUI")).toBeInTheDocument(); + }); + + it("renders the hamburger menu link", () => { + render(
); + const menuLink = screen.getAllByRole("link")[0]; + expect(menuLink).toHaveAttribute("href", "/"); + }); + + it("renders profile button", () => { + render(
); + expect(screen.getByRole("button")).toBeInTheDocument(); + }); + + it("shows the first letter of the user's name in profile image", () => { + render(
); + const profileImg = screen.getByAltText("Karuna profile"); + expect(profileImg).toHaveAttribute( + "src", + expect.stringContaining("K") + ); + }); + + it("uses fallback text when user is undefined", () => { + render(
); + expect(screen.getByAltText("User profile")).toBeInTheDocument(); + }); + + it("calls onLogout when profile button is clicked", () => { + render(
); + const profileButton = screen.getByRole("button"); + + fireEvent.click(profileButton); + + expect(mockLogout).toHaveBeenCalledOnce(); + }); +}); From 13f82b736b24d0b0751ae45e7f54af62de6befaa Mon Sep 17 00:00:00 2001 From: KARUNANS2004 Date: Wed, 7 Jan 2026 14:34:48 +0530 Subject: [PATCH 2/4] Create Label Atom folder and test case --- src/components/atoms/Label/Label.test.tsx | 34 +++++++++++++++++++++++ src/components/atoms/Label/Label.tsx | 0 2 files changed, 34 insertions(+) create mode 100644 src/components/atoms/Label/Label.test.tsx create mode 100644 src/components/atoms/Label/Label.tsx diff --git a/src/components/atoms/Label/Label.test.tsx b/src/components/atoms/Label/Label.test.tsx new file mode 100644 index 0000000..eb793c5 --- /dev/null +++ b/src/components/atoms/Label/Label.test.tsx @@ -0,0 +1,34 @@ +import { render, screen } from "@testing-library/react"; +import { describe, it, expect } from "vitest"; +import Label from "./Label"; + +describe("Label Atom", () => { + it("renders the label text correctly", () => { + render(); + + expect(screen.getByText("Email Address")).toBeInTheDocument(); + }); + + it("applies the htmlFor attribute correctly", () => { + render(); + + const label = screen.getByText("Email"); + expect(label).toHaveAttribute("for", "email"); + }); + + it("shows required indicator when required prop is true", () => { + render( + + ); + + expect(screen.getByText("*")).toBeInTheDocument(); + }); + + it("does not show required indicator when required is false", () => { + render(); + + expect(screen.queryByText("*")).not.toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx new file mode 100644 index 0000000..e69de29 From 50013d7bd7414d7a60641ec72ecc88e833f4dd30 Mon Sep 17 00:00:00 2001 From: Arnab Date: Fri, 9 Jan 2026 11:46:37 +0530 Subject: [PATCH 3/4] feat(Label): create Label component with customizable size and accessibility features --- src/components/atoms/Label/Label.tsx | 36 ++++++++++++++++++++++++ src/components/atoms/Label/LabelProps.ts | 24 ++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 src/components/atoms/Label/LabelProps.ts diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx index e69de29..a764f03 100644 --- a/src/components/atoms/Label/Label.tsx +++ b/src/components/atoms/Label/Label.tsx @@ -0,0 +1,36 @@ +// src/components/atoms/Label/Label.tsx +import type {LabelProps} from "./LabelProps"; + +const sizeClasses: Record, string> = { + sm: "text-xs", + md: "text-sm", + lg: "text-base", +}; + +export default function Label(props: Readonly) { + const size = props.size ?? "md"; + return ( + + ); +} diff --git a/src/components/atoms/Label/LabelProps.ts b/src/components/atoms/Label/LabelProps.ts new file mode 100644 index 0000000..87c241c --- /dev/null +++ b/src/components/atoms/Label/LabelProps.ts @@ -0,0 +1,24 @@ +// src/components/atoms/Label/LabelProps.ts +import type {ReactNode} from "react"; + +export type LabelSize = "sm" | "md" | "lg"; + +export interface LabelProps { + /** id of the input this label is associated with */ + htmlFor?: string; + + /** label text */ + children: ReactNode; + + /** show required asterisk */ + required?: boolean; + + /** visual size */ + size?: LabelSize; + + /** disabled appearance */ + disabled?: boolean; + + /** extra tailwind classes */ + className?: string; +} From 86ff40c1d6e2ede2a14784aa3362015713afa8a0 Mon Sep 17 00:00:00 2001 From: Arnab Date: Sun, 11 Jan 2026 15:50:41 +0530 Subject: [PATCH 4/4] feat(Label): enhance Label component with improved props destructuring and accessibility features --- src/components/atoms/Label/Label.test.tsx | 6 +-- src/components/atoms/Label/Label.tsx | 48 +++++++++++++++++------ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/components/atoms/Label/Label.test.tsx b/src/components/atoms/Label/Label.test.tsx index eb793c5..254998f 100644 --- a/src/components/atoms/Label/Label.test.tsx +++ b/src/components/atoms/Label/Label.test.tsx @@ -1,6 +1,6 @@ -import { render, screen } from "@testing-library/react"; -import { describe, it, expect } from "vitest"; -import Label from "./Label"; +import {render, screen} from "@testing-library/react"; +import {describe, expect, it} from "vitest"; +import {Label} from "./Label"; describe("Label Atom", () => { it("renders the label text correctly", () => { diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx index a764f03..5a80bf8 100644 --- a/src/components/atoms/Label/Label.tsx +++ b/src/components/atoms/Label/Label.tsx @@ -7,29 +7,51 @@ const sizeClasses: Record, string> = { lg: "text-base", }; -export default function Label(props: Readonly) { - const size = props.size ?? "md"; +/** + * A form label component that supports various sizes, required indicators, and disabled states. + * @see LabelProps + * @example + * + */ +export default function Label({ + htmlFor, + children, + required, + size = "md", + disabled, + className, + }: Readonly) { return ( );