Added basic editable props/state/context/hooks tests

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -1,34 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": null,
-      "isStateEditable": false,
-      "name": "DebuggableHook",
-      "value": {
-        "foo": 2
-      },
-      "subHooks": [
-        {
-          "id": 0,
-          "isStateEditable": true,
-          "name": "State",
-          "value": 1,
-          "subHooks": []
-        }
-      ]
-    }
-  ],
-  "props": {},
-  "state": null
-}
-`;
-
 exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
 {
   "id": 2,
@@ -65,6 +36,35 @@ exports[`InspectedElementContext should dehydrate complex nested values when req
 }
 `;
 
+exports[`InspectedElementContext should display complex values of useDebugValue: DisplayedComplexValue 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "DebuggableHook",
+      "value": {
+        "foo": 2
+      },
+      "subHooks": [
+        {
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "value": 1,
+          "subHooks": []
+        }
+      ]
+    }
+  ],
+  "props": {},
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `
 {
   "id": 2,

packages/react-devtools-shared/src/__tests__/editing-test.js

@@ -0,0 +1,210 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('editable props and state', () => {
+  let PropTypes;
+  let React;
+  let ReactDOM;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should support editing props', async () => {
+    class ClassComponent extends React.Component {
+      render() {
+        return this.props.deep.nested + this.props.shallow;
+      }
+    }
+
+    function FunctionComponent(props) {
+      return props.deep.nested + props.shallow;
+    }
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <>
+          <ClassComponent deep={{nested: 'a'}} shallow="b" />,
+          <FunctionComponent deep={{nested: 'a'}} shallow="b" />,
+        </>,
+        container,
+      ),
+    );
+
+    expect(container.innerHTML).toBe('ab,ab,');
+
+    function overrideProps(id, path, value) {
+      const rendererID = utils.getRendererID();
+      bridge.send('overrideProps', {id, path, rendererID, value});
+      jest.runOnlyPendingTimers();
+    }
+
+    const classID = ((store.getElementIDAtIndex(0): any): number);
+    const funcID = ((store.getElementIDAtIndex(1): any): number);
+
+    overrideProps(classID, ['shallow'], 'c');
+    expect(container.innerHTML).toBe('ac,ab,');
+
+    overrideProps(classID, ['deep', 'nested'], 'd');
+    expect(container.innerHTML).toBe('dc,ab,');
+
+    overrideProps(funcID, ['shallow'], 'c');
+    expect(container.innerHTML).toBe('dc,ac,');
+
+    overrideProps(funcID, ['deep', 'nested'], 'd');
+    expect(container.innerHTML).toBe('dc,dc,');
+  });
+
+  it('should support editing state', async () => {
+    class ClassComponent extends React.Component {
+      state = {
+        deep: {
+          nested: 'a',
+        },
+        shallow: 'b',
+      };
+      render() {
+        return this.state.deep.nested + this.state.shallow;
+      }
+    }
+
+    const container = document.createElement('div');
+    await utils.actAsync(() => ReactDOM.render(<ClassComponent />, container));
+
+    expect(container.innerHTML).toBe('ab');
+
+    function overrideState(id, path, value) {
+      const rendererID = utils.getRendererID();
+      bridge.send('overrideState', {id, path, rendererID, value});
+      jest.runOnlyPendingTimers();
+    }
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    overrideState(id, ['shallow'], 'c');
+    expect(container.innerHTML).toBe('ac');
+
+    overrideState(id, ['deep', 'nested'], 'd');
+    expect(container.innerHTML).toBe('dc');
+  });
+
+  it('should support editing hooks', async () => {
+    function FunctionComponent() {
+      const [state] = React.useState({
+        deep: {
+          nested: 'a',
+        },
+        shallow: 'b',
+      });
+      return state.deep.nested + state.shallow;
+    }
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<FunctionComponent />, container),
+    );
+
+    expect(container.innerHTML).toBe('ab');
+
+    function overrideHookState(id, hookID, path, value) {
+      const rendererID = utils.getRendererID();
+      bridge.send('overrideHookState', {id, hookID, path, rendererID, value});
+      jest.runOnlyPendingTimers();
+    }
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const hookID = 0; // index
+
+    overrideHookState(id, hookID, ['shallow'], 'c');
+    expect(container.innerHTML).toBe('ac');
+
+    overrideHookState(id, hookID, ['deep', 'nested'], 'd');
+    expect(container.innerHTML).toBe('dc');
+  });
+
+  it('should support editing context', async () => {
+    class LegacyContextProvider extends React.Component<any> {
+      static childContextTypes = {
+        deep: PropTypes.object,
+        shallow: PropTypes.string,
+      };
+      getChildContext() {
+        return {
+          deep: {
+            nested: 'a',
+          },
+          shallow: 'b',
+        };
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    class ClassComponent extends React.Component<any> {
+      static contextTypes = {
+        deep: PropTypes.object,
+        shallow: PropTypes.string,
+      };
+
+      render() {
+        return this.context.deep.nested + this.context.shallow;
+      }
+    }
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <LegacyContextProvider>
+          <ClassComponent />,
+          <ClassComponent />,
+        </LegacyContextProvider>,
+        container,
+      ),
+    );
+
+    expect(container.innerHTML).toBe('ab,ab,');
+
+    function overrideContext(id, path, value) {
+      const rendererID = utils.getRendererID();
+      // To simplify hydration and display of primitive context values (e.g. number, string)
+      // the inspectElement() method wraps context in a {value: ...} object.
+      path = ['value', ...path];
+
+      bridge.send('overrideContext', {id, path, rendererID, value});
+      jest.runOnlyPendingTimers();
+    }
+
+    const classID = ((store.getElementIDAtIndex(1): any): number);
+
+    overrideContext(classID, ['shallow'], 'c');
+    expect(container.innerHTML).toBe('ac,ab,');
+
+    overrideContext(classID, ['deep', 'nested'], 'd');
+    expect(container.innerHTML).toBe('dc,ab,');
+
+    // Function components using legacy context are not editable.
+  });
+});

packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js

@@ -1588,7 +1588,7 @@ describe('InspectedElementContext', () => {
     done();
   });
 
-  it('display complex values of useDebugValue', async done => {
+  it('should display complex values of useDebugValue', async done => {
     let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
     function Suspender({target}) {

packages/react-devtools-shared/src/backend/renderer.js

@@ -2728,14 +2728,22 @@ export function attach(
 
     const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
-      const instance = fiber.stateNode;
-      if (path.length === 0) {
-        // Simple context value
-        instance.context = value;
-      } else {
-        setInObject(instance.context, path, value);
+      switch (fiber.tag) {
+        case ClassComponent:
+          const instance = fiber.stateNode;
+          if (path.length === 0) {
+            // Simple context value
+            instance.context = value;
+          } else {
+            setInObject(instance.context, path, value);
+          }
+          instance.forceUpdate();
+          break;
+        case FunctionComponent:
+          // Function components using legacy context are not editable
+          // because there's no instance on which to create a cloned, mutated context.
+          break;
       }
-      instance.forceUpdate();
     }
   }