paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 46 Packages Projects Releases Wiki Activity

fix(catalog): tests and rebase on master

Browse Source
This commit is contained in:
Nikita Nek Dudnik
2020-06-17 03:00:30 +02:00
parent 3b19d7f37a
commit 92629f5f5d
6 changed files with 140 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/catalog/package.json
+1 -1
View File
@@ -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
+70 -14
View File
@@ -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
+3 -2
View File
@@ -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
+40 -5
View File
@@ -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
+2
View File
@@ -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}
yarn.lock
+24 -1
View File
@@ -891,7 +891,7 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.5.4":
"@babel/runtime@^7.10.2", "@babel/runtime@^7.5.4":
version "7.10.2"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
@@ -3285,6 +3285,16 @@
dom-accessibility-api "^0.4.2"
pretty-format "^25.1.0"
"@testing-library/dom@^7.9.0":
version "7.16.1"
resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.16.1.tgz#a6881d53612f2e8f7bcc0e0bd8825c6788cf57f2"
integrity sha512-u0Ck7tjWDyCcGn+f77JbUHa7PqgFu62ohRxegj1/H5P3REKsM+2roCvcnWJjMSHvK354NAS/Pgi92E9z6cB7Sw==
dependencies:
"@babel/runtime" "^7.10.2"
aria-query "^4.0.2"
dom-accessibility-api "^0.4.5"
pretty-format "^25.5.0"
"@testing-library/jest-dom@^5.7.0":
version "5.9.0"
resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.9.0.tgz#86464c66cbe75e632b8adb636f539bfd0efc2c9c"
@@ -3308,6 +3318,14 @@
"@babel/runtime" "^7.5.4"
"@types/testing-library__react-hooks" "^3.0.0"
"@testing-library/react@^10.2.1":
version "10.2.1"
resolved "https://registry.npmjs.org/@testing-library/react/-/react-10.2.1.tgz#f0c5ac9072ad54c29672150943f35d6617263f26"
integrity sha512-pv2jZhiZgN1/alz1aImhSasZAOPg3er2Kgcfg9fzuw7aKPLxVengqqR1n0CJANeErR1DqORauQaod+gGUgAJOQ==
dependencies:
"@babel/runtime" "^7.10.2"
"@testing-library/dom" "^7.9.0"
"@testing-library/react@^9.3.2":
version "9.5.0"
resolved "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz#71531655a7890b61e77a1b39452fbedf0472ca5e"
@@ -7698,6 +7716,11 @@ dom-accessibility-api@^0.4.2:
resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.4.3.tgz#93ca9002eb222fd5a343b6e5e6b9cf5929411c4c"
integrity sha512-JZ8iPuEHDQzq6q0k7PKMGbrIdsgBB7TRrtVOUm4nSMCExlg5qQG4KXWTH2k90yggjM4tTumRGwTKJSldMzKyLA==
dom-accessibility-api@^0.4.5:
version "0.4.5"
resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.4.5.tgz#d9c1cefa89f509d8cf132ab5d250004d755e76e3"
integrity sha512-HcPDilI95nKztbVikaN2vzwvmv0sE8Y2ZJFODy/m15n7mGXLeOKGiys9qWVbFbh+aq/KYj2lqMLybBOkYAEXqg==
dom-converter@^0.2:
version "0.2.0"
resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"