Adding delay intercom test

Fix spelling

Author: Siggnja

playground/app.tsx

@@ -8,6 +8,7 @@ import {
   ProviderEventsPage,
   ProviderApiPage,
   UseIntercomTourPage,
+  UseIntercomWithDelay
 } from './modules';
 
 import { Page, Style } from './modules/common';
@@ -47,6 +48,7 @@ const App = () => {
           <Route path="/providerApi" component={ProviderApiPage} />
           <Route path="/useIntercom" component={UseIntercomPage} />
           <Route path="/useIntercomTour" component={UseIntercomTourPage} />
+          <Route path="/useIntercomWithTimeout" component={UseIntercomWithDelay} />
           <Route path="/" exact>
             <Navigation>
               <Link to="/provider">
@@ -61,6 +63,9 @@ const App = () => {
               <Link to="/useIntercomTour">
                 <code>useIntercom with tour</code>
               </Link>
+              <Link to="/useIntercomWithTimeout">
+                <code>useIntercom with delayed boot</code>
+              </Link>
             </Navigation>
           </Route>
         </Router>

playground/modules/useIntercom/index.ts

@@ -1,2 +1,3 @@
 export { default as UseIntercomPage } from './useIntercom';
 export { default as UseIntercomTourPage } from './useIntercomTour';
+export { default as UseIntercomWithDelay } from './useIntercomWithDelay'

playground/modules/useIntercom/useIntercomWithDelay.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { IntercomProvider, useIntercom } from '../../../.';
+
+import { Button } from '../common';
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  width: 100%;
+`;
+
+const Item = styled.div`
+  display: grid;
+  grid-template-rows: min-content;
+
+  &::after {
+    content: '';
+    margin: 2rem 0 1.5rem;
+    border-bottom: 2px solid var(--grey);
+    width: 100%;
+  }
+`;
+
+const RawUseIntercomPage = () => {
+  const {
+    boot,
+  } = useIntercom();
+  const handleBoot = React.useCallback(() => boot(), [boot]);
+
+  return (
+    <Grid>
+      <Item>
+        <p>
+          Intercom will be autobooted after 5000ms
+        </p>
+      </Item>
+    </Grid>
+  );
+};
+
+const UseIntercomWithDelayPage = () => {
+  return (
+    <IntercomProvider appId="jcabc7e3" initializeDelay={5000} autoBoot>
+      <RawUseIntercomPage />
+    </IntercomProvider>
+  );
+};
+
+export default UseIntercomWithDelayPage;

src/types.ts

@@ -420,7 +420,7 @@ export type IntercomProviderProps = {
    */
   apiBase?: string;
   /**
-   * Indicates if the intercom initialization should be delayed, dealy is in ms
+   * Indicates if the intercom initialization should be delayed, delay is in ms
    *
    * @remarks If not set delay is set to 0ms
    * */

test/useIntercom.test.tsx

@@ -44,4 +44,29 @@ describe('useIntercom', () => {
 
     expect(window.intercomSettings).toEqual({ app_id: INTERCOM_APP_ID });
   });
+
+  test('should set wait for a certain amount of ms until booting, booting before that will do nothing', async () => {
+    const { result, waitFor  } = renderHook(() => useIntercom(), {
+      wrapper: ({ children }) => (
+        <IntercomProvider appId={INTERCOM_APP_ID} initializeDelay={5000}>{children}</IntercomProvider>
+      ),
+    });
+
+    const { boot } = result.current;
+
+    act(() => {
+      boot();
+    });
+
+    expect(window.intercomSettings).toEqual({app_id: undefined});
+
+    await waitFor(() => {}, {timeout: 5000});
+
+    act(() => {
+      boot();
+    });
+
+    expect(window.intercomSettings).toEqual({ app_id: INTERCOM_APP_ID });
+    
+  });
 });