From bf8df1705c9e16c0814b3732536cb8f0d6729ff3 Mon Sep 17 00:00:00 2001
From: Cohan Carpentier <cohan.carpentier@gmail.com>
Date: Tue, 7 May 2024 09:35:53 -0400
Subject: [PATCH] tests: add tests

---
 .husky/pre-commit  |  1 +
 .npmignore         |  3 ++-
 loader.test.tsx    | 23 +++++++++++++++++++++++
 package.json       |  4 +++-
 required.test.tsx  | 22 ++++++++++++++++++++++
 separator.test.tsx | 22 ++++++++++++++++++++++
 separator.tsx      |  1 +
 setupTests.ts      |  1 +
 tsconfig.json      |  3 ++-
 vitest.config.ts   |  1 +
 10 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 loader.test.tsx
 create mode 100644 required.test.tsx
 create mode 100644 separator.test.tsx
 create mode 100644 setupTests.ts

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 72c34ef..bc4b96b 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,6 @@
 #!/bin/bash
 
 bun run check
+bun run test
 bun run bump:version
 git add .
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index 777ebe2..62d1cd3 100644
--- a/.npmignore
+++ b/.npmignore
@@ -7,4 +7,5 @@ components.json
 tsconfig.tsbuildinfo
 *.test.*
 *.spec.*
-vitest.config.ts
\ No newline at end of file
+vitest.config.ts
+setupTests.ts
\ No newline at end of file
diff --git a/loader.test.tsx b/loader.test.tsx
new file mode 100644
index 0000000..64c7fd7
--- /dev/null
+++ b/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();
+  });
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 6961bd9..d6a3432 100644
--- a/package.json
+++ b/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",
diff --git a/required.test.tsx b/required.test.tsx
new file mode 100644
index 0000000..357e888
--- /dev/null
+++ b/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');
+  });
+});
\ No newline at end of file
diff --git a/separator.test.tsx b/separator.test.tsx
new file mode 100644
index 0000000..4205f2e
--- /dev/null
+++ b/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]');
+  });
+});
\ No newline at end of file
diff --git a/separator.tsx b/separator.tsx
index 2d128b5..a366c34 100644
--- a/separator.tsx
+++ b/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)}
diff --git a/setupTests.ts b/setupTests.ts
new file mode 100644
index 0000000..d0de870
--- /dev/null
+++ b/setupTests.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/tsconfig.json b/tsconfig.json
index cd94fe1..240106b 100644
--- a/tsconfig.json
+++ b/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"]
diff --git a/vitest.config.ts b/vitest.config.ts
index da5a0c2..475b2ff 100644
--- a/vitest.config.ts
+++ b/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)"],
   },
 });