fix(useSegment): add ready state (#1722)

* fix(useSegment): add isAnalyticsReady state

* test: add tests

* fix: fix dependencies precision

Co-authored-by: philibeaux <[email protected]>

* refactor: refactor to avoid using new prop

* refactor(useSegment): introduce new prop to get rid of undefined shouldLoad status

* feat(useSegment): new prop that render children conditionaly

* test(provider): add some test on Segment Provider

---------

Co-authored-by: philibeaux <[email protected]>

Author: ModuloM

.changeset/plenty-dogs-shake.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/use-segment': minor
+---
+
+Add ready state to useSegment

packages/use-segment/src/__tests__/SegmentProvider.test.tsx

@@ -0,0 +1,113 @@
+import { describe, expect, it, jest } from '@jest/globals'
+import type { Context } from '@segment/analytics-next'
+import { AnalyticsBrowser } from '@segment/analytics-next'
+import { render, screen, waitFor } from '@testing-library/react'
+import SegmentProvider from '..'
+import type { Analytics } from '../index'
+
+const TestChildren = () => <div data-testid="test">children</div>
+
+describe('SegmentProvider', () => {
+  it('Provider should render children when shouldRenderOnlyWhenReady is false', async () => {
+    const mock = jest
+      .spyOn(AnalyticsBrowser, 'load')
+      .mockResolvedValue([{} as Analytics, {} as Context])
+
+    const settings = { writeKey: 'helloworld' }
+
+    render(
+      <SegmentProvider
+        settings={settings}
+        initOptions={{}}
+        areOptionsLoaded={false}
+        events={{
+          event: () => () => Promise.resolve(),
+        }}
+      >
+        <TestChildren />
+      </SegmentProvider>,
+    )
+
+    await waitFor(() => {
+      expect(mock).toHaveBeenCalledTimes(0)
+    })
+
+    expect(screen.getByTestId('test')).toBeTruthy()
+  })
+
+  it('Provider should not render children when options are not loaded ', async () => {
+    const mock = jest
+      .spyOn(AnalyticsBrowser, 'load')
+      .mockResolvedValue([{} as Analytics, {} as Context])
+
+    const settings = { writeKey: 'helloworld' }
+
+    render(
+      <SegmentProvider
+        settings={settings}
+        initOptions={{}}
+        areOptionsLoaded={false}
+        shouldRenderOnlyWhenReady
+        events={{
+          event: () => () => Promise.resolve(),
+        }}
+      >
+        <TestChildren />
+      </SegmentProvider>,
+    )
+
+    await waitFor(() => {
+      expect(mock).toHaveBeenCalledTimes(0)
+    })
+
+    expect(screen.queryByTestId('test')).toBe(null)
+  })
+
+  it('Provider should not render children when options are not loaded at first render, but load after options changed', async () => {
+    const mock = jest
+      .spyOn(AnalyticsBrowser, 'load')
+      .mockResolvedValue([{} as Analytics, {} as Context])
+
+    const settings = { writeKey: 'helloworld' }
+
+    const { rerender } = render(
+      <SegmentProvider
+        settings={settings}
+        initOptions={{}}
+        areOptionsLoaded={false}
+        shouldRenderOnlyWhenReady
+        events={{
+          event: () => () => Promise.resolve(),
+        }}
+      >
+        <TestChildren />
+      </SegmentProvider>,
+    )
+
+    await waitFor(() => {
+      expect(mock).toHaveBeenCalledTimes(0)
+    })
+
+    expect(screen.queryByTestId('test')).toBe(null)
+
+    rerender(
+      <SegmentProvider
+        settings={settings}
+        initOptions={{}}
+        areOptionsLoaded
+        shouldRenderOnlyWhenReady
+        events={{
+          event: () => () => Promise.resolve(),
+        }}
+      >
+        <TestChildren />
+      </SegmentProvider>,
+    )
+
+    await waitFor(() => {
+      expect(mock).toHaveBeenCalledTimes(1)
+    })
+
+    expect(screen.queryByTestId('test')).toBeTruthy()
+  })
+})