MNT Apply changes requested from peer review

client/src/components/ElementActions/tests/AbstractAction-test.js

@@ -18,7 +18,7 @@ function makeProps(obj = {}) {
 
 test('AbstractAction renders a DropdownItem', () => {
   const { container } = render(<AbstractAction {...makeProps()}/>);
-  expect(container.querySelector('.dropdown-item')).not.toBeNull();
+  expect(container.querySelectorAll('.dropdown-item')).toHaveLength(1);
 });
 
 test('AbstractAction includes the title text', () => {

client/src/components/ElementActions/tests/ArchiveAction-test.js

@@ -27,7 +27,7 @@ function makeProps(obj = {}) {
   };
 }
 
-test('ArchiveAction renders the wrapped component', () => {
+test('ArchiveAction renders the title and class', () => {
   const { container } = render(<ActionComponent {...makeProps()}/>);
   expect(container.querySelector('button.element-editor__actions-archive').textContent).toBe('Archive');
 });
@@ -97,5 +97,5 @@ test('ArchiveAction renders a button even when block is broken', () => {
     }
   })}
   />);
-  expect(container.querySelector('button.element-editor__actions-archive')).not.toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-archive')).toHaveLength(1);
 });

client/src/components/ElementActions/tests/DuplicateAction-test.js

@@ -29,7 +29,7 @@ function makeProps(obj = {}) {
 
 test('DuplicateAction renders a button', () => {
   const { container } = render(<ActionComponent {...makeProps()}/>);
-  expect(container.querySelector('button.element-editor__actions-duplicate')).not.toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-duplicate')).toHaveLength(1);
 });
 
 test('DuplicateAction is disabled when user doesn\'t have correct permissions', () => {
@@ -52,5 +52,5 @@ test('DuplicateAction does not render a button when block is broken', () => {
     })}
     />
   );
-  expect(container.querySelector('button.element-editor__actions-duplicate')).toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-duplicate')).toHaveLength(0);
 });

client/src/components/ElementActions/tests/PublishAction-test.js

@@ -36,7 +36,7 @@ function makeProps(obj = {}) {
   };
 }
 
-test('PublishAction renders the wrapped component', () => {
+test('PublishAction renders the title and class', () => {
   const { container } = render(<ActionComponent {...makeProps()}/>);
   expect(container.querySelector('button.element-editor__actions-publish').textContent).toBe('Publish');
 });
@@ -89,5 +89,5 @@ test('PublishAction does not render a button when block is broken', () => {
     })}
     />
   );
-  expect(container.querySelector('button.element-editor__actions-publish')).toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-publish')).toHaveLength(0);
 });

client/src/components/ElementActions/tests/SaveAction-test.js

@@ -34,7 +34,7 @@ test('SaveAction renders a button when block is expandable', () => {
   const { container } = render(
     <ActionComponent {...makeProps()} />
   );
-  expect(container.querySelector('button.element-editor__actions-save')).not.toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-save')).toHaveLength(1);
 });
 
 test('SaveAction does not render a button when block is not expandable', () => {
@@ -44,7 +44,7 @@ test('SaveAction does not render a button when block is not expandable', () => {
     })}
     />
   );
-  expect(container.querySelector('button.element-editor__actions-save')).toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-save')).toHaveLength(0);
 });
 
 test('SaveAction does not render a button when block is broken', () => {
@@ -56,5 +56,5 @@ test('SaveAction does not render a button when block is broken', () => {
     })}
     />
   );
-  expect(container.querySelector('button.element-editor__actions-save')).toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-save')).toHaveLength(0);
 });

client/src/components/ElementActions/tests/UnpublishAction-test.js

@@ -29,7 +29,7 @@ function makeProps(obj = {}) {
 const WrappedComponent = (props) => <div>{props.children}</div>;
 const ActionComponent = UnpublishAction(WrappedComponent);
 
-test('UnpublishAction renders the wrapped component', () => {
+test('UnpublishAction renders the title and class', () => {
   const { container } = render(
     <ActionComponent {...makeProps()} />
   );
@@ -45,7 +45,7 @@ test('UnpublishAction returns null when is not published', () => {
     })}
     />
   );
-  expect(container.querySelector('button')).toBeNull();
+  expect(container.querySelectorAll('button')).toHaveLength(0);
 });
 
 test('UnpublishAction calls the unpublish mutation', () => {
@@ -84,5 +84,5 @@ test('UnpublishAction does not render a button when block is broken', () => {
     })}
     />
   );
-  expect(container.querySelector('button.element-editor__actions-unpublish')).toBeNull();
+  expect(container.querySelectorAll('button.element-editor__actions-unpublish')).toHaveLength(0);
 });

client/src/components/ElementEditor/tests/Content-test.js

@@ -19,9 +19,9 @@ function makeProps(obj = {}) {
 
 test('Content should render the Summary component if the preview is not expanded', () => {
   const { container } = render(<Content {...makeProps()} />);
-  expect(container.querySelector('.element-editor-content')).not.toBeNull();
-  expect(container.querySelector('.test-inline-edit-form')).toBeNull();
-  expect(container.querySelector('.test-summary')).not.toBeNull();
+  expect(container.querySelectorAll('.element-editor-content')).toHaveLength(1);
+  expect(container.querySelectorAll('.test-inline-edit-form')).toHaveLength(0);
+  expect(container.querySelectorAll('.test-summary')).toHaveLength(1);
 });
 
 test('Content should render the InlineEditForm component if the preview is expanded', () => {
@@ -31,20 +31,20 @@ test('Content should render the InlineEditForm component if the preview is expan
     })}
     />
   );
-  expect(container.querySelector('.element-editor-content')).not.toBeNull();
-  expect(container.querySelector('.test-inline-edit-form')).not.toBeNull();
-  expect(container.querySelector('.test-summary')).toBeNull();
+  expect(container.querySelectorAll('.element-editor-content')).toHaveLength(1);
+  expect(container.querySelectorAll('.test-inline-edit-form')).toHaveLength(1);
+  expect(container.querySelectorAll('.test-summary')).toHaveLength(0);
 });
 
-test('Content returns a div when no content or image is provided', () => {
+test('Content renders even when no content or image is provided', () => {
   const { container } = render(
     <Content {...makeProps({
       fileUrl: '',
       previewExpanded: true
     })}
     />
   );
-  expect(container.querySelector('.element-editor-content')).not.toBeNull();
-  expect(container.querySelector('.test-inline-edit-form')).not.toBeNull();
-  expect(container.querySelector('.test-summary')).toBeNull();
+  expect(container.querySelectorAll('.element-editor-content')).toHaveLength(1);
+  expect(container.querySelectorAll('.test-inline-edit-form')).toHaveLength(1);
+  expect(container.querySelectorAll('.test-summary')).toHaveLength(0);
 });

client/src/components/ElementEditor/tests/Element-test.js

@@ -41,11 +41,11 @@ function makeProps(obj = {}) {
 
 test('Element should render the HeaderComponent and the ContentComponent', () => {
   const { container } = render(<Element {...makeProps()}/>);
-  expect(container.querySelector('.element-editor__element .test-header')).not.toBeNull();
-  expect(container.querySelector('.element-editor__element .test-content')).not.toBeNull();
+  expect(container.querySelectorAll('.element-editor__element .test-header')).toHaveLength(1);
+  expect(container.querySelectorAll('.element-editor__element .test-content')).toHaveLength(1);
 });
 
-test('Element should render null if no ID is given', () => {
+test('Element should not render at all if no ID is given', () => {
   const { container } = render(
     <Element {...makeProps({
       element: {
@@ -55,8 +55,7 @@ test('Element should render null if no ID is given', () => {
     })}
     />
   );
-  expect(container.querySelector('.element-editor__element .test-header')).toBeNull();
-  expect(container.querySelector('.element-editor__element .test-content')).toBeNull();
+  expect(container.querySelectorAll('.element-editor__element')).toHaveLength(0);
 });
 
 test('Element should render even if the element is broken', () => {
@@ -68,8 +67,8 @@ test('Element should render even if the element is broken', () => {
     })}
     />
   );
-  expect(container.querySelector('.element-editor__element .test-header')).not.toBeNull();
-  expect(container.querySelector('.element-editor__element .test-content')).not.toBeNull();
+  expect(container.querySelectorAll('.element-editor__element .test-header')).toHaveLength(1);
+  expect(container.querySelectorAll('.element-editor__element .test-content')).toHaveLength(1);
 });
 
 test('Element getVersionedStateClassName() should identify draft elements', () => {
@@ -82,7 +81,7 @@ test('Element getVersionedStateClassName() should identify draft elements', () =
     })}
     />
   );
-  expect(container.querySelector('.element-editor__element--draft')).not.toBeNull();
+  expect(container.querySelector('.element-editor__element').classList.contains('element-editor__element--draft')).toBe(true);
 });
 
 test('Element getVersionedStateClassName() should identify modified elements', () => {
@@ -96,7 +95,7 @@ test('Element getVersionedStateClassName() should identify modified elements', (
     })}
     />
   );
-  expect(container.querySelector('.element-editor__element--modified')).not.toBeNull();
+  expect(container.querySelectorAll('.element-editor__element--modified')).toHaveLength(1);
 });
 
 test('Element getVersionedStateClassName() should identify published elements', () => {
@@ -110,5 +109,5 @@ test('Element getVersionedStateClassName() should identify published elements',
     })}
     />
   );
-  expect(container.querySelector('.element-editor__element--published')).not.toBeNull();
+  expect(container.querySelectorAll('.element-editor__element--published')).toHaveLength(1);
 });

client/src/components/ElementEditor/tests/ElementActions-test.js

@@ -31,7 +31,7 @@ test('ElementActions should map input tabs into an array of buttons', () => {
   expect(actions[1].textContent).toEqual('Settings');
   expect(actions[2].textContent).toEqual('History');
   // No drop down separator should exist when there are no non-CMS actions
-  expect(container.querySelector('.dropdown-divider')).toBeNull();
+  expect(container.querySelectorAll('.dropdown-divider')).toHaveLength(0);
 });
 
 
@@ -46,7 +46,7 @@ test('ElementActions should render a divider when CMS tab actions and default ac
   expect(actions[0].textContent).toEqual('Content');
   expect(actions[1].textContent).toEqual('Settings');
   expect(actions[2].textContent).toEqual('History');
-  expect(container.querySelector('.dropdown-divider')).not.toBeNull();
+  expect(container.querySelectorAll('.dropdown-divider')).toHaveLength(1);
   expect(actions[3].textContent).toEqual('some button');
 });
 

client/src/components/ElementEditor/tests/ElementEditor-test.js

@@ -55,8 +55,8 @@ function makeProps(obj = {}) {
 
 test('ElementEditor should render ElementList and Toolbar', () => {
   const { container } = render(<ElementEditor {...makeProps()}/>);
-  expect(container.querySelector('.test-list')).not.toBeNull();
-  expect(container.querySelector('[data-testid="test-toolbar"]')).not.toBeNull();
+  expect(container.querySelectorAll('.test-list')).toHaveLength(1);
+  expect(container.querySelectorAll('[data-testid="test-toolbar"]')).toHaveLength(1);
 });
 
 test('ElementEditor should filter all element types by those allowed for this editor', () => {

client/src/components/ElementEditor/tests/ElementList-test.js

@@ -56,7 +56,7 @@ function makeProps(obj = {}) {
 test('ElementList renders elements when blocks are provided as props', () => {
   const { container } = render(<ElementList {...makeProps()}/>);
   expect(container.querySelectorAll('.test-element')).toHaveLength(2);
-  expect(container.querySelector('.test-loading')).toBeNull();
+  expect(container.querySelectorAll('.test-loading')).toHaveLength(0);
 });
 
 test('ElementList renders a loading component', () => {
@@ -68,8 +68,8 @@ test('ElementList renders a loading component', () => {
     })}
     />
   );
-  expect(container.querySelector('.test-element')).toBeNull();
-  expect(container.querySelector('.test-loading')).not.toBeNull();
+  expect(container.querySelectorAll('.test-element')).toHaveLength(0);
+  expect(container.querySelectorAll('.test-loading')).toHaveLength(1);
 });
 
 test('ElementList renders a placeholder message when no elements are provided as props', () => {
@@ -81,8 +81,8 @@ test('ElementList renders a placeholder message when no elements are provided as
     })}
     />
   );
-  expect(container.querySelector('.test-element')).toBeNull();
-  expect(container.querySelector('.test-loading')).toBeNull();
+  expect(container.querySelectorAll('.test-element')).toHaveLength(0);
+  expect(container.querySelectorAll('.test-loading')).toHaveLength(0);
   const placeholder = container.querySelector('.elemental-editor-list--empty');
   expect(placeholder.textContent).toBe('Add blocks to place your content');
 });