Compare commits
5 Commits
c55ce3ad77
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
326ef4bf5e
|
|||
|
0018e56938
|
|||
|
178f5c88e8
|
|||
|
6c67604efc
|
|||
|
378dae159f
|
5
.gitignore
vendored
5
.gitignore
vendored
@@ -7,10 +7,7 @@ dist
|
||||
*.local
|
||||
.tanstack
|
||||
*.tgz
|
||||
test/coverage
|
||||
|
||||
# Editor directories and files
|
||||
.vscode
|
||||
coverage
|
||||
|
||||
# Sonarqube
|
||||
sonarBuild.sh
|
||||
|
||||
6
.vscode/settings.json
vendored
Normal file
6
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"sonarlint.connectedMode.project": {
|
||||
"connectionId": "mattrixwvSonarqube",
|
||||
"projectKey": "MattrixwvReactComponents"
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
import type { CheckboxProps } from "$/types/InputTypes";
|
||||
import { Checkbox } from "@headlessui/react";
|
||||
import { Checkbox, Field, Label } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function MattrixwvCheckbox({
|
||||
id = crypto.randomUUID().replaceAll("-", ""),
|
||||
className,
|
||||
labelClassName,
|
||||
name,
|
||||
@@ -19,65 +18,68 @@ export default function MattrixwvCheckbox({
|
||||
children
|
||||
}: Readonly<CheckboxProps>){
|
||||
return (
|
||||
<Checkbox
|
||||
id={id}
|
||||
className={clsx(
|
||||
"group",
|
||||
"flex flex-row items-center justify-start gap-x-2",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
||||
{
|
||||
"cursor-pointer": !disabled,
|
||||
"cursor-not-allowed": disabled
|
||||
}
|
||||
)}
|
||||
name={name}
|
||||
checked={checked}
|
||||
defaultChecked={defaultChecked}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
aria-labelledby={`${id}Label`}
|
||||
<Field
|
||||
className="flex flex-row items-center justify-center gap-x-2"
|
||||
>
|
||||
{/* Checkbox */}
|
||||
<div
|
||||
<Checkbox
|
||||
data-testid="mattrixwv-checkbox"
|
||||
className={clsx(
|
||||
className,
|
||||
"group",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
||||
{
|
||||
"border rounded": showBox
|
||||
},
|
||||
{
|
||||
"": size === "none",
|
||||
"size-3": size === "xs",
|
||||
"size-4": size === "sm",
|
||||
"size-5": size === "md",
|
||||
"size-6": size === "lg",
|
||||
"size-7": size === "xl"
|
||||
"cursor-pointer": !disabled,
|
||||
"cursor-not-allowed": disabled
|
||||
}
|
||||
)}
|
||||
name={name}
|
||||
checked={checked}
|
||||
defaultChecked={defaultChecked}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
{/* Checkbox */}
|
||||
<div
|
||||
data-testid="mattrixwv-checkbox-graphic"
|
||||
className={clsx(
|
||||
className,
|
||||
{
|
||||
"border rounded": showBox
|
||||
},
|
||||
{
|
||||
"": size === "none",
|
||||
"size-3": size === "xs",
|
||||
"size-4": size === "sm",
|
||||
"size-5": size === "md",
|
||||
"size-6": size === "lg",
|
||||
"size-7": size === "xl"
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M3 8L6 11L11 3.5"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M3 8L6 11L11 3.5"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</Checkbox>
|
||||
{/* Label */}
|
||||
{
|
||||
children &&
|
||||
<span
|
||||
id={`${id}Label`}
|
||||
className={labelClassName}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
}
|
||||
</Checkbox>
|
||||
{
|
||||
children &&
|
||||
<Label
|
||||
data-testid="mattrixwv-checkbox-label"
|
||||
className={labelClassName}
|
||||
>
|
||||
{children}
|
||||
</Label>
|
||||
}
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
|
||||
20
lib/component/pill/DangerPill.tsx
Normal file
20
lib/component/pill/DangerPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-danger-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-danger text-white"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/DarkPill.tsx
Normal file
20
lib/component/pill/DarkPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-dark-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-dark text-white"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/InfoPill.tsx
Normal file
20
lib/component/pill/InfoPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-info-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-info text-black"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/LightPill.tsx
Normal file
20
lib/component/pill/LightPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-light-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-light text-black"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/MoltenPill.tsx
Normal file
20
lib/component/pill/MoltenPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-molten-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-molten text-black"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
26
lib/component/pill/Pill.tsx
Normal file
26
lib/component/pill/Pill.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { PillProps } from "$/types/PillTypes";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function Pill({
|
||||
className,
|
||||
rounding = "full",
|
||||
...props
|
||||
}: Readonly<PillProps>){
|
||||
return (
|
||||
<div
|
||||
data-testid="mattrixwv-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"px-2 text-sm whitespace-nowrap",
|
||||
{
|
||||
"rounded-sm": rounding === "sm",
|
||||
"rounded": rounding === "md",
|
||||
"rounded-lg": rounding === "lg",
|
||||
"rounded-full": rounding === "full"
|
||||
}
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/PrimaryPill.tsx
Normal file
20
lib/component/pill/PrimaryPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-primary-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-primary text-white"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/SecondaryPill.tsx
Normal file
20
lib/component/pill/SecondaryPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-secondary-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-secondary text-white"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/SuccessPill.tsx
Normal file
20
lib/component/pill/SuccessPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-success-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-success text-black"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/TertiaryPill.tsx
Normal file
20
lib/component/pill/TertiaryPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-tertiary-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-tertiary text-white"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
lib/component/pill/WarningPill.tsx
Normal file
20
lib/component/pill/WarningPill.tsx
Normal file
@@ -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<PillProps>){
|
||||
return (
|
||||
<Pill
|
||||
data-testid="mattrixwv-warning-pill"
|
||||
className={clsx(
|
||||
className,
|
||||
"bg-warning text-black"
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -128,7 +128,6 @@ export interface FileInputProps {
|
||||
export type CheckboxSize = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
||||
|
||||
export interface CheckboxProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
name?: string;
|
||||
|
||||
9
lib/types/PillTypes.ts
Normal file
9
lib/types/PillTypes.ts
Normal file
@@ -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;
|
||||
}
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "mattrixwv-components",
|
||||
"version": "0.0.8",
|
||||
"version": "0.0.9",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "mattrixwv-components",
|
||||
"version": "0.0.8",
|
||||
"version": "0.0.9",
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
|
||||
10
package.json
10
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "mattrixwv-components",
|
||||
"private": false,
|
||||
"version": "0.0.8",
|
||||
"version": "0.0.9",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -18,12 +18,14 @@
|
||||
"versionMinor": "npm version minor",
|
||||
"versionMajor": "npm version major"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"react-icons": "^5.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@headlessui/react": "^2.2.9",
|
||||
"clsx": "^2.1.1",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-icons": "^5.5.0"
|
||||
"react-dom": "^19.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.2",
|
||||
|
||||
@@ -18,7 +18,7 @@ declare module "@tanstack/react-router" {
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider defaultTheme="dark">
|
||||
<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-128 rounded-lg gap-y-4">
|
||||
<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-lg rounded-lg gap-y-4">
|
||||
<RouterProvider router={router}/>
|
||||
</ToasterProvider>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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: () => (
|
||||
<>
|
||||
<NavBar
|
||||
className="bg-neutral-300 dark:bg-neutral-900 h-12"
|
||||
className="bg-neutral-300 dark:bg-neutral-900 h-12 gap-x-4"
|
||||
>
|
||||
<div
|
||||
className="flex flex-row items-center justify-end gap-x-4"
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { DangerMessageBlock, DarkMessageBlock, LightMessageBlock, PrimaryMessageBlock, SecondaryMessageBlock, SuccessMessageBlock, TertiaryMessageBlock, WarningMessageBlock } from '$/component/message';
|
||||
import InfoMessageBlock from '$/component/message/InfoMessageBlock';
|
||||
import MoltenMessageBlock from '$/component/message/MoltenMessageBlock';
|
||||
import { MattrixwvTabGroup } from '$/component/tab';
|
||||
import type { MessageBlockProps } from '$/types/MessageTypes';
|
||||
import type { TabGroupContent } from '$/types/TabTypes';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import InfoMessageBlock from "$/component/message/InfoMessageBlock";
|
||||
import MoltenMessageBlock from "$/component/message/MoltenMessageBlock";
|
||||
import { MattrixwvTabGroup } from "$/component/tab";
|
||||
import type { MessageBlockProps } from "$/types/MessageTypes";
|
||||
import type { TabGroupContent } from "$/types/TabTypes";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
|
||||
export const Route = createFileRoute('/message/')({
|
||||
export const Route = createFileRoute("/message/")({
|
||||
component: MessagePage
|
||||
});
|
||||
|
||||
|
||||
56
src/routes/pill/index.tsx
Normal file
56
src/routes/pill/index.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import DangerPill from "$/component/pill/DangerPill";
|
||||
import DarkPill from "$/component/pill/DarkPill";
|
||||
import InfoPill from "$/component/pill/InfoPill";
|
||||
import LightPill from "$/component/pill/LightPill";
|
||||
import MoltenPill from "$/component/pill/MoltenPill";
|
||||
import PrimaryPill from "$/component/pill/PrimaryPill";
|
||||
import SecondaryPill from "$/component/pill/SecondaryPill";
|
||||
import SuccessPill from "$/component/pill/SuccessPill";
|
||||
import TertiaryPill from "$/component/pill/TertiaryPill";
|
||||
import WarningPill from "$/component/pill/WarningPill";
|
||||
import type { PillProps } from "$/types/PillTypes";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
|
||||
export const Route = createFileRoute("/pill/")({
|
||||
component: PillPage
|
||||
});
|
||||
|
||||
|
||||
function PillPage(){
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-y-8">
|
||||
<PillLayout PillType={PrimaryPill} pillName="Primary"/>
|
||||
<PillLayout PillType={SecondaryPill} pillName="Secondary"/>
|
||||
<PillLayout PillType={TertiaryPill} pillName="Tertiary"/>
|
||||
<PillLayout PillType={InfoPill} pillName="Info"/>
|
||||
<PillLayout PillType={SuccessPill} pillName="Success"/>
|
||||
<PillLayout PillType={WarningPill} pillName="Warning"/>
|
||||
<PillLayout PillType={DangerPill} pillName="Danger"/>
|
||||
<PillLayout PillType={MoltenPill} pillName="Molten"/>
|
||||
<PillLayout PillType={DarkPill} pillName="Dark"/>
|
||||
<PillLayout PillType={LightPill} pillName="Light"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PillLayout({
|
||||
PillType,
|
||||
pillName
|
||||
}: Readonly<{
|
||||
PillType: (props: PillProps) => React.ReactNode;
|
||||
pillName: string;
|
||||
}>){
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-y-2">
|
||||
<h2 className="text-2xl">{pillName}</h2>
|
||||
<div className="flex flex-row items-center justify-center gap-x-8">
|
||||
<PillType rounding="none">None</PillType>
|
||||
<PillType rounding="sm">Small</PillType>
|
||||
<PillType rounding="md">Medium</PillType>
|
||||
<PillType rounding="lg">Large</PillType>
|
||||
<PillType rounding="full">Full</PillType>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
81
test/component/input/checkbox/DangerCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/DangerCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import DangerCheckbox from "$/component/input/checkbox/DangerCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<DangerCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<DangerCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<DangerCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<DangerCheckbox>{label}</DangerCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<DangerCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-danger");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<DangerCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-danger");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/DarkCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/DarkCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import DarkCheckbox from "$/component/input/checkbox/DarkCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<DarkCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<DarkCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<DarkCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<DarkCheckbox>{label}</DarkCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<DarkCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-dark");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<DarkCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-dark");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/InfoCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/InfoCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import InfoCheckbox from "$/component/input/checkbox/InfoCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<InfoCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<InfoCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<InfoCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<InfoCheckbox>{label}</InfoCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<InfoCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-info");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<InfoCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-info");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/LightCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/LightCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import LightCheckbox from "$/component/input/checkbox/LightCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<LightCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<LightCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<LightCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<LightCheckbox>{label}</LightCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<LightCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-light");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<LightCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-light");
|
||||
});
|
||||
});
|
||||
235
test/component/input/checkbox/MattrixwvCheckbox.test.tsx
Normal file
235
test/component/input/checkbox/MattrixwvCheckbox.test.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import { MattrixwvCheckbox } from "$/index";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<MattrixwvCheckbox/>);
|
||||
|
||||
//Checkbox
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox.id).toMatch(/_r_\d+/);
|
||||
expect(checkbox).toHaveClass("group");
|
||||
expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2");
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
expect(checkbox).not.toBeChecked();
|
||||
|
||||
//Visible checkbox
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
|
||||
//Label
|
||||
const label = screen.queryByTestId("mattrixwv-checkbox-label");
|
||||
expect(label).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("Renders with default properties with custom name and class name", () => {
|
||||
const className = "my-class-name";
|
||||
const name = "my-name";
|
||||
|
||||
render(
|
||||
<MattrixwvCheckbox
|
||||
className={className}
|
||||
name={name}
|
||||
/>
|
||||
);
|
||||
|
||||
//Checkbox
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("group");
|
||||
expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2");
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toBeChecked();
|
||||
expect(checkbox).not.toHaveAttribute("aria-labelledby");
|
||||
|
||||
//Visible checkbox
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkbox).toContain(checkboxGraphic);
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
|
||||
//Label
|
||||
const label = screen.queryByTestId("mattrixwv-checkbox-label");
|
||||
expect(label).not.toBeInTheDocument();
|
||||
});
|
||||
it("Renders with default properties disabled", () => {
|
||||
render(<MattrixwvCheckbox disabled/>);
|
||||
|
||||
//Checkbox
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox.id).toMatch(/_r_\d+/);
|
||||
expect(checkbox).toHaveClass("group");
|
||||
expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2");
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
expect(checkbox).not.toBeChecked();
|
||||
|
||||
//Visible checkbox
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkbox).toContain(checkboxGraphic);
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
|
||||
//Label
|
||||
const label = screen.queryByTestId("mattrixwv-checkbox-label");
|
||||
expect(label).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Checkbox", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<MattrixwvCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
});
|
||||
|
||||
it("Renders without box", () => {
|
||||
render(<MattrixwvCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).not.toHaveClass("border", "rounded");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Size", () => {
|
||||
it("Renders with no size", () => {
|
||||
render(<MattrixwvCheckbox size="none"/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic.className).not.toMatch(/size*/);
|
||||
});
|
||||
it("Renders with extra-small size", () => {
|
||||
render(<MattrixwvCheckbox size="xs"/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-3");
|
||||
});
|
||||
it("Renders with small size", () => {
|
||||
render(<MattrixwvCheckbox size="sm"/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
});
|
||||
it("Renders with medium size", () => {
|
||||
render(<MattrixwvCheckbox size="md"/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-5");
|
||||
});
|
||||
it("Renders with large size", () => {
|
||||
render(<MattrixwvCheckbox size="lg"/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-6");
|
||||
});
|
||||
it("Renders with extra-large size", () => {
|
||||
render(<MattrixwvCheckbox size="xl"/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-7");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Label", () => {
|
||||
it("Renders with label", () => {
|
||||
const textContent = "Text";
|
||||
|
||||
render(<MattrixwvCheckbox>{textContent}</MattrixwvCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveAttribute("aria-labelledby");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkbox).toContain(checkboxGraphic);
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkbox).toAppearBefore(checkboxLabel);
|
||||
expect(checkboxLabel.id).toMatch(/headlessui-label-_r_.+_/);
|
||||
expect(checkboxLabel).toHaveTextContent(textContent);
|
||||
});
|
||||
|
||||
it("Renders with label classes", () => {
|
||||
const textContent = "Text";
|
||||
const className = "custom-class-name";
|
||||
|
||||
render(<MattrixwvCheckbox labelClassName={className}>{textContent}</MattrixwvCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveAttribute("aria-labelledby");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkbox).toContain(checkboxGraphic);
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkbox).toAppearBefore(checkboxLabel);
|
||||
expect(checkboxLabel.id).toMatch(/headlessui-label-_r_.+_/);
|
||||
expect(checkboxLabel).toHaveClass(className);
|
||||
expect(checkboxLabel).toHaveTextContent(textContent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Checking", () => {
|
||||
it("Renders checked", async () => {
|
||||
render(<MattrixwvCheckbox checked/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toBeChecked();
|
||||
|
||||
await userEvent.click(checkbox);
|
||||
expect(checkbox).toBeChecked();
|
||||
});
|
||||
it("Renders default checked", async () => {
|
||||
render(<MattrixwvCheckbox defaultChecked/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toBeChecked();
|
||||
|
||||
await userEvent.click(checkbox);
|
||||
expect(checkbox).not.toBeChecked();
|
||||
});
|
||||
it("Handles changes", async () => {
|
||||
const label = "Some label";
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<MattrixwvCheckbox onChange={handleClick}>{label}</MattrixwvCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).not.toBeChecked();
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
|
||||
await userEvent.click(checkbox);
|
||||
expect(checkbox).toBeChecked();
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
await userEvent.click(checkboxLabel);
|
||||
expect(checkbox).not.toBeChecked();
|
||||
expect(handleClick).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/MoltenCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/MoltenCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import MoltenCheckbox from "$/component/input/checkbox/MoltenCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<MoltenCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<MoltenCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<MoltenCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<MoltenCheckbox>{label}</MoltenCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<MoltenCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-molten");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<MoltenCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-molten");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/PrimaryCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/PrimaryCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import PrimaryCheckbox from "$/component/input/checkbox/PrimaryCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<PrimaryCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<PrimaryCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<PrimaryCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<PrimaryCheckbox>{label}</PrimaryCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<PrimaryCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-primary");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<PrimaryCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-primary");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/SecondaryCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/SecondaryCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<SecondaryCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<SecondaryCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<SecondaryCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<SecondaryCheckbox>{label}</SecondaryCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<SecondaryCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-secondary");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<SecondaryCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-secondary");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/SuccessCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/SuccessCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<SuccessCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<SuccessCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<SuccessCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<SuccessCheckbox>{label}</SuccessCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<SuccessCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-success");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<SuccessCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-success");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/TertiaryCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/TertiaryCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<TertiaryCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<TertiaryCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<TertiaryCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<TertiaryCheckbox>{label}</TertiaryCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<TertiaryCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-tertiary");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<TertiaryCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-tertiary");
|
||||
});
|
||||
});
|
||||
81
test/component/input/checkbox/WarningCheckbox.test.tsx
Normal file
81
test/component/input/checkbox/WarningCheckbox.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
describe("Renders", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<WarningCheckbox/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-pointer");
|
||||
expect(checkbox).not.toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders disabled", () => {
|
||||
render(<WarningCheckbox disabled/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
expect(checkbox).toHaveClass("cursor-not-allowed");
|
||||
expect(checkbox).toHaveAttribute("data-disabled");
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
||||
expect(checkboxGraphic).toHaveClass("size-4");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
|
||||
});
|
||||
it("Renders with custom classes", () => {
|
||||
const className = "custom-class";
|
||||
|
||||
render(<WarningCheckbox className={className}/>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass(className);
|
||||
});
|
||||
it("Renders with label", () => {
|
||||
const label = "Some Label";
|
||||
|
||||
render(<WarningCheckbox>{label}</WarningCheckbox>);
|
||||
|
||||
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
||||
expect(checkbox).toBeInTheDocument();
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
|
||||
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
||||
expect(checkboxLabel).toBeInTheDocument();
|
||||
expect(checkboxLabel).toHaveTextContent(label);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Box variants", () => {
|
||||
it("Renders with box", () => {
|
||||
render(<WarningCheckbox showBox={true}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-warning");
|
||||
});
|
||||
it("Renders without box", () => {
|
||||
render(<WarningCheckbox showBox={false}/>);
|
||||
|
||||
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
||||
expect(checkboxGraphic).toBeInTheDocument();
|
||||
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
|
||||
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-warning");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/DangerPill.test.tsx
Normal file
84
test/component/pill/DangerPill.test.tsx
Normal file
@@ -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(<DangerPill>{textContent}</DangerPill>);
|
||||
|
||||
//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(<DangerPill rounding="none">{textContent}</DangerPill>);
|
||||
|
||||
//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(<DangerPill rounding="sm">{textContent}</DangerPill>);
|
||||
|
||||
//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(<DangerPill rounding="md">{textContent}</DangerPill>);
|
||||
|
||||
//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(<DangerPill rounding="lg">{textContent}</DangerPill>);
|
||||
|
||||
//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(<DangerPill rounding="full">{textContent}</DangerPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/DarkPill.test.tsx
Normal file
84
test/component/pill/DarkPill.test.tsx
Normal file
@@ -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(<DarkPill>{textContent}</DarkPill>);
|
||||
|
||||
//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(<DarkPill rounding="none">{textContent}</DarkPill>);
|
||||
|
||||
//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(<DarkPill rounding="sm">{textContent}</DarkPill>);
|
||||
|
||||
//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(<DarkPill rounding="md">{textContent}</DarkPill>);
|
||||
|
||||
//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(<DarkPill rounding="lg">{textContent}</DarkPill>);
|
||||
|
||||
//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(<DarkPill rounding="full">{textContent}</DarkPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/InfoPill.test.tsx
Normal file
84
test/component/pill/InfoPill.test.tsx
Normal file
@@ -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(<InfoPill>{textContent}</InfoPill>);
|
||||
|
||||
//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(<InfoPill rounding="none">{textContent}</InfoPill>);
|
||||
|
||||
//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(<InfoPill rounding="sm">{textContent}</InfoPill>);
|
||||
|
||||
//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(<InfoPill rounding="md">{textContent}</InfoPill>);
|
||||
|
||||
//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(<InfoPill rounding="lg">{textContent}</InfoPill>);
|
||||
|
||||
//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(<InfoPill rounding="full">{textContent}</InfoPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/LightPill.test.tsx
Normal file
84
test/component/pill/LightPill.test.tsx
Normal file
@@ -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(<LightPill>{textContent}</LightPill>);
|
||||
|
||||
//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(<LightPill rounding="none">{textContent}</LightPill>);
|
||||
|
||||
//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(<LightPill rounding="sm">{textContent}</LightPill>);
|
||||
|
||||
//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(<LightPill rounding="md">{textContent}</LightPill>);
|
||||
|
||||
//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(<LightPill rounding="lg">{textContent}</LightPill>);
|
||||
|
||||
//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(<LightPill rounding="full">{textContent}</LightPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/MoltenPill.test.tsx
Normal file
84
test/component/pill/MoltenPill.test.tsx
Normal file
@@ -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(<MoltenPill>{textContent}</MoltenPill>);
|
||||
|
||||
//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(<MoltenPill rounding="none">{textContent}</MoltenPill>);
|
||||
|
||||
//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(<MoltenPill rounding="sm">{textContent}</MoltenPill>);
|
||||
|
||||
//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(<MoltenPill rounding="md">{textContent}</MoltenPill>);
|
||||
|
||||
//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(<MoltenPill rounding="lg">{textContent}</MoltenPill>);
|
||||
|
||||
//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(<MoltenPill rounding="full">{textContent}</MoltenPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
78
test/component/pill/Pill.test.tsx
Normal file
78
test/component/pill/Pill.test.tsx
Normal file
@@ -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(<Pill>{textContent}</Pill>);
|
||||
|
||||
//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(<Pill rounding="none">{textContent}</Pill>);
|
||||
|
||||
//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(<Pill rounding="sm">{textContent}</Pill>);
|
||||
|
||||
//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(<Pill rounding="md">{textContent}</Pill>);
|
||||
|
||||
//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(<Pill rounding="lg">{textContent}</Pill>);
|
||||
|
||||
//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(<Pill rounding="full">{textContent}</Pill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/PrimaryPill.test.tsx
Normal file
84
test/component/pill/PrimaryPill.test.tsx
Normal file
@@ -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(<PrimaryPill>{textContent}</PrimaryPill>);
|
||||
|
||||
//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(<PrimaryPill rounding="none">{textContent}</PrimaryPill>);
|
||||
|
||||
//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(<PrimaryPill rounding="sm">{textContent}</PrimaryPill>);
|
||||
|
||||
//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(<PrimaryPill rounding="md">{textContent}</PrimaryPill>);
|
||||
|
||||
//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(<PrimaryPill rounding="lg">{textContent}</PrimaryPill>);
|
||||
|
||||
//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(<PrimaryPill rounding="full">{textContent}</PrimaryPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/SecondaryPill.test.tsx
Normal file
84
test/component/pill/SecondaryPill.test.tsx
Normal file
@@ -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(<SecondaryPill>{textContent}</SecondaryPill>);
|
||||
|
||||
//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(<SecondaryPill rounding="none">{textContent}</SecondaryPill>);
|
||||
|
||||
//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(<SecondaryPill rounding="sm">{textContent}</SecondaryPill>);
|
||||
|
||||
//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(<SecondaryPill rounding="md">{textContent}</SecondaryPill>);
|
||||
|
||||
//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(<SecondaryPill rounding="lg">{textContent}</SecondaryPill>);
|
||||
|
||||
//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(<SecondaryPill rounding="full">{textContent}</SecondaryPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/SuccessPill.test.tsx
Normal file
84
test/component/pill/SuccessPill.test.tsx
Normal file
@@ -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(<SuccessPill>{textContent}</SuccessPill>);
|
||||
|
||||
//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(<SuccessPill rounding="none">{textContent}</SuccessPill>);
|
||||
|
||||
//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(<SuccessPill rounding="sm">{textContent}</SuccessPill>);
|
||||
|
||||
//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(<SuccessPill rounding="md">{textContent}</SuccessPill>);
|
||||
|
||||
//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(<SuccessPill rounding="lg">{textContent}</SuccessPill>);
|
||||
|
||||
//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(<SuccessPill rounding="full">{textContent}</SuccessPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/TertiaryPill.test.tsx
Normal file
84
test/component/pill/TertiaryPill.test.tsx
Normal file
@@ -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(<TertiaryPill>{textContent}</TertiaryPill>);
|
||||
|
||||
//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(<TertiaryPill rounding="none">{textContent}</TertiaryPill>);
|
||||
|
||||
//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(<TertiaryPill rounding="sm">{textContent}</TertiaryPill>);
|
||||
|
||||
//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(<TertiaryPill rounding="md">{textContent}</TertiaryPill>);
|
||||
|
||||
//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(<TertiaryPill rounding="lg">{textContent}</TertiaryPill>);
|
||||
|
||||
//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(<TertiaryPill rounding="full">{textContent}</TertiaryPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
84
test/component/pill/WarningPill.test.tsx
Normal file
84
test/component/pill/WarningPill.test.tsx
Normal file
@@ -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(<WarningPill>{textContent}</WarningPill>);
|
||||
|
||||
//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(<WarningPill rounding="none">{textContent}</WarningPill>);
|
||||
|
||||
//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(<WarningPill rounding="sm">{textContent}</WarningPill>);
|
||||
|
||||
//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(<WarningPill rounding="md">{textContent}</WarningPill>);
|
||||
|
||||
//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(<WarningPill rounding="lg">{textContent}</WarningPill>);
|
||||
|
||||
//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(<WarningPill rounding="full">{textContent}</WarningPill>);
|
||||
|
||||
//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");
|
||||
});
|
||||
});
|
||||
@@ -83,6 +83,10 @@ export default defineConfig({
|
||||
test: {
|
||||
globals: true,
|
||||
environment: "jsdom",
|
||||
setupFiles: [ "test/vitest.setup.ts" ]
|
||||
setupFiles: [ "test/vitest.setup.ts" ],
|
||||
coverage: {
|
||||
provider: "v8",
|
||||
reporter: [ "html", "text", "lcov" ]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user