Allow inspector options to be passed to <XStateInspectLoader>

VanTanev · Aug 6, 2021 · 6f8c39c · 6f8c39c
1 parent 14ee0ca
commit 6f8c39c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/src/react/XStateInspectLoader.tsx b/src/react/XStateInspectLoader.tsx
@@ -19,6 +19,7 @@ export type XStateInspectLoaderProps = {
    * Initialize as enabled when we don't have a value stored in local storage?
    */
   initialIsEnabled?: boolean;
+  options?: Partial<InspectorOptions>;
   /**
    * Ignore the console interface and always enable the inspector
    */
@@ -29,6 +30,7 @@ export type XStateInspectLoaderProps = {
 export const XStateInspectLoader: React.FC<XStateInspectLoaderProps> = ({
   children,
   initialIsEnabled = false,
+  options,
   wrapperElement,
   forceEnabled,
   styles,
@@ -82,7 +84,7 @@ export const XStateInspectLoader: React.FC<XStateInspectLoaderProps> = ({
       }
 
       ReactDOM.render(
-        React.createElement(XStateInspector, { styles, inspect }, null),
+        React.createElement(XStateInspector, { styles, inspect, options }, null),
         wrapperElement,
       );
       setLoading(false);
@@ -104,13 +106,16 @@ const defaultStyles: React.CSSProperties = {
   overflowY: 'scroll',
 };
 const XStateInspector: React.FC<{
+  options?: Partial<InspectorOptions>;
   inspect: (options: Partial<InspectorOptions> | undefined) => void;
   styles?: React.CSSProperties;
-}> = ({ inspect, styles = defaultStyles }) => {
+}> = ({ inspect, options, styles = defaultStyles }) => {
   let ref = React.createRef<HTMLIFrameElement>();
+
   React.useLayoutEffect(() => {
-    inspect({ iframe: () => ref.current! });
-  }, [inspect, ref]);
+    inspect({ iframe: () => ref.current!, ...options });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return React.createElement(
     'div',

diff --git a/src/types.ts b/src/types.ts
@@ -1,7 +1,6 @@
 export type ReducerWithoutAction<S> = (prevState: S) => S;
-export type ReducerStateWithoutAction<
-  R extends ReducerWithoutAction<any>
-> = R extends ReducerWithoutAction<infer S> ? S : never;
+export type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> =
+  R extends ReducerWithoutAction<infer S> ? S : never;
 
 export type Reducer<S, A> = (prevState: S, action: A) => S;
 export type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;

diff --git a/test/react/XStateInspectLoader.test.tsx b/test/react/XStateInspectLoader.test.tsx
@@ -4,6 +4,40 @@ import { screen, render, waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
 describe('XStateInspectLoader', () => {
+  describe('mock window.open', () => {
+    let open: any;
+    beforeEach(() => {
+      open = window.open;
+      window.open = jest.fn();
+    });
+    afterEach(() => {
+      window.open = open;
+    });
+
+    test('options flag is honored to open in iframe even if default is open is true', async () => {
+      const App = () => {
+        return (
+          <>
+            <div data-testid="wrapper" id="wrapper"></div>
+            <XStateInspectLoader
+              options={{ iframe: false }}
+              initialIsEnabled={true}
+              wrapperElement="#wrapper"
+            >
+              <span>content</span>
+            </XStateInspectLoader>
+          </>
+        );
+      };
+
+      render(<App />);
+
+      await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
+      await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+      await waitFor(() => expect(window.open).toHaveBeenCalled());
+    });
+  });
+
   test('by default does not render the inspector', () => {
     const App = () => {
       return (
@@ -44,7 +78,7 @@ describe('XStateInspectLoader', () => {
     render(<App />);
 
     await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
-    expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement();
+    await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
   });
 
   test('Can be enabled with the localStorage API', async () => {
@@ -60,8 +94,8 @@ describe('XStateInspectLoader', () => {
     };
     render(<App />);
 
-    expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement();
-    expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement();
+    await waitFor(() => expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement());
+    await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
     act(() => window.XStateInspector.enable());
     await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
   });
@@ -80,7 +114,7 @@ describe('XStateInspectLoader', () => {
     render(<App />);
 
     await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
-    expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement();
+    await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
     act(() => window.XStateInspector.disable());
     await waitFor(() => expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement());
   });