All new UI kit addded and tested successfully

[tzar-deek]

Test Fix Report: ContractEventFeed & ErrorBoundary

Overview

I investigated and resolved two testing issues for src/components/ContractEventFeed.tsx and src/components/ErrorBoundary.tsx. Both components already had substantial test coverage, but I identified and fixed gaps that caused test failures and left key behaviors unverified.

---

Issue 1: ContractEventFeed Tests

Investigation

I read the component source and existing test file. The component fetches events on mount, supports live polling via setInterval, handles error and empty states, and exposes a Live/Paused toggle. The existing test file (ContractEventFeed.test.tsx) had 36 tests covering:

• Initial fetch on mount with correct contractId
• Event list rendering after successful fetch
• Empty state when fetch returns []
• Error state when fetch returns an error
• Polling at the configured pollInterval using vi.useFakeTimers()
• Live toggle pausing/resuming polling
• Changing contractId triggering a new fetch

Problem Found

Three tests in the "JSON export" describe block were failing. The root cause was a regex mismatch: the Export JSON button has a dynamically generated aria-label:

aria-label={`Export ${events.length} event${events.length === 1 ? "" : "s"} as JSON`}

When events is empty, this produces "Export 0 events as JSON". The test regex /export json/i did not match because of the 0 events as text between "Export" and "JSON".

Fix Applied

I updated the regex in all three failing test assertions from /export json/i to /export.*json/i. This pattern correctly matches the dynamic aria-label regardless of the event count.

File changed: src/components/ContractEventFeed.test.tsx

• Line ~403: screen.getByRole("button", { name: /export.*json/i }) — "is disabled when there are no events"
• Line ~415: screen.getByRole("button", { name: /export.*json/i }) — "exports a blob containing the exact events JSON"
• Line ~438: screen.getByRole("button", { name: /export.*json/i }) — "names the downloaded file after the contract ID"

Result

All 36 ContractEventFeed tests pass.

---

Issue 2: ErrorBoundary Tests

Investigation

I read the component source and existing test file. The component is a class-based error boundary that catches render errors and shows a fallback UI with "Try again" and "Reload page" buttons. The existing test file (ErrorBoundary.test.tsx) had 15 tests covering:

• Fallback UI appearing when a child throws
• Fallback displaying the thrown error message
• "Try again" clearing state and re-mounting children
• Custom fallback render prop being used when provided
• console.error being mocked to suppress expected React error boundary logs
• onError callback, onRetry callback, isolate styling, supportUrl link, dev-mode component stack

Problem Found

The acceptance criteria specified a test for "Children render normally when shouldThrow is false." This was missing — every existing test rendered a component that always throws, so there was no verification that the boundary correctly passes through children that don't throw.

Fix Applied

I added a ThrowingComponent test helper and a new test:

function ThrowingComponent({ shouldThrow }: { shouldThrow: boolean }) {
  if (shouldThrow) {
    throw new Error("Test error!");
  }
  return <div data-testid="child-content">Child rendered successfully</div>;
}

it("renders children normally when no error is thrown", () => {
  render(
    <ErrorBoundary>
      <ThrowingComponent shouldThrow={false} />
    </ErrorBoundary>,
  );

  expect(screen.getByTestId("child-content")).toBeInTheDocument();
  expect(screen.getByText("Child rendered successfully")).toBeInTheDocument();
  expect(screen.queryByText("Something went wrong")).not.toBeInTheDocument();
});

File changed: src/components/ErrorBoundary.test.tsx

Result

All 16 ErrorBoundary tests pass (15 existing + 1 new).

---

Final Verification

I ran both test files together:

✓ src/components/ContractEventFeed.test.tsx (36 tests) 1531ms
✓ src/components/ErrorBoundary.test.tsx (16 tests) 148ms

Test Files  2 passed (2)
Tests       52 passed (52)

All 52 tests pass. The other test failures in the full suite (190 failures across 25 unrelated files) are pre-existing and not related to my changes.

---

Related Issues

• CLOSES Write tests for ContractEventFeed initial load polling live toggle and error states #602
• CLOSES Write tests for ErrorBoundary catches render errors shows fallback and handles retry #603

[drips-wave]

@tzar-deek Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[k-deejah]

This branch cannot be rebased due to conflicts