fix tests for OrganizationTeams, OrganizationTeamsList

__tests__/pages/Organizations/components/OrganizationForm.test.jsx

@@ -4,8 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 import { ConfigContext } from '../../../../src/context';
 import OrganizationForm from '../../../../src/pages/Organizations/components/OrganizationForm';
-
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+import { sleep } from '../../../testUtils';
 
 describe('<OrganizationForm />', () => {
   let api;

__tests__/pages/Organizations/components/OrganizationTeamsList.test.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { I18nProvider } from '@lingui/react';
-
+import { sleep } from '../../../testUtils';
 import OrganizationTeamsList from '../../../../src/pages/Organizations/components/OrganizationTeamsList';
 
 const mockData = [
-  {
-    id: 1,
-    name: 'boo',
-    url: '/foo/bar/'
-  }
+  { id: 1, name: 'one', url: '/org/team/1' },
+  { id: 2, name: 'two', url: '/org/team/2' },
+  { id: 3, name: 'three', url: '/org/team/3' },
+  { id: 4, name: 'four', url: '/org/team/4' },
+  { id: 5, name: 'five', url: '/org/team/5' },
 ];
 
 describe('<OrganizationTeamsList />', () => {
@@ -23,85 +24,81 @@ describe('<OrganizationTeamsList />', () => {
       <I18nProvider>
         <MemoryRouter>
           <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
-            onReadTeamsList={() => {}}
-            removeRole={() => {}}
+            teams={mockData}
+            itemCount={7}
+            queryParams={{
+              page: 1,
+              page_size: 5,
+              order_by: 'name',
+            }}
           />
         </MemoryRouter>
       </I18nProvider>
     );
   });
 
-  test('api response data passed to component gets set to state properly', (done) => {
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
-            onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationTeamsList');
-
-    setImmediate(() => {
-      expect(wrapper.state().results).toEqual(mockData);
-      done();
+  // should navigate when datalisttoolbar changes sorting
+  test('should navigate when DataListToolbar calls onSort prop', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
     });
+    const wrapper = mount(
+      <Router history={history}>
+        <I18nProvider>
+          <OrganizationTeamsList
+            teams={mockData}
+            itemCount={7}
+            queryParams={{
+              page: 1,
+              page_size: 5,
+              order_by: 'name',
+            }}
+          />
+        </I18nProvider>
+      </Router>
+    );
+
+    const toolbar = wrapper.find('DataListToolbar');
+    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
+    expect(toolbar.prop('sortOrder')).toEqual('ascending');
+    toolbar.prop('onSort')('name', 'descending');
+    expect(history.location.search).toEqual('?order_by=-name');
+    await sleep(0);
+    wrapper.update();
+
+    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
+    // TODO: this assertion required updating queryParams prop. Consider
+    // fixing after #147 is done:
+    // expect(toolbar.prop('sortOrder')).toEqual('descending');
+    toolbar.prop('onSort')('name', 'ascending');
+    expect(history.location.search).toEqual('?order_by=name');
   });
 
-  test('handleSort being passed properly to DataListToolbar component', async (done) => {
-    const handleSort = jest.spyOn(OrganizationTeamsList.prototype, 'handleSort');
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
-            onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationTeamsList');
-    expect(handleSort).not.toHaveBeenCalled();
-
-    setImmediate(() => {
-      const rendered = wrapper.update();
-      rendered.find('button[aria-label="Sort"]').simulate('click');
-      expect(handleSort).toHaveBeenCalled();
-      done();
+  test('should navigate to page when Pagination calls onSetPage prop', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
     });
-  });
-
-  test('handleSetPage calls readQueryParams and readOrganizationTeamsList ', () => {
-    const spyQueryParams = jest.spyOn(OrganizationTeamsList.prototype, 'readQueryParams');
-    const spyFetch = jest.spyOn(OrganizationTeamsList.prototype, 'readOrganizationTeamsList');
     const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
+      <Router history={history}>
+        <I18nProvider>
           <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
-            onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
+            teams={mockData}
+            itemCount={7}
+            queryParams={{
+              page: 1,
+              page_size: 5,
+              order_by: 'name',
+            }}
           />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationTeamsList');
-    wrapper.instance().handleSetPage(2, 10);
-    expect(spyQueryParams).toHaveBeenCalled();
-    expect(spyFetch).toHaveBeenCalled();
-    wrapper.setState({ sortOrder: 'descending' });
-    wrapper.instance().handleSetPage(3, 5);
-    expect(spyQueryParams).toHaveBeenCalled();
-    expect(spyFetch).toHaveBeenCalled();
-    const queryParamCalls = spyQueryParams.mock.calls;
-    // make sure last two readQueryParams calls
-    // were called with the correct arguments
-    expect(queryParamCalls[queryParamCalls.length - 2][0])
-      .toEqual({ order_by: 'name', page: 2, page_size: 10 });
-    expect(queryParamCalls[queryParamCalls.length - 1][0])
-      .toEqual({ order_by: '-name', page: 3, page_size: 5 });
+        </I18nProvider>
+      </Router>
+    );
+
+    const pagination = wrapper.find('Pagination');
+    pagination.prop('onSetPage')(2, 5);
+    expect(history.location.search).toEqual('?page=2&page_size=5');
+    wrapper.update();
+    pagination.prop('onSetPage')(1, 25);
+    expect(history.location.search).toEqual('?page=1&page_size=25');
   });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx

@@ -1,45 +1,135 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
+import { mount, shallow } from 'enzyme';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+import { createMemoryHistory } from 'history';
+import { sleep } from '../../../../testUtils';
+import OrganizationTeams, { _OrganizationTeams } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
+import OrganizationTeamsList from '../../../../../src/pages/Organizations/components/OrganizationTeamsList';
 
-import OrganizationTeams from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
-
-const mockAPITeamsList = {
-  foo: 'bar',
+const listData = {
+  data: {
+    count: 7,
+    results: [
+      { id: 1, name: 'one', url: '/org/team/1' },
+      { id: 2, name: 'two', url: '/org/team/2' },
+      { id: 3, name: 'three', url: '/org/team/3' },
+      { id: 4, name: 'four', url: '/org/team/4' },
+      { id: 5, name: 'five', url: '/org/team/5' },
+    ]
+  }
 };
 
-const readOrganizationTeamsList = () => Promise.resolve(mockAPITeamsList);
-
 describe('<OrganizationTeams />', () => {
-  test('initially renders succesfully', () => {
-    mount(
-      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-        <OrganizationTeams
-          match={{ path: '/organizations/:id/teams', url: '/organizations/1/teams', params: { id: 1 } }}
-          location={{ search: '', pathname: '/organizations/1/teams' }}
-          params={{}}
-          api={{
-            readOrganizationTeamsList: jest.fn(),
-          }}
-        />
-      </MemoryRouter>
+  test('renders succesfully', () => {
+    shallow(
+      <_OrganizationTeams
+        id={1}
+        searchString=""
+        location={{ search: '', pathname: '/organizations/1/teams' }}
+        api={{
+          readOrganizationTeamsList: jest.fn(),
+        }}
+      />
     );
   });
 
-  test('passed methods as props are called appropriately', async () => {
-    const wrapper = mount(
-      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-        <OrganizationTeams
-          match={{ path: '/organizations/:id/teams', url: '/organizations/1/teams', params: { id: 1 } }}
-          location={{ search: '', pathname: '/organizations/1/teams' }}
-          params={{}}
-          api={{
-            readOrganizationTeamsList
-          }}
-        />
-      </MemoryRouter>
+  test('should load teams on mount', () => {
+    const readOrganizationTeamsList = jest.fn(() => Promise.resolve(listData));
+    mount(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+          <OrganizationTeams
+            id={1}
+            searchString=""
+            api={{ readOrganizationTeamsList }}
+          />
+        </MemoryRouter>
+      </I18nProvider>
     ).find('OrganizationTeams');
-    const teamsList = await wrapper.instance().readOrganizationTeamsList();
-    expect(teamsList).toEqual(mockAPITeamsList);
+    expect(readOrganizationTeamsList).toHaveBeenCalledWith(1, {
+      page: 1,
+      page_size: 5,
+      order_by: 'name',
+    });
+  });
+
+  test('should pass fetched teams to list component', async () => {
+    const readOrganizationTeamsList = jest.fn(() => Promise.resolve(listData));
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <OrganizationTeams
+            id={1}
+            searchString=""
+            api={{ readOrganizationTeamsList }}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+
+    await sleep(0);
+    wrapper.update();
+
+    const list = wrapper.find('OrganizationTeamsList');
+    expect(list.prop('teams')).toEqual(listData.data.results);
+    expect(list.prop('itemCount')).toEqual(listData.data.count);
+    expect(list.prop('queryParams')).toEqual({
+      page: 1,
+      page_size: 5,
+      order_by: 'name',
+    });
+  });
+
+  test('should pass queryParams to OrganizationTeamsList', async () => {
+    const page1Data = listData;
+    const page2Data = {
+      data: {
+        count: 7,
+        results: [
+          { id: 6, name: 'six', url: '/org/team/6' },
+          { id: 7, name: 'seven', url: '/org/team/7' },
+        ]
+      }
+    };
+    const readOrganizationTeamsList = jest.fn();
+    readOrganizationTeamsList.mockReturnValueOnce(page1Data);
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mount(
+      <Router history={history}>
+        <I18nProvider>
+          <OrganizationTeams
+            id={1}
+            searchString=""
+            api={{ readOrganizationTeamsList }}
+          />
+        </I18nProvider>
+      </Router>
+    );
+
+    await sleep(0);
+    wrapper.update();
+
+    const list = wrapper.find(OrganizationTeamsList);
+    expect(list.prop('queryParams')).toEqual({
+      page: 1,
+      page_size: 5,
+      order_by: 'name',
+    });
+
+    readOrganizationTeamsList.mockReturnValueOnce(page2Data);
+    history.push('/organizations/1/teams?page=2');
+    wrapper.setProps({ history });
+
+    await sleep(0);
+    wrapper.update();
+    const list2 = wrapper.find(OrganizationTeamsList);
+    expect(list2.prop('queryParams')).toEqual({
+      page: 2,
+      page_size: 5,
+      order_by: 'name',
+    });
   });
 });