Bug 1436690 - Fix mocha tests due to React and Enzyme updates; r=bgrins.

MozReview-Commit-ID: JDyr9WNnEwU

--HG--
extra : rebase_source : 865a59b3dfbc6f8ec59a1bd7dfcd3683a0b3a8b7

devtools/client/webconsole/new-console-output/components/GripMessageBody.js

@@ -96,7 +96,7 @@ function cleanupStyle(userProvidedStyle, createElement) {
   // Return a style object as expected by React DOM components, e.g.
   // {color: "red"}
   // without forbidden properties and values.
-  return [...dummy.style]
+  return Array.from(dummy.style)
     .filter(name => {
       return allowedStylesRegex.test(name)
         && !forbiddenValuesRegexs.some(regex => regex.test(dummy.style[name]));

devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js

@@ -27,7 +27,8 @@ describe("EvaluationResult component:", () => {
 
     expect(wrapper.find(".message-body").text()).toBe("Date 1970-01-01T00:00:00.000Z");
 
-    expect(wrapper.find(".message.log").length).toBe(1);
+    expect(wrapper.hasClass("message")).toBe(true);
+    expect(wrapper.hasClass("log")).toBe(true);
   });
 
   it("renders an error", () => {
@@ -37,7 +38,8 @@ describe("EvaluationResult component:", () => {
     expect(wrapper.find(".message-body").text())
       .toBe("ReferenceError: asdf is not defined[Learn More]");
 
-    expect(wrapper.find(".message.error").length).toBe(1);
+    expect(wrapper.hasClass("message")).toBe(true);
+    expect(wrapper.hasClass("error")).toBe(true);
   });
 
   it("renders an error with a longString exception message", () => {
@@ -46,7 +48,8 @@ describe("EvaluationResult component:", () => {
 
     const text = wrapper.find(".message-body").text();
     expect(text.startsWith("Error: Long error Long error")).toBe(true);
-    expect(wrapper.find(".message.error").length).toBe(1);
+    expect(wrapper.hasClass("message")).toBe(true);
+    expect(wrapper.hasClass("error")).toBe(true);
   });
 
   it("renders thrown empty string", () => {

devtools/client/webconsole/new-console-output/test/components/filter-button.test.js

@@ -19,17 +19,21 @@ describe("FilterButton component:", () => {
 
   it("displays as active when turned on", () => {
     const wrapper = render(FilterButton(props));
-    expect(wrapper.html()).toBe(
+    expect(wrapper.is("button")).toBe(true);
-      "<button aria-pressed=\"true\" class=\"devtools-button error checked\">" +
+    expect(wrapper.hasClass("devtools-button")).toBe(true);
-      "Error</button>"
+    expect(wrapper.hasClass("error")).toBe(true);
-    );
+    expect(wrapper.hasClass("checked")).toBe(true);
+    expect(wrapper.attr("aria-pressed")).toBe("true");
+    expect(wrapper.text()).toBe("Error");
   });
 
   it("displays as inactive when turned off", () => {
-    const inactiveProps = Object.assign({}, props, { active: false });
+    const wrapper = render(FilterButton({...props, active: false}));
-    const wrapper = render(FilterButton(inactiveProps));
+    expect(wrapper.is("button")).toBe(true);
-    expect(wrapper.html()).toBe(
+    expect(wrapper.hasClass("devtools-button")).toBe(true);
-      "<button aria-pressed=\"false\" class=\"devtools-button error\">Error</button>"
+    expect(wrapper.hasClass("error")).toBe(true);
-    );
+    expect(wrapper.hasClass("checked")).toBe(false);
+    expect(wrapper.attr("aria-pressed")).toBe("false");
+    expect(wrapper.text()).toBe("Error");
   });
 });

devtools/client/webconsole/new-console-output/test/components/filter-checkbox.test.js

@@ -19,18 +19,17 @@ describe("FilterCheckbox component:", () => {
 
   it("displays as checked", () => {
     const wrapper = render(FilterCheckbox(props));
-    expect(wrapper.html()).toBe(
+    expect(wrapper.is("label")).toBe(true);
-      '<label title="test title" class="filter-checkbox">' +
+    expect(wrapper.attr("title")).toBe("test title");
-      '<input type="checkbox" checked>test label</label>'
+    expect(wrapper.hasClass("filter-checkbox")).toBe(true);
-    );
+    expect(wrapper.html()).toBe('<input type="checkbox" checked>test label');
   });
 
   it("displays as unchecked", () => {
-    const uncheckedProps = Object.assign({}, props, { checked: false });
+    const wrapper = render(FilterCheckbox({...props, checked: false}));
-    const wrapper = render(FilterCheckbox(uncheckedProps));
+    expect(wrapper.is("label")).toBe(true);
-    expect(wrapper.html()).toBe(
+    expect(wrapper.attr("title")).toBe("test title");
-      '<label title="test title" class="filter-checkbox">' +
+    expect(wrapper.hasClass("filter-checkbox")).toBe(true);
-      '<input type="checkbox">test label</label>'
+    expect(wrapper.html()).toBe('<input type="checkbox">test label');
-    );
   });
 });