Add infra to test a plugin

Summary: There were several reports that it is hard to test an entire plugin, and send updates. This should address that and help with avoiding plugin regressions in the future. Added a `renderMockFlipperWithPlugin` utility and demo test. Reviewed By: passy Differential Revision: D22114217 fbshipit-source-id: ceefd954abc4ea47c336eab495fb50f161993df9
2020-06-22 06:04:14 -07:00
parent 5dd6edc533
commit f373872b5c
3 changed files with 148 additions and 9 deletions
--- a/desktop/app/src/tests/PluginContainer.node.tsx
+++ b/desktop/app/src/tests/PluginContainer.node.tsx
@@ -0,0 +1,83 @@
+/**
+ * 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 React from 'react';
+import produce from 'immer';
+import {FlipperPlugin} from '../plugin';
+import {renderMockFlipperWithPlugin} from '../test-utils/createMockFlipperWithPlugin';
+
+interface PersistedState {
+  count: 1;
+}
+
+class TestPlugin extends FlipperPlugin<any, any, any> {
+  static id = 'TestPlugin';
+
+  static defaultPersistedState = {
+    count: 0,
+  };
+
+  static persistedStateReducer(
+    persistedState: PersistedState,
+    method: string,
+    payload: {delta?: number},
+  ) {
+    return produce(persistedState, (draft) => {
+      if (method === 'inc') {
+        draft.count += payload?.delta || 1;
+      }
+    });
+  }
+
+  render() {
+    return (
+      <h1>
+        Hello:{' '}
+        <span data-testid="counter">{this.props.persistedState.count}</span>
+      </h1>
+    );
+  }
+}
+
+test('Plugin container can render plugin and receive updates', async () => {
+  await renderMockFlipperWithPlugin(
+    TestPlugin,
+    async ({renderer, sendMessage, act}) => {
+      expect(renderer.baseElement).toMatchInlineSnapshot(`
+        <body>
+          <div>
+            <div
+              class="css-1orvm1g-View-FlexBox-FlexColumn"
+            >
+              <h1>
+                Hello:
+                 
+                <span
+                  data-testid="counter"
+                >
+                  0
+                </span>
+              </h1>
+            </div>
+            <div
+              class="css-bxcvv9-View-FlexBox-FlexRow"
+              id="detailsSidebar"
+            />
+          </div>
+        </body>
+      `);
+
+      act(() => {
+        sendMessage('inc', {delta: 2});
+      });
+
+      expect((await renderer.findByTestId('counter')).textContent).toBe('2');
+    },
+  );
+});