tests: lint and wrap up

risc0 · May 7, 2024 · a7c9769 · a7c9769
1 parent d34f716
commit a7c9769
Show file tree

Hide file tree

Showing 31 changed files with 562 additions and 473 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ 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)
+- Install [bun](https://bun.sh/) (≥ v1.1.7)
 
 > [!TIP]  
 > When making code changes, it helps to have the [Biome VSCode extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) installed.
@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![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) |
+| ![Statements](https://img.shields.io/badge/statements-40.74%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-74.57%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-53.84%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-40.74%25-red.svg?style=flat) |
diff --git a/alert.test.tsx b/alert.test.tsx
@@ -1,58 +1,58 @@
-import { render, screen } from '@testing-library/react';
-import { Alert, AlertDescription, AlertTitle } from './alert';
+import { render, screen } from "@testing-library/react";
+import { Alert, AlertDescription, AlertTitle } from "./alert";
 
-describe('Alert', () => {
-  test('returns default class names when no variant is provided', () => {
+describe("Alert", () => {
+  test("returns default class names when no variant is provided", () => {
     render(<Alert />);
-    const alertElement = screen.getByRole('alert');
-    expect(alertElement.className).toContain('relative w-full rounded-lg border px-4 py-3 text-sm');
-    expect(alertElement.className).toContain('bg-background text-foreground');
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement.className).toContain("relative w-full rounded-lg border px-4 py-3 text-sm");
+    expect(alertElement.className).toContain("bg-background text-foreground");
   });
 
-  test('returns correct class names when destructive variant is provided', () => {
+  test("returns correct class names when destructive variant is provided", () => {
     render(<Alert variant="destructive" />);
-    const alertElement = screen.getByRole('alert');
-    expect(alertElement.className).toContain('relative w-full rounded-lg border px-4 py-3 text-sm');
-    expect(alertElement.className).toContain('border-destructive/50 text-destructive dark:border-destructive');
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement.className).toContain("relative w-full rounded-lg border px-4 py-3 text-sm");
+    expect(alertElement.className).toContain("border-destructive/50 text-destructive dark:border-destructive");
   });
 });
 
-describe('AlertTitle', () => {
-  test('renders the correct text when children prop is provided', () => {
+describe("AlertTitle", () => {
+  test("renders the correct text when children prop is provided", () => {
     render(<AlertTitle>Test Title</AlertTitle>);
-    const titleElement = screen.getByText('Test Title');
+    const titleElement = screen.getByText("Test Title");
     expect(titleElement).toBeInTheDocument();
   });
 
-  test('has correct default class names', () => {
+  test("has correct default class names", () => {
     render(<AlertTitle>Test Title</AlertTitle>);
-    const titleElement = screen.getByText('Test Title');
-    expect(titleElement.className).toContain('mb-1 font-medium leading-none');
+    const titleElement = screen.getByText("Test Title");
+    expect(titleElement.className).toContain("mb-1 font-medium leading-none");
   });
 
-  test('properly forwards classnames', () => {
-    render(<AlertTitle className='text-xl'>Test Title</AlertTitle>);
-    const titleElement = screen.getByText('Test Title');
-    expect(titleElement.className).toContain('text-xl');
+  test("properly forwards classnames", () => {
+    render(<AlertTitle className="text-xl">Test Title</AlertTitle>);
+    const titleElement = screen.getByText("Test Title");
+    expect(titleElement.className).toContain("text-xl");
   });
 });
 
-describe('AlertDescription', () => {
-  test('renders the correct text when children prop is provided', () => {
+describe("AlertDescription", () => {
+  test("renders the correct text when children prop is provided", () => {
     render(<AlertDescription>Test Description</AlertDescription>);
-    const descriptionElement = screen.getByText('Test Description');
+    const descriptionElement = screen.getByText("Test Description");
     expect(descriptionElement).toBeInTheDocument();
   });
 
-  test('has correct default class names', () => {
+  test("has correct default class names", () => {
     render(<AlertDescription>Test Description</AlertDescription>);
-    const descriptionElement = screen.getByText('Test Description');
-    expect(descriptionElement.className).toContain('text-sm [&_p]:leading-relaxed');
+    const descriptionElement = screen.getByText("Test Description");
+    expect(descriptionElement.className).toContain("text-sm [&_p]:leading-relaxed");
   });
 
-  test('properly forwards classnames', () => {
-    render(<AlertDescription className='text-xl'>Test Description</AlertDescription>);
-    const descriptionElement = screen.getByText('Test Description');
-    expect(descriptionElement.className).toContain('text-xl');
+  test("properly forwards classnames", () => {
+    render(<AlertDescription className="text-xl">Test Description</AlertDescription>);
+    const descriptionElement = screen.getByText("Test Description");
+    expect(descriptionElement.className).toContain("text-xl");
   });
-});
+});
diff --git a/avatar.test.tsx b/avatar.test.tsx
@@ -1,37 +1,49 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Avatar, AvatarFallback } from './avatar';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Avatar, AvatarFallback } from "./avatar";
 
-describe('Avatar', () => {
-  test('renders without crashing', () => {
+describe("Avatar", () => {
+  test("renders without crashing", () => {
     render(<Avatar />);
-    const avatarElement = screen.getByTestId('avatar');
+    const avatarElement = screen.getByTestId("avatar");
     expect(avatarElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLSpanElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLSpanElement>();
     render(<Avatar ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('AvatarFallback', () => {
-  test('renders without crashing', () => {
-    render(<Avatar><AvatarFallback /></Avatar>);
-    const avatarFallbackElement = screen.getByTestId('avatar-fallback');
+describe("AvatarFallback", () => {
+  test("renders without crashing", () => {
+    render(
+      <Avatar>
+        <AvatarFallback />
+      </Avatar>,
+    );
+    const avatarFallbackElement = screen.getByTestId("avatar-fallback");
     expect(avatarFallbackElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLSpanElement>(); 
-    render(<Avatar><AvatarFallback ref={ref} /></Avatar>);
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLSpanElement>();
+    render(
+      <Avatar>
+        <AvatarFallback ref={ref} />
+      </Avatar>,
+    );
     expect(ref.current).not.toBeNull();
   });
 
-  test('displays the initials inside', () => {
-    render(<Avatar><AvatarFallback>CC</AvatarFallback></Avatar>);
-    const avatarFallbackText = screen.getByText('CC');
+  test("displays the initials inside", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>CC</AvatarFallback>
+      </Avatar>,
+    );
+    const avatarFallbackText = screen.getByText("CC");
     expect(avatarFallbackText).toBeInTheDocument();
   });
-});
+});
diff --git a/badge.test.tsx b/badge.test.tsx
@@ -1,22 +1,22 @@
-import { render, screen } from '@testing-library/react';
-import { Badge } from './badge';
+import { render, screen } from "@testing-library/react";
+import { Badge } from "./badge";
 
-describe('Badge', () => {
-  test('renders without crashing', () => {
+describe("Badge", () => {
+  test("renders without crashing", () => {
     render(<Badge />);
-    const badgeElement = screen.getByTestId('badge');
+    const badgeElement = screen.getByTestId("badge");
     expect(badgeElement).toBeInTheDocument();
   });
 
-  test('applies correct classes based on variant prop', () => {
+  test("applies correct classes based on variant prop", () => {
     render(<Badge variant="secondary" />);
-    const badgeElement = screen.getByTestId('badge');
-    expect(badgeElement).toHaveClass('border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80');
+    const badgeElement = screen.getByTestId("badge");
+    expect(badgeElement).toHaveClass("border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80");
   });
 
-  test('forwards additional props to rendered div element', () => {
+  test("forwards additional props to rendered div element", () => {
     render(<Badge data-testid="badge" />);
-    const badgeElement = screen.getByTestId('badge');
+    const badgeElement = screen.getByTestId("badge");
     expect(badgeElement).toBeInTheDocument();
   });
-});
+});
diff --git a/breadcrumb.test.tsx b/breadcrumb.test.tsx
@@ -1,99 +1,99 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
 import {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './breadcrumb';
+} from "./breadcrumb";
 
-describe('Breadcrumb', () => {
-  test('renders without crashing', () => {
+describe("Breadcrumb", () => {
+  test("renders without crashing", () => {
     render(<Breadcrumb />);
-    const breadcrumbElement = screen.getByRole('navigation');
+    const breadcrumbElement = screen.getByRole("navigation");
     expect(breadcrumbElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLElement>();
     render(<Breadcrumb ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbList', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbList", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbList />);
-    const breadcrumbListElement = screen.getByRole('list');
+    const breadcrumbListElement = screen.getByRole("list");
     expect(breadcrumbListElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLOListElement>();
     render(<BreadcrumbList ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbItem', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbItem", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbItem />);
-    const breadcrumbItemElement = screen.getByRole('listitem');
+    const breadcrumbItemElement = screen.getByRole("listitem");
     expect(breadcrumbItemElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLLIElement>();
     render(<BreadcrumbItem ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbLink', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbLink", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbLink />);
-    const breadcrumbLinkElement = screen.getByTestId('breadcrumb-link');
+    const breadcrumbLinkElement = screen.getByTestId("breadcrumb-link");
     expect(breadcrumbLinkElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLAnchorElement>();
     render(<BreadcrumbLink ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbPage', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbPage", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbPage />);
-    const breadcrumbPageElement = screen.getByRole('link');
+    const breadcrumbPageElement = screen.getByRole("link");
     expect(breadcrumbPageElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLLIElement>();
     render(<BreadcrumbPage ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbSeparator', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbSeparator", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbSeparator />);
-    const breadcrumbSeparatorElement = screen.getByRole('presentation', {
-      hidden: true
+    const breadcrumbSeparatorElement = screen.getByRole("presentation", {
+      hidden: true,
     });
     expect(breadcrumbSeparatorElement).toBeInTheDocument();
   });
 });
 
-describe('BreadcrumbEllipsis', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbEllipsis", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbEllipsis />);
-    const breadcrumbEllipsisElement = screen.getByRole('presentation', {hidden: true});
+    const breadcrumbEllipsisElement = screen.getByRole("presentation", { hidden: true });
     expect(breadcrumbEllipsisElement).toBeInTheDocument();
   });
-});
+});