test(React): Home page tests

datahub-web-react/src/Mocks.tsx

@@ -11,7 +11,7 @@ import { Dataset, EntityType, PlatformType } from './types.generated';
 
 const user1 = {
     username: 'sdas',
-    urn: 'urn:li:corpuser:2',
+    urn: 'urn:li:corpuser:1',
     type: EntityType.CorpUser,
     info: {
         email: 'sdas@domain.com',
@@ -251,7 +251,7 @@ export const mocks = [
         },
         result: {
             data: {
-                dataset: {
+                corpUser: {
                     ...user1,
                 },
             },

datahub-web-react/src/app/home/HomePageHeader.tsx

@@ -70,6 +70,7 @@ export const HomePageHeader = () => {
                     <Input.Search
                         placeholder={SearchCfg.SEARCH_BAR_PLACEHOLDER_TEXT}
                         onSearch={(value: string) => onSearch(value)}
+                        data-testid="search-input"
                     />
                 </AutoComplete>
 

datahub-web-react/src/app/home/__tests__/HomePage.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { HomePage } from '../HomePage';
+import { mocks } from '../../../Mocks';
+import TestPageContainer from '../../../utils/test-utils/TestPageContainer';
+
+describe('HomePage', () => {
+    it('renders', () => {
+        render(
+            <MockedProvider mocks={mocks} addTypename={false}>
+                <TestPageContainer>
+                    <HomePage />
+                </TestPageContainer>
+            </MockedProvider>,
+        );
+    });
+
+    it('renders greeting message', async () => {
+        const { getByText } = render(
+            <MockedProvider mocks={mocks} addTypename={false}>
+                <TestPageContainer>
+                    <HomePage />
+                </TestPageContainer>
+            </MockedProvider>,
+        );
+        await waitFor(() => expect(getByText('Welcome back, .')).toBeInTheDocument());
+    });
+
+    it('renders browsable entities', async () => {
+        const { getByText } = render(
+            <MockedProvider mocks={mocks} addTypename={false}>
+                <TestPageContainer>
+                    <HomePage />
+                </TestPageContainer>
+            </MockedProvider>,
+        );
+        await waitFor(() => expect(getByText('Datasets')).toBeInTheDocument());
+    });
+
+    it('renders autocomplete results', async () => {
+        const { getByTestId, queryByTitle } = render(
+            <MockedProvider mocks={mocks} addTypename={false}>
+                <TestPageContainer>
+                    <HomePage />
+                </TestPageContainer>
+            </MockedProvider>,
+        );
+        const searchInput = getByTestId('search-input');
+        fireEvent.change(searchInput, { target: { value: 't' } });
+
+        await waitFor(() => expect(queryByTitle('The Great Test Dataset')).toBeInTheDocument());
+        await waitFor(() => expect(queryByTitle('Some other test')).toBeInTheDocument());
+    });
+});

datahub-web-react/src/utils/test-utils/TestPageContainer.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { MemoryRouter } from 'react-router';
-
 import { DatasetEntity } from '../../app/entity/dataset/DatasetEntity';
 import { UserEntity } from '../../app/entity/user/User';
 import EntityRegistry from '../../app/entity/EntityRegistry';
@@ -20,7 +19,6 @@ export function getTestEntityRegistry() {
 
 export default ({ children, initialEntries }: Props) => {
     const entityRegistry = useMemo(() => getTestEntityRegistry(), []);
-
     return (
         <MemoryRouter initialEntries={initialEntries}>
             <EntityRegistryContext.Provider value={entityRegistry}>{children}</EntityRegistryContext.Provider>