Add unit tests

Summary:
Added unit tests to DataInspector prevent regressions in upcoming refactor

Found a bug where changes in `collapsed` aren't propagated. Fixed as well.

Reviewed By: jknoxville

Differential Revision: D21301858

fbshipit-source-id: 764bddeff30f9d4dbfc85d990635f67c20cfacb1

desktop/app/src/ui/components/data-inspector/DataInspector.tsx

@@ -358,7 +358,9 @@ export default class DataInspector extends Component<DataInspectorProps> {
       !deepEqual(nextProps.path, props.path) ||
       nextProps.onExpanded !== props.onExpanded ||
       nextProps.onDelete !== props.onDelete ||
-      nextProps.setValue !== props.setValue
+      nextProps.setValue !== props.setValue ||
+      nextProps.collapsed !== props.collapsed ||
+      nextProps.expandRoot !== props.expandRoot
     );
   }
 

desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import {render, fireEvent} from '@testing-library/react';
+
+jest.mock('../../../../fb/Logger');
+import ManagedDataInspector from '../ManagedDataInspector';
+
+const json = {
+  data: {
+    is: {
+      awesomely: 'cool',
+    },
+    and: {
+      also: 'json',
+    },
+  },
+};
+
+test('changing collapsed property works', async () => {
+  const res = render(<ManagedDataInspector data={json} collapsed expandRoot />);
+  expect((await res.queryAllByText(/is/)).length).toBe(1); // from expandRoot
+  expect((await res.queryAllByText(/cool/)).length).toBe(0);
+
+  res.rerender(
+    <ManagedDataInspector data={json} collapsed={false} expandRoot />,
+  );
+  expect((await res.queryAllByText(/cool/)).length).toBe(1);
+
+  res.rerender(
+    <ManagedDataInspector data={json} collapsed={true} expandRoot />,
+  );
+  expect((await res.queryAllByText(/cool/)).length).toBe(0);
+});
+
+test('can manually collapse properties', async () => {
+  const res = render(<ManagedDataInspector data={json} collapsed expandRoot />);
+  expect((await res.queryAllByText(/awesomely/)).length).toBe(0);
+  expect((await res.queryAllByText(/is/)).length).toBe(1); // previewed as key, like: "data: {is, and}"
+
+  // expand twice
+  fireEvent.click(await res.findByText(/data/));
+  expect((await res.queryAllByText(/awesomely/)).length).toBe(1);
+  expect((await res.queryAllByText(/cool/)).length).toBe(0);
+  fireEvent.click(await res.findByText(/is/));
+  expect((await res.queryAllByText(/cool/)).length).toBe(1);
+  expect((await res.queryAllByText(/json/)).length).toBe(0); // this node is not shown
+
+  // collapsing everything again
+  fireEvent.click(await res.findByText(/data/));
+  expect((await res.queryAllByText(/awesomely/)).length).toBe(0);
+
+  // expand everything again, expanded paths will have been remembered
+  fireEvent.click(await res.findByText(/data/));
+  expect((await res.queryAllByText(/is/)).length).toBe(1);
+  expect((await res.queryAllByText(/awesomely/)).length).toBe(1);
+  expect((await res.queryAllByText(/json/)).length).toBe(0);
+});