From 6c67604efcf95389eaf53ee8b9624ed64e6d0d36 Mon Sep 17 00:00:00 2001 From: Matthew Ellison Date: Thu, 26 Feb 2026 23:10:08 -0500 Subject: [PATCH] Add pill component --- lib/component/pill/DangerPill.tsx | 20 ++++++ lib/component/pill/DarkPill.tsx | 20 ++++++ lib/component/pill/InfoPill.tsx | 20 ++++++ lib/component/pill/LightPill.tsx | 20 ++++++ lib/component/pill/MoltenPill.tsx | 20 ++++++ lib/component/pill/Pill.tsx | 26 +++++++ lib/component/pill/PrimaryPill.tsx | 20 ++++++ lib/component/pill/SecondaryPill.tsx | 20 ++++++ lib/component/pill/SuccessPill.tsx | 20 ++++++ lib/component/pill/TertiaryPill.tsx | 20 ++++++ lib/component/pill/WarningPill.tsx | 20 ++++++ lib/types/PillTypes.ts | 9 +++ src/main.tsx | 2 +- src/routeTree.gen.ts | 21 ++++++ src/routes/__root.tsx | 3 +- src/routes/message/index.tsx | 14 ++-- src/routes/pill/index.tsx | 56 +++++++++++++++ test/component/pill/DangerPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/DarkPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/InfoPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/LightPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/MoltenPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/Pill.test.tsx | 78 ++++++++++++++++++++ test/component/pill/PrimaryPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/SecondaryPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/SuccessPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/TertiaryPill.test.tsx | 84 ++++++++++++++++++++++ test/component/pill/WarningPill.test.tsx | 84 ++++++++++++++++++++++ 28 files changed, 1240 insertions(+), 9 deletions(-) create mode 100644 lib/component/pill/DangerPill.tsx create mode 100644 lib/component/pill/DarkPill.tsx create mode 100644 lib/component/pill/InfoPill.tsx create mode 100644 lib/component/pill/LightPill.tsx create mode 100644 lib/component/pill/MoltenPill.tsx create mode 100644 lib/component/pill/Pill.tsx create mode 100644 lib/component/pill/PrimaryPill.tsx create mode 100644 lib/component/pill/SecondaryPill.tsx create mode 100644 lib/component/pill/SuccessPill.tsx create mode 100644 lib/component/pill/TertiaryPill.tsx create mode 100644 lib/component/pill/WarningPill.tsx create mode 100644 lib/types/PillTypes.ts create mode 100644 src/routes/pill/index.tsx create mode 100644 test/component/pill/DangerPill.test.tsx create mode 100644 test/component/pill/DarkPill.test.tsx create mode 100644 test/component/pill/InfoPill.test.tsx create mode 100644 test/component/pill/LightPill.test.tsx create mode 100644 test/component/pill/MoltenPill.test.tsx create mode 100644 test/component/pill/Pill.test.tsx create mode 100644 test/component/pill/PrimaryPill.test.tsx create mode 100644 test/component/pill/SecondaryPill.test.tsx create mode 100644 test/component/pill/SuccessPill.test.tsx create mode 100644 test/component/pill/TertiaryPill.test.tsx create mode 100644 test/component/pill/WarningPill.test.tsx diff --git a/lib/component/pill/DangerPill.tsx b/lib/component/pill/DangerPill.tsx new file mode 100644 index 0000000..5b4216e --- /dev/null +++ b/lib/component/pill/DangerPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function DangerPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/DarkPill.tsx b/lib/component/pill/DarkPill.tsx new file mode 100644 index 0000000..af79d86 --- /dev/null +++ b/lib/component/pill/DarkPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function DarkPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/InfoPill.tsx b/lib/component/pill/InfoPill.tsx new file mode 100644 index 0000000..2d29522 --- /dev/null +++ b/lib/component/pill/InfoPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function InfoPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/LightPill.tsx b/lib/component/pill/LightPill.tsx new file mode 100644 index 0000000..b88c3b6 --- /dev/null +++ b/lib/component/pill/LightPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function LightPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/MoltenPill.tsx b/lib/component/pill/MoltenPill.tsx new file mode 100644 index 0000000..3e88fb4 --- /dev/null +++ b/lib/component/pill/MoltenPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function MoltenPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/Pill.tsx b/lib/component/pill/Pill.tsx new file mode 100644 index 0000000..0e0c4e8 --- /dev/null +++ b/lib/component/pill/Pill.tsx @@ -0,0 +1,26 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; + + +export default function Pill({ + className, + rounding = "full", + ...props +}: Readonly){ + return ( +
+ ); +} diff --git a/lib/component/pill/PrimaryPill.tsx b/lib/component/pill/PrimaryPill.tsx new file mode 100644 index 0000000..f087c79 --- /dev/null +++ b/lib/component/pill/PrimaryPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function PrimaryPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/SecondaryPill.tsx b/lib/component/pill/SecondaryPill.tsx new file mode 100644 index 0000000..ce8ca0a --- /dev/null +++ b/lib/component/pill/SecondaryPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function SecondaryPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/SuccessPill.tsx b/lib/component/pill/SuccessPill.tsx new file mode 100644 index 0000000..eed54ea --- /dev/null +++ b/lib/component/pill/SuccessPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function SuccessPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/TertiaryPill.tsx b/lib/component/pill/TertiaryPill.tsx new file mode 100644 index 0000000..984edbf --- /dev/null +++ b/lib/component/pill/TertiaryPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function TertiaryPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/component/pill/WarningPill.tsx b/lib/component/pill/WarningPill.tsx new file mode 100644 index 0000000..d5fffe1 --- /dev/null +++ b/lib/component/pill/WarningPill.tsx @@ -0,0 +1,20 @@ +import type { PillProps } from "$/types/PillTypes"; +import clsx from "clsx"; +import Pill from "./Pill"; + + +export default function WarningPill({ + className, + ...props +}: Readonly){ + return ( + + ); +} diff --git a/lib/types/PillTypes.ts b/lib/types/PillTypes.ts new file mode 100644 index 0000000..c849740 --- /dev/null +++ b/lib/types/PillTypes.ts @@ -0,0 +1,9 @@ +import type { ComponentProps } from "react"; + + +export type PillRounding = "none" | "sm" | "md" | "lg" | "full"; + + +export interface PillProps extends ComponentProps<"div"> { + rounding?: PillRounding; +} diff --git a/src/main.tsx b/src/main.tsx index cd9592b..defa005 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -18,7 +18,7 @@ declare module "@tanstack/react-router" { createRoot(document.getElementById('root')!).render( - + diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 9186c46..249f66a 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root' import { Route as IndexRouteImport } from './routes/index' import { Route as TabIndexRouteImport } from './routes/tab/index' import { Route as ProgressIndexRouteImport } from './routes/progress/index' +import { Route as PillIndexRouteImport } from './routes/pill/index' import { Route as ModalIndexRouteImport } from './routes/modal/index' import { Route as MessageIndexRouteImport } from './routes/message/index' import { Route as LoadingIndexRouteImport } from './routes/loading/index' @@ -33,6 +34,11 @@ const ProgressIndexRoute = ProgressIndexRouteImport.update({ path: '/progress/', getParentRoute: () => rootRouteImport, } as any) +const PillIndexRoute = PillIndexRouteImport.update({ + id: '/pill/', + path: '/pill/', + getParentRoute: () => rootRouteImport, +} as any) const ModalIndexRoute = ModalIndexRouteImport.update({ id: '/modal/', path: '/modal/', @@ -66,6 +72,7 @@ export interface FileRoutesByFullPath { '/loading': typeof LoadingIndexRoute '/message': typeof MessageIndexRoute '/modal': typeof ModalIndexRoute + '/pill': typeof PillIndexRoute '/progress': typeof ProgressIndexRoute '/tab': typeof TabIndexRoute } @@ -76,6 +83,7 @@ export interface FileRoutesByTo { '/loading': typeof LoadingIndexRoute '/message': typeof MessageIndexRoute '/modal': typeof ModalIndexRoute + '/pill': typeof PillIndexRoute '/progress': typeof ProgressIndexRoute '/tab': typeof TabIndexRoute } @@ -87,6 +95,7 @@ export interface FileRoutesById { '/loading/': typeof LoadingIndexRoute '/message/': typeof MessageIndexRoute '/modal/': typeof ModalIndexRoute + '/pill/': typeof PillIndexRoute '/progress/': typeof ProgressIndexRoute '/tab/': typeof TabIndexRoute } @@ -99,6 +108,7 @@ export interface FileRouteTypes { | '/loading' | '/message' | '/modal' + | '/pill' | '/progress' | '/tab' fileRoutesByTo: FileRoutesByTo @@ -109,6 +119,7 @@ export interface FileRouteTypes { | '/loading' | '/message' | '/modal' + | '/pill' | '/progress' | '/tab' id: @@ -119,6 +130,7 @@ export interface FileRouteTypes { | '/loading/' | '/message/' | '/modal/' + | '/pill/' | '/progress/' | '/tab/' fileRoutesById: FileRoutesById @@ -130,6 +142,7 @@ export interface RootRouteChildren { LoadingIndexRoute: typeof LoadingIndexRoute MessageIndexRoute: typeof MessageIndexRoute ModalIndexRoute: typeof ModalIndexRoute + PillIndexRoute: typeof PillIndexRoute ProgressIndexRoute: typeof ProgressIndexRoute TabIndexRoute: typeof TabIndexRoute } @@ -157,6 +170,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ProgressIndexRouteImport parentRoute: typeof rootRouteImport } + '/pill/': { + id: '/pill/' + path: '/pill' + fullPath: '/pill' + preLoaderRoute: typeof PillIndexRouteImport + parentRoute: typeof rootRouteImport + } '/modal/': { id: '/modal/' path: '/modal' @@ -202,6 +222,7 @@ const rootRouteChildren: RootRouteChildren = { LoadingIndexRoute: LoadingIndexRoute, MessageIndexRoute: MessageIndexRoute, ModalIndexRoute: ModalIndexRoute, + PillIndexRoute: PillIndexRoute, ProgressIndexRoute: ProgressIndexRoute, TabIndexRoute: TabIndexRoute, } diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 17d4f97..afd680d 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -11,6 +11,7 @@ const navLinks = [ { to: "/loading", label: "Loading" }, { to: "/message", label: "Message" }, { to: "/modal", label: "Modal" }, + { to: "/pill", label: "Pill" }, { to: "/progress", label: "Progress" }, { to: "/tab", label: "Tab" } ]; @@ -20,7 +21,7 @@ export const Route = createRootRoute({ component: () => ( <>
+ + + + + + + + + + +
+ ); +} + +function PillLayout({ + PillType, + pillName +}: Readonly<{ + PillType: (props: PillProps) => React.ReactNode; + pillName: string; +}>){ + return ( +
+

{pillName}

+
+ None + Small + Medium + Large + Full +
+
+ ); +} diff --git a/test/component/pill/DangerPill.test.tsx b/test/component/pill/DangerPill.test.tsx new file mode 100644 index 0000000..24192c7 --- /dev/null +++ b/test/component/pill/DangerPill.test.tsx @@ -0,0 +1,84 @@ +import DangerPill from "$/component/pill/DangerPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-danger-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-danger", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-danger-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-danger", "text-white"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-danger-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-danger", "text-white"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-danger-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-danger", "text-white"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-danger-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-danger", "text-white"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-danger-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-danger", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/DarkPill.test.tsx b/test/component/pill/DarkPill.test.tsx new file mode 100644 index 0000000..ffc1148 --- /dev/null +++ b/test/component/pill/DarkPill.test.tsx @@ -0,0 +1,84 @@ +import DarkPill from "$/component/pill/DarkPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-dark-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-dark", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-dark-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-dark", "text-white"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-dark-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-dark", "text-white"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-dark-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-dark", "text-white"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-dark-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-dark", "text-white"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-dark-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-dark", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/InfoPill.test.tsx b/test/component/pill/InfoPill.test.tsx new file mode 100644 index 0000000..3619bde --- /dev/null +++ b/test/component/pill/InfoPill.test.tsx @@ -0,0 +1,84 @@ +import InfoPill from "$/component/pill/InfoPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-info-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-info", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-info-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-info", "text-black"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-info-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-info", "text-black"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-info-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-info", "text-black"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-info-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-info", "text-black"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-info-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-info", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/LightPill.test.tsx b/test/component/pill/LightPill.test.tsx new file mode 100644 index 0000000..d2c0949 --- /dev/null +++ b/test/component/pill/LightPill.test.tsx @@ -0,0 +1,84 @@ +import LightPill from "$/component/pill/LightPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-light-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-light", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-light-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-light", "text-black"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-light-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-light", "text-black"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-light-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-light", "text-black"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-light-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-light", "text-black"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-light-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-light", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/MoltenPill.test.tsx b/test/component/pill/MoltenPill.test.tsx new file mode 100644 index 0000000..2b9d231 --- /dev/null +++ b/test/component/pill/MoltenPill.test.tsx @@ -0,0 +1,84 @@ +import MoltenPill from "$/component/pill/MoltenPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-molten-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-molten", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-molten-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-molten", "text-black"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-molten-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-molten", "text-black"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-molten-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-molten", "text-black"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-molten-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-molten", "text-black"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-molten-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-molten", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/Pill.test.tsx b/test/component/pill/Pill.test.tsx new file mode 100644 index 0000000..8ddc6c7 --- /dev/null +++ b/test/component/pill/Pill.test.tsx @@ -0,0 +1,78 @@ +import Pill from "$/component/pill/Pill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/PrimaryPill.test.tsx b/test/component/pill/PrimaryPill.test.tsx new file mode 100644 index 0000000..816eabf --- /dev/null +++ b/test/component/pill/PrimaryPill.test.tsx @@ -0,0 +1,84 @@ +import PrimaryPill from "$/component/pill/PrimaryPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-primary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-primary", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-primary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-primary", "text-white"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-primary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-primary", "text-white"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-primary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-primary", "text-white"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-primary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-primary", "text-white"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-primary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-primary", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/SecondaryPill.test.tsx b/test/component/pill/SecondaryPill.test.tsx new file mode 100644 index 0000000..4132a7a --- /dev/null +++ b/test/component/pill/SecondaryPill.test.tsx @@ -0,0 +1,84 @@ +import SecondaryPill from "$/component/pill/SecondaryPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-secondary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-secondary", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-secondary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-secondary", "text-white"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-secondary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-secondary", "text-white"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-secondary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-secondary", "text-white"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-secondary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-secondary", "text-white"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-secondary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-secondary", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/SuccessPill.test.tsx b/test/component/pill/SuccessPill.test.tsx new file mode 100644 index 0000000..bc86077 --- /dev/null +++ b/test/component/pill/SuccessPill.test.tsx @@ -0,0 +1,84 @@ +import SuccessPill from "$/component/pill/SuccessPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-success-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-success", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-success-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-success", "text-black"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-success-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-success", "text-black"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-success-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-success", "text-black"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-success-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-success", "text-black"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-success-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-success", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/TertiaryPill.test.tsx b/test/component/pill/TertiaryPill.test.tsx new file mode 100644 index 0000000..8227cdb --- /dev/null +++ b/test/component/pill/TertiaryPill.test.tsx @@ -0,0 +1,84 @@ +import TertiaryPill from "$/component/pill/TertiaryPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-tertiary", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-tertiary", "text-white"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-tertiary", "text-white"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-tertiary", "text-white"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-tertiary", "text-white"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-tertiary", "text-white"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); diff --git a/test/component/pill/WarningPill.test.tsx b/test/component/pill/WarningPill.test.tsx new file mode 100644 index 0000000..f1a0b1f --- /dev/null +++ b/test/component/pill/WarningPill.test.tsx @@ -0,0 +1,84 @@ +import WarningPill from "$/component/pill/WarningPill"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +const textContent = "Testing"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-warning-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-warning", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +}); + +describe("Rounding", () => { + it("Renders with no rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-warning-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-warning", "text-black"); + }); + it("Renders with small rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-warning-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-warning", "text-black"); + expect(pillDiv).toHaveClass("rounded-sm"); + }); + it("Renders with medium rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-warning-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-warning", "text-black"); + expect(pillDiv).toHaveClass("rounded"); + }); + it("Renders with large rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-warning-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-warning", "text-black"); + expect(pillDiv).toHaveClass("rounded-lg"); + }); + it("Renders with full rounding", () => { + render({textContent}); + + //Make sure the pill div is present + const pillDiv = screen.getByTestId("mattrixwv-warning-pill"); + expect(pillDiv).toBeInTheDocument(); + expect(pillDiv).toHaveTextContent(textContent); + //Check for the default classes + expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap"); + expect(pillDiv).toHaveClass("bg-warning", "text-black"); + expect(pillDiv).toHaveClass("rounded-full"); + }); +});