test(caching): provide QueryClient to CellDiagram + metrics tests; add bare query wrapper

Author: kaviththiranga

packages/test-utils/src/index.ts

@@ -19,3 +19,4 @@ export {
   createQueryWrapper,
   createTestQueryClient,
 } from './queryClientWrapper';
+export { createQueryClientWrapper } from './queryClientBareWrapper';

packages/test-utils/src/queryClientBareWrapper.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+/**
+ * A `wrapper` that mounts children inside a fresh `QueryClientProvider` ONLY —
+ * no `TestApiProvider`. Use this for suites that already supply their APIs by
+ * mocking `@backstage/core-plugin-api`'s `useApi` directly, where pulling in
+ * `TestApiProvider` (and its `@backstage/core-app-api` internals) would clash
+ * with that mock. Kept in its own module (importing only react-query, never
+ * `@backstage/test-utils`) so consuming it doesn't drag `TestApiProvider` into
+ * a suite that has mocked its dependencies away. Also keeps `@tanstack/react-query`
+ * behind this package's seam so consuming plugins don't declare it just to wrap
+ * a component test.
+ */
+export function createQueryClientWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

plugins/openchoreo-observability/src/components/Metrics/ObservabilityMetricsPage.test.tsx

@@ -269,7 +269,10 @@ describe('ObservabilityMetricsPage', () => {
   it('refetches both resource and HTTP metrics when refresh is clicked', async () => {
     const user = userEvent.setup();
     const resourceRefresh = jest.fn();
-    const httpFetchMetrics = jest.fn();
+    // Both sections now refetch via `refresh()` (the query keys on the filters,
+    // so a manual refresh re-runs the current key) — the HTTP section watches
+    // the parent's `refreshNonce` bump and calls its own `refresh`.
+    const httpRefresh = jest.fn();
 
     mockUseMetrics.mockImplementation(
       (
@@ -296,8 +299,8 @@ describe('ObservabilityMetricsPage', () => {
             },
             loading: false,
             error: null,
-            fetchMetrics: httpFetchMetrics,
-            refresh: jest.fn(),
+            fetchMetrics: jest.fn(),
+            refresh: httpRefresh,
           };
         }
         return {
@@ -319,12 +322,13 @@ describe('ObservabilityMetricsPage', () => {
 
     await renderPage();
 
-    httpFetchMetrics.mockClear();
+    resourceRefresh.mockClear();
+    httpRefresh.mockClear();
 
     await user.click(screen.getByTestId('refresh-btn'));
 
     expect(resourceRefresh).toHaveBeenCalledTimes(1);
-    await waitFor(() => expect(httpFetchMetrics).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(httpRefresh).toHaveBeenCalledTimes(1));
   });
 
   it('renders nothing for namespace error', async () => {

plugins/openchoreo/src/components/CellDiagram/CellDiagram.test.tsx

@@ -1,7 +1,18 @@
 import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+// Import from the sub-path (not the barrel) so this suite — which mocks
+// @backstage/core-plugin-api — doesn't transitively load @backstage/test-utils'
+// TestApiProvider (which runs attachComponentData at import and would break).
+import { createQueryClientWrapper } from '@openchoreo/test-utils/src/queryClientBareWrapper';
 import { CellDiagram } from './CellDiagram';
 
+// useCellEnvironments is now backed by useOpenChoreoQuery, which needs a
+// QueryClientProvider in the tree. Wrap in a fresh, retry-free cache each render
+// (a bare provider, not TestApiProvider — this suite mocks core-plugin-api and
+// supplies APIs through the useApi mock, so TestApiProvider isn't wanted).
+const renderCell = () =>
+  render(<CellDiagram />, { wrapper: createQueryClientWrapper() });
+
 // ---- Mocks ----
 
 jest.mock('@backstage/plugin-catalog-react', () => ({
@@ -46,11 +57,19 @@ jest.mock('@openchoreo/backstage-design-system', () => ({
 jest.mock('@openchoreo/backstage-plugin-react', () => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   const React = require('react');
+  // Keep the real caching wrapper (useCellEnvironments now calls
+  // useOpenChoreoQuery). Pull it from its own module rather than the barrel so
+  // we don't drag in the whole package (which imports the mocked core-plugin-api
+  // and breaks on attachComponentData).
+  const { useOpenChoreoQuery } =
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    jest.requireActual('@openchoreo/backstage-plugin-react/src/hooks/useOpenChoreoQuery');
   // Each recompute advances "now" (mirroring the real calculateTimeRange,
   // which uses `new Date()`), so the Refresh button produces a new fetch key
   // and triggers a refetch.
   let rangeCall = 0;
   return {
+    useOpenChoreoQuery,
     EmptyState: ({ title, description, action }: any) => (
       <div data-testid="empty-state">
         <div>{title}</div>
@@ -408,7 +427,7 @@ describe('CellDiagram', () => {
     const mockClient = setupMockClient();
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -438,7 +457,7 @@ describe('CellDiagram', () => {
     const mockClient = setupMockClient();
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -480,7 +499,7 @@ describe('CellDiagram', () => {
     setupMockClient();
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -522,7 +541,7 @@ describe('CellDiagram', () => {
     setupMockClient();
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -570,7 +589,7 @@ describe('CellDiagram', () => {
     });
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -615,7 +634,7 @@ describe('CellDiagram', () => {
     });
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     const toggle = screen.getByRole('switch', {
@@ -658,7 +677,7 @@ describe('CellDiagram', () => {
     });
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     // Toggle OFF → architecture
@@ -706,7 +725,7 @@ describe('CellDiagram', () => {
     });
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     const toggle = screen.getByRole('switch', {
@@ -728,7 +747,7 @@ describe('CellDiagram', () => {
     const mockClient = setupMockClient();
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -768,7 +787,7 @@ describe('CellDiagram', () => {
     });
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {
@@ -795,7 +814,7 @@ describe('CellDiagram', () => {
     });
 
     await act(async () => {
-      render(<CellDiagram />);
+      renderCell();
     });
 
     await waitFor(() => {