Use wrapper.debug for snapshot tests

firefox-devtools · Aug 10, 2017 · 66539ff · 66539ff
1 parent d921c23
commit 66539ff
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 59 deletions.
diff --git a/packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap b/packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap
@@ -1,60 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ObjectInspector - classnames has the expected class 1`] = `
-<ObjectInspector
-  autoExpandDepth={0}
-  getObjectProperties={[Function]}
-  loadObjectProperties={[Function]}
-  roots={
-    Array [
-      Object {
-        "contents": Object {
-          "value": 42,
-        },
-        "name": "root",
-        "path": "root",
-      },
-    ]
-  }
-/>
+"<ObjectInspector autoExpandDepth={0} roots={{...}} getObjectProperties={[Function]} loadObjectProperties={[Function]}>
+  <Tree className=\\"\\" autoExpandAll={true} autoExpandDepth={0} disabledFocus={[undefined]} itemHeight={20} isExpanded={[Function]} focused={{...}} getRoots={[Function]} getParent={[Function]} getChildren={[Function]} getKey={[Function]} onExpand={[Function]} onCollapse={[Function]} onFocus={[Function]} renderItem={[Function]}>
+    <div className=\\"tree \\" onKeyDown={[Function]} onKeyPress={[Function]} onKeyUp={[Function]} onScroll={[Function]} style={{...}}>
+      <TreeNode index={0} item={{...}} depth={0} renderItem={[Function]} focused={false} expanded={false} hasChildren={false} onExpand={[Function]} onCollapse={[Function]} onFocus={[Function]}>
+        <div className=\\"tree-node div \\" onFocus={[Function]} onClick={[Function]} onBlur={[undefined]} style={{...}}>
+          <div className=\\"node object-node\\" style={{...}} onClick={{...}} onDoubleClick={{...}}>
+            <span className=\\"object-label\\" onClick={{...}}>
+              root
+            </span>
+            <span className=\\"object-delimiter\\">
+               : 
+            </span>
+            <span className=\\"objectBox objectBox-number\\">
+              42
+            </span>
+          </div>
+          <button style={{...}} />
+        </div>
+      </TreeNode>
+    </div>
+  </Tree>
+</ObjectInspector>"
 `;
 
 exports[`ObjectInspector - classnames has the inline class when inline prop is true 1`] = `
-<ObjectInspector
-  autoExpandDepth={0}
-  getObjectProperties={[Function]}
-  inline={true}
-  loadObjectProperties={[Function]}
-  roots={
-    Array [
-      Object {
-        "contents": Object {
-          "value": 42,
-        },
-        "name": "root",
-        "path": "root",
-      },
-    ]
-  }
-/>
+"<ObjectInspector autoExpandDepth={0} roots={{...}} getObjectProperties={[Function]} loadObjectProperties={[Function]} inline={true}>
+  <Tree className=\\"inline\\" autoExpandAll={true} autoExpandDepth={0} disabledFocus={[undefined]} itemHeight={20} isExpanded={[Function]} focused={{...}} getRoots={[Function]} getParent={[Function]} getChildren={[Function]} getKey={[Function]} onExpand={[Function]} onCollapse={[Function]} onFocus={[Function]} renderItem={[Function]}>
+    <div className=\\"tree inline\\" onKeyDown={[Function]} onKeyPress={[Function]} onKeyUp={[Function]} onScroll={[Function]} style={{...}}>
+      <TreeNode index={0} item={{...}} depth={0} renderItem={[Function]} focused={false} expanded={false} hasChildren={false} onExpand={[Function]} onCollapse={[Function]} onFocus={[Function]}>
+        <div className=\\"tree-node div \\" onFocus={[Function]} onClick={[Function]} onBlur={[undefined]} style={{...}}>
+          <div className=\\"node object-node\\" style={{...}} onClick={{...}} onDoubleClick={{...}}>
+            <span className=\\"object-label\\" onClick={{...}}>
+              root
+            </span>
+            <span className=\\"object-delimiter\\">
+               : 
+            </span>
+            <span className=\\"objectBox objectBox-number\\">
+              42
+            </span>
+          </div>
+          <button style={{...}} />
+        </div>
+      </TreeNode>
+    </div>
+  </Tree>
+</ObjectInspector>"
 `;
 
 exports[`ObjectInspector - classnames has the nowrap class when disableWrap prop is true 1`] = `
-<ObjectInspector
-  autoExpandDepth={0}
-  disableWrap={true}
-  getObjectProperties={[Function]}
-  loadObjectProperties={[Function]}
-  roots={
-    Array [
-      Object {
-        "contents": Object {
-          "value": 42,
-        },
-        "name": "root",
-        "path": "root",
-      },
-    ]
-  }
-/>
+"<ObjectInspector autoExpandDepth={0} roots={{...}} getObjectProperties={[Function]} loadObjectProperties={[Function]} disableWrap={true}>
+  <Tree className=\\"nowrap\\" autoExpandAll={true} autoExpandDepth={0} disabledFocus={[undefined]} itemHeight={20} isExpanded={[Function]} focused={{...}} getRoots={[Function]} getParent={[Function]} getChildren={[Function]} getKey={[Function]} onExpand={[Function]} onCollapse={[Function]} onFocus={[Function]} renderItem={[Function]}>
+    <div className=\\"tree nowrap\\" onKeyDown={[Function]} onKeyPress={[Function]} onKeyUp={[Function]} onScroll={[Function]} style={{...}}>
+      <TreeNode index={0} item={{...}} depth={0} renderItem={[Function]} focused={false} expanded={false} hasChildren={false} onExpand={[Function]} onCollapse={[Function]} onFocus={[Function]}>
+        <div className=\\"tree-node div \\" onFocus={[Function]} onClick={[Function]} onBlur={[undefined]} style={{...}}>
+          <div className=\\"node object-node\\" style={{...}} onClick={{...}} onDoubleClick={{...}}>
+            <span className=\\"object-label\\" onClick={{...}}>
+              root
+            </span>
+            <span className=\\"object-delimiter\\">
+               : 
+            </span>
+            <span className=\\"objectBox objectBox-number\\">
+              42
+            </span>
+          </div>
+          <button style={{...}} />
+        </div>
+      </TreeNode>
+    </div>
+  </Tree>
+</ObjectInspector>"
 `;
diff --git a/packages/devtools-reps/src/object-inspector/tests/component/classnames.js b/packages/devtools-reps/src/object-inspector/tests/component/classnames.js
@@ -23,32 +23,29 @@ function generateDefaults(overrides) {
 describe("ObjectInspector - classnames", () => {
   it("has the expected class", () => {
     const props = generateDefaults();
-    const oi = ObjectInspector(props);
-    const wrapper = mount(oi);
+    const wrapper = mount(ObjectInspector(props));
 
     expect(wrapper.hasClass("tree")).toBeTruthy();
     expect(wrapper.hasClass("inline")).toBeFalsy();
     expect(wrapper.hasClass("nowrap")).toBeFalsy();
-    expect(oi).toMatchSnapshot();
+    expect(wrapper.debug()).toMatchSnapshot();
   });
 
   it("has the nowrap class when disableWrap prop is true", () => {
     const props = generateDefaults({
       disableWrap: true,
     });
-    const oi = ObjectInspector(props);
-    const wrapper = mount(oi);
+    const wrapper = mount(ObjectInspector(props));
     expect(wrapper.hasClass("nowrap")).toBeTruthy();
-    expect(oi).toMatchSnapshot();
+    expect(wrapper.debug()).toMatchSnapshot();
   });
 
   it("has the inline class when inline prop is true", () => {
     const props = generateDefaults({
       inline: true,
     });
-    const oi = ObjectInspector(props);
-    const wrapper = mount(oi);
+    const wrapper = mount(ObjectInspector(props));
     expect(wrapper.hasClass("inline")).toBeTruthy();
-    expect(oi).toMatchSnapshot();
+    expect(wrapper.debug()).toMatchSnapshot();
   });
 });