test: add test

packages/dockview/src/__tests__/react/react.spec.tsx

@@ -0,0 +1,86 @@
+import { ReactPart, ReactPortalStore } from '../../react/react';
+import * as React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+
+interface TestInterface {
+    valueA: string;
+    valueB: number;
+}
+
+describe('react', () => {
+    describe('ReactPart', () => {
+        test('update underlying component via ReactPart class', () => {
+            let api: ReactPart<TestInterface>;
+
+            const onReady = (_api: ReactPart<TestInterface>) => {
+                api = _api;
+            };
+
+            render(<TestWrapper onReady={onReady} component={Component} />);
+
+            expect(api).toBeTruthy();
+
+            expect(screen.getByTestId('valueA').textContent).toBe('stringA');
+            expect(screen.getByTestId('valueB').textContent).toBe('42');
+
+            api.update({ valueB: '32' });
+
+            expect(screen.getByTestId('valueA').textContent).toBe('stringA');
+            expect(screen.getByTestId('valueB').textContent).toBe('32');
+
+            api.update({ valueA: 'anotherStringA', valueB: '22' });
+
+            expect(screen.getByTestId('valueA').textContent).toBe(
+                'anotherStringA'
+            );
+            expect(screen.getByTestId('valueB').textContent).toBe('22');
+        });
+    });
+});
+
+const Component = (props: TestInterface) => {
+    return (
+        <div>
+            <div data-testid="valueA">{props.valueA}</div>
+            <div data-testid="valueB">{props.valueB}</div>
+        </div>
+    );
+};
+
+const TestWrapper = (props: {
+    component: React.FunctionComponent<TestInterface>;
+    onReady: (api: ReactPart<TestInterface>) => void;
+}) => {
+    const [portal, setPortal] = React.useState<React.ReactPortal[]>([]);
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const cut = new ReactPart<TestInterface>(
+            ref.current,
+            {
+                addPortal: (portal: React.ReactPortal) => {
+                    setPortal((_) => [..._, portal]);
+
+                    return {
+                        dispose: () => {
+                            setPortal((_) => _.filter((_) => _ !== portal));
+                        },
+                    };
+                },
+            },
+            props.component,
+            {
+                valueA: 'stringA',
+                valueB: 42,
+            }
+        );
+
+        props.onReady(cut);
+
+        return () => {
+            cut.dispose();
+        };
+    }, []);
+
+    return <div ref={ref}>{portal}</div>;
+};

packages/dockview/src/react/react.ts

@@ -49,13 +49,6 @@ const ReactComponentBridge: React.ForwardRefRenderFunction<
         []
     );
 
-    React.useEffect(() => {
-        // console.debug('[reactwrapper] component mounted ');
-        return () => {
-            // console.debug('[reactwrapper] component unmounted ');
-        };
-    }, []);
-
     return React.createElement(props.component, _props.current);
 };
 ReactComponentBridge.displayName = 'DockviewReactJsBridge';