#17 Component tests for navbar and slate toolbar

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}>

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();
+});

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>}>

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();
+});

src/utils/testUtil.js

@@ -123,7 +123,6 @@ const userSession = {
   expires: '2881-10-05T14:48:00.000',
 };
 
-
 export {
   adminUserSession,
   annotation,