tests: ignore some files

README.md

@@ -2,16 +2,20 @@
 
 Building blocks for UI applications at RISC Zero.
 
+https://www.npmjs.com/package/@risc0/ui
+
+---
+
 #### Prerequisites
 
 - Install [Node](https://nodejs.org/en) (≥ v20.x.x)
 - Install [bun](https://bun.sh/) (≥ v1.0.33)
 
 > [!TIP]  
-> When making code changes, please have the [Biome VSCode extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) installed.
+> When making code changes, it helps to have the [Biome VSCode extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) installed.
 
 ### Coverage 
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-28.26%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-68.33%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-41.37%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-28.26%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-37.99%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-73.33%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-51.85%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-37.99%25-red.svg?style=flat) |

breadcrumb.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb';
+
+describe('Breadcrumb', () => {
+  test('renders without crashing', () => {
+    render(<Breadcrumb />);
+    const breadcrumbElement = screen.getByRole('navigation');
+    expect(breadcrumbElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLElement>();
+    render(<Breadcrumb ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('BreadcrumbList', () => {
+  test('renders without crashing', () => {
+    render(<BreadcrumbList />);
+    const breadcrumbListElement = screen.getByRole('list');
+    expect(breadcrumbListElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLOListElement>();
+    render(<BreadcrumbList ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('BreadcrumbItem', () => {
+  test('renders without crashing', () => {
+    render(<BreadcrumbItem />);
+    const breadcrumbItemElement = screen.getByRole('listitem');
+    expect(breadcrumbItemElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLLIElement>();
+    render(<BreadcrumbItem ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('BreadcrumbLink', () => {
+  test('renders without crashing', () => {
+    render(<BreadcrumbLink />);
+    const breadcrumbLinkElement = screen.getByTestId('breadcrumb-link');
+    expect(breadcrumbLinkElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(<BreadcrumbLink ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('BreadcrumbPage', () => {
+  test('renders without crashing', () => {
+    render(<BreadcrumbPage />);
+    const breadcrumbPageElement = screen.getByRole('link');
+    expect(breadcrumbPageElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLLIElement>();
+    render(<BreadcrumbPage ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('BreadcrumbSeparator', () => {
+  test('renders without crashing', () => {
+    render(<BreadcrumbSeparator />);
+    const breadcrumbSeparatorElement = screen.getByRole('presentation', {
+      hidden: true
+    });
+    expect(breadcrumbSeparatorElement).toBeInTheDocument();
+  });
+});
+
+describe('BreadcrumbEllipsis', () => {
+  test('renders without crashing', () => {
+    render(<BreadcrumbEllipsis />);
+    const breadcrumbEllipsisElement = screen.getByRole('presentation', {hidden: true});
+    expect(breadcrumbEllipsisElement).toBeInTheDocument();
+  });
+});

breadcrumb.tsx

@@ -33,7 +33,14 @@ const BreadcrumbLink = forwardRef<
 >(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
 
-  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+  return (
+    <Comp
+      data-testid="breadcrumb-link"
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
 });
 
 const BreadcrumbPage = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<"li">>(({ className, ...props }, ref) => (

config/postcss.config.cjs

@@ -1,3 +1,4 @@
+/* c8 ignore start */
 module.exports = {
   plugins: {
     tailwindcss: {},

config/tailwind.config.ts

@@ -1,3 +1,4 @@
+/* c8 ignore start */
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "sideEffects": false,
   "type": "module",
   "scripts": {

sonner.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import type { ComponentProps } from "react";
 // @ts-ignore -- not sure why this is not working
 import { Toaster as Sonner } from "sonner";
 import { cn } from "./cn";

table.test.tsx

@@ -0,0 +1,117 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './table';
+
+describe('Table', () => {
+  test('renders without crashing', () => {
+    render(<Table />);
+    const tableElement = screen.getByRole('table');
+    expect(tableElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableElement>(); 
+    render(<Table ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('TableHeader', () => {
+  test('renders without crashing', () => {
+    render(<TableHeader />);
+    const tableHeaderElement = screen.getByRole('rowgroup');
+    expect(tableHeaderElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableSectionElement>(); 
+    render(<TableHeader ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('TableBody', () => {
+  test('renders without crashing', () => {
+    render(<TableBody />);
+    const tableBodyElement = screen.getByRole('rowgroup');
+    expect(tableBodyElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableSectionElement>(); 
+    render(<TableBody ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+
+describe('TableFooter', () => {
+  test('renders without crashing', () => {
+    render(<TableFooter />);
+    const tableFooterElement = screen.getByRole('rowgroup');
+    expect(tableFooterElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableSectionElement>(); 
+    render(<TableFooter ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+
+describe('TableHead', () => {
+  test('renders without crashing', () => {
+    render(<TableHead />);
+    const tableHeadElement = screen.getByRole('columnheader');
+    expect(tableHeadElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableCellElement>(); 
+    render(<TableHead ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('TableRow', () => {
+  test('renders without crashing', () => {
+    render(<TableRow />);
+    const tableRowElement = screen.getByRole('row');
+    expect(tableRowElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableRowElement>(); 
+    render(<TableRow ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('TableCell', () => {
+  test('renders without crashing', () => {
+    render(<TableCell />);
+    const tableCellElement = screen.getByRole('cell');
+    expect(tableCellElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableCellElement>(); 
+    render(<TableCell ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe('TableCaption', () => {
+  test('renders without crashing', () => {
+    render(<TableCaption />);
+    const tableCaptionElement = screen.getByRole('caption');
+    expect(tableCaptionElement).toBeInTheDocument();
+  });
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLTableCellElement>(); 
+    render(<TableCaption ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});