Merge branch '2.0' into 2

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

@@ -1,61 +1,46 @@
-/* global jest, describe, it, expect, beforeEach */
+/* global jest, test, expect */
 
 import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
 import { Component as BackButton } from '../BackButton';
+import { render } from '@testing-library/react';
+
+function makeProps(obj = {}) {
+  return {
+    onClick: () => null,
+    enlarged: false,
+    badge: {
+      status: 'success',
+      message: 'Test successful',
+    },
+    ...obj
+  };
+}
+
+test('BackButton render() should render a badge when the badge property is defined', () => {
+  const { container } = render(
+    <BackButton {...makeProps()}/>
+  );
+  expect(container.querySelectorAll('.gallery__back-badge')).toHaveLength(1);
+});
 
-describe('BackButton', () => {
-  let props = null;
-
-  beforeEach(() => {
-    props = {
-      onClick: jest.fn(),
-      enlarged: false,
-      badge: {
-        status: 'success',
-        message: 'Test successful',
-      },
-    };
-  });
-
-  describe('render()', () => {
-    it('should render a badge when the badge property is defined', () => {
-      const item = ReactTestUtils.renderIntoDocument(
-        <BackButton {...props} />
-      );
-      let badge = null;
-      try {
-        badge = ReactTestUtils.scryRenderedDOMComponentsWithClass(item, 'gallery__back-badge')[0];
-      } catch (e) {
-        // something happened
-      }
-
-      expect(badge).toBeTruthy();
-    });
-
-    it('should not render a badge when the badge property is falsey', () => {
-      props.badge = null;
-      const item = ReactTestUtils.renderIntoDocument(
-        <BackButton {...props} />
-      );
-      let badge = null;
-      try {
-        badge = ReactTestUtils.scryRenderedDOMComponentsWithClass(item, 'gallery__back-badge')[0];
-      } catch (e) {
-        // something happened
-      }
-
-      expect(badge).toBeFalsy();
-    });
-
-    it('should have extra classes when "enlarged"', () => {
-      props.isDropping = true;
-      const item = ReactTestUtils.renderIntoDocument(
-        <BackButton {...props} />
-      );
-      const button = ReactTestUtils.scryRenderedDOMComponentsWithClass(item, 'gallery__back')[0];
+test('BackButton render() should not render a badge when the badge property is falsey', () => {
+  const { container } = render(
+    <BackButton {...makeProps({
+      badge: null
+    })}
+    />
+  );
+  expect(container.querySelectorAll('.gallery__back-badge')).toHaveLength(0);
+});
 
-      expect(Array.from(button.classList)).toContain('gallery__back--droppable-hover');
-    });
-  });
+test('BackButton render() should have extra classes when "enlarged"', () => {
+  const { container } = render(
+    <BackButton {...makeProps({
+      isDropping: true
+    })}
+    />
+  );
+  const els = container.querySelectorAll('.gallery__back');
+  expect(els).toHaveLength(1);
+  expect(els[0].classList).toContain('gallery__back--droppable-hover');
 });