diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index d7329e4b2f..500adaf0b5 100644 --- a/plugins/catalog/package.json +++ b/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", diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx index b78450d549..a19459b236 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx +++ b/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(), + wrapInTestApp( + , + ), ); for (const group of mockGroups) { @@ -53,7 +94,9 @@ describe('Catalog Filter', () => { ]; const { findByText } = render( - wrapInTestApp(), + wrapInTestApp( + , + ), ); 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(), + render( + wrapInTestApp( + , + ), ); - 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( , ), ); @@ -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(), + wrapInTestApp( + , + ), ); - expect(await findByText('BACKSTAGE!')).toBeInTheDocument(); + expect(await findByText('Test Group 1')).toBeInTheDocument(); }); }); diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx index f11494079f..cc3d269e61 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ b/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 ( diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 4cd0cae7af..4a9319ea3b 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/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 = { + 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( , ), ); - 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( + + + , + ), + ); + fireEvent.click(screen.getByText(/Owned/)); + await waitFor(() => screen.getByText(/Owned \(1\)/)); + expect(screen.getByText(/Owned \(1\)/)).toBeInTheDocument(); }); }); diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 0ab4e9c7d4..1722dbb9ac 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/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<{}> = () => {