Files
flipper/desktop/plugins/layout/__tests__/Inspector.node.tsx
Michel Weststrate 1bb1cae167 Don't send messages to disconnected clients. Make exportPersistedState compatible with disconnected devices.
Summary:
This diff addresses two problems:

1. Since clients plugins can be active beyond having a connection, we have to make it possible for plugin authors to check if they are connected before they make a call.
2. if there is a custom `exportPersistedState`, plugins should be able to skip making calls if the device has disconnected.

Introducing this change makes it possible to interact with a reasonable level with disconnected clients, and makes it possible to create Flipper traces for disconnected clients.

Note that both items were already problems before supporting offline clients; as there can be a noticeable delay between disconnecting and Flipper detecting that (i've seen up to 30 secs). What happend previously in those cases is that the export would simply hang, as would other user interactions, as loosing the connection in the middle of a process would cause the promise chains to be neither rejected or resolved, which is pretty iffy.

Before this diff, trying to export a disconnected device would hang forever like:

{F369600601}

Reviewed By: nikoant

Differential Revision: D26250895

fbshipit-source-id: 177624a116883c3cba14390cd0fe164e243bb97c
2021-02-09 04:16:26 -08:00

122 lines
3.1 KiB
TypeScript

/**
* 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 Inspector, {ElementSelectorNode} from '../Inspector';
import {PluginClient, Element} from 'flipper';
import React from 'react';
import {render} from '@testing-library/react';
let inspectorComponent: Inspector | null = null;
beforeEach(() => {
const mockRoot: Element = {
id: '10000',
name: '10000',
expanded: false,
children: [],
attributes: [],
data: {},
decoration: '',
extraInfo: {},
};
const client: PluginClient = {
isConnected: true,
send: () => {},
call: () => Promise.resolve(mockRoot),
subscribe: () => {},
supportsMethod: () => Promise.resolve(false),
};
render(
<Inspector
client={client}
showsSidebar={false}
selectedElement={null}
selectedAXElement={null}
onSelect={() => {}}
setPersistedState={() => {}}
persistedState={{
rootElement: null,
rootAXElement: null,
elements: {},
AXelements: {},
}}
searchResults={null}
ref={(e) => {
inspectorComponent = e;
}}
/>,
);
});
function constructTestTree(): ElementSelectorNode {
// The tree will be:
// 10000 ---> 11000 ---> 11100 ---> 11110
// | | +-> 11120
// | +-> 11200
// +--> 12000 ---> 12100
// +-> 12200 ---> 12210 ---> 12211
// +-> 12300 ---> 12310
// +-> 12320
return {
10000: {
11000: {11100: {11110: {}, 11120: {}}, 11200: {}},
12000: {
12100: {},
12200: {12210: {12211: {}}},
12300: {12310: {}, 12320: {}},
},
},
};
}
test('test getPathFromNode without id', () => {
const tree = constructTestTree();
const path = inspectorComponent?.getPathForNode(tree, null);
let subtree = tree;
path?.forEach((id) => {
subtree = subtree[id];
expect(subtree).toBeDefined();
});
expect(subtree).toEqual({});
});
test('test getPathFromNode with id (leaf)', () => {
const tree = constructTestTree();
const path = inspectorComponent?.getPathForNode(tree, '12320');
expect(path).toEqual(['10000', '12000', '12300', '12320']);
});
test('test getPathFromNode with id (non-leaf)', () => {
const tree = constructTestTree();
const path = inspectorComponent?.getPathForNode(tree, '12210');
expect(path).toEqual(['10000', '12000', '12200', '12210']);
});
test('test getPathFromNode with non-existing id', () => {
const tree = constructTestTree();
const path = inspectorComponent?.getPathForNode(tree, '12313');
expect(path).toBeNull();
});
test('test getElementLeaves', () => {
const tree = constructTestTree();
const leaves = inspectorComponent?.getElementLeaves(tree);
expect(leaves).toHaveLength(7);
expect(leaves).toEqual(
expect.arrayContaining([
'11110',
'11120',
'11200',
'12100',
'12211',
'12310',
'12320',
]),
);
});