tests: add tests

.husky/pre-commit

@@ -1,5 +1,6 @@
 #!/bin/bash
 
 bun run check
+bun run test
 bun run bump:version
 git add .

.npmignore

@@ -7,4 +7,5 @@ components.json
 tsconfig.tsbuildinfo
 *.test.*
 *.spec.*
-vitest.config.ts
+vitest.config.ts
+setupTests.ts

loader.test.tsx

@@ -0,0 +1,23 @@
+import { Loader } from './loader';
+import { render, screen } from '@testing-library/react';
+
+describe('Loader', () => {
+  test('renders image without crashing', () => {
+    render(<Loader />);
+    const loaderImage = screen.getByAltText('Loading');
+    expect(loaderImage).toBeInTheDocument();
+  });
+
+  test('displays default loading text when no loadingText prop is provided', () => {
+    render(<Loader />);
+    const loadingText = screen.getByText('Loading…');
+    expect(loadingText).toBeInTheDocument();
+  });
+
+  test('displays custom loading text when loadingText prop is provided', () => {
+    const customText = 'Custom loading text';
+    render(<Loader loadingText={customText} />);
+    const loadingText = screen.getByText(customText);
+    expect(loadingText).toBeInTheDocument();
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "sideEffects": false,
   "type": "module",
   "scripts": {
@@ -44,6 +44,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "15.0.7",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.12",
     "@types/lodash-es": "4.17.12",

required.test.tsx

@@ -0,0 +1,22 @@
+import { Required } from './required';
+import { render, screen } from '@testing-library/react';
+
+describe('Required', () => {
+  test('renders without crashing', () => {
+    render(<Required />);
+    const requiredElement = screen.getByText('*');
+    expect(requiredElement).toBeInTheDocument();
+  });
+
+  test('displays an asterisk (*)', () => {
+    render(<Required />);
+    const requiredElement = screen.getByText('*');
+    expect(requiredElement.textContent).toBe('*');
+  });
+
+  test('has a class name of "text-destructive"', () => {
+    render(<Required />);
+    const requiredElement = screen.getByText('*');
+    expect(requiredElement).toHaveClass('text-destructive');
+  });
+});

separator.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { Separator } from './separator';
+
+describe('Separator', () => {
+  it('renders without crashing', () => {
+    render(<Separator />);
+    const separatorElement = screen.getByRole('separator');
+    expect(separatorElement).toBeInTheDocument();
+  });
+
+  it('renders with default props', () => {
+    render(<Separator />);
+    const separatorElement = screen.getByRole('separator');
+    expect(separatorElement).toHaveClass('shrink-0 bg-border h-[1px] w-full');
+  });
+
+  it('renders correctly with custom props', () => {
+    render(<Separator orientation="vertical" />);
+    const separatorElement = screen.getByRole('separator');
+    expect(separatorElement).toHaveClass('shrink-0 bg-border h-full w-[1px]');
+  });
+});

separator.tsx

@@ -10,6 +10,7 @@ const Separator = forwardRef<
 >(({ className, orientation = "horizontal", decorative = true, ...rest }, ref) => (
   <SeparatorPrimitive.Root
     ref={ref}
+    role="separator"
     decorative={decorative}
     orientation={orientation}
     className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}

setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     /* Path Aliases */
-    "baseUrl": "."
+    "baseUrl": ".",
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

vitest.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
     environment: "happy-dom",
     globals: true,
     restoreMocks: true,
+    setupFiles: "./setupTests.ts",
     include: ["**/*.test.?(c|m)[jt]s?(x)"],
   },
 });