MNT Use React Testing Library

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

@@ -1,33 +1,15 @@
-/* global jest, describe, it, expect */
+/* global jest, test, describe, it, expect */
 
 import React from 'react';
 import Accordion from '../Accordion';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16/build/index';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-const errorSpy = jest.spyOn(global.console, 'error');
-const warnSpy = jest.spyOn(global.console, 'warn');
-
-describe('Accordion', () => {
-  describe('render()', () => {
-    beforeEach(() => {
-      errorSpy.mockClear();
-      warnSpy.mockClear();
-    });
-
-    it('renders with children', () => {
-      const reactWrapper = mount(
-        <Accordion>
-          <p>lorem</p>
-          <p>ipsum</p>
-        </Accordion>
-      );
-
-      expect(reactWrapper.find('div')).toHaveLength(1);
-      expect(errorSpy).not.toHaveBeenCalled();
-      expect(warnSpy).not.toHaveBeenCalled();
-    });
-  });
+import { render } from '@testing-library/react';
+
+test('Accordion render() renders with children', () => {
+  const container = render(
+    <Accordion>
+      <p>lorem</p>
+      <p>ipsum</p>
+    </Accordion>
+  ).container;
+  expect(container.querySelectorAll('div')).toHaveLength(1);
 });

client/src/components/Accordion/tests/AccordionBlock-test.js

@@ -1,38 +1,19 @@
-/* global jest, describe, it, expect */
+/* global jest, test, describe, it, expect */
 
 import React from 'react';
 import AccordionBlock from '../AccordionBlock';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16/build/index';
+import { render } from '@testing-library/react';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-const errorSpy = jest.spyOn(global.console, 'error');
-const warnSpy = jest.spyOn(global.console, 'warn');
-
-const props = {
-  groupid: 123,
-  title: 'My title'
-};
-
-describe('AccordionBlock', () => {
-  describe('render()', () => {
-    beforeEach(() => {
-      errorSpy.mockClear();
-      warnSpy.mockClear();
-    });
-
-    it('renders with children', () => {
-      const reactWrapper = mount(
-        <AccordionBlock {...props}>
-          <p>lorem</p>
-          <p>ipsum</p>
-        </AccordionBlock>
-      );
-
-      expect(reactWrapper.find('div.accordion__block')).toHaveLength(1);
-      expect(errorSpy).not.toHaveBeenCalled();
-      expect(warnSpy).not.toHaveBeenCalled();
-    });
-  });
+test('AccordionBlock render() renders with children', () => {
+  const container = render(
+    <AccordionBlock {...{
+      groupid: 123,
+      title: 'My title'
+    }}
+    >
+      <p>lorem</p>
+      <p>ipsum</p>
+    </AccordionBlock>
+  ).container;
+  expect(container.querySelectorAll('div.accordion__block')).toHaveLength(1);
 });

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

@@ -1,38 +1,32 @@
-/* global jest, describe, it, expect */
+/* global jest, test, describe, it, expect */
 
 import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
 import Badge from '../Badge';
+import { render } from '@testing-library/react';
 
-describe('Badge', () => {
-  describe('render()', () => {
-    let badge = null;
-
-    it('should return null if status is empty', () => {
-      badge = ReactTestUtils.renderIntoDocument(
-        <Badge
-          status={null}
-          message=""
-          className=""
-        />
-      );
-
-      expect(badge.render()).toBeNull();
-    });
-
-    it('should return a Bootstrap style badge when valid', () => {
-      badge = ReactTestUtils.renderIntoDocument(
-        <Badge
-          status="success"
-          message="Hello world"
-          className="customclass"
-        />
-      );
+test('Badge render() should return null if status is empty', () => {
+  const container = render(
+    <Badge {...{
+      status: null,
+      message: '',
+      className: ''
+    }}
+    />
+  ).container;
+  expect(container.querySelectorAll('.badge').length).toBe(0);
+});
 
-      const result = badge.render();
-      expect(result.props.className).toContain('customclass');
-      expect(result.props.className).toContain('badge-success');
-      expect(result.props.children).toContain('Hello world');
-    });
-  });
+test('Badge render() should return a Bootstrap style badge when valid', () => {
+  const container = render(
+    <Badge {...{
+      status: 'success',
+      message: 'Hello world',
+      className: 'customclass'
+    }}
+    />
+  ).container;
+  expect(container.querySelectorAll('.badge').length).toBe(1);
+  expect(container.querySelectorAll('.badge-success').length).toBe(1);
+  expect(container.querySelectorAll('.customclass').length).toBe(1);
+  expect(container.innerHTML).toContain('Hello world');
 });

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

@@ -0,0 +1,55 @@
+/* global jest, test, describe, beforeEach, it, expect */
+
+import React from 'react';
+import { Component as Breadcrumb } from '../Breadcrumb';
+import { render } from '@testing-library/react';
+
+test('BreadcrumbsComponent renderBreadcrumbs() should convert the props.crumbs array into jsx to be rendered', () => {
+  const container = render(
+    <Breadcrumb {...{
+      crumbs: [
+        { text: 'breadcrumb1', href: 'href1' },
+        { text: 'breadcrumb2', href: 'href2' },
+        { text: 'breadcrumb3',
+          href: 'href3',
+          icon: {
+            className: 'breadcrumb3icon',
+            onClick: jest.fn(),
+          },
+        },
+      ]
+    }}
+    />
+  ).container;
+  const links = container.querySelectorAll('.breadcrumb__item-title');
+  expect(links[0].textContent).toBe('breadcrumb1');
+  expect(links[1].textContent).toBe('breadcrumb2');
+  expect(links[2].textContent).toBe('breadcrumb3');
+  expect(links[2].parentElement.classList).toContain('breadcrumb__item--last');
+  expect(container.querySelectorAll('.breadcrumb3icon')).toHaveLength(1);
+});
+
+test('BreadcrumbsComponent renderBreadcrumbs() should convert the props.crumbs array into jsx to be rendered', () => {
+  const container = render(<Breadcrumb/>).container;
+  expect(container.querySelectorAll('.breadcrumb__item')).toHaveLength(0);
+});
+
+test('BreadcrumbsComponent renderBreadcrumbs() can have multiple icons for the last crumb', () => {
+  const container = render(
+    <Breadcrumb {...{
+      crumbs: [
+        { text: 'breadcrumb1', href: 'href1' },
+        { text: 'breadcrumb2',
+          href: 'href2',
+          icons: [
+            { className: 'breadcrumb2iconA', onClick: jest.fn() },
+            { className: 'breadcrumb2iconB', onClick: jest.fn() }
+          ]
+        },
+      ]
+    }}
+    />
+  ).container;
+  expect(container.querySelectorAll('.breadcrumb2iconA')).toHaveLength(1);
+  expect(container.querySelectorAll('.breadcrumb2iconB')).toHaveLength(1);
+});