Fixes file structure, adds tests

awx/ui_next/src/screens/User/User.jsx

@@ -9,7 +9,7 @@ import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import UserDetail from './UserDetail';
 import UserEdit from './UserEdit';
-import UserOrganizationList from './UserOrganizationList';
+import UserOrganizations from './UserOrganizations';
 import UserTeams from './UserTeams';
 import UserTokens from './UserTokens';
 import { UsersAPI } from '@api';
@@ -131,7 +131,7 @@ class User extends Component {
               />
             )}
             <Route path="/users/:id/organizations">
-              <UserOrganizationList id={Number(match.params.id)} />
+              <UserOrganizations id={Number(match.params.id)} />
             </Route>
             <Route
               path="/users/:id/teams"

awx/ui_next/src/screens/User/UserOrganizationList/index.js

@@ -1 +0,0 @@
-export { default } from './UserOrganizationList';

awx/ui_next/src/screens/User/UserOrganizationListItem/UserOrganizationListItem.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import {
-  DataList,
-  DataListItemCells,
-  DataListItemRow,
-  DataListItem,
-  DataListCell,
-} from '@patternfly/react-core';
-
-function UserOrganizationListItem({ organization, i18n }) {
-  return (
-    <DataList aria-label={i18n._(t`User Organization List Item`)}>
-      <DataListItem aria-labelledby={i18n._(t`User Organization List Item`)}>
-        <DataListItemRow>
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key={organization.id}>
-                <Link to={`/organizations/${organization.id}/details`}>
-                  {organization.name}
-                </Link>
-              </DataListCell>,
-              <DataListCell key={organization.description}>
-                {organization.description}
-              </DataListCell>,
-            ]}
-          />
-        </DataListItemRow>
-      </DataListItem>
-    </DataList>
-  );
-}
-
-export default withI18n()(UserOrganizationListItem);

awx/ui_next/src/screens/User/UserOrganizationListItem/index.js

@@ -1 +0,0 @@
-export { default } from './UserOrganizationListItem';

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+
+import UserOrganizationListItem from './UserOrganizationListItem';
+
+describe('<UserOrganizationListItem />', () => {
+  test('mounts correctly', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <UserOrganizationListItem
+          organization={{ name: 'foo', id: 1, description: 'Bar' }}
+        />
+      );
+    });
+    expect(wrapper.find('UserOrganizationListItem').length).toBe(1);
+  });
+  test('render correct information', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <UserOrganizationListItem
+          organization={{ name: 'foo', id: 1, description: 'Bar' }}
+        />
+      );
+    });
+    expect(
+      wrapper
+        .find('DataListCell')
+        .at(0)
+        .text()
+    ).toBe('foo');
+    expect(
+      wrapper
+        .find('DataListCell')
+        .at(1)
+        .text()
+    ).toBe('Bar');
+    expect(wrapper.find('Link').prop('to')).toBe('/organizations/1/details');
+  });
+});

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import UserOrganizationsList from './UserOrganizationsList';
+
+function UserOrganizations() {
+  return <UserOrganizationsList />;
+}
+export default UserOrganizations;

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+
+import UserOrganizations from './UserOrganizations';
+
+describe('<UserOrganizations />', () => {
+  test('userOrganizations mounts successfully', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/users/1/organizations'],
+    });
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <Route
+          path="/users/:id/organizations"
+          component={() => <UserOrganizations />}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 1 } },
+              },
+            },
+          },
+        }
+      );
+    });
+    waitForElement(wrapper, 'UserOrganizationList');
+  });
+});

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.jsx

@@ -7,7 +7,7 @@ import PaginatedDataList from '@components/PaginatedDataList';
 import useRequest from '@util/useRequest';
 import { UsersAPI } from '@api';
 import { getQSConfig, parseQueryString } from '@util/qs';
-import UserOrganizationListItem from '../UserOrganizationListItem';
+import UserOrganizationListItem from './UserOrganizationListItem';
 
 const QS_CONFIG = getQSConfig('organizations', {
   page: 1,
@@ -16,7 +16,7 @@ const QS_CONFIG = getQSConfig('organizations', {
   type: 'organization',
 });
 
-function UserOrganizationList({ i18n }) {
+function UserOrganizationsList({ i18n }) {
   const location = useLocation();
   const { id: userId } = useParams();
 
@@ -68,4 +68,4 @@ function UserOrganizationList({ i18n }) {
   );
 }
 
-export default withI18n()(UserOrganizationList);
+export default withI18n()(UserOrganizationsList);

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationsList.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
+
+import UserOrganizationsList from './UserOrganizationsList';
+import { UsersAPI } from '@api';
+
+jest.mock('@api/models/Users');
+
+describe('<UserOrganizationlist />', () => {
+  let history;
+  let wrapper;
+  beforeEach(async () => {
+    history = createMemoryHistory({
+      initialEntries: ['/users/1/organizations'],
+    });
+    UsersAPI.readOrganizations.mockResolvedValue({
+      data: {
+        results: [
+          {
+            name: 'Foo',
+            id: 1,
+            description: 'Bar',
+            url: '/api/v2/organizations/1/',
+          },
+        ],
+        count: 1,
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route
+          path="/users/:id/organizations"
+          component={() => <UserOrganizationsList />}
+        />,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: history.location,
+                match: { params: { id: 1 } },
+              },
+            },
+          },
+        }
+      );
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('successfully mounts', async () => {
+    await waitForElement(wrapper, 'UserOrganizationListItem');
+  });
+  test('calls api to get organizations', () => {
+    expect(UsersAPI.readOrganizations).toBeCalledWith('1', {
+      order_by: 'name',
+      page: 1,
+      page_size: 20,
+      type: 'organization',
+    });
+  });
+});

awx/ui_next/src/screens/User/UserOrganizations/index.js

@@ -0,0 +1 @@
+export { default } from './UserOrganizations';