Merge pull request #3894 from dmose/enzyme-v3

Fix Bug 1421424 - chore(testing): update Enzyme to v3 in prep for React 16

package.json

@@ -22,8 +22,9 @@
     "chai": "4.1.2",
     "co-task": "1.0.0",
     "cpx": "1.5.0",
-    "enzyme": "2.7.0",
     "eslint": "4.12.0",
+    "enzyme": "3.2.0",
+    "enzyme-adapter-react-15.4": "1.0.5",
     "eslint-plugin-json": "1.2.0",
     "eslint-plugin-mozilla": "0.4.9",
     "eslint-plugin-no-unsanitized": "2.0.1",

system-addon/test/unit/content-src/components/Card.test.jsx

@@ -51,10 +51,9 @@ describe("<Card>", () => {
   it("should have a link menu button", () => assert.ok(wrapper.find(".context-menu-button")));
   it("should render a link menu when button is clicked", () => {
     const button = wrapper.find(".context-menu-button");
-    const linkMenu = wrapper.find(LinkMenu);
-    assert.equal(linkMenu.props().visible, false);
+    assert.equal(wrapper.find(LinkMenu).props().visible, false);
     button.simulate("click", {preventDefault: () => {}});
-    assert.equal(linkMenu.props().visible, true);
+    assert.equal(wrapper.find(LinkMenu).props().visible, true);
   });
   it("should pass dispatch, source, visible, onUpdate, site, options, and index to LinkMenu", () => {
     const {dispatch, source, visible, onUpdate, site, options, index} = wrapper.find(LinkMenu).props();

system-addon/test/unit/content-src/components/CollapsibleSection.test.jsx

@@ -92,7 +92,7 @@ describe("CollapsibleSection", () => {
   describe("maxHeight", () => {
     const maxHeight = "123px";
     const setState = state => wrapper.setState(Object.assign({maxHeight}, state || {}));
-    const checkHeight = val => assert.equal(wrapper.find(".section-body").node.style.maxHeight, val);
+    const checkHeight = val => assert.equal(wrapper.find(".section-body").instance().style.maxHeight, val);
 
     it("should have no max-height normally to avoid unexpected cropping", () => {
       setState();

system-addon/test/unit/content-src/components/ComponentPerfTimer.test.jsx

@@ -43,7 +43,7 @@ describe("<ComponentPerfTimer>", () => {
     beforeEach(() => {
       sandbox.stub(ComponentPerfTimer.prototype, "_maybeSendBadStateEvent");
       sandbox.stub(ComponentPerfTimer.prototype, "_ensureFirstRenderTsRecorded");
-      wrapper = shallow(<ComponentPerfTimer {...DEFAULT_PROPS}><InnerEl /></ComponentPerfTimer>);
+      wrapper = shallow(<ComponentPerfTimer {...DEFAULT_PROPS}><InnerEl /></ComponentPerfTimer>, {disableLifecycleMethods: true});
     });
 
     it("should have the correct defaults", () => {
@@ -187,7 +187,9 @@ describe("<ComponentPerfTimer>", () => {
   describe("#_maybeSendPaintedEvent", () => {
     it("should call _sendPaintedEvent if props.initialized is true", () => {
       sandbox.stub(DEFAULT_PROPS, "initialized").value(true);
-      wrapper = shallow(<ComponentPerfTimer {...DEFAULT_PROPS}><InnerEl /></ComponentPerfTimer>);
+      wrapper = shallow(
+        <ComponentPerfTimer {...DEFAULT_PROPS}><InnerEl /></ComponentPerfTimer>,
+        {disableLifecycleMethods: true});
       const instance = wrapper.instance();
       const stub = sandbox.stub(instance, "_afterFramePaint");
 
@@ -197,7 +199,7 @@ describe("<ComponentPerfTimer>", () => {
 
       assert.calledOnce(stub);
       assert.calledWithExactly(stub, instance._sendPaintedEvent);
-      assert.isTrue(instance._timestampHandled);
+      assert.isTrue(wrapper.instance()._timestampHandled);
     });
     it("should not call _sendPaintedEvent if this._timestampHandled is true", () => {
       const instance = wrapper.instance();

system-addon/test/unit/content-src/components/ManualMigration.test.jsx

@@ -12,12 +12,12 @@ describe("<ManualMigration>", () => {
     wrapper = shallowWithIntl(<ManualMigration dispatch={dispatch} />);
   });
   it("should render the component", () => {
-    assert.isNotNull(wrapper.getNode());
+    assert.isNotNull(wrapper.getElement());
   });
   it("should render correct intl string", () => {
     const fm = wrapper.find("p").find(FormattedMessage);
 
-    assert.isNotNull(fm.getNode());
+    assert.isNotNull(fm.getElement());
     assert.equal(fm.props().id, "manual_migration_explanation2");
   });
   describe("actions", () => {
@@ -27,13 +27,13 @@ describe("<ManualMigration>", () => {
     it("should render correct intl string", () => {
       const fm = wrapper.find(".actions").childAt(0).find(FormattedMessage);
 
-      assert.isNotNull(fm.getNode());
+      assert.isNotNull(fm.getElement());
       assert.equal(fm.props().id, "manual_migration_cancel_button");
     });
     it("should render correct intl string", () => {
       const fm = wrapper.find(".actions").childAt(1).find(FormattedMessage);
 
-      assert.isNotNull(fm.getNode());
+      assert.isNotNull(fm.getElement());
       assert.equal(fm.props().id, "manual_migration_import_button");
     });
     it("cancel btn should dispatch correct events", () => {

system-addon/test/unit/content-src/components/Search.test.jsx

@@ -33,17 +33,19 @@ describe("<Search>", () => {
 
     assert.calledOnce(spy);
     assert.equal(spy.firstCall.args[0], "ContentSearchClient");
-    assert.equal(spy.firstCall.args[1], wrapper.node);
+    assert.equal(spy.firstCall.args[1], wrapper.instance());
   });
   it("should stop listening for ContentSearchClient on unmount", () => {
     const spy = globals.set("removeEventListener", sandbox.spy());
     const wrapper = mountWithIntl(<Search {...DEFAULT_PROPS} />);
+    // cache the instance as we can't call this method after unmount is called
+    const instance = wrapper.instance();
 
     wrapper.unmount();
 
     assert.calledOnce(spy);
     assert.equal(spy.firstCall.args[0], "ContentSearchClient");
-    assert.equal(spy.firstCall.args[1], wrapper.node);
+    assert.equal(spy.firstCall.args[1], instance);
   });
   it("should add gContentSearchController as a global", () => {
     // current about:home tests need gContentSearchController to exist as a global

system-addon/test/unit/content-src/components/Sections.test.jsx

@@ -34,6 +34,7 @@ describe("<Sections>", () => {
 describe("<Section>", () => {
   let wrapper;
   let FAKE_SECTION;
+  let FAKE_PREFS;
 
   beforeEach(() => {
     FAKE_SECTION = {
@@ -46,14 +47,17 @@ describe("<Section>", () => {
         message: "Some message"
       }
     };
-    wrapper = shallowWithIntl(<Section {...FAKE_SECTION} />);
+    FAKE_PREFS = {values: {"section.foo_bar_1.collapsed": false}};
+
+    wrapper = shallowWithIntl(<Section {...FAKE_SECTION} Prefs={FAKE_PREFS} />);
   });
 
   describe("placeholders", () => {
     const CARDS_PER_ROW = 3;
     const fakeSite = {link: "http://localhost"};
     function renderWithSites(rows) {
-      return shallowWithIntl(<Section {...FAKE_SECTION} rows={rows} maxRows={2} />);
+      return shallowWithIntl(
+        <Section {...FAKE_SECTION} rows={rows} maxRows={2} Prefs={FAKE_PREFS} />);
     }
 
     it("should return 1 row of placeholders if realRows is 0", () => {
@@ -86,7 +90,8 @@ describe("<Section>", () => {
         rows: [],
         emptyState: {message: "Some message", icon: "moz-extension://some/extension/path"}
       });
-      wrapper = shallowWithIntl(<Section {...FAKE_SECTION} />);
+      wrapper = shallowWithIntl(
+        <Section {...FAKE_SECTION} Prefs={FAKE_PREFS} />);
     });
     it("should be shown when rows is empty and initialized is true", () => {
       assert.ok(wrapper.find(".empty-state").exists());
@@ -97,7 +102,8 @@ describe("<Section>", () => {
         rows: [],
         emptyState: {message: "Some message", icon: "moz-extension://some/extension/path"}
       });
-      wrapper = shallowWithIntl(<Section {...FAKE_SECTION} />);
+      wrapper = shallowWithIntl(
+        <Section {...FAKE_SECTION} Prefs={FAKE_PREFS} />);
       assert.isFalse(wrapper.find(".empty-state").exists());
     });
     it("should use the icon prop as the icon url if it starts with `moz-extension://`", () => {
@@ -108,7 +114,6 @@ describe("<Section>", () => {
 
   describe("topics component", () => {
     let TOP_STORIES_SECTION;
-    let FAKE_PREFS;
     beforeEach(() => {
       TOP_STORIES_SECTION = {
         id: "topstories",
@@ -159,12 +164,12 @@ describe("<Section>", () => {
       eventSource: "TOP_STORIES",
       options: {personalized: false}
     };
-    const FAKE_PREFS = {values: {"section.TopStories.collapsed": false}};
+    FAKE_PREFS = {values: {"section.TopStories.collapsed": false}};
 
     function renderSection(props = {}) {
       return shallowWithIntl(<Section
         {...FAKE_TOPSTORIES_SECTION_PROPS}
-        {...props} Prefs={FAKE_PREFS} />, {lifecycleExperimental: true});
+        {...props} Prefs={FAKE_PREFS} />);
     }
 
     it("should send impression with the right stats when the page loads", () => {

system-addon/test/unit/content-src/components/TopSites.test.jsx

@@ -48,7 +48,7 @@ describe("<TopSites>", () => {
 
     const links = wrapper.find(TopSite);
 
-    rows.forEach((row, i) => assert.equal(links.nodes[i].props.link.url, row.url));
+    rows.forEach((row, i) => assert.equal(links.get(i).props.link.url, row.url));
   });
   it("should slice the TopSite rows to the TopSitesCount pref", () => {
     const rows = [{url: "https://foo.com"}, {url: "https://bar.com"}, {url: "https://baz.com"}, {url: "https://bam.com"}, {url: "https://zoom.com"}, {url: "https://woo.com"}, {url: "https://eh.com"}];
@@ -82,7 +82,7 @@ describe("<TopSites>", () => {
 
     beforeEach(() => {
       sandbox.stub(DEFAULT_PROPS, "dispatch");
-      wrapper = shallow(<TopSites {...DEFAULT_PROPS} />);
+      wrapper = shallow(<TopSites {...DEFAULT_PROPS} />, {disableLifecycleMethods: true});
       dispatchStatsSpy = sandbox.spy(wrapper.instance(), "_dispatchTopSitesIconStats");
     });
     afterEach(() => {

system-addon/test/unit/unit-entry.js

@@ -1,6 +1,10 @@
 const {GlobalOverrider, FakePrefs, FakePerformance, EventEmitter} = require("test/unit/utils");
 const {chaiAssertions} = require("test/schemas/pings");
 
+const Adapter = require("enzyme-adapter-react-15.4");
+const enzyme = require("enzyme");
+enzyme.configure({adapter: new Adapter()});
+
 // Cause React warnings to make tests that trigger them fail
 const origConsoleError = console.error; // eslint-disable-line no-console
 console.error = function(msg, ...args) { // eslint-disable-line no-console