yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-29 10:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(React): Adding test coverage for search page & fixing filter select bug (#2131)

Browse Source
This commit is contained in:
Gabe Lyons 2021-02-22 22:25:20 -08:00 committed by GitHub
parent 1b96cd8c26
commit 4dcbef6bc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 194 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
datahub-web-react/src/Mocks.tsx
View File

@ -1,15 +1,20 @@
import { GetDatasetDocument, UpdateDatasetDocument } from './graphql/dataset.generated';
import { GetBrowsePathsDocument, GetBrowseResultsDocument } from './graphql/browse.generated';
import { GetAutoCompleteResultsDocument, GetSearchResultsDocument } from './graphql/search.generated';
import {
GetAutoCompleteResultsDocument,
GetSearchResultsDocument,
GetSearchResultsQuery,
} from './graphql/search.generated';
import { LoginDocument } from './graphql/auth.generated';
import { GetUserDocument } from './graphql/user.generated';
import { EntityType } from './types.generated';
import { Dataset, EntityType } from './types.generated';
const user1 = {
username: 'sdas',
urn: 'urn:li:corpuser:2',
type: EntityType.CorpUser,
info: {
email: 'sdas@domain.com',
active: true,
displayName: 'sdas',
title: 'Software Engineer',
@ -27,6 +32,7 @@ const user2 = {
urn: 'urn:li:corpuser:3',
type: EntityType.CorpUser,
info: {
email: 'john@domain.com',
active: true,
displayName: 'john',
title: 'Eng',
@ -184,7 +190,7 @@ const dataset3 = {
time: 0,
},
},
};
} as Dataset;
/*
Define mock data to be returned by Apollo MockProvider.
@ -440,7 +446,7 @@ export const mocks = [
},
],
},
},
} as GetSearchResultsQuery,
},
},
{
@ -455,7 +461,7 @@ export const mocks = [
filters: [
{
field: 'platform',
value: 'Kafka',
value: 'kafka',
},
],
},
@ -463,33 +469,97 @@ export const mocks = [
},
result: {
data: {
__typename: 'Query',
search: {
__typename: 'SearchResults',
start: 0,
count: 1,
total: 1,
entities: [
{
__typename: 'Dataset',
...dataset3,
},
],
facets: [
{
field: 'origin',
aggregations: [{ value: 'PROD', count: 3 }],
aggregations: [
{
value: 'PROD',
count: 3,
},
],
},
{
field: 'platform',
aggregations: [
{ value: 'HDFS', count: 1 },
{ value: 'MySQL', count: 1 },
{ value: 'Kafka', count: 1 },
{ value: 'hdfs', count: 1 },
{ value: 'mysql', count: 1 },
{ value: 'kafka', count: 1 },
],
},
],
},
} as GetSearchResultsQuery,
},
},
{
request: {
query: GetSearchResultsDocument,
variables: {
input: {
type: 'DATASET',
query: 'test',
start: 0,
count: 10,
filters: [
{
field: 'platform',
value: 'kafka',
},
{
field: 'platform',
value: 'hdfs',
},
],
},
},
},
result: {
data: {
__typename: 'Query',
search: {
__typename: 'SearchResults',
start: 0,
count: 1,
total: 1,
entities: [
{
...dataset3,
},
],
facets: [
{
field: 'origin',
aggregations: [
{
value: 'PROD',
count: 3,
},
],
},
{
field: 'platform',
aggregations: [
{ value: 'hdfs', count: 1 },
{ value: 'mysql', count: 1 },
{ value: 'kafka', count: 1 },
],
},
],
},
} as GetSearchResultsQuery,
},
},
{
request: {

2
datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx
View File

@ -76,5 +76,5 @@ export default function SchemaView({ schema }: Props) {
return [...defaultColumns, ...categoryColumns];
}, [schema]);
return <Table pagination={false} dataSource={schema?.fields} columns={columns} />;
return <Table pagination={false} dataSource={schema?.fields} columns={columns} rowKey="fieldPath" />;
}

4
datahub-web-react/src/app/search/SearchBar.tsx
View File

@ -56,7 +56,9 @@ export const SearchBar = ({
>
<Select value={activeType} style={{ marginRight: '12px', width: 250 }} onChange={onTypeChange}>
{types.map((t) => (
<Option value={t}>{t}</Option>
<Option key={t} value={t}>
{t}
</Option>
))}
</Select>
<AutoComplete

7
datahub-web-react/src/app/search/SearchFilters.tsx
View File

@ -28,13 +28,14 @@ export const SearchFilters = ({ facets, selectedFilters, onFilterSelect }: Props
bodyStyle={{ padding: '24px 0px' }}
>
{facets.map((facet) => (
<div style={{ padding: '0px 25px 15px 25px' }}>
<div key={facet.field} style={{ padding: '0px 25px 15px 25px' }}>
<div style={{ fontWeight: 'bold', marginBottom: '10px' }}>
{facet.field.charAt(0).toUpperCase() + facet.field.slice(1)}
</div>
{facet.aggregations.map((aggregation) => (
<>
<span key={`${facet.field}-${aggregation.value}`}>
<Checkbox
data-testid={`facet-${facet.field}-${aggregation.value}`}
style={{ margin: '5px 0px' }}
checked={
selectedFilters.find(
@ -48,7 +49,7 @@ export const SearchFilters = ({ facets, selectedFilters, onFilterSelect }: Props
{aggregation.value} ({aggregation.count})
</Checkbox>
<br />
</>
</span>
))}
</div>
))}

2
datahub-web-react/src/app/search/SearchPage.tsx
View File

@ -29,7 +29,7 @@ export const SearchPage = () => {
const entityRegistry = useEntityRegistry();
const searchTypes = entityRegistry.getSearchEntityTypes();
const params = QueryString.parse(location.search);
const params = QueryString.parse(location.search, { arrayFormat: 'comma' });
const selectedType = entityRegistry.getTypeOrDefaultFromPathName(
useParams<SearchPageParams>().type || '',
undefined,

102
datahub-web-react/src/app/search/__tests__/SearchPage.test.tsx Normal file
View File

@ -0,0 +1,102 @@
import React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import { SearchPage } from '../SearchPage';
import TestPageContainer from '../../../utils/test-utils/TestPageContainer';
import { mocks } from '../../../Mocks';
describe('SearchPage', () => {
it('renders', () => {
render(
<MockedProvider mocks={mocks} addTypename={false}>
<TestPageContainer initialEntries={['/search/dataset?filter_platform=hive,kafka&page=1&query=sample']}>
<SearchPage />
</TestPageContainer>
</MockedProvider>,
);
});
it('renders loading', () => {
const { getByText } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<TestPageContainer initialEntries={['/search/dataset?filter_platform=hive,kafka&page=1&query=sample']}>
<SearchPage />
</TestPageContainer>
</MockedProvider>,
);
expect(getByText('Loading')).toBeInTheDocument();
});
it('renders the selected filters as checked', async () => {
const { getByTestId, queryByTestId } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<TestPageContainer initialEntries={['/search/dataset?filter_platform=kafka&page=1&query=test']}>
<SearchPage />
</TestPageContainer>
</MockedProvider>,
);
await waitFor(() => expect(queryByTestId('facet-platform-kafka')).toBeInTheDocument());
const kafkaPlatformBox = getByTestId('facet-platform-kafka');
expect(kafkaPlatformBox).toHaveProperty('checked', true);
const hdfsPlatformBox = getByTestId('facet-platform-hdfs');
expect(hdfsPlatformBox).toHaveProperty('checked', false);
const prodOriginBox = getByTestId('facet-origin-PROD');
expect(prodOriginBox).toHaveProperty('checked', false);
});
it('renders multiple checked filters at once', async () => {
const { getByTestId, queryByTestId } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<TestPageContainer initialEntries={['/search/dataset?filter_platform=kafka,hdfs&page=1&query=test']}>
<SearchPage />
</TestPageContainer>
</MockedProvider>,
);
await waitFor(() => expect(queryByTestId('facet-platform-kafka')).toBeInTheDocument());
const kafkaPlatformBox = getByTestId('facet-platform-kafka');
expect(kafkaPlatformBox).toHaveProperty('checked', true);
const hdfsPlatformBox = getByTestId('facet-platform-hdfs');
expect(hdfsPlatformBox).toHaveProperty('checked', true);
const prodOriginBox = getByTestId('facet-origin-PROD');
expect(prodOriginBox).toHaveProperty('checked', false);
});
it('clicking a filter selects a new filter', async () => {
const { getByTestId, queryByTestId, queryByText } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<TestPageContainer initialEntries={['/search/dataset?filter_platform=kafka&page=1&query=test']}>
<SearchPage />
</TestPageContainer>
</MockedProvider>,
);
await waitFor(() => expect(queryByTestId('facet-platform-kafka')).toBeInTheDocument());
const kafkaPlatformBox = getByTestId('facet-platform-kafka');
expect(kafkaPlatformBox).toHaveProperty('checked', true);
const hdfsPlatformBox = getByTestId('facet-platform-hdfs');
expect(hdfsPlatformBox).toHaveProperty('checked', false);
expect(queryByText('Loading')).not.toBeInTheDocument();
fireEvent.click(hdfsPlatformBox);
expect(queryByText('Loading')).toBeInTheDocument();
await waitFor(() => expect(queryByTestId('facet-platform-kafka')).toBeInTheDocument());
const kafkaPlatformBox2 = getByTestId('facet-platform-kafka');
expect(kafkaPlatformBox2).toHaveProperty('checked', true);
const hdfsPlatformBox2 = getByTestId('facet-platform-hdfs');
expect(hdfsPlatformBox2).toHaveProperty('checked', true);
});
});

5
datahub-web-react/src/utils/test-utils/TestPageContainer.tsx
View File

@ -8,6 +8,7 @@ import { EntityRegistryContext } from '../../entityRegistryContext';
type Props = {
children: React.ReactNode;
initialEntries?: string[];
};
export function getTestEntityRegistry() {
@ -17,11 +18,11 @@ export function getTestEntityRegistry() {
return entityRegistry;
}
export default ({ children }: Props) => {
export default ({ children, initialEntries }: Props) => {
const entityRegistry = useMemo(() => getTestEntityRegistry(), []);
return (
<MemoryRouter>
<MemoryRouter initialEntries={initialEntries}>
<EntityRegistryContext.Provider value={entityRegistry}>{children}</EntityRegistryContext.Provider>
</MemoryRouter>
);