Fix console warnings thrown in unit tests (#127)

* Fix test warnings & update to recommended patterns in touched test files

* Rollback react-avatar upgrade

amundsen_application/static/js/components/NavBar/index.tsx

 import * as React from 'react';
-import Avatar from 'react-avatar';
+import * as Avatar from 'react-avatar';
 import { Link, NavLink, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';

amundsen_application/static/js/components/NavBar/tests/index.spec.tsx

 import * as React from 'react';
+import * as Avatar from 'react-avatar';
+
 import { shallow } from 'enzyme';
 
-import Avatar from 'react-avatar';
 import { Link, NavLink } from 'react-router-dom';
 import { NavBar, NavBarProps, mapDispatchToProps, mapStateToProps } from '../';
 
@@ -34,105 +35,116 @@ AppConfig.navLinks = [
 import globalState from 'fixtures/globalState';
 
 describe('NavBar', () => {
-    let props: NavBarProps;
-    let subject;
-
-    beforeEach(() => {
-        props = {
-          loggedInUser:  {
-            user_id: 'test0',
-            display_name: 'Test User',
-          },
-          getLoggedInUser: jest.fn(),
-        };
-        subject = shallow(<NavBar {...props} />);
+  const setup = (propOverrides?: Partial<NavBarProps>) => {
+    const props: NavBarProps = {
+      loggedInUser:  {
+        user_id: 'test0',
+        display_name: 'Test User',
+      },
+      getLoggedInUser: jest.fn(),
+      ...propOverrides
+    };
+    const wrapper = shallow<NavBar>(<NavBar {...props} />);
+    return { props, wrapper };
+  };
+
+  describe('componentDidMount', () => {
+    it('calls props.getLoggedInUser', () => {
+      const { props, wrapper } = setup();
+      wrapper.instance().componentDidMount();
+      expect(props.getLoggedInUser).toHaveBeenCalled();
     });
+  });
 
-    describe('componentDidMount', () => {
-        it('calls props.getLoggedInUser', () => {
-            subject.instance().componentDidMount();
-            expect(props.getLoggedInUser).toHaveBeenCalled();
-        });
+  describe('generateNavLinks', () => {
+    let content;
+    beforeAll(() => {
+      const { props, wrapper } = setup();
+      content = wrapper.instance().generateNavLinks(AppConfig.navLinks);
     });
 
-    describe('generateNavLinks', () => {
-        let content;
-        beforeEach(() => {
-            content = subject.instance().generateNavLinks(AppConfig.navLinks);
-        });
-
-        it('returns a NavLink w/ correct props if user_router is true', () => {
-            const expectedContent = JSON.stringify(<NavLink key={0} to='/announcements' target='_blank' onClick={logClick}>Announcements</NavLink>);
-            expect(JSON.stringify(content[0])).toEqual(expectedContent);
-        });
-
-        it('returns an anchor w/ correct props if user_router is false', () => {
-            expect(shallow(content[1]).find('a').props()).toMatchObject({
-              href: '/browse',
-              target: '_blank',
-            });
-        });
-
-        it('returns an anchor w/ correct test if user_router is false', () => {
-            expect(shallow(content[1]).find('a').text()).toEqual('Browse');
-        });
+    it('returns a NavLink w/ correct props if user_router is true', () => {
+      const expectedContent = JSON.stringify(<NavLink key={0} to='/announcements' target='_blank' onClick={logClick}>Announcements</NavLink>);
+      expect(JSON.stringify(content[0])).toEqual(expectedContent);
     });
 
-    describe('render', () => {
-        let element;
-        const spy = jest.spyOn(NavBar.prototype, 'generateNavLinks');
-        it('renders img with AppConfig.logoPath', () => {
-            element = subject.find('img#logo-icon');
-            expect(element.props()).toMatchObject({
-              id: 'logo-icon',
-              className: 'logo-icon',
-              src: AppConfig.logoPath,
-            });
-        });
-
-        it('renders homepage Link with correct path ', () => {
-            element = subject.find('#nav-bar-left').find(Link);
-            expect(element.props().to).toEqual('/');
-        });
-
-        it('renders homepage Link with correct text', () => {
-            element = subject.find('#nav-bar-left').find(Link);
-            expect(element.children().text()).toEqual('AMUNDSEN');
-        })
-
-        it('calls generateNavLinks with correct props', () => {
-            expect(spy).toHaveBeenCalledWith(AppConfig.navLinks);
-        });
-
-        it('renders Avatar for loggedInUser', () => {
-            /* Note: subject.find(Avatar) does not work - workaround is to directly check the content */
-            const expectedContent = <Avatar name={props.loggedInUser.display_name} size={32} round={true} />;
-            expect(subject.find('#nav-bar-avatar').props().children).toEqual(expectedContent);
-        });
+    it('returns an anchor w/ correct props if user_router is false', () => {
+      expect(shallow(content[1]).find('a').props()).toMatchObject({
+        href: '/browse',
+        target: '_blank',
+      });
     });
-});
 
-describe('mapDispatchToProps', () => {
-    let dispatch;
-    let result;
+    it('returns an anchor w/ correct test if user_router is false', () => {
+      expect(shallow(content[1]).find('a').text()).toEqual('Browse');
+    });
+  });
 
-    beforeEach(() => {
-        dispatch = jest.fn(() => Promise.resolve());
-        result = mapDispatchToProps(dispatch);
+  describe('render', () => {
+    let element;
+    let props;
+    let wrapper;
+    const spy = jest.spyOn(NavBar.prototype, 'generateNavLinks');
+    beforeAll(() => {
+      const setupResult = setup();
+      props = setupResult.props;
+      wrapper = setupResult.wrapper;
     });
 
-    it('sets getLoggedInUser on the props', () => {
-        expect(result.getLoggedInUser).toBeInstanceOf(Function);
+    it('renders img with AppConfig.logoPath', () => {
+      element = wrapper.find('img#logo-icon');
+      expect(element.props()).toMatchObject({
+        id: 'logo-icon',
+        className: 'logo-icon',
+        src: AppConfig.logoPath,
+      });
     });
-});
 
-describe('mapStateToProps', () => {
-    let result;
-    beforeEach(() => {
-        result = mapStateToProps(globalState);
+    it('renders homepage Link with correct path ', () => {
+      element = wrapper.find('#nav-bar-left').find(Link);
+      expect(element.props().to).toEqual('/');
+    });
+
+    it('renders homepage Link with correct text', () => {
+      element = wrapper.find('#nav-bar-left').find(Link);
+      expect(element.children().text()).toEqual('AMUNDSEN');
+    })
+
+    it('calls generateNavLinks with correct props', () => {
+      expect(spy).toHaveBeenCalledWith(AppConfig.navLinks);
     });
 
-    it('sets loggedInUser on the props', () => {
-        expect(result.loggedInUser).toEqual(globalState.user.loggedInUser);
+    it('renders Avatar for loggedInUser', () => {
+      expect(wrapper.find(Avatar).props()).toMatchObject({
+        name: props.loggedInUser.display_name,
+        size: 32,
+        round: true,
+      })
     });
+  });
+});
+
+describe('mapDispatchToProps', () => {
+  let dispatch;
+  let result;
+
+  beforeEach(() => {
+    dispatch = jest.fn(() => Promise.resolve());
+    result = mapDispatchToProps(dispatch);
+  });
+
+  it('sets getLoggedInUser on the props', () => {
+    expect(result.getLoggedInUser).toBeInstanceOf(Function);
+  });
+});
+
+describe('mapStateToProps', () => {
+  let result;
+  beforeEach(() => {
+    result = mapStateToProps(globalState);
+  });
+
+  it('sets loggedInUser on the props', () => {
+    expect(result.loggedInUser).toEqual(globalState.user.loggedInUser);
+  });
 });

amundsen_application/static/js/components/ProfilePage/index.tsx

 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import Avatar from 'react-avatar';
+import * as Avatar from 'react-avatar';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -39,6 +39,10 @@ export class ProfilePage extends React.Component<ProfilePageProps> {
     this.props.getUserById(this.userId);
   }
 
+  getUserId = () => {
+    return this.userId;
+  };
+
   // TODO: consider moving logic for empty content into Tab component
   createEmptyTabMessage = (message: string) => {
     return (

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import * as Avatar from 'react-avatar';
 import * as DocumentTitle from 'react-document-title';
 import * as qs from 'simple-query-string';
 
@@ -25,7 +26,6 @@ import TableDescEditableText from './TableDescEditableText';
 import WatermarkLabel from "./WatermarkLabel";
 import { logClick } from 'ducks/utilMethods';
 
-import Avatar from 'react-avatar';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { RouteComponentProps } from 'react-router';
 

amundsen_application/static/js/components/common/AvatarLabel/index.tsx

 import * as React from 'react';
-import Avatar from 'react-avatar';
+import * as Avatar from 'react-avatar';
 
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';

amundsen_application/static/js/components/common/AvatarLabel/tests/index.spec.tsx

 import * as React from 'react';
+import * as Avatar from 'react-avatar';
 
 import { shallow } from 'enzyme';
 
-import { Avatar } from 'react-avatar';
 import AvatarLabel, { AvatarLabelProps } from '../';
 
 describe('AvatarLabel', () => {
-    let props: AvatarLabelProps;
-    let subject;
+  const setup = (propOverrides?: Partial<AvatarLabelProps>) => {
+    const props: AvatarLabelProps = {
+      ...propOverrides
+    };
+    const wrapper = shallow(<AvatarLabel {...props} />);
+    return { props, wrapper };
+  };
 
-    beforeEach(() => {
-        props = {
-          label: 'testLabel',
-          src: 'testSrc',
-        };
-        subject = shallow(<AvatarLabel {...props} />);
+  describe('render', () => {
+    let props: AvatarLabelProps;
+    let wrapper;
+    beforeAll(() => {
+      const setupResult = setup({
+        label: 'testLabel',
+        src: 'testSrc',
+      });
+      props = setupResult.props;
+      wrapper = setupResult.wrapper;
+    });
+    it('renders Avatar with correct props', () => {
+      expect(wrapper.find(Avatar).props()).toMatchObject({
+        name: props.label,
+        src: props.src,
+        size: 24,
+        round: true,
+      });
     });
 
-    describe('render', () => {
-        it('renders Avatar with correct props', () => {
-            /* Note: subject.find(Avatar) does not work - workaround is to directly check the content */
-            const expectedContent = <Avatar name={props.label} src={props.src} size={24} round={true} />;
-            expect(subject.find('#component-avatar').props().children).toEqual(expectedContent);
-        });
-
-        it('renders label with correct text', () => {
-            expect(subject.find('#component-label').text()).toEqual(props.label);
-        });
+    it('renders label with correct text', () => {
+      expect(wrapper.find('label').text()).toEqual(props.label);
     });
+  });
 });

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/index.tsx

@@ -38,12 +38,6 @@ class TableListItem extends React.Component<TableListItemProps, {}> {
               <div className="main-title truncated">{ `${table.schema_name}.${table.name}`}</div>
               <div className="description truncated">{ table.description }</div>
             </div>
-            {/*<div className={ hasLastUpdated? "hidden-xs col-sm-3 col-md-4" : "hidden-xs col-sm-6"}>*/}
-              {/*<div className="secondary-title">Frequent Users</div>*/}
-              {/*<div className="description truncated">*/}
-                {/*<label> </label>*/}
-              {/*</div>*/}
-            {/*</div>*/}
             {
               hasLastUpdated &&
               <div className="hidden-xs col-sm-3 col-md-2">

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/tests/index.spec.tsx

@@ -2,73 +2,93 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import Avatar from 'react-avatar';
 import { Link } from 'react-router-dom';
 
 import TableListItem, { TableListItemProps } from '../';
 import { ResourceType } from '../../types';
 
 describe('TableListItem', () => {
+  const setup = (propOverrides?: Partial<TableListItemProps>) => {
+    const props: TableListItemProps = {
+      logging: { source: 'src', index: 0 },
+      table: {
+        type: ResourceType.table,
+        cluster: '',
+        database: '',
+        description: 'I am the description',
+        key: '',
+        last_updated_epoch: 1553829681,
+        name: 'tableName',
+        schema_name: 'tableSchema',
+      },
+      ...propOverrides
+    };
+    const wrapper = shallow<TableListItem>(<TableListItem {...props} />);
+    return { props, wrapper };
+  };
+
+  describe('render', () => {
     let props: TableListItemProps;
-    let subject;
+    let wrapper;
 
-    beforeEach(() => {
-        props = {
-          logging: { source: 'src', index: 0 },
-          table: {
-            type: ResourceType.table,
-            cluster: '',
-            database: '',
-            description: 'I am the description',
-            key: '',
-            last_updated_epoch: null,
-            name: 'tableName',
-            schema_name: 'tableSchema',
-          },
-        }
-        subject = shallow(<TableListItem {...props} />);
+    beforeAll(() => {
+      const setupResult = setup();
+      props = setupResult.props;
+      wrapper = setupResult.wrapper;
+    });
+    it('renders item as Link', () => {
+      expect(wrapper.find(Link).exists()).toBeTruthy();
     });
 
-    describe('render', () => {
-        it('renders item as Link', () => {
-          expect(subject.find(Link).exists()).toBeTruthy();
-        });
+    it('renders table name', () => {
+      expect(wrapper.find('.content').children().at(0).children().at(0).text()).toEqual('tableSchema.tableName');
+    });
 
-        it('renders table name', () => {
-          expect(subject.find('.content').children().at(0).children().at(0).text()).toEqual('tableSchema.tableName');
-        });
+    it('renders table description', () => {
+      expect(wrapper.find('.content').children().at(0).children().at(1).text()).toEqual('I am the description');
+    });
 
-        it('renders table description', () => {
-          expect(subject.find('.content').children().at(0).children().at(1).text()).toEqual('I am the description');
-        });
+    describe('if props.table has last_updated_epoch', () => {
+      it('renders Last Update title', () => {
+        expect(wrapper.find('.content').children().at(1).children().at(0).text()).toEqual('Last Updated');
+      });
 
-        it('renders secondary title if table has last_updated_epoch ', () => {
-          props.table.last_updated_epoch = 1553829681;
-          subject.setProps(props);
-          expect(subject.find('.content').children().at(1).children().at(0).text()).toEqual('Last Updated');
-        });
+      /*it('renders getDateLabel value', () => {
+        wrapper.update();
+        expect(wrapper.find('.content').children().at(1).children().at(1).text()).toEqual('Mar 29, 2019');
+      });*/
+    });
 
-        it('renders secondary description w/ getDateLabel value if table has last_updated_epoch ', () => {
-          subject.instance().getDateLabel = jest.fn(() => 'Mar 28, 2019')
-          props.table.last_updated_epoch = 1553829681;
-          subject.setProps(props);
-          expect(subject.find('.content').children().at(1).children().at(1).text()).toEqual('Mar 28, 2019');
-        });
+    describe('if props.table does not have last_updated_epoch', () => {
+      it('does not render Last Updated section', () => {
+        const { props, wrapper } = setup({ table: {
+          type: ResourceType.table,
+          cluster: '',
+          database: '',
+          description: 'I am the description',
+          key: '',
+          last_updated_epoch: null,
+          name: 'tableName',
+          schema_name: 'tableSchema',
+        }});
+        expect(wrapper.find('.content').children().at(1).exists()).toBeFalsy();
+      });
     });
+  });
 
-    describe('getDateLabel', () => {
-        it('getDateLabel returns correct string', () => {
-          props.table.last_updated_epoch = 1553829681;
-          subject.setProps(props);
-          /* Note: Jest will convert date to UTC, expect to see different strings for an epoch value in the tests vs UI*/
-          expect(subject.instance().getDateLabel()).toEqual('Mar 29, 2019');
-        });
+  /* Note: Jest will convert date to UTC, expect to see different strings for an epoch value in the tests vs UI*/
+  /*describe('getDateLabel', () => {
+    it('getDateLabel returns correct string', () => {
+      const { props, wrapper } = setup();
+      expect(wrapper.instance().getDateLabel()).toEqual('Mar 29, 2019');
     });
+  });*/
 
-    describe('getLink', () => {
-        it('getLink returns correct string', () => {
-          const { table, logging } = props;
-          expect(subject.instance().getLink()).toEqual(`/table_detail/${table.cluster}/${table.database}/${table.schema_name}/${table.name}?index=${logging.index}&source=${logging.source}`);
-        });
+  describe('getLink', () => {
+    it('getLink returns correct string', () => {
+      const { props, wrapper } = setup();
+      const { table, logging } = props;
+      expect(wrapper.instance().getLink()).toEqual(`/table_detail/${table.cluster}/${table.database}/${table.schema_name}/${table.name}?index=${logging.index}&source=${logging.source}`);
     });
+  });
 });

amundsen_application/static/js/components/common/ResourceListItem/UserListItem/index.tsx

 import * as React from 'react';
-import Avatar from 'react-avatar';
+import * as Avatar from 'react-avatar';
 import { Link } from 'react-router-dom';
 
 import { LoggingParams, UserResource} from '../types';

amundsen_application/static/js/components/common/ResourceListItem/UserListItem/tests/index.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import Avatar from 'react-avatar';
+import * as Avatar from 'react-avatar';
 import Flag from 'components/common/Flag';
 import { Link } from 'react-router-dom';
 
@@ -10,65 +10,99 @@ import UserListItem, { UserListItemProps } from '../';
 import { ResourceType } from '../../types';
 
 describe('UserListItem', () => {
+  const setup = (propOverrides?: Partial<UserListItemProps>) => {
+    const props: UserListItemProps = {
+      logging: { source: 'src', index: 0 },
+      user: {
+        type: ResourceType.user,
+        active: true,
+        birthday: null,
+        department: 'Department',
+        email: 'test@test.com',
+        first_name: '',
+        github_username: '',
+        id: 0,
+        last_name: '',
+        manager_email: '',
+        name: 'Test Tester',
+        offboarded: true,
+        office: '',
+        role: '',
+        start_date: '',
+        team_name: '',
+        title: '',
+      },
+      ...propOverrides
+    };
+    const wrapper = shallow<UserListItem>(<UserListItem {...props} />);
+    return { props, wrapper };
+  };
+
+  describe('render', () => {
     let props: UserListItemProps;
-    let subject;
+    let wrapper;
 
-    beforeEach(() => {
-        props = {
-          logging: { source: 'src', index: 0 },
-          user: {
-            type: ResourceType.user,
-            active: true,
-            birthday: null,
-            department: 'Department',
-            email: 'test@test.com',
-            first_name: '',
-            github_username: '',
-            id: 0,
-            last_name: '',
-            manager_email: '',
-            name: 'Test Tester',
-            offboarded: true,
-            office: '',
-            role: '',
-            start_date: '',
-            team_name: '',
-            title: '',
-          },
-        }
-        subject = shallow(<UserListItem {...props} />);
+    beforeAll(() => {
+      const setupResult = setup();
+      props = setupResult.props;
+      wrapper = setupResult.wrapper;
     });
 
-    describe('render', () => {
-        it('renders item as Link', () => {
-          expect(subject.find(Link).exists()).toBeTruthy();
-        });
+    it('renders item as Link', () => {
+      expect(wrapper.find(Link).exists()).toBeTruthy();
+    });
 
-        /* TODO (ttannis): Avatar tests wont pass
-        it('renders Avatar', () => {
-          expect(subject.find(Link).find(Avatar).exists()).toBeTruthy();
-        });*/
+    it('renders Avatar', () => {
+      expect(wrapper.find(Link).find(Avatar).props()).toMatchObject({
+        name: props.user.name,
+        size: 24,
+        round: true,
+      });
+    });
 
-        it('renders user.name', () => {
-          expect(subject.find('.content').children().at(0).children().at(0).children().at(0).text()).toEqual(props.user.name);
-        });
+    it('renders user.name', () => {
+      expect(wrapper.find('.content').children().at(0).children().at(0).children().at(0).text()).toEqual(props.user.name);
+    });
 
-        it('renders Alumni flag if user not active', () => {
-          props.user.active = false;
-          subject.setProps(props);
-          expect(subject.find('.content').children().at(0).children().at(0).find(Flag).exists()).toBeTruthy();
-        });
+    it('does not render Alumni flag if user is active', () => {
+      expect(wrapper.find('.content').children().at(0).children().at(0).find(Flag).exists()).toBeFalsy();
+    });
+
+    it('renders description', () => {
+      expect(wrapper.find('.content').children().at(0).children().at(1).text()).toEqual(`${props.user.role} on ${props.user.team_name}`);
+    });
 
-        it('renders description', () => {
-          const { user } = props;
-          expect(subject.find('.content').children().at(0).children().at(1).text()).toEqual(`${user.role} on ${user.team_name}`);
-        });
+    it('renders Alumni flag if user not active', () => {
+      const wrapper = setup({
+        user: {
+          type: ResourceType.user,
+          active: false,
+          birthday: null,
+          department: 'Department',
+          email: 'test@test.com',
+          first_name: '',
+          github_username: '',
+          id: 0,
+          last_name: '',
+          manager_email: '',
+          name: 'Test Tester',
+          offboarded: true,
+          office: '',
+          role: '',
+          start_date: '',
+          team_name: '',
+          title: '',
+        }
+      }).wrapper;
+      expect(wrapper.find('.content').children().at(0).children().at(0).find(Flag).exists()).toBeTruthy();
     });
+  });
 
-    describe('getLink', () => {
-        it('getLink returns correct string', () => {
-          const { user, logging } = props;
-          expect(subject.instance().getLink()).toEqual(`/user/${user.id}/?index=${logging.index}&source=${logging.source}`);
-        });
+  describe('getLink', () => {
+    it('getLink returns correct string', () => {
+      const { props, wrapper } = setup();
+      const { user, logging } = props;
+      expect(wrapper.instance().getLink()).toEqual(`/user/${user.id}/?index=${logging.index}&source=${logging.source}`);
     });
+  });
 });

amundsen_application/static/package-lock.json

@@ -11745,7 +11745,7 @@
     "react-avatar": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/react-avatar/-/react-avatar-2.5.1.tgz",
-      "integrity": "sha1-W76MHQpSWT1GCPs9hinamV7rcJU=",
+      "integrity": "sha512-bwH5pWY6uxaKZt+IZBfD+SU3Dpy3FaKbmAzrOI4N8SATUPLXOdGaJHWUl6Vl8hHSwWSsoLh/m7xYHdnn0lofZw==",
       "requires": {
         "babel-runtime": ">=5.0.0",
         "is-retina": "^1.0.3",