Merge pull request #26576 from code-dot-org/remove-react-overlay-test

Removed React Test Utils from VisualizationOverlayTest.js
code-dot-org · Jan 11, 2019 · 24bcef3 · 24bcef3
2 parents 74c2f85 + 1a838a4
commit 24bcef3
Showing 1 changed file with 67 additions and 71 deletions.
diff --git a/apps/test/unit/templates/VisualizationOverlayTest.js b/apps/test/unit/templates/VisualizationOverlayTest.js
@@ -1,85 +1,81 @@
-import {expect} from '../../util/configuredChai';
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
-import { VisualizationOverlay } from '@cdo/apps/templates/VisualizationOverlay';
+import {expect} from '../../util/configuredChai';
+import {VisualizationOverlay} from '@cdo/apps/templates/VisualizationOverlay';
+import {mount} from 'enzyme';
 import CrosshairOverlay from '@cdo/apps/templates/CrosshairOverlay';
 
-describe('VisualizationOverlay', function () {
+describe('VisualizationOverlay', () => {
   const TEST_APP_WIDTH = 300, TEST_APP_HEIGHT = 200;
 
-  it('renders no children if no children are given', function () {
-    expect(shallowRender(
-        <VisualizationOverlay
-          width={TEST_APP_WIDTH}
-          height={TEST_APP_HEIGHT}
-          areOverlaysVisible={true}
-          areRunStateOverlaysVisible={false}
-        />
-    )).to.deep.equal(svgWithChildren(undefined));
-  });
+  it('renders no children if no children are given', () => {
+    const visualizationOverlay = mount(
+      <VisualizationOverlay
+        width={TEST_APP_WIDTH}
+        height={TEST_APP_HEIGHT}
+        areOverlaysVisible={true}
+        areRunStateOverlaysVisible={false}
+      />
+    );
 
-  it('renders no children if areOverlaysVisible is false', function () {
-    expect(shallowRender(
-        <VisualizationOverlay
-          width={TEST_APP_WIDTH}
-          height={TEST_APP_HEIGHT}
-          areOverlaysVisible={false}
-          areRunStateOverlaysVisible={false}
-        >
-          <CrosshairOverlay />
-          <CrosshairOverlay />
-        </VisualizationOverlay>
-    )).to.deep.equal(svgWithChildren([]));
+    verifySvg(visualizationOverlay);
+    const svg = visualizationOverlay.find('svg').first();
+    expect(svg.props().children).to.equal(undefined);
   });
 
-  function shallowRender(component) {
-    let renderer = ReactTestUtils.createRenderer();
-    renderer.render(component);
-    return renderer.getRenderOutput();
-  }
-
-  function svgWithChildren(children) {
-    return (
-        <svg
-          ref="root"
-          id="visualizationOverlay"
-          version="1.1"
-          baseProfile="full"
-          width={TEST_APP_WIDTH}
-          height={TEST_APP_HEIGHT}
-          viewBox={`0 0 ${TEST_APP_WIDTH} ${TEST_APP_HEIGHT}`}
-          pointerEvents="none"
-          children={children}
-        />
-    );
-  }
-
-  it('otherwise renders each child with size and mouse position provided', function () {
-    expect(shallowRender(
-        <VisualizationOverlay
-          width={TEST_APP_WIDTH}
-          height={TEST_APP_HEIGHT}
-          areOverlaysVisible={true}
-          areRunStateOverlaysVisible={false}
-        >
-          <CrosshairOverlay />
-          <CrosshairOverlay />
-        </VisualizationOverlay>
-    )).to.deep.equal(svgWithChildren([
-      <CrosshairOverlay
-        key="0/.0"
+  it('renders no children if areOverlaysVisible is false', () => {
+    const visualizationOverlay = mount(
+      <VisualizationOverlay
         width={TEST_APP_WIDTH}
         height={TEST_APP_HEIGHT}
-        mouseX={-1}
-        mouseY={-1}
-      />,
-      <CrosshairOverlay
-        key="1/.1"
+        areOverlaysVisible={false}
+        areRunStateOverlaysVisible={false}
+      >
+        <CrosshairOverlay />
+        <CrosshairOverlay />
+      </VisualizationOverlay>
+    );
+
+    verifySvg(visualizationOverlay);
+    const svg = visualizationOverlay.find('svg').first();
+    expect(svg.props().children).to.deep.equal([]);
+  });
+
+  it('otherwise renders each child with size and mouse position provided', () => {
+    const visualizationOverlay = mount(
+      <VisualizationOverlay
         width={TEST_APP_WIDTH}
         height={TEST_APP_HEIGHT}
-        mouseX={-1}
-        mouseY={-1}
-      />
-    ]));
+        areOverlaysVisible={true}
+        areRunStateOverlaysVisible={false}
+      >
+        <CrosshairOverlay />
+        <CrosshairOverlay />
+      </VisualizationOverlay>
+    );
+
+    verifySvg(visualizationOverlay);
+    const svg = visualizationOverlay.find('svg').first();
+    const crosshair = svg.props().children;
+    crosshair.forEach(verifyCrosshair);
+    expect(crosshair[0].key).to.equal('0/.0');
+    expect(crosshair[1].key).to.equal('1/.1');
   });
+
+  function verifySvg(element) {
+    const svg = element.find('svg').first();
+    expect(svg.props().id).to.equal('visualizationOverlay');
+    expect(svg.props().version).to.equal('1.1');
+    expect(svg.props().baseProfile).to.equal('full');
+    expect(svg.props().width).to.equal(TEST_APP_WIDTH);
+    expect(svg.props().height).to.equal(TEST_APP_HEIGHT);
+    expect(svg.props().viewBox).to.equal(`0 0 ${TEST_APP_WIDTH} ${TEST_APP_HEIGHT}`);
+    expect(svg.props().pointerEvents).to.equal('none');
+  }
+
+  function verifyCrosshair(crosshair) {
+    expect(crosshair.props.width).to.equal(TEST_APP_WIDTH);
+    expect(crosshair.props.height).to.equal(TEST_APP_HEIGHT);
+    expect(crosshair.props.mouseX).to.equal(-1);
+    expect(crosshair.props.mouseY).to.equal(-1);
+  }
 });