fix(catalog): tests and rebase on master

plugins/catalog/package.json

@@ -43,7 +43,7 @@
     "@backstage/dev-utils": "^0.1.1-alpha.8",
     "@backstage/test-utils": "^0.1.1-alpha.8",
     "@testing-library/jest-dom": "^5.7.0",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^10.2.1",
     "@testing-library/react-hooks": "^3.3.0",
     "@testing-library/user-event": "^10.2.4",
     "@types/jest": "^25.2.2",

plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx

@@ -15,19 +15,60 @@
  */
 
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { CatalogFilter, CatalogFilterGroup } from './CatalogFilter';
 import { EntityFilterType } from '../../data/filters';
 
 describe('Catalog Filter', () => {
+  const comp1 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'my-component-1',
+    },
+    spec: {
+      owner: 'team',
+    },
+  };
+  const comp2 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'my-component-2',
+    },
+    spec: {
+      owner: 'team',
+    },
+  };
+  const comp3 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'my-component-3',
+    },
+    spec: {
+      owner: '',
+    },
+  };
+  const defaultFilterProps = {
+    selectedFilter: EntityFilterType.ALL,
+    onFilterChange: (type: EntityFilterType) => type,
+    entitiesByFilter: {
+      [EntityFilterType.ALL]: [comp1, comp2, comp3],
+      [EntityFilterType.STARRED]: [comp1],
+      [EntityFilterType.OWNED]: [comp1],
+    },
+  };
   it('should render the different groups', async () => {
     const mockGroups: CatalogFilterGroup[] = [
       { name: 'Test Group 1', items: [] },
       { name: 'Test Group 2', items: [] },
     ];
     const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
     for (const group of mockGroups) {
@@ -53,7 +94,9 @@ describe('Catalog Filter', () => {
     ];
 
     const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
     const [group] = mockGroups;
@@ -70,24 +113,34 @@ describe('Catalog Filter', () => {
           {
             id: EntityFilterType.ALL,
             label: 'First Label',
-            count: 100,
+            count: 3,
           },
           {
             id: EntityFilterType.STARRED,
             label: 'Second Label',
-            count: 400,
+            count: 1,
           },
         ],
       },
     ];
 
-    const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+    render(
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
-    const [group] = mockGroups;
-    for (const item of group.items) {
-      expect(await findByText(item.count!.toString())).toBeInTheDocument();
+    for (const key of Object.keys(defaultFilterProps.entitiesByFilter)) {
+      await waitFor(() =>
+        screen.getAllByText(
+          new RegExp(
+            `(${
+              defaultFilterProps.entitiesByFilter[key as EntityFilterType]
+                .length
+            })`,
+          ),
+        ),
+      );
     }
   });
 
@@ -115,8 +168,9 @@ describe('Catalog Filter', () => {
     const { findByText } = render(
       wrapInTestApp(
         <CatalogFilter
+          {...defaultFilterProps}
           groups={mockGroups}
-          onSelectedChange={onSelectedChangeHandler}
+          onFilterChange={onSelectedChangeHandler}
         />,
       ),
     );
@@ -127,7 +181,7 @@ describe('Catalog Filter', () => {
 
     fireEvent.click(element);
 
-    expect(onSelectedChangeHandler).toHaveBeenCalledWith(item);
+    expect(onSelectedChangeHandler).toHaveBeenCalledWith(item.id);
   });
 
   it('should render a component when a function is passed to the count component', async () => {
@@ -149,9 +203,11 @@ describe('Catalog Filter', () => {
       },
     ];
     const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
-    expect(await findByText('BACKSTAGE!')).toBeInTheDocument();
+    expect(await findByText('Test Group 1')).toBeInTheDocument();
   });
 });

plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx

@@ -26,7 +26,7 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import type { IconComponent } from '@backstage/core';
-import { EntityFilterType, filterGroups } from '../../data/filters';
+import { EntityFilterType } from '../../data/filters';
 import { EntitiesByFilter } from '../../hooks/useEntities';
 
 export type CatalogFilterItem = {
@@ -71,12 +71,13 @@ export const CatalogFilter: FC<{
   selectedFilter: EntityFilterType;
   onFilterChange: (type: EntityFilterType) => void;
   entitiesByFilter: EntitiesByFilter;
+  groups: CatalogFilterGroup[];
 }> = ({
   selectedFilter: selectedId,
   onFilterChange: setSelectedFilter,
   entitiesByFilter,
+  groups,
 }) => {
-  const groups = filterGroups;
   const classes = useStyles();
   return (
     <Card className={classes.root}>

plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx

@@ -24,7 +24,7 @@ import {
   identityApiRef,
 } from '@backstage/core';
 import { MockErrorApi, wrapInTestApp } from '@backstage/test-utils';
-import { render } from '@testing-library/react';
+import { screen, render, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { catalogApiRef } from '../..';
 import { CatalogApi } from '../../api/types';
@@ -42,31 +42,66 @@ describe('CatalogPage', () => {
           },
           apiVersion: 'backstage.io/v1alpha1',
           kind: 'Component',
+          spec: {
+            owner: 'tools@example.com',
+          },
+        },
+        {
+          metadata: {
+            name: 'Entity2',
+          },
+          apiVersion: 'backstage.io/v1alpha1',
+          kind: 'Component',
+          spec: {
+            owner: 'not-tools@example.com',
+          },
         },
       ] as Entity[]),
     getLocationByEntity: () =>
       Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
   };
+  const mockIndentityApi: Partial<IdentityApi> = {
+    getUserId: () => 'tools@example.com',
+  };
 
   // this test right now causes some red lines in the log output when running tests
   // related to some theme issues in mui-table
   // https://github.com/mbrn/material-table/issues/1293
   it('should render', async () => {
-    const rendered = render(
+    render(
       wrapInTestApp(
         <ApiProvider
           apis={ApiRegistry.from([
             [errorApiRef, mockErrorApi],
             [catalogApiRef, catalogApi],
             [storageApiRef, new WebStorage('@mock', mockErrorApi)],
+            [identityApiRef, mockIndentityApi],
           ])}
         >
           <CatalogPage />
         </ApiProvider>,
       ),
     );
-    expect(
-      await rendered.findByText('Backstage Service Catalog'),
-    ).toBeInTheDocument();
+    await waitFor(() => screen.getByText(/All Services \(2\)/));
+    expect(screen.getByText(/All Services \(2\)/)).toBeInTheDocument();
+  });
+  it('should filter by owner', async () => {
+    render(
+      wrapInTestApp(
+        <ApiProvider
+          apis={ApiRegistry.from([
+            [errorApiRef, mockErrorApi],
+            [catalogApiRef, catalogApi],
+            [storageApiRef, new WebStorage('@mock', mockErrorApi)],
+            [identityApiRef, mockIndentityApi],
+          ])}
+        >
+          <CatalogPage />
+        </ApiProvider>,
+      ),
+    );
+    fireEvent.click(screen.getByText(/Owned/));
+    await waitFor(() => screen.getByText(/Owned \(1\)/));
+    expect(screen.getByText(/Owned \(1\)/)).toBeInTheDocument();
   });
 });

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -36,6 +36,7 @@ import { CatalogTable } from '../CatalogTable/CatalogTable';
 import { useEntities } from '../../hooks/useEntities';
 import { findLocationForEntityMeta } from '../../data/utils';
 import {
+  filterGroups,
   getCatalogFilterItemByType,
   EntityFilterType,
 } from '../../data/filters';
@@ -171,6 +172,7 @@ export const CatalogPage: FC<{}> = () => {
         <div className={styles.contentWrapper}>
           <div>
             <CatalogFilter
+              groups={filterGroups}
               selectedFilter={selectedId ?? EntityFilterType.ALL}
               onFilterChange={setSelectedFilter}
               entitiesByFilter={entitiesByFilter}