added unit tests and code cleanup

jkilzi · Jun 26, 2024 · 34c22ac · 34c22ac
1 parent e043add
commit 34c22ac
Show file tree

Hide file tree

Showing 8 changed files with 1,622 additions and 53 deletions.
diff --git a/workspaces/resource-optimization/packages/app/src/App.tsx b/workspaces/resource-optimization/packages/app/src/App.tsx
@@ -38,7 +38,7 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { ResourceOptimizationPage } from '@backstage-community/plugin-resource-optimization';
-import { ResourceOptimizationDetailPage } from '@backstage-community/plugin-resource-optimization/src/plugin';
+import { ResourceOptimizationDetailPage } from '@backstage-community/plugin-resource-optimization';
 
 const app = createApp({
   apis,

diff --git a/...n/plugins/resource-optimization/src/components/ExampleComponent/ExampleComponent.test.tsx b/...n/plugins/resource-optimization/src/components/ExampleComponent/ExampleComponent.test.tsx
@@ -6,7 +6,39 @@ import { screen } from '@testing-library/react';
 import {
   setupRequestMockHandlers,
   renderInTestApp,
+  TestApiRegistry,
 } from '@backstage/test-utils';
+import { ApiProvider } from '@backstage/core-app-api';
+import { optimizationsApiRef } from '../../api/refs';
+import { searchApiRef } from '@backstage/plugin-search-react';
+import { getRecommendationMockResponse } from './mockResponses';
+import { RecommendationList } from '@backstage-community/plugin-resource-optimization-common';
+import { TypedResponse } from '@backstage-community/plugin-resource-optimization-common/src/generated/apis/OptimizationsApi.client';
+
+const emptySearchResults = Promise.resolve({
+  results: [],
+});
+
+const recommendationsListResult: Promise<TypedResponse<RecommendationList>> =
+  new Promise((resolve, reject) => {
+    return {
+      json: async () => getRecommendationMockResponse,
+    };
+  });
+
+const query = () => emptySearchResults;
+const querySpy = jest.fn(query);
+const searchApi = { query: querySpy };
+
+const getRecommendationList = () => recommendationsListResult;
+const getRecommendationListSpy = jest.fn(getRecommendationList);
+const optimizationApi = { getRecommendationList: getRecommendationListSpy };
+
+// create apiRegistry for mocking apis
+const apiRegistry = TestApiRegistry.from(
+  [searchApiRef, searchApi],
+  [optimizationsApiRef, optimizationApi],
+);
 
 describe('ExampleComponent', () => {
   const server = setupServer();
@@ -21,9 +53,12 @@ describe('ExampleComponent', () => {
   });
 
   it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
-    expect(
-      screen.getByText('Welcome to resource-optimization!'),
-    ).toBeInTheDocument();
+    expect(1).toBeTruthy();
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <ExampleComponent />
+      </ApiProvider>,
+    );
+    expect(screen.getByText('Resource Optimization')).toBeInTheDocument();
   });
 });
diff --git a/...zation/plugins/resource-optimization/src/components/ExampleComponent/ExampleComponent.tsx b/...zation/plugins/resource-optimization/src/components/ExampleComponent/ExampleComponent.tsx
@@ -22,7 +22,6 @@ export default {
   component: Page,
 };
 
-
 const SELECT_ITEMS = [
   {
     label: 'Cluster 1',
@@ -38,39 +37,19 @@ const SELECT_ITEMS = [
   },
 ];
 
-
 const ClusterFilter = () => (
   <>
-    <SearchBar
-        placeholder="Filter by Cluster"
-        debounceTime={700}
-    />
-
-    <Chip
-      label='demo'
-      size='medium'
-      variant='default'
-      onDelete={() => ({})} />
+    <SearchBar placeholder="Filter by Cluster" debounceTime={700} />
+    <Chip label="demo" size="medium" variant="default" onDelete={() => ({})} />
   </>
-
 );
 
 const ProjectFilter = () => (
-  <>
-    <SearchBar
-        placeholder="Filter by Project"
-        debounceTime={700}
-    />
-  </>
+  <SearchBar placeholder="Filter by Project" debounceTime={700} />
 );
 
 const WorkloadFilter = () => (
-  <>
-    <SearchBar
-        placeholder="Filter by Workload"
-        debounceTime={700}
-    />
-  </>
+  <SearchBar placeholder="Filter by Workload" debounceTime={700} />
 );
 
 const TypeFilter = () => (
@@ -88,32 +67,29 @@ type SortOrder = 'asc' | 'desc';
 export const ExampleComponent = () => {
   const api = useApi(optimizationsApiRef);
 
-  const [page, setPage] = useState(0);  // first page starts at 0
+  const [page, setPage] = useState(0); // first page starts at 0
   const [rowsPerPage, setRowsPerPage] = useState(5);
 
   const [orderBy, setOrderBy] = useState('last_reported');
   const [orderDirection, setOrderDirection] = useState<SortOrder>('desc');
 
-
-
   const { value, loading, error } = useAsync(async () => {
     const offsetValue = page * rowsPerPage;
-    
+
     const apiQuery: Parameters<typeof api.getRecommendationList>[0]['query'] = {
-      limit: rowsPerPage, 
+      limit: rowsPerPage,
       offset: offsetValue,
       orderBy: orderBy,
-      orderHow: orderDirection
-    }
+      orderHow: orderDirection,
+    };
 
-    const response = await api.getRecommendationList({ 
-      query: apiQuery 
+    const response = await api.getRecommendationList({
+      query: apiQuery,
     });
     const payload = await response.json();
     return payload;
   }, [rowsPerPage, page, orderBy, orderDirection]);
-
-
+
   if (error) {
     return <ResponseErrorPanel error={error} />;
   }
@@ -127,15 +103,15 @@ export const ExampleComponent = () => {
   };
 
   const handleOnOrderChange = (orderBy: number, orderDirection: SortOrder) => {
-    if(orderBy >= 0) {
+    if (orderBy >= 0) {
       setOrderBy(`${columns[orderBy].field}`);
       setOrderDirection(orderDirection);
     }
-  }
+  };
 
   const handleOnSearchChange = (searchText: string) => {
     console.log(searchText);
-  }
+  };
 
   const tableTitle = `Optimizable containers (${value?.meta?.count || 0})`;
 
@@ -155,12 +131,12 @@ export const ExampleComponent = () => {
           <Grid item xs={9}>
             <Table<Recommendations>
               title={tableTitle}
-              options={{ 
+              options={{
                 debounceInterval: 700,
                 paging: true,
                 search: true,
                 padding: 'dense',
-                thirdSortClick: false
+                thirdSortClick: false,
               }}
               data={value?.data || []}
               isLoading={loading}