Use devtools-components-0.3.0 in devtools-reps.

Some snapshots are updated since the tree was modified (aria-level),
and formatObjectInspector is updated to address this.

Author: nchevobbe

packages/devtools-reps/package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "devtools-components": "^0.2.0",
+    "devtools-components": "^0.3.0",
     "lodash": "^4.17.2",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",

packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap

@@ -20,7 +20,7 @@ exports[`ObjectInspector - classnames has the expected class 1`] = `
   tabIndex="0"
 >
   <div
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={false}
     id="root"
@@ -71,7 +71,7 @@ exports[`ObjectInspector - classnames has the inline class when inline prop is t
   tabIndex="0"
 >
   <div
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={false}
     id="root"
@@ -122,7 +122,7 @@ exports[`ObjectInspector - classnames has the nowrap class when disableWrap prop
   tabIndex="0"
 >
   <div
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={false}
     id="root"

packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/window.js.snap

@@ -21,7 +21,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders collapsed top-level window
 >
   <div
     aria-expanded={false}
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={true}
     id="windowpath"
@@ -87,7 +87,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders collapsed top-level window
 >
   <div
     aria-expanded={false}
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={true}
     id="windowpath"
@@ -153,7 +153,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders expanded top-level window w
 >
   <div
     aria-expanded={true}
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={true}
     id="windowpath"
@@ -219,7 +219,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders sub-level window 1`] = `
 >
   <div
     aria-expanded={true}
-    aria-level={0}
+    aria-level={1}
     className="tree-node"
     data-expandable={true}
     id="rootpath"
@@ -248,7 +248,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders sub-level window 1`] = `
   </div>
   <div
     aria-expanded={false}
-    aria-level={1}
+    aria-level={2}
     className="tree-node"
     data-expandable={true}
     id="windowpath"

packages/devtools-reps/src/object-inspector/tests/test-utils.js

@@ -25,7 +25,7 @@ const {WAIT_UNTIL_TYPE} = require("../../shared/redux/middleware/waitUntilServic
 function formatObjectInspector(wrapper: Object) {
   return wrapper.find(".tree-node")
     .map(node => {
-      const indentStr = "|  ".repeat(node.prop("aria-level") || 0);
+      const indentStr = "|  ".repeat((node.prop("aria-level") || 1) - 1);
       // We need to target i.arrow or Enzyme will also match the ArrowExpander component.
       const arrow = node.find("i.arrow");
       let arrowStr = "  ";