Merge remote-tracking branch 'origin/master' into lookup-form-component

__tests__/App.test.jsx

@@ -1,72 +1,124 @@
 import React from 'react';
-import { HashRouter as Router } from 'react-router-dom';
-import { shallow, mount } from 'enzyme';
-import App from '../src/App';
-import api from '../src/api';
-import { API_LOGOUT, API_CONFIG } from '../src/endpoints';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
 
-import Dashboard from '../src/pages/Dashboard';
-import Login from '../src/pages/Login';
+import { mount, shallow } from 'enzyme';
 import { asyncFlush } from '../jest.setup';
 
+import App from '../src/App';
+
 const DEFAULT_ACTIVE_GROUP = 'views_group';
-const DEFAULT_ACTIVE_ITEM = 'views_group_dashboard';
 
 describe('<App />', () => {
-  test('renders without crashing', () => {
-    const appWrapper = shallow(<App />);
+  test('expected content is rendered', () => {
+    const appWrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <App
+            routeGroups={[
+              {
+                groupTitle: 'Group One',
+                groupId: 'group_one',
+                routes: [
+                  { title: 'Foo', path: '/foo' },
+                  { title: 'Bar', path: '/bar' },
+                ],
+              },
+              {
+                groupTitle: 'Group Two',
+                groupId: 'group_two',
+                routes: [
+                  { title: 'Fiz', path: '/fiz' },
+                ]
+              }
+            ]}
+            render={({ routeGroups }) => (
+              routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
+            )}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+
+    // page components
     expect(appWrapper.length).toBe(1);
+    expect(appWrapper.find('PageHeader').length).toBe(1);
+    expect(appWrapper.find('PageSidebar').length).toBe(1);
+
+    // sidebar groups and route links
+    expect(appWrapper.find('NavExpandableGroup').length).toBe(2);
+    expect(appWrapper.find('a[href="/#/foo"]').length).toBe(1);
+    expect(appWrapper.find('a[href="/#/bar"]').length).toBe(1);
+    expect(appWrapper.find('a[href="/#/fiz"]').length).toBe(1);
+
+    // inline render
+    expect(appWrapper.find('#group_one').length).toBe(1);
+    expect(appWrapper.find('#group_two').length).toBe(1);
   });
 
-  test('renders login page when not authenticated', () => {
-    api.isAuthenticated = jest.fn();
-    api.isAuthenticated.mockReturnValue(false);
+  test('opening the about modal renders prefetched config data', async (done) => {
+    const ansible_version = '111';
+    const version = '222';
 
-    const appWrapper = mount(<Router><App /></Router>);
+    const getConfig = jest.fn(() => Promise.resolve({ data: { ansible_version, version} }));
+    const api = { getConfig };
 
-    const login = appWrapper.find(Login);
-    expect(login.length).toBe(1);
-    const dashboard = appWrapper.find(Dashboard);
-    expect(dashboard.length).toBe(0);
-  });
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <App api={api}/>
+        </I18nProvider>
+      </MemoryRouter>
+    );
 
-  test('renders dashboard when authenticated', () => {
-    api.isAuthenticated = jest.fn();
-    api.isAuthenticated.mockReturnValue(true);
+    await asyncFlush();
+    expect(getConfig).toHaveBeenCalledTimes(1);
 
-    const appWrapper = mount(<Router><App /></Router>);
+    // open about modal
+    const aboutDropdown = 'Dropdown QuestionCircleIcon';
+    const aboutButton = 'DropdownItem li button';
+    const aboutModalContent = 'AboutModalBoxContent';
+    const aboutModalClose = 'button[aria-label="Close Dialog"]';
 
-    const dashboard = appWrapper.find(Dashboard);
-    expect(dashboard.length).toBe(1);
-    const login = appWrapper.find(Login);
-    expect(login.length).toBe(0);
+    expect(wrapper.find(aboutModalContent)).toHaveLength(0);
+    wrapper.find(aboutDropdown).simulate('click');
+    wrapper.find(aboutButton).simulate('click');
+    wrapper.update();
+
+    // check about modal content
+    const content = wrapper.find(aboutModalContent);
+    expect(content).toHaveLength(1);
+    expect(content.find('dd').text()).toContain(ansible_version);
+    expect(content.find('pre').text()).toContain(`<  Tower ${version}  >`);
+
+    // close about modal
+    wrapper.find(aboutModalClose).simulate('click');
+    expect(wrapper.find(aboutModalContent)).toHaveLength(0);
+
+    done();
   });
 
   test('onNavToggle sets state.isNavOpen to opposite', () => {
-    const appWrapper = shallow(<App.WrappedComponent />);
-    expect(appWrapper.state().isNavOpen).toBe(true);
-    appWrapper.instance().onNavToggle();
-    expect(appWrapper.state().isNavOpen).toBe(false);
+    const appWrapper = shallow(<App />);
+    const { onNavToggle } = appWrapper.instance();
+
+    [true, false, true, false, true].forEach(expected => {
+      expect(appWrapper.state().isNavOpen).toBe(expected);
+      onNavToggle();
+    });
   });
 
-  test('onLogoClick sets selected nav back to defaults', () => {
-    const appWrapper = shallow(<App.WrappedComponent />);
-    appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
-    expect(appWrapper.state().activeItem).toBe('bar');
-    expect(appWrapper.state().activeGroup).toBe('foo');
-    appWrapper.instance().onLogoClick();
-    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
-  });
+  test('onLogout makes expected call to api client', async (done) => {
+    const logout = jest.fn(() => Promise.resolve());
+    const api = { logout };
 
-  test('api.logout called from logout button', async () => {
-    api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
-    const appWrapper = shallow(<App.WrappedComponent />);
-    appWrapper.instance().onDevLogout();
-    appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
-    expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
+    const appWrapper = shallow(<App api={api} />);
+
+    appWrapper.instance().onLogout();
     await asyncFlush();
-    expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
-    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
+    expect(api.logout).toHaveBeenCalledTimes(1);
+
+    done();
   });
 
   test('Componenet makes REST call to API_CONFIG endpoint when mounted', () => {