Merge pull request firefox-devtools#3543 from devtools-html/debugger.html/bug/3496-expressions-should-have-a-unique-key

[Expressions] should have a unique key

Author: codehag

src/components/PrimaryPanes/SourcesTree.js

@@ -259,7 +259,7 @@ class SourcesTree extends Component {
         return [];
       },
       getRoots: () => sourceTree.contents,
-      getKey: (item, i) => item.path,
+      getPath: item => item.path,
       itemHeight: 21,
       autoExpandDepth: 1,
       autoExpandAll: false,

src/components/ProjectSearch/TextSearch.js

@@ -166,6 +166,12 @@ export default class TextSearch extends Component {
   renderResults() {
     const { results } = this.props;
     results = results.filter(result => result.matches.length > 0);
+    function getFilePath(item) {
+      return item.filepath
+        ? `${item.sourceId}`
+        : `${item.sourceId}-${item.line}-${item.column}`;
+    }
+
     return ManagedTree({
       getRoots: () => results,
       getChildren: file => {
@@ -176,10 +182,7 @@ export default class TextSearch extends Component {
       autoExpandDepth: 1,
       focused: results[0],
       getParent: item => null,
-      getKey: item =>
-        item.filepath
-          ? `${item.sourceId}`
-          : `${item.sourceId}-${item.line}-${item.column}`,
+      getPath: getFilePath,
       renderItem: (item, depth, focused, _, expanded, { setExpanded }) =>
         item.filepath
           ? this.renderFile(item, focused, expanded, setExpanded)

src/components/SecondaryPanes/ChromeScopes.js

@@ -186,7 +186,7 @@ class Scopes extends Component {
         getParent: item => null,
         getChildren: this.getChildren,
         getRoots: () => roots,
-        getKey: item => item.path,
+        getPath: item => item.path,
         autoExpand: 0,
         autoExpandDepth: 1,
         autoExpandAll: false,

src/components/SecondaryPanes/tests/Expressions.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Expressions from "../Expressions";
+
+const ExpressionsComponent = React.createFactory(Expressions.WrappedComponent);
+
+function generateDefaults(overrides) {
+  return {
+    loadObjectProperties: jest.fn(),
+    expressions: [
+      {
+        input: "expression1",
+        value: {
+          result: {
+            value: "foo",
+            class: ""
+          }
+        }
+      },
+      {
+        input: "expression2",
+        value: {
+          result: {
+            value: "bar",
+            class: ""
+          }
+        }
+      }
+    ],
+    ...overrides
+  };
+}
+
+function render(overrides = {}) {
+  const props = generateDefaults(overrides);
+  const component = shallow(new ExpressionsComponent(props));
+  return { component, props };
+}
+
+describe("Expressions", () => {
+  it("should render", async () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should always have unique keys", async () => {
+    const overrides = {
+      expressions: [
+        {
+          input: "expression1",
+          value: {
+            result: {
+              value: undefined,
+              class: ""
+            }
+          }
+        },
+        {
+          input: "expression2",
+          value: {
+            result: {
+              value: undefined,
+              class: ""
+            }
+          }
+        }
+      ]
+    };
+
+    const { component } = render(overrides);
+    expect(component).toMatchSnapshot();
+  });
+});