Merge branch 'master' into stateful-rendering-of-annotations-doc-view

mitaai · Nov 19, 2020 · 08750ef · 08750ef
2 parents e4d95af + c4b2aa3
commit 08750ef
Show file tree

Hide file tree

Showing 23 changed files with 294 additions and 136 deletions.
diff --git a/src/__mocks__/next-auth/client.js b/src/__mocks__/next-auth/client.js
@@ -1,17 +1,9 @@
+import { userSession } from '../../utils/testUtil';
+
 const client = jest.genMockFromModule('next-auth/client');
 
 const useSession = jest.fn(() => [
-  {
-    user: {
-      name: 'Test User',
-      email: 'test@email.com',
-      groups: [{
-        id: 'abcd1234', name: 'Test Group', ownerName: 'Test User', memberCount: 2, role: 'owner',
-      }],
-      role: 'user',
-    },
-    expires: '2881-10-05T14:48:00.000',
-  },
+  userSession,
   false]);
 
 client.useSession = useSession;

diff --git a/src/__tests__/groups/[id]/edit.test.js b/src/__tests__/groups/[id]/edit.test.js
@@ -4,6 +4,7 @@
 
 import { render, wait } from '@testing-library/react';
 import EditGroup from '../../../pages/groups/[id]/edit';
+import { group } from '../../../utils/testUtil';
 
 
 jest.mock('next/router', () => ({
@@ -17,18 +18,6 @@ jest.mock('next/router', () => ({
 }));
 
 describe('Group Edit Page', () => {
-  const group = {
-    id: 'abcd1234',
-    name: 'Test Group',
-    members: [{
-      id: '1',
-      email: 'test@email.com',
-      name: 'Test User',
-      role: 'owner',
-    }],
-    inviteUrl: '',
-  };
-
   it('renders group card', async () => {
     const { getByTestId } = render(<EditGroup group={group} />);
     const cardBody = getByTestId('groupedit-card-body');

diff --git a/src/__tests__/groups/[id]/index.test.js b/src/__tests__/groups/[id]/index.test.js
@@ -4,6 +4,7 @@
 
 import { render, wait } from '@testing-library/react';
 import ViewGroup from '../../../pages/groups/[id]/index';
+import { group } from '../../../utils/testUtil';
 
 jest.mock('next/router', () => ({
   useRouter() {
@@ -16,17 +17,6 @@ jest.mock('next/router', () => ({
 }));
 
 describe('Group View Page', () => {
-  const group = {
-    id: 'abcd1234',
-    name: 'Test Group',
-    members: [{
-      id: '1',
-      email: 'test@email.com',
-      name: 'Test User',
-      role: 'owner',
-    }],
-  };
-
   it('renders group card', async () => {
     const { getByTestId } = render(<ViewGroup group={group} />);
     const cardBody = getByTestId('groupview-card-body');

diff --git a/src/__tests__/user/editprofile.test.js b/src/__tests__/user/editprofile.test.js
@@ -4,6 +4,7 @@
 
 import { render, wait } from '@testing-library/react';
 import EditProfile from '../../pages/user/[slug]/editprofile';
+import { user } from '../../utils/testUtil';
 
 jest.mock('next/router', () => ({
   useRouter() {
@@ -16,44 +17,23 @@ jest.mock('next/router', () => ({
 }));
 
 test('renders edit profile card', async () => {
-  const { getAllByText } = render(<EditProfile user={{
-    name: 'Test User',
-    firstName: 'Test',
-    lastName: 'User',
-    email: 'test@email.com',
-    affiliation: 'Jest Tests',
-  }}
-  />);
+  const { getAllByText } = render(<EditProfile user={user} />);
   const textElements = getAllByText(/Edit Profile/);
   await wait(() => {
     expect(textElements[1]).toBeInTheDocument();
   });
 });
 
 test('renders edit profile form', async () => {
-  const { getAllByRole } = render(<EditProfile user={{
-    name: 'Test User',
-    firstName: 'Test',
-    lastName: 'User',
-    email: 'test@email.com',
-    affiliation: 'Jest Tests',
-  }}
-  />);
+  const { getAllByRole } = render(<EditProfile user={user} />);
   const textboxElements = getAllByRole('textbox');
   await wait(() => {
     expect(textboxElements).toHaveLength(4);
   });
 });
 
 test('renders submit button', async () => {
-  const { getByTestId } = render(<EditProfile user={{
-    name: 'Test User',
-    firstName: 'Test',
-    lastName: 'User',
-    email: 'test@email.com',
-    affiliation: 'Jest Tests',
-  }}
-  />);
+  const { getByTestId } = render(<EditProfile user={user} />);
   const submitButton = getByTestId('editprofile-submit-button');
   await wait(() => {
     expect(submitButton).toBeInTheDocument();

diff --git a/src/components/Admin/AdminHeader/AdminHeader.js b/src/components/Admin/AdminHeader/AdminHeader.js
@@ -9,6 +9,7 @@ const AdminHeader = ({ activeKey, setKey }) => (
       justify
       activeKey={activeKey}
       onSelect={(k) => setKey(k)}
+      data-testid="admin-tabs"
     >
       <Tab eventKey="dashboard" title="About" />
       <Tab eventKey="users" title="Users" />

diff --git a/src/components/Admin/AdminHeader/AdminHeader.test.js b/src/components/Admin/AdminHeader/AdminHeader.test.js
@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminHeader from './AdminHeader';
+
+test('renders admin header tabs (key=dashboard)', async () => {
+  const { getByTestId } = render(
+    <AdminHeader
+      activeKey="dashboard"
+      setKey={jest.fn}
+    />,
+  );
+  const adminTabs = getByTestId('admin-tabs');
+  expect(adminTabs).toBeInTheDocument();
+});
diff --git a/src/components/Admin/AdminPanel/AdminPanel.js b/src/components/Admin/AdminPanel/AdminPanel.js
@@ -59,7 +59,7 @@ const AdminPanel = ({
   useEffect(() => { fetchData('sortState'); }, [sortState]);
 
   return (
-    <Card>
+    <Card data-testid="admin-panel">
       <AdminHeader activeKey={activeKey} setKey={setKey} />
       <Card.Body>
         {listLoading && activeKey !== 'dashboard' && (

diff --git a/src/components/Admin/AdminPanel/AdminPanel.test.js b/src/components/Admin/AdminPanel/AdminPanel.test.js
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminPanel from './AdminPanel';
+import { adminUserSession } from '../../../utils/testUtil';
+
+test('renders admin panel', async () => {
+  const { getByTestId } = render(
+    <AdminPanel
+      alerts={[]}
+      setAlerts={jest.fn}
+      session={adminUserSession}
+      activeKey="dashboard"
+      setKey={jest.fn}
+    />,
+  );
+  const adminPanel = getByTestId('admin-panel');
+  expect(adminPanel).toBeInTheDocument();
+});
diff --git a/src/components/Admin/AdminRoleBadge/AdminRoleBadge.test.js b/src/components/Admin/AdminRoleBadge/AdminRoleBadge.test.js
@@ -0,0 +1,12 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminRoleBadge from './AdminRoleBadge';
+
+test('renders admin role badge', async () => {
+  const { getByTestId } = render(<AdminRoleBadge />);
+  const roleBadge = getByTestId('admin-role-badge');
+  expect(roleBadge).toBeInTheDocument();
+});
diff --git a/src/components/Admin/Document/AdminDocumentTable/AdminDocumentTable.js b/src/components/Admin/Document/AdminDocumentTable/AdminDocumentTable.js
@@ -48,23 +48,23 @@ const AdminDocumentTable = ({ document, alerts, setAlerts }) => {
         size="sm"
         variant="light"
         style={{ borderCollapse: 'unset' }}
+        data-testid="admin-doc-view"
       >
         <thead>
           <tr>
             <td colSpan="2" className="text-center">View Document</td>
-            <div style={{ position: 'absolute', right: '2em' }} id="group-dropdown">
+            <td style={{ position: 'absolute', right: '2em', border: 'none' }} id="document-dropdown">
               <DropdownButton
                 size="sm"
                 variant="text"
                 drop="down"
-                menuAlign="right"
                 title="Actions"
               >
                 <Dropdown.Item eventKey="1" href={`/documents/${document.slug}`}>View full document</Dropdown.Item>
                 <Dropdown.Item eventKey="2" href={`/documents/${document.slug}/edit`}>Modify document</Dropdown.Item>
                 <Dropdown.Item eventKey="3" onClick={handleShowModal}>Delete document</Dropdown.Item>
               </DropdownButton>
-            </div>
+            </td>
           </tr>
         </thead>
         <tbody>

diff --git a/src/components/Admin/Document/AdminDocumentTable/AdminDocumentTable.test.js b/src/components/Admin/Document/AdminDocumentTable/AdminDocumentTable.test.js
@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminDocumentTable from './AdminDocumentTable';
+import { document } from '../../../../utils/testUtil';
+
+test('renders admin doc view', async () => {
+  const { getByTestId } = render(
+    <AdminDocumentTable
+      document={document}
+      setAlerts={jest.fn}
+      alerts={[]}
+    />,
+  );
+  const docView = getByTestId('admin-doc-view');
+  expect(docView).toBeInTheDocument();
+});
diff --git a/src/components/Admin/Group/AdminGroupTable/AdminGroupTable.js b/src/components/Admin/Group/AdminGroupTable/AdminGroupTable.js
@@ -33,22 +33,22 @@ const AdminGroupTable = ({ group, alerts, setAlerts }) => {
         size="sm"
         variant="light"
         style={{ borderCollapse: 'unset' }}
+        data-testid="admin-group-view"
       >
         <thead>
           <tr>
             <td colSpan="2" className="text-center">View Group</td>
-            <div style={{ position: 'absolute', right: '2em' }} id="group-dropdown">
+            <td style={{ position: 'absolute', right: '2em', border: 'none' }} id="group-dropdown">
               <DropdownButton
                 size="sm"
                 variant="text"
                 drop="down"
-                menuAlign="right"
                 title="Actions"
               >
                 <Dropdown.Item eventKey="1" href={`/groups/${group.id}/edit`}>Modify group</Dropdown.Item>
                 <Dropdown.Item eventKey="2" onClick={handleShowModal}>Delete group</Dropdown.Item>
               </DropdownButton>
-            </div>
+            </td>
           </tr>
         </thead>
         <tbody>

diff --git a/src/components/Admin/Group/AdminGroupTable/AdminGroupTable.test.js b/src/components/Admin/Group/AdminGroupTable/AdminGroupTable.test.js
@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminGroupTable from './AdminGroupTable';
+import { group } from '../../../../utils/testUtil';
+
+test('renders admin group view', async () => {
+  const { getByTestId } = render(
+    <AdminGroupTable
+      group={group}
+      setAlerts={jest.fn}
+      alerts={[]}
+    />,
+  );
+  const groupTable = getByTestId('admin-group-view');
+  expect(groupTable).toBeInTheDocument();
+});
diff --git a/src/components/Admin/SortableHeader/SortableHeader.js b/src/components/Admin/SortableHeader/SortableHeader.js
@@ -11,6 +11,7 @@ const SortableHeader = (props) => {
         });
       }}
       style={{ cursor: 'pointer' }}
+      data-testid="sortable-header"
     >
       {children}
       {' '}

diff --git a/src/components/Admin/SortableHeader/SortableHeader.test.js b/src/components/Admin/SortableHeader/SortableHeader.test.js
@@ -0,0 +1,26 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import { ArrowUp } from 'react-bootstrap-icons';
+import SortableHeader from './SortableHeader';
+
+test('renders sortable header (no children)', async () => {
+  const { getByTestId } = render(
+    <table>
+      <thead>
+        <tr>
+          <SortableHeader
+            field="createdAt"
+            setSortState={jest.fn}
+            sortState={{ field: 'createdAt', direction: 'desc' }}
+            SortIcon={jest.fn().mockReturnValue(<ArrowUp />)}
+          />
+        </tr>
+      </thead>
+    </table>,
+  );
+  const sortableHeader = getByTestId('sortable-header');
+  expect(sortableHeader).toBeInTheDocument();
+});
diff --git a/src/components/Admin/User/AdminUserList/AdminUserList.test.js b/src/components/Admin/User/AdminUserList/AdminUserList.test.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 import { ArrowUp } from 'react-bootstrap-icons';
 import AdminUserList from './AdminUserList';
 
-test('renders groups table (empty list)', async () => {
+test('renders users table (empty list)', async () => {
   const { getByTestId } = render(
     <AdminUserList
       users={[]}

diff --git a/src/components/Admin/User/AdminUserTable/AdminAnnotation/AdminAnnotation.js b/src/components/Admin/User/AdminUserTable/AdminAnnotation/AdminAnnotation.js
@@ -13,6 +13,7 @@ const AdminAnnotation = ({ annotation }) => (
       size="sm"
       variant="light"
       style={{ border: '1px solid gray', borderCollapse: 'separate' }}
+      data-testid="admin-annotation"
     >
       <tbody>
         <tr style={{ backgroundColor: 'white' }}>

diff --git a/src/components/Admin/User/AdminUserTable/AdminAnnotation/AdminAnnotation.test.js b/src/components/Admin/User/AdminUserTable/AdminAnnotation/AdminAnnotation.test.js
@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminAnnotation from './AdminAnnotation';
+import { annotation } from '../../../../../utils/testUtil';
+
+test('renders annotation', async () => {
+  const { getByTestId } = render(
+    <AdminAnnotation
+      annotation={annotation}
+    />,
+  );
+  const adminAnnotation = getByTestId('admin-annotation');
+  expect(adminAnnotation).toBeInTheDocument();
+});
diff --git a/src/components/DocumentForm/DocumentForm.test.js b/src/components/DocumentForm/DocumentForm.test.js
@@ -4,30 +4,10 @@
 
 import { render } from '@testing-library/react';
 import DocumentForm from './DocumentForm';
+import { document, userSession } from '../../utils/testUtil';
 
 // Mock session
-const session = {
-  user: {
-    id: 'testestestest',
-    name: 'Test User',
-    email: 'test@email.com',
-    groups: [{
-      id: 'abcd1234', name: 'Test Group', ownerName: 'Test User', memberCount: 2, role: 'owner',
-    }],
-  },
-  expires: '2881-10-05T14:48:00.000',
-};
-
-// Mock document
-const document = {
-  _id: 'documenttestid',
-  title: 'test',
-  state: 'draft',
-  contributors: [],
-  createdAt: '2881-10-05T14:48:00.000',
-  owner: 'testestestest',
-  groups: [],
-};
+const session = userSession;
 
 describe('document form', () => {
   test('renders with mode = new', async () => {