Bug 1307899 - Remove renderComponent and switch consumers to using Enzyme instead; r=bgrins.
MozReview-Commit-ID: D88nlKJOSjk
--- 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,
};