add explore client tests & rename files

Signed-off-by: Andrew Thauer <athauer@wealthsimple.com>

plugins/explore/src/api/ExploreClient.test.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ExploreTool,
+  GetExploreToolsResponse,
+} from '@backstage/plugin-explore-common';
+import { MockFetchApi, setupRequestMockHandlers } from '@backstage/test-utils';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { ExploreClient } from './ExploreClient';
+
+const server = setupServer();
+
+describe('ExploreClient', () => {
+  setupRequestMockHandlers(server);
+
+  const mockBaseUrl = 'http://backstage/api/explore';
+  const discoveryApi = { getBaseUrl: async () => mockBaseUrl };
+  const fetchApi = new MockFetchApi();
+
+  let client: ExploreClient;
+  beforeEach(() => {
+    client = new ExploreClient({ discoveryApi, fetchApi });
+  });
+
+  describe('getTools', () => {
+    const mockTools: ExploreTool[] = [
+      {
+        title: 'Tool 1',
+        image: 'https://example.com/image.png',
+        url: 'https://example.com',
+      },
+      {
+        title: 'Tool 2',
+        image: 'https://example.com/image.png',
+        url: 'https://example.com',
+      },
+    ];
+
+    it('should fetch data from the explore-backend', async () => {
+      const expectedResponse: GetExploreToolsResponse = {
+        tools: mockTools,
+      };
+
+      server.use(
+        rest.get(`${mockBaseUrl}/tools`, (_, res, ctx) =>
+          res(ctx.json(expectedResponse)),
+        ),
+      );
+
+      const response = await client.getTools();
+      expect(response).toEqual(expectedResponse);
+    });
+
+    it('should request explore tools with specific filters', async () => {
+      const expectedResponse: GetExploreToolsResponse = {
+        tools: mockTools,
+      };
+
+      server.use(
+        rest.get(`${mockBaseUrl}/tools`, (req, res, ctx) => {
+          expect(req.url.search).toBe('?tag=a&tag=b&lifecycle=alpha');
+          return res(ctx.json(expectedResponse));
+        }),
+      );
+
+      const response = await client.getTools({
+        filter: { tags: ['a', 'b'], lifecycle: ['alpha'] },
+      });
+      expect(response).toEqual(expectedResponse);
+    });
+  });
+
+  describe('when using exploreToolsConfig for backwards compatibility', () => {
+    const mockExploreToolsConfig = {
+      getTools: jest.fn(),
+    };
+
+    beforeEach(() => {
+      client = new ExploreClient({
+        discoveryApi,
+        fetchApi,
+        exploreToolsConfig: mockExploreToolsConfig,
+      });
+    });
+
+    it('should return data from the deprecated api', async () => {
+      mockExploreToolsConfig.getTools.mockResolvedValue([
+        {
+          title: 'Some Tool',
+          image: 'https://example.com/image.png',
+          url: 'https://example.com',
+        },
+      ]);
+
+      await client.getTools();
+      expect(mockExploreToolsConfig.getTools).toHaveBeenCalled();
+    });
+  });
+});

plugins/explore/src/api/ExploreClient.ts

@@ -21,7 +21,7 @@ import {
   GetExploreToolsResponse,
 } from '@backstage/plugin-explore-common';
 import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
-import { ExploreApi } from './types';
+import { ExploreApi } from './ExploreApi';
 
 /**
  * Default implementation of the ExploreApi.

plugins/explore/src/api/index.ts

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export { ExploreClient } from './client';
-export { exploreApiRef } from './types';
-export type { ExploreApi } from './types';
+export { ExploreClient } from './ExploreClient';
+export { exploreApiRef } from './ExploreApi';
+export type { ExploreApi } from './ExploreApi';

plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx

@@ -14,25 +14,23 @@
  * limitations under the License.
  */
 
-import {
-  ExploreTool,
-  exploreToolsConfigRef,
-} from '@backstage/plugin-explore-react';
+import { ExploreTool } from '@backstage/plugin-explore-common';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
+import { exploreApiRef } from '../../api';
 import { ToolExplorerContent } from './ToolExplorerContent';
 
 describe('<ToolExplorerContent />', () => {
-  const exploreToolsConfigApi: jest.Mocked<typeof exploreToolsConfigRef.T> = {
+  const exploreApi: jest.Mocked<typeof exploreApiRef.T> = {
     getTools: jest.fn(),
   };
 
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
     <ThemeProvider theme={lightTheme}>
-      <TestApiProvider apis={[[exploreToolsConfigRef, exploreToolsConfigApi]]}>
+      <TestApiProvider apis={[[exploreApiRef, exploreApi]]}>
         {children}
       </TestApiProvider>
     </ThemeProvider>
@@ -63,7 +61,7 @@ describe('<ToolExplorerContent />', () => {
         tags: ['standards', 'landscape'],
       },
     ];
-    exploreToolsConfigApi.getTools.mockResolvedValue(tools);
+    exploreApi.getTools.mockResolvedValue({ tools });
 
     const { getByText } = await renderInTestApp(
       <Wrapper>
@@ -78,7 +76,7 @@ describe('<ToolExplorerContent />', () => {
   });
 
   it('renders a custom title', async () => {
-    exploreToolsConfigApi.getTools.mockResolvedValue([]);
+    exploreApi.getTools.mockResolvedValue({ tools: [] });
 
     const { getByText } = await renderInTestApp(
       <Wrapper>
@@ -90,7 +88,7 @@ describe('<ToolExplorerContent />', () => {
   });
 
   it('renders empty state', async () => {
-    exploreToolsConfigApi.getTools.mockResolvedValue([]);
+    exploreApi.getTools.mockResolvedValue({ tools: [] });
 
     const { getByText } = await renderInTestApp(
       <Wrapper>