Merge branch 'prefer-is-visible' into error-page

Author: kantord

CLAUDE.md

@@ -202,6 +202,10 @@ pnpm generate-client:nofetch # Regenerate without fetching
 - Loading states and skeleton screens
 - Accessibility (keyboard navigation, screen readers)
 
+### Testing Best Practices
+
+- **Prefer `toBeVisible()` over `toBeInTheDocument()`** - `toBeVisible()` checks that an element is actually visible to the user (not hidden via CSS, `aria-hidden`, etc.), while `toBeInTheDocument()` only checks DOM presence. Use `toBeVisible()` for positive assertions and `.not.toBeInTheDocument()` for absence checks.
+
 ### Mocking & Testing
 
 - **MSW Auto-Mocker**
@@ -230,13 +234,13 @@ describe("ServerList", () => {
     render(<ServerList />);
 
     await waitFor(() => {
-      expect(screen.getByText("Server 1")).toBeInTheDocument();
+      expect(screen.getByText("Server 1")).toBeVisible();
     });
 
     const copyButton = screen.getByRole("button", { name: /copy url/i });
     await userEvent.click(copyButton);
 
-    expect(screen.getByText(/copied/i)).toBeInTheDocument();
+    expect(screen.getByText(/copied/i)).toBeVisible();
   });
 });
 ```

helm/Chart.yaml

@@ -2,8 +2,8 @@ apiVersion: v2
 name: toolhive-cloud-ui
 description: A Helm chart for ToolHive Cloud UI - Next.js application
 type: application
-version: 0.1.0
-appVersion: "0.1.0"
+version: 0.0.4
+appVersion: "0.0.4"
 keywords:
   - nextjs
   - react

src/components/error-page/error-page.test.tsx

@@ -8,9 +8,7 @@ describe("ErrorPageLayout", () => {
       <ErrorPageLayout title="Test Error">Error description</ErrorPageLayout>,
     );
 
-    expect(
-      screen.getByRole("heading", { name: /test error/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /test error/i })).toBeVisible();
   });
 
   it("displays children as description", () => {
@@ -20,7 +18,7 @@ describe("ErrorPageLayout", () => {
       </ErrorPageLayout>,
     );
 
-    expect(screen.getByText(/this is the error message/i)).toBeInTheDocument();
+    expect(screen.getByText(/this is the error message/i)).toBeVisible();
   });
 
   it("displays action buttons when provided", () => {
@@ -33,9 +31,7 @@ describe("ErrorPageLayout", () => {
       </ErrorPageLayout>,
     );
 
-    expect(
-      screen.getByRole("button", { name: /click me/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /click me/i })).toBeVisible();
   });
 
   it("displays a decorative illustration", () => {
@@ -44,6 +40,6 @@ describe("ErrorPageLayout", () => {
     );
 
     const svg = container.querySelector("svg[aria-hidden='true']");
-    expect(svg).toBeInTheDocument();
+    expect(svg).toBeVisible();
   });
 });