Remove nullish coalescing op because it breaks ESM in some babel setups

VanTanev · Aug 21, 2021 · e80bc6c · e80bc6c
1 parent 5e6e8cb
commit e80bc6c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/src/react/XStateInspectLoader.tsx b/src/react/XStateInspectLoader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { InspectorOptions } from '@xstate/inspect';
 
-const LOCAL_STORAGE_KEY = 'xstateHelpersInspectorOpen';
+export const LOCAL_STORAGE_KEY = 'xstateHelpersInspectorOpen';
 
 // declare global {
 declare global {
@@ -35,8 +35,8 @@ export const XStateInspectLoader: React.FC<XStateInspectLoaderProps> = ({
   forceEnabled,
   styles,
 }) => {
-  const [isEnabled, setIsEnabled] = React.useState(
-    () => forceEnabled ?? getItem(LOCAL_STORAGE_KEY, initialIsEnabled),
+  const [isEnabled, setIsEnabled] = React.useState(() =>
+    forceEnabled != null ? forceEnabled : getItem(LOCAL_STORAGE_KEY, initialIsEnabled),
   );
   React.useEffect(() => {
     if (forceEnabled !== undefined) {

diff --git a/test/react/XStateInspectLoader.test.tsx b/test/react/XStateInspectLoader.test.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
-import { XStateInspectLoader } from '../../src/react/XStateInspectLoader';
+import { XStateInspectLoader, LOCAL_STORAGE_KEY } from '../../src/react/XStateInspectLoader';
 import { screen, render, waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
 describe('XStateInspectLoader', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
   describe('mock window.open', () => {
     let open: any;
     beforeEach(() => {
@@ -32,8 +36,8 @@ describe('XStateInspectLoader', () => {
 
       render(<App />);
 
-      await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
       await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+      await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
       await waitFor(() => expect(window.open).toHaveBeenCalled());
     });
   });
@@ -51,17 +55,42 @@ describe('XStateInspectLoader', () => {
     expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement();
   });
 
-  test('forceDisable does not render the inspector', () => {
+  test('uses local storage for initial state', async () => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(true));
+
     const App = () => {
       return (
-        <XStateInspectLoader forceEnabled={false}>
-          <span test-id="content">content</span>
-        </XStateInspectLoader>
+        <>
+          <div data-testid="wrapper" id="wrapper"></div>
+          <XStateInspectLoader initialIsEnabled={true} wrapperElement="#wrapper">
+            <span>content</span>
+          </XStateInspectLoader>
+        </>
       );
     };
     render(<App />);
 
-    expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement();
+    await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+    await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
+  });
+
+  test('forceEnable=false does not render the inspector', async () => {
+    window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(true));
+
+    const App = () => {
+      return (
+        <>
+          <div data-testid="wrapper" id="wrapper"></div>
+          <XStateInspectLoader forceEnabled={false} wrapperElement="#wrapper">
+            <span>content</span>
+          </XStateInspectLoader>
+        </>
+      );
+    };
+    render(<App />);
+
+    await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+    await waitFor(() => expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement());
   });
 
   test('renders with "initialIsEnabled={true}"', async () => {
@@ -77,8 +106,8 @@ describe('XStateInspectLoader', () => {
     };
     render(<App />);
 
-    await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
     await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+    await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
   });
 
   test('Can be enabled with the localStorage API', async () => {
@@ -94,13 +123,13 @@ describe('XStateInspectLoader', () => {
     };
     render(<App />);
 
-    await waitFor(() => expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement());
     await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+    expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement();
     act(() => window.XStateInspector.enable());
     await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
   });
 
-  test('Can be enabled with the localStorage API', async () => {
+  test('Can be diabled with the localStorage API', async () => {
     const App = () => {
       return (
         <>
@@ -113,8 +142,8 @@ describe('XStateInspectLoader', () => {
     };
     render(<App />);
 
-    await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
     await waitFor(() => expect(screen.getByText(/content/i)).not.toBeEmptyDOMElement());
+    await waitFor(() => expect(screen.getByTestId('wrapper')).not.toBeEmptyDOMElement());
     act(() => window.XStateInspector.disable());
     await waitFor(() => expect(screen.getByTestId('wrapper')).toBeEmptyDOMElement());
   });