Issue #670 - fix TINY mode for element-node with spaces in classname

Author: juliandescottes

packages/devtools-reps/src/reps/element-node.js

@@ -92,8 +92,8 @@ function getElements(grip, mode) {
       elements.push(
         span({className: "attr-name theme-fg-color2"},
           attributes.class
-            .replace(/(^\s+)|(\s+$)/g, "")
-            .split(" ")
+            .trim()
+            .split(/\s+/)
             .map(cls => `.${cls}`)
             .join("")
         )

packages/devtools-reps/src/reps/stubs/element-node.js

@@ -107,6 +107,25 @@ stubs.set("NodeWithLeadingAndTrailingSpacesClassName", {
   }
 });
 
+stubs.set("NodeWithSpacesInClassName", {
+  "type": "object",
+  "actor": "server1.conn3.child1/obj59",
+  "class": "HTMLBodyElement",
+  "extensible": true,
+  "frozen": false,
+  "sealed": false,
+  "ownPropertyLength": 0,
+  "preview": {
+    "kind": "DOMNode",
+    "nodeType": 1,
+    "nodeName": "body",
+    "attributes": {
+      "class": "a  b   c"
+    },
+    "attributesLength": 1
+  }
+});
+
 stubs.set("NodeWithoutAttributes", {
   "type": "object",
   "actor": "server1.conn1.child1/obj32",

packages/devtools-reps/src/reps/tests/__snapshots__/element-node.js.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ElementNode - Node with spaces in the class name renders with expected text content 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <span
+    className="objectBox objectBox-node"
+    data-link-actor-id="server1.conn3.child1/obj59"
+>
+    &lt;
+    <span
+        className="tag-name theme-fg-color3"
+    >
+        body
+    </span>
+     
+    <span>
+        <span
+            className="attr-name theme-fg-color2"
+        >
+            class
+        </span>
+        ="
+        <span
+            className="attr-value theme-fg-color6"
+        >
+            a  b   c
+        </span>
+        "
+    </span>
+    &gt;
+</span>,
+  "nodes": Array [
+    <span
+      className="objectBox objectBox-node"
+      data-link-actor-id="server1.conn3.child1/obj59"
+>
+      &lt;
+      <span
+            className="tag-name theme-fg-color3"
+      >
+            body
+      </span>
+       
+      <span>
+            <span
+                  className="attr-name theme-fg-color2"
+            >
+                  class
+            </span>
+            ="
+            <span
+                  className="attr-value theme-fg-color6"
+            >
+                  a  b   c
+            </span>
+            "
+      </span>
+      &gt;
+</span>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": null,
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <span
+    className="objectBox objectBox-node"
+    data-link-actor-id="server1.conn3.child1/obj59"
+>
+    &lt;
+    <span
+        className="tag-name theme-fg-color3"
+    >
+        body
+    </span>
+     
+    <span>
+        <span
+            className="attr-name theme-fg-color2"
+        >
+            class
+        </span>
+        ="
+        <span
+            className="attr-value theme-fg-color6"
+        >
+            a  b   c
+        </span>
+        "
+    </span>
+    &gt;
+</span>,
+}
+`;

packages/devtools-reps/src/reps/tests/element-node.js

@@ -172,6 +172,34 @@ describe("ElementNode - Node with leading and trailing spaces class name", () =>
   });
 });
 
+describe("ElementNode - Node with spaces in the class name", () => {
+  const stub = stubs.get("NodeWithSpacesInClassName");
+
+  it("selects ElementNode Rep", () => {
+    expect(getRep(stub)).toBe(ElementNode.rep);
+  });
+
+  it("renders with expected text content", () => {
+    const renderedComponent = shallow(ElementNode.rep({
+      object: stub
+    }));
+
+    // Using snapshot testing here, because enzyme -> shallow -> text() is not returning
+    // the correct text representation of this React component.
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it("renders with expected text content in tiny mode", () => {
+    const renderedComponent = shallow(ElementNode.rep({
+      object: stub,
+      mode: MODE.TINY
+    }));
+
+    expect(renderedComponent.text())
+      .toEqual("body.a.b.c");
+  });
+});
+
 describe("ElementNode - Node without attributes", () => {
   const stub = stubs.get("NodeWithoutAttributes");