From 9b195ae80a574858b1add063bc4cf5313fc6a43b Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 18 Nov 2020 21:25:49 -0700
Subject: [PATCH 1/2] #17 Tests for admin and dashboard components

---
 .../User/AdminUserTable/AdminUserTable.js     |  6 +++---
 .../AdminUserTable/AdminUserTable.test.js     | 20 +++++++++++++++++++
 .../DashboardAnnotationList.js                |  2 +-
 .../DashboardAnnotationList.test.js           | 20 +++++++++++++++++++
 .../DashboardDocumentList.js                  |  2 +-
 .../DashboardDocumentList.test.js             | 19 ++++++++++++++++++
 .../DashboardGroupList/DashboardGroupList.js  |  2 +-
 .../DashboardGroupList.test.js                | 17 ++++++++++++++++
 8 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Admin/User/AdminUserTable/AdminUserTable.test.js
 create mode 100644 src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.test.js
 create mode 100644 src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.test.js
 create mode 100644 src/components/Dashboard/DashboardGroupList/DashboardGroupList.test.js

diff --git a/src/components/Admin/User/AdminUserTable/AdminUserTable.js b/src/components/Admin/User/AdminUserTable/AdminUserTable.js
index afab3bf5..b8a4b5ad 100644
--- a/src/components/Admin/User/AdminUserTable/AdminUserTable.js
+++ b/src/components/Admin/User/AdminUserTable/AdminUserTable.js
@@ -76,16 +76,16 @@ const AdminUserTable = ({
         size="sm"
         variant="light"
         style={{ borderCollapse: 'unset' }}
+        data-testid="admin-user-view"
       >
         <thead>
           <tr>
             <td colSpan="2" className="text-center">View User</td>
-            <div style={{ position: 'absolute', right: '2em' }} id="user-dropdown">
+            <td style={{ position: 'absolute', right: '2em', border: 'none' }} id="user-dropdown">
               <DropdownButton
                 size="sm"
                 variant="text"
                 drop="down"
-                menuAlign="right"
                 title="Actions"
               >
                 <Dropdown.Item eventKey="1" href={`/user/${user.slug}/editprofile`}>Modify user</Dropdown.Item>
@@ -102,7 +102,7 @@ const AdminUserTable = ({
                   </>
                 )}
               </DropdownButton>
-            </div>
+            </td>
           </tr>
         </thead>
         <tbody>
diff --git a/src/components/Admin/User/AdminUserTable/AdminUserTable.test.js b/src/components/Admin/User/AdminUserTable/AdminUserTable.test.js
new file mode 100644
index 00000000..c094a643
--- /dev/null
+++ b/src/components/Admin/User/AdminUserTable/AdminUserTable.test.js
@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import AdminUserTable from './AdminUserTable';
+import { user } from '../../../../utils/testUtil';
+
+test('renders admin user view', async () => {
+  const { getByTestId } = render(
+    <AdminUserTable
+      user={user}
+      setAlerts={jest.fn}
+      alerts={[]}
+      isSelf
+    />,
+  );
+  const userTable = getByTestId('admin-user-view');
+  expect(userTable).toBeInTheDocument();
+});
diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
index cd5f1713..ec07ecd5 100644
--- a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
+++ b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
@@ -67,7 +67,7 @@ const DashboardAnnotationList = ({
   }, [annotations]);
 
   return (
-    <Card>
+    <Card data-testid="dash-annotation-list">
       <Card.Header>
         <Card.Title>
           {mode === 'dashboard' && (
diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.test.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.test.js
new file mode 100644
index 00000000..9c7dbc09
--- /dev/null
+++ b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.test.js
@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import DashboardAnnotationList from './DashboardAnnotationList';
+import { userSession } from '../../../utils/testUtil';
+
+test('renders dashboard annotation list', async () => {
+  const { getByTestId } = render(
+    <DashboardAnnotationList
+      session={userSession}
+      alerts={[]}
+      setAlerts={jest.fn}
+      mode="dashboard"
+    />,
+  );
+  const annotationList = getByTestId('dash-annotation-list');
+  expect(annotationList).toBeInTheDocument();
+});
diff --git a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
index 9bf9ea7d..af2c51a1 100644
--- a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
+++ b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
@@ -59,7 +59,7 @@ const DashboardDocumentList = ({
   }, [documents, documentGroupState]);
 
   return (
-    <Card>
+    <Card data-testid="dash-document-list">
       <Card.Header>
         <Card.Title><Link href="/documents">Documents</Link></Card.Title>
         <Tabs
diff --git a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.test.js b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.test.js
new file mode 100644
index 00000000..9b86f88e
--- /dev/null
+++ b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.test.js
@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import DashboardDocumentList from './DashboardDocumentList';
+import { userSession } from '../../../utils/testUtil';
+
+test('renders dashboard document list', async () => {
+  const { getByTestId } = render(
+    <DashboardDocumentList
+      session={userSession}
+      alerts={[]}
+      setAlerts={jest.fn}
+    />,
+  );
+  const documentList = getByTestId('dash-document-list');
+  expect(documentList).toBeInTheDocument();
+});
diff --git a/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js b/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js
index 3fb7f1ce..1a035046 100644
--- a/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js
+++ b/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js
@@ -18,7 +18,7 @@ const DashboardGroupList = ({
   }, [session]);
 
   return (
-    <Card>
+    <Card data-testid="dash-group-list">
       <Card.Header>
         <Card.Title><Link href="/groups">Groups</Link></Card.Title>
       </Card.Header>
diff --git a/src/components/Dashboard/DashboardGroupList/DashboardGroupList.test.js b/src/components/Dashboard/DashboardGroupList/DashboardGroupList.test.js
new file mode 100644
index 00000000..299faa65
--- /dev/null
+++ b/src/components/Dashboard/DashboardGroupList/DashboardGroupList.test.js
@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import DashboardGroupList from './DashboardGroupList';
+import { userSession } from '../../../utils/testUtil';
+
+test('renders dashboard group list', async () => {
+  const { getByTestId } = render(
+    <DashboardGroupList
+      session={userSession}
+    />,
+  );
+  const groupList = getByTestId('dash-group-list');
+  expect(groupList).toBeInTheDocument();
+});

From 74a2df1d41efe7c65a44de5dcde24eb68f9b6958 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Wed, 18 Nov 2020 22:54:09 -0700
Subject: [PATCH 2/2] #17 Component tests for navbar and slate toolbar

---
 src/components/SecondNavbar/SecondNavbar.js   |  2 +-
 .../SecondNavbar/SecondNavbar.test.js         | 18 ++++++
 src/components/SlateToolbar/SlateToolbar.js   |  1 +
 .../SlateToolbar/SlateToolbar.test.js         | 56 +++++++++++++++++++
 src/utils/testUtil.js                         |  1 -
 5 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SecondNavbar/SecondNavbar.test.js
 create mode 100644 src/components/SlateToolbar/SlateToolbar.test.js

diff --git a/src/components/SecondNavbar/SecondNavbar.js b/src/components/SecondNavbar/SecondNavbar.js
index c9677051..9ee67d6c 100644
--- a/src/components/SecondNavbar/SecondNavbar.js
+++ b/src/components/SecondNavbar/SecondNavbar.js
@@ -14,7 +14,7 @@ const SecondNavbar = ({
   docView,
 }) => (
   <>
-    <Navbar bg="light" variant="light" className="second-navbar">
+    <Navbar bg="light" variant="light" className="second-navbar" data-testid="second-navbar">
       <Container>
         <Row>
           <Col sm={8}>
diff --git a/src/components/SecondNavbar/SecondNavbar.test.js b/src/components/SecondNavbar/SecondNavbar.test.js
new file mode 100644
index 00000000..9d4374f0
--- /dev/null
+++ b/src/components/SecondNavbar/SecondNavbar.test.js
@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import SecondNavbar from './SecondNavbar';
+import { userSession } from '../../utils/testUtil';
+
+test('renders second navbar with type = dashboard', async () => {
+  const { getByTestId } = render(
+    <SecondNavbar
+      session={userSession}
+      type="dashboard"
+    />,
+  );
+  const navbar = getByTestId('second-navbar');
+  expect(navbar).toBeInTheDocument();
+});
diff --git a/src/components/SlateToolbar/SlateToolbar.js b/src/components/SlateToolbar/SlateToolbar.js
index 21c9401b..e3d4855e 100644
--- a/src/components/SlateToolbar/SlateToolbar.js
+++ b/src/components/SlateToolbar/SlateToolbar.js
@@ -47,6 +47,7 @@ const SlateToolbar = () => {
   return (
     <div
       className="slate-toolbar"
+      data-testid="slate-toolbar"
     >
       <Dropdown>
         <OverlayTrigger overlay={<Tooltip>Styles</Tooltip>}>
diff --git a/src/components/SlateToolbar/SlateToolbar.test.js b/src/components/SlateToolbar/SlateToolbar.test.js
new file mode 100644
index 00000000..64ab62c8
--- /dev/null
+++ b/src/components/SlateToolbar/SlateToolbar.test.js
@@ -0,0 +1,56 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import SlateToolbar from './SlateToolbar';
+
+jest.mock('slate-react', () => ({
+  useSlate() {
+    return {};
+  },
+}));
+
+jest.mock('../../utils/slateUtil', () => ({
+  BlockButton() { return <div />; },
+  MarkButton() { return <div />; },
+  videoURLtoEmbedURL: jest.fn,
+  insertVideoEmbed: jest.fn,
+}));
+
+jest.mock('@udecode/slate-plugins', () => ({
+  ToolbarImage() { return <div />; },
+  ToolbarAlign() { return <div />; },
+  ToolbarButton() { return <div />; },
+  ToolbarList() { return <div />; },
+  ToolbarLink() { return <div />; },
+  isNodeTypeIn: jest.fn,
+  toggleNodeType: jest.fn,
+  DEFAULTS_ALIGN: {
+    align_left: { type: 'align_left' },
+    align_center: { type: 'align_center' },
+    align_right: { type: 'align_right' },
+  },
+  DEFAULTS_BLOCKQUOTE: { blockquote: { type: 'blockquote' } },
+  DEFAULTS_CODE_BLOCK: { code_block: { type: 'code_block' } },
+  DEFAULTS_HEADING: {
+    h1: { type: 'h1' },
+    h2: { type: 'h2' },
+    h3: { type: 'h3' },
+    h4: { type: 'h4' },
+    h5: { type: 'h5' },
+    h6: { type: 'h6' },
+  },
+  DEFAULTS_IMAGE: {},
+  DEFAULTS_LINK: {},
+  DEFAULTS_LIST: { ul: { type: 'ul' }, ol: { type: 'ol' } },
+  ELEMENT_MEDIA_EMBED: 'media_embed',
+}));
+
+test('renders slate toolbar', async () => {
+  const { getByTestId } = render(
+    <SlateToolbar />,
+  );
+  const toolbar = getByTestId('slate-toolbar');
+  expect(toolbar).toBeInTheDocument();
+});
diff --git a/src/utils/testUtil.js b/src/utils/testUtil.js
index b846e25c..6aaccd75 100644
--- a/src/utils/testUtil.js
+++ b/src/utils/testUtil.js
@@ -123,7 +123,6 @@ const userSession = {
   expires: '2881-10-05T14:48:00.000',
 };
 
-
 export {
   adminUserSession,
   annotation,