Bug 1307899 - Remove renderComponent and switch consumers to using Enzyme instead; r=bgrins. draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Thu, 08 Feb 2018 16:43:50 +0100
changeset 756251 df1287c1f012592d92579ac6397bd85a0e527b76
parent 756220 f3b184c83b063fdf1758b2ed4ecf57dd1b16641d
push id99443
push userbmo:nchevobbe@mozilla.com
push dateFri, 16 Feb 2018 17:51:05 +0000
reviewersbgrins
bugs1307899
milestone60.0a1
Bug 1307899 - Remove renderComponent and switch consumers to using Enzyme instead; r=bgrins. MozReview-Commit-ID: D88nlKJOSjk
devtools/client/webconsole/new-console-output/test/components/message-container.test.js
devtools/client/webconsole/new-console-output/test/components/message-icon.test.js
devtools/client/webconsole/new-console-output/test/components/message-repeat.test.js
devtools/client/webconsole/new-console-output/test/components/message-types-aria.test.js
devtools/client/webconsole/new-console-output/test/helpers.js
--- a/devtools/client/webconsole/new-console-output/test/components/message-container.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/message-container.test.js
@@ -1,37 +1,37 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test utils.
 const expect = require("expect");
-const {
-  renderComponent,
-} = require("devtools/client/webconsole/new-console-output/test/helpers");
+const { render } = require("enzyme");
+const { createFactory } = require("devtools/client/shared/vendor/react");
 
 // Components under test.
-const { MessageContainer, getMessageComponent } = require("devtools/client/webconsole/new-console-output/components/MessageContainer");
+let { MessageContainer, getMessageComponent } = require("devtools/client/webconsole/new-console-output/components/MessageContainer");
+MessageContainer = createFactory(MessageContainer);
 const ConsoleApiCall = require("devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall");
 const EvaluationResult = require("devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult");
 const PageError = require("devtools/client/webconsole/new-console-output/components/message-types/PageError");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/new-console-output/test/fixtures/serviceContainer");
 
 describe("MessageContainer component:", () => {
   it("pipes data to children as expected", () => {
     const message = stubPreparedMessages.get("console.log('foobar', 'test')");
-    const rendered = renderComponent(MessageContainer, {
+    const rendered = render(MessageContainer({
       getMessage: () => message,
       serviceContainer
-    });
+    }));
 
-    expect(rendered.textContent.includes("foobar")).toBe(true);
+    expect(rendered.text().includes("foobar")).toBe(true);
   });
   it("picks correct child component", () => {
     const messageTypes = [
       {
         component: ConsoleApiCall,
         message: stubPreparedMessages.get("console.log('foobar', 'test')")
       },
       {
--- a/devtools/client/webconsole/new-console-output/test/components/message-icon.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/message-icon.test.js
@@ -1,24 +1,21 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 const {
   MESSAGE_LEVEL,
 } = require("devtools/client/webconsole/new-console-output/constants");
-const MessageIcon = require("devtools/client/webconsole/new-console-output/components/MessageIcon");
 
 const expect = require("expect");
-
-const {
-  renderComponent
-} = require("devtools/client/webconsole/new-console-output/test/helpers");
+const { render } = require("enzyme");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/MessageIcon"));
 
 describe("MessageIcon component:", () => {
   it("renders icon based on level", () => {
-    const rendered = renderComponent(MessageIcon, { level: MESSAGE_LEVEL.ERROR });
-
-    expect(rendered.classList.contains("icon")).toBe(true);
-    expect(rendered.getAttribute("aria-live")).toBe("off");
-    expect(rendered.getAttribute("title")).toBe("Error");
+    const rendered = render(MessageIcon({ level: MESSAGE_LEVEL.ERROR }));
+    expect(rendered.hasClass("icon")).toBe(true);
+    expect(rendered.attr("title")).toBe("Error");
+    expect(rendered.attr("aria-live")).toBe("off");
   });
 });
--- a/devtools/client/webconsole/new-console-output/test/components/message-repeat.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/message-repeat.test.js
@@ -1,19 +1,16 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
-const MessageRepeat = require("devtools/client/webconsole/new-console-output/components/MessageRepeat");
-
 const expect = require("expect");
-
-const {
-  renderComponent
-} = require("devtools/client/webconsole/new-console-output/test/helpers");
+const { render } = require("enzyme");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const MessageRepeat = createFactory(require("devtools/client/webconsole/new-console-output/components/MessageRepeat"));
 
 describe("MessageRepeat component:", () => {
   it("renders repeated value correctly", () => {
-    const rendered = renderComponent(MessageRepeat, { repeat: 99 });
-    expect(rendered.classList.contains("message-repeats")).toBe(true);
-    expect(rendered.textContent).toBe("99");
+    const rendered = render(MessageRepeat({ repeat: 99 }));
+    expect(rendered.hasClass("message-repeats")).toBe(true);
+    expect(rendered.text()).toBe("99");
   });
 });
--- a/devtools/client/webconsole/new-console-output/test/components/message-types-aria.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/message-types-aria.test.js
@@ -1,50 +1,47 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test utils.
 const expect = require("expect");
-
-const {
-  renderComponent
-} = require("devtools/client/webconsole/new-console-output/test/helpers");
+const { render } = require("enzyme");
+const { createFactory } = require("devtools/client/shared/vendor/react");
 
 // Components under test.
-const ConsoleApiCall = require("devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall");
-const ConsoleCmd = require("devtools/client/webconsole/new-console-output/components/message-types/ConsoleCommand");
-const EvaluationResult = require("devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult");
+const ConsoleApiCall = createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall"));
+const ConsoleCmd = createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/ConsoleCommand"));
+const EvaluationResult = createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult"));
 
 const { ConsoleCommand } = require("devtools/client/webconsole/new-console-output/types");
 
 // Test fakes.
 const { stubPreparedMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
 const serviceContainer = require("devtools/client/webconsole/new-console-output/test/fixtures/serviceContainer");
 
 describe("message types component ARIA:", () => {
   describe("ConsoleAPICall", () => {
     it("sets aria-live to polite", () => {
       const message = stubPreparedMessages.get("console.log('foobar', 'test')");
-      const wrapper = renderComponent(ConsoleApiCall,
-        { message, serviceContainer });
-      expect(wrapper.getAttribute("aria-live")).toBe("polite");
+      const wrapper = render(ConsoleApiCall({ message, serviceContainer }));
+      expect(wrapper.attr("aria-live")).toBe("polite");
     });
   });
 
   describe("EvaluationResult", () => {
     it("sets aria-live to polite", () => {
       const message = stubPreparedMessages.get("asdf()");
-      const wrapper = renderComponent(EvaluationResult, { message, serviceContainer });
-      expect(wrapper.getAttribute("aria-live")).toBe("polite");
+      const wrapper = render(EvaluationResult({message, serviceContainer}));
+      expect(wrapper.attr("aria-live")).toBe("polite");
     });
   });
 
   describe("ConsoleCommand", () => {
     it("sets aria-live to off", () => {
       let message = new ConsoleCommand({
         messageText: `"simple"`,
       });
-      const wrapper = renderComponent(ConsoleCmd, { message, serviceContainer});
-      expect(wrapper.getAttribute("aria-live")).toBe("off");
+      const wrapper = render(ConsoleCmd({message, serviceContainer}));
+      expect(wrapper.attr("aria-live")).toBe("off");
     });
   });
 });
--- a/devtools/client/webconsole/new-console-output/test/helpers.js
+++ b/devtools/client/webconsole/new-console-output/test/helpers.js
@@ -1,19 +1,13 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-let ReactDOM = require("devtools/client/shared/vendor/react-dom");
-let React = require("devtools/client/shared/vendor/react");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { createElement } = React;
-const TestUtils = require("devtools/client/shared/vendor/react-dom-test-utils");
-
 const reduxActions = require("devtools/client/webconsole/new-console-output/actions/index");
 const { configureStore } = require("devtools/client/webconsole/new-console-output/store");
 const { IdGenerator } = require("devtools/client/webconsole/new-console-output/utils/id-generator");
 const { stubPackets } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
 const {
   getAllMessagesById,
 } = require("devtools/client/webconsole/new-console-output/selectors/messages");
 
@@ -57,33 +51,16 @@ function setupStore(input = [], {
   const messagesAdd = actions
     ? actions.messagesAdd
     : reduxActions.messagesAdd;
   store.dispatch(messagesAdd(input.map(cmd => stubPackets.get(cmd))));
 
   return store;
 }
 
-function renderComponent(component, props) {
-  const el = createElement(component, props, {});
-  // By default, renderIntoDocument() won't work for stateless components, but
-  // it will work if the stateless component is wrapped in a stateful one.
-  // See https://github.com/facebook/react/issues/4839
-  const wrappedEl = dom.span({}, [el]);
-  const renderedComponent = TestUtils.renderIntoDocument(wrappedEl);
-  return ReactDOM.findDOMNode(renderedComponent).children[0];
-}
-
-function shallowRenderComponent(component, props) {
-  const el = createElement(component, props);
-  const renderer = TestUtils.createRenderer();
-  renderer.render(el, {});
-  return renderer.getRenderOutput();
-}
-
 /**
  * Create deep copy of given packet object.
  */
 function clonePacket(packet) {
   return JSON.parse(JSON.stringify(packet));
 }
 
 /**
@@ -119,13 +96,11 @@ function getLastMessage(state) {
   return getMessageAt(state, lastIndex);
 }
 
 module.exports = {
   clonePacket,
   getMessageAt,
   getFirstMessage,
   getLastMessage,
-  renderComponent,
   setupActions,
   setupStore,
-  shallowRenderComponent,
 };