@envive-ai/react-widgets-v3 0.3.68 → 0.3.69

package/src/widgets/FloatingChatWidget/__tests__/FloatingChatWidget.cxClose.test.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { FloatingChatWidget } from '../FloatingChatWidget';
+
+/**
+ * Reproduces, without a browser, the exact state composition behind "the
+ * Envive floating button doesn't come back after closing Gladly": the button
+ * only renders when BOTH `isCXOpen` (owned by this widget) AND the Envive
+ * chat overlay's own `isOpen` (owned by `useChatToggle`, a separate jotai
+ * atom) are false. `onCXClose` must flip both.
+ *
+ * `useChatToggle` is mocked here with the same shape as the real hook
+ * (including the `if (isOpen) toggle()` closure-captured gate in `closeChat`)
+ * so this also catches a stale-closure regression, not just a logic typo.
+ */
+let capturedOnSwitchToAgent: (() => void) | undefined;
+let capturedOnCXClose: (() => void) | undefined;
+
+vi.mock('../../../hocs/withBaseWidget', () => ({
+  withBaseWidget: (Widget: React.ComponentType<Record<string, unknown>>) => {
+    const Wrapped = (props: Record<string, unknown>) => (
+      <Widget
+        {...props}
+        uiConfig={{
+          customerServiceIntegration: {
+            enabled: true,
+            provider: 'gladly',
+            suppressMerchantButton: true,
+          },
+          floatingButton: { showOption: 'always' },
+          floatingChat: {},
+          lookAndFeel: {},
+        }}
+        isUiConfigLoading={false}
+        hardcopyContent={undefined}
+      />
+    );
+    return Wrapped;
+  },
+}));
+
+vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
+  FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({ trackEvent: vi.fn(), isReady: true }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: () => ({ isVisible: true }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({}),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({
+    featureFlagService: { isFeatureGateEnabled: vi.fn().mockReturnValue(false) },
+  }),
+}));
+
+vi.mock('../../hooks/useGetWidgetStatus', () => ({
+  default: () => ({ userHasInteractedValue: false }),
+}));
+
+vi.mock('../hooks/useFloatingButtonVisibility', () => ({
+  useFloatingButtonVisibility: () => ({ shouldShowFloatingButton: true }),
+}));
+
+vi.mock('../hooks/useAutoPopup', () => ({
+  useAutoPopup: () => {},
+}));
+
+vi.mock('src/debug/debugBar', () => ({
+  DebugBar: () => null,
+}));
+
+vi.mock('../FloatingChatOverlay', () => ({
+  FloatingChatOverlay: () => null,
+}));
+
+// Mirrors the real `useChatToggle` (packages/hooks/src/hooks/ChatToggle/useChatToggle.ts):
+// `closeChat`/`openChat` only call `toggle` when the closure's own `isOpen` says it's
+// necessary, exactly like the real hook's `if (isOpen) toggle(...)` guards.
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => {
+    const [isOpen, setIsOpen] = useState(true); // Envive chat starts open
+    const toggle = () => setIsOpen(prev => !prev);
+    return {
+      isOpen,
+      openChat: () => {
+        if (!isOpen) toggle();
+      },
+      closeChat: () => {
+        if (isOpen) toggle();
+      },
+      onHover: () => {},
+    };
+  },
+}));
+
+vi.mock('../../../CXIntegration/hooks/useUnifiedCXButton', () => ({
+  useUnifiedCXButton: (props: { onSwitchToAgent: () => void; onCXClose: () => void }) => {
+    capturedOnSwitchToAgent = props.onSwitchToAgent;
+    capturedOnCXClose = props.onCXClose;
+    return { isSwitchEnabled: () => true, toggle: () => {} };
+  },
+}));
+
+describe('FloatingChatWidget — CX close restores the floating button', () => {
+  beforeEach(() => {
+    capturedOnSwitchToAgent = undefined;
+    capturedOnCXClose = undefined;
+  });
+
+  it('does not render the floating button while the CX chat (Gladly) is open', () => {
+    render(<FloatingChatWidget />);
+
+    expect(capturedOnSwitchToAgent).toBeDefined();
+    act(() => capturedOnSwitchToAgent?.());
+
+    expect(screen.queryByTestId('floating-button')).toBeNull();
+  });
+
+  it('renders the floating button again once the CX chat closes, even though the Envive overlay was still open the whole time', () => {
+    render(<FloatingChatWidget />);
+
+    act(() => capturedOnSwitchToAgent?.());
+    expect(screen.queryByTestId('floating-button')).toBeNull();
+
+    expect(capturedOnCXClose).toBeDefined();
+    act(() => capturedOnCXClose?.());
+
+    expect(screen.getByTestId('floating-button')).toBeInTheDocument();
+  });
+});