Add test suite for saved-views-react components and utilities

[Copilot]

The saved-views-react package had no test coverage. This PR establishes a test suite covering core React components, hooks, and utilities.

Testing Infrastructure

• Added @testing-library/jest-dom for DOM matchers
• Created test setup file to configure global test environment
• Updated vitest config to include setup file

Test Coverage (53 tests across 6 files)

Utilities & Hooks

• utils.test.ts: String trimming, error detection, controlled state hook
• localization.test.ts: Default localization values and structure validation

Context & Providers

• SavedViewsContext.test.tsx: Context provider with default/custom localization
• SavedViewTileContext.test.tsx: Tile-specific context behavior

Components

• SavedViewTile.test.tsx: Rendering, tags, user interactions, custom styling
• TileGrid.test.tsx: Pagination, "show more" functionality, custom page sizes

Example Test Pattern

Components use mocked UI dependencies for isolation:

vi.mock("@itwin/itwinui-react", () => ({
  Tile: {
    Wrapper: ({ children, className, onClick }: any) => (
      <div className={className} onClick={onClick} data-testid="tile-wrapper">
        {children}
      </div>
    ),
    // ... other mocked components
  },
}));

it("renders with tags", () => {
  const tags = new Map([["tag1", { tagId: "tag1", displayName: "Tag 1" }]]);
  const savedView = { savedViewId: "id", displayName: "View", tagIds: ["tag1"] };
  
  render(
    <SavedViewsContextProvider>
      <SavedViewTile savedView={savedView} tags={tags} />
    </SavedViewsContextProvider>
  );
  
  expect(screen.getByText("Tag 1")).toBeInTheDocument();
});

Documentation

Created TESTING.md with testing approach, best practices, and guidance for future test additions.

Notes

Complex translation utilities (captureSavedViewData, createViewState) not tested due to deep iTwin SDK dependencies requiring integration test approach.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Create tests for saved-views-react - a second try</issue_title>
<issue_description>Need to create React component tests for the saved-views-react codebase. This library provides React components and utilities for managing and interacting with saved views in an application. Some of the functions in saved-views-react are similar to those in the itwin-saved-views-utilities repository, particularly in the following files:

• captureSavedViewData
• createSavedViewState
• Files in the translation folder.

The itwin-saved-views-utilities repository already contains tests in the src/tests folder, which can serve as a reference for creating tests in saved-views-react. Use these existing tests as inspiration where applicable.
</issue_description>

<agent_instructions>Prompt:

You are an expert in software testing and React development. Your task is to create a detailed plan for writing React component tests for the saved-views-react codebase. This library provides React components and utilities for managing and interacting with saved views in an application. Some of the functions in saved-views-react are similar to those in the itwin-saved-views-utilities repository, particularly in the following files:

• captureSavedViewData
• createSavedViewState
• Files in the translation folder.

The itwin-saved-views-utilities repository already contains tests in the src/tests folder, which can serve as a reference for creating tests in saved-views-react. Use these existing tests as inspiration where applicable.

Your Task:

1. Analyze the Codebase:

   • Identify the key components, hooks, and utilities in saved-views-react that require testing.
   • Focus on areas where functionality overlaps with itwin-saved-views-utilities.

2. Testing Frameworks and Tools:

   • The saved-views-react codebase is already set up to use Vitest as the testing framework. Use Vitest for all tests.
   • Recommend any additional tools (e.g., @testing-library/react for React component testing, MSW for mocking APIs, axe for accessibility testing).

3. Test Coverage Goals:

   • Define the areas to focus on for test coverage, including:
     • Component rendering and behavior.
     • State management and context usage.
     • API interactions and error handling.
     • Accessibility and edge cases.

4. Test Plan Structure:

   • Break down the test plan into categories:
     • Unit Tests: For individual components, hooks, and utilities.
     • Integration Tests: For components interacting with APIs or context.
     • End-to-End Tests: For workflows involving multiple components (if applicable).

5. Leverage Existing Tests:

   • Identify how the tests in itwin-saved-views-utilities/src/tests can be adapted or reused for similar functionality in saved-views-react.

6. Component Prioritization:

   • Suggest a strategy for prioritizing components for testing (e.g., based on complexity, criticality, or usage frequency).

7. Mocking and Stubbing:

   • Provide guidance on mocking dependencies such as API calls, context providers, and external libraries.

8. Example Test Cases:

   • Provide a few example test cases for common scenarios, such as:
     • Rendering a component with default props.
     • Simulating user interactions (e.g., clicks, form submissions).
     • Testing API error handling and loading states.

9. Produce the Tests:

   • Write the actual test files for the saved-views-react codebase based on the plan.
   • Ensure the tests are written in TypeScript and use Vitest.
   • Include tests for at least two components, hooks, or utilities as part of the deliverables.

10. Best Practices:

• Include best practices for writing clean, maintainable, and reusable tests.

Constraints:

• Assume the codebase uses TypeScript.
• Tests should align with modern React practices.
• Focus on simplicity and maintainability.

Deliverables:

• A detailed test plan for the saved-views-react codebase.
• Recommendations for tools and libraries to use.
• Example test cases for at least two components.
• The actual test files for saved-views-react, written in TypeScript and using Vitest.

Use the itwin-saved-views-utilities tests as a foundation where applicable, and ensure the plan is tailored to the specific needs of saved-views-react. All tests must use Vitest, which is already configured in the saved-views-react codebase.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Create tests for saved-views-react - a second try #169

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: bec26bd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)