Introduce PluginRenderer to render plugins

Summary: PluginContainer will now wrap Sandy plugins in PluginRenderer. PluginRenderer will also be used by plugin unit tests in the future Reviewed By: jknoxville Differential Revision: D22159359 fbshipit-source-id: 69f9c8f4bec9392022c1d7a14957f5aca0339d97
2020-07-01 08:58:40 -07:00
parent ba01fa5bc9
commit f2c39aed55
7 changed files with 216 additions and 66 deletions
--- a/desktop/app/src/tests/PluginContainer.node.tsx
+++ b/desktop/app/src/tests/PluginContainer.node.tsx
@@ -7,10 +7,14 @@
 * @format
 */

-import React from 'react';
+import React, {useContext} from 'react';
 import produce from 'immer';
 import {FlipperPlugin} from '../plugin';
-import {renderMockFlipperWithPlugin} from '../test-utils/createMockFlipperWithPlugin';
+import {
+  renderMockFlipperWithPlugin,
+  createMockPluginDetails,
+} from '../test-utils/createMockFlipperWithPlugin';
+import {SandyPluginContext, SandyPluginDefinition} from 'flipper-plugin';

 interface PersistedState {
  count: 1;
@@ -79,3 +83,55 @@ test('Plugin container can render plugin and receive updates', async () => {

  expect((await renderer.findByTestId('counter')).textContent).toBe('2');
 });
+
+test('PluginContainer can render Sandy plugins', async () => {
+  let renders = 0;
+
+  function MySandyPlugin() {
+    renders++;
+    const sandyContext = useContext(SandyPluginContext);
+    expect(sandyContext).not.toBe(null);
+    return <div>Hello from Sandy</div>;
+  }
+
+  const plugin = () => ({});
+
+  const definition = new SandyPluginDefinition(createMockPluginDetails(), {
+    plugin,
+    Component: MySandyPlugin,
+  });
+  // any cast because this plugin is not enriched with the meta data that the plugin loader
+  // normally adds. Our further sandy plugin test infra won't need this, but
+  // for this test we do need to act a s a loaded plugin, to make sure PluginContainer itself can handle it
+  const {renderer, act, sendMessage} = await renderMockFlipperWithPlugin(
+    definition,
+  );
+  expect(renderer.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="css-1orvm1g-View-FlexBox-FlexColumn"
+            >
+              <div>
+                Hello from Sandy
+              </div>
+            </div>
+            <div
+              class="css-bxcvv9-View-FlexBox-FlexRow"
+              id="detailsSidebar"
+            />
+          </div>
+        </body>
+      `);
+  expect(renders).toBe(1);
+
+  // sending a new message doesn't cause a re-render
+  act(() => {
+    sendMessage('inc', {delta: 2});
+  });
+
+  // TODO: check that onConnect is called T68683507
+  // TODO: check that messages have arrived T68683442
+
+  expect(renders).toBe(1);
+});