@thoughtspot/visual-embed-sdk 1.39.2 → 1.39.3

package/src/react/index.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import {
@@ -15,8 +15,7 @@ import {
     mockMessageChannel,
 } from '../test/test-utils';
 import {
-    SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed, PreRenderedLiveboardEmbed,
-    SpotterAgentEmbed
+    SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed, PreRenderedLiveboardEmbed, PreRenderedSearchEmbed, PreRenderedAppEmbed, useSpotterAgent, SpotterMessage, useInit
 } from './index';
 import * as allExports from './index';
 import {
@@ -236,199 +235,601 @@ describe('React Components', () => {
         });
     });
 
-    describe('SpotterAgentEmbed', () => {
-        it('Should work as a React component integrating BodylessConversation', async () => {
-            const mockDiv = document.createElement('div');
+    describe('SpotterMessage', () => {
+        const mockMessage = {
+            sessionId: "session123",
+            genNo: 1,
+            acSessionId: "acSession123",
+            acGenNo: 2,
+            worksheetId: "worksheet123",
+            convId: "conv123",
+            messageId: "message123"
+        };
+
+        it('Should render the SpotterMessage component with required props', async () => {
+            const { container } = render(
+                <SpotterMessage message={mockMessage} />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+
+            expect(getIFrameEl(container)).not.toBe(null);
+            expect(getIFrameSrc(container)).toContain('sessionId=session123');
+            expect(getIFrameSrc(container)).toContain('genNo=1');
+            expect(getIFrameSrc(container)).toContain('acSessionId=acSession123');
+            expect(getIFrameSrc(container)).toContain('acGenNo=2');
+        });
+
+        it('Should render the SpotterMessage component with optional query', async () => {
+            const { container } = render(
+                <SpotterMessage 
+                    message={mockMessage} 
+                    query="show me sales"
+                />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+
+            expect(getIFrameEl(container)).not.toBe(null);
+            expect(getIFrameSrc(container)).toContain('sessionId=session123');
+        });
+
+        it('Should have the correct container element with className', async () => {
+            const { container } = render(
+                <SpotterMessage 
+                    message={mockMessage}
+                    className="custom-class"
+                />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+
+            expect(
+                getIFrameEl(container).parentElement.classList.contains('custom-class'),
+            ).toBe(true);
+        });
+
+        // Note: insertAsSibling is not supported for SpotterMessage as it's not part of the allowed props
+    });
+
+    describe('Component Factory Coverage', () => {
+        it('Should test basic component creation', () => {
+            expect(() => {
+                render(<LiveboardEmbed liveboardId="test" />);
+            }).not.toThrow();
             
-            let conversationService: any = null;
+            expect(() => {
+                render(<SearchEmbed dataSource="test" />);
+            }).not.toThrow();
             
-            render(
-                <SpotterAgentEmbed
-                    ref={(instance: any) => {
-                        conversationService = instance;
-                        
-                        if (instance) {
-                            instance.sendMessage = jest.fn().mockResolvedValue({
-                                container: mockDiv
-                            });
-                        }
-                    }}
-                    worksheetId="test-worksheet-id"
-                />
+            expect(() => {
+                render(<AppEmbed showPrimaryNavbar={false} />);
+            }).not.toThrow();
+        });
+
+        it('Should test component factory existence', () => {
+            expect(PreRenderedLiveboardEmbed).toBeDefined();
+            expect(PreRenderedSearchEmbed).toBeDefined();
+            expect(PreRenderedAppEmbed).toBeDefined();
+            expect(typeof PreRenderedLiveboardEmbed).toBe('object');
+            expect(typeof PreRenderedSearchEmbed).toBe('object');
+            expect(typeof PreRenderedAppEmbed).toBe('object');
+        });
+    });
+
+    describe('Components with insertAsSibling', () => {
+        it('Should render LiveboardEmbed with insertAsSibling', async () => {
+            const { container } = render(
+                <LiveboardEmbed
+                    liveboardId="test-liveboard"
+                    insertAsSibling={true}
+                />,
             );
 
-            expect(conversationService).not.toBeNull();
-            
-            if (conversationService) {
-                expect(typeof conversationService.sendMessage).toBe('function');
+            await waitFor(() => getIFrameEl(container));
+            expect(container.querySelector('span')).not.toBe(null);
+            expect(container.querySelector('span')?.style.position).toBe('absolute');
+        });
+
+        it('Should render SearchEmbed with insertAsSibling', async () => {
+            const { container } = render(
+                <SearchEmbed
+                    dataSource="test-datasource"
+                    insertAsSibling={true}
+                />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+            expect(container.querySelector('span')).not.toBe(null);
+            expect(container.querySelector('span')?.style.position).toBe('absolute');
+        });
+
+        it('Should render AppEmbed with insertAsSibling', async () => {
+            const { container } = render(
+                <AppEmbed
+                    showPrimaryNavbar={false}
+                    insertAsSibling={true}
+                />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+            expect(container.querySelector('span')).not.toBe(null);
+            expect(container.querySelector('span')?.style.position).toBe('absolute');
+        });
+
+        it('Should render SearchBarEmbed with insertAsSibling', async () => {
+            const { container } = render(
+                <SearchBarEmbed
+                    dataSource="test-datasource"
+                    insertAsSibling={true}
+                />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+            expect(container.querySelector('span')).not.toBe(null);
+            expect(container.querySelector('span')?.style.position).toBe('absolute');
+        });
+
+        it('Should render components with both insertAsSibling and className', async () => {
+            const { container } = render(
+                <LiveboardEmbed
+                    liveboardId="test-liveboard"
+                    insertAsSibling={true}
+                    className="custom-class"
+                />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+            expect(container.querySelector('span')).not.toBe(null);
+            expect(getIFrameEl(container).classList.contains('custom-class')).toBe(true);
+        });
+    });
+
+    describe('useSpotterAgent', () => {
+        it('Should return an object with sendMessage function', () => {
+            const TestComponent = () => {
+                const spotterAgent = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                expect(typeof spotterAgent).toBe('object');
+                expect(typeof spotterAgent.sendMessage).toBe('function');
+                return <div>Test</div>;
+            };
+
+            render(<TestComponent />);
+        });
+
+        it('Should have proper sendMessage callback structure', () => {
+            const TestComponent = () => {
+                const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                
+                // Test that sendMessage is a function that accepts a string
+                expect(typeof sendMessage).toBe('function');
+                expect(sendMessage.length).toBe(1); // Should accept one parameter
                 
-                const response = await conversationService.sendMessage("What are my sales this month?");
-                expect(response.container).toBe(mockDiv);
-            }
+                return <div>Test</div>;
+            };
+
+            render(<TestComponent />);
         });
 
-        it('Should work as a React component with ref support', () => {
-            const mockSendMessage = jest.fn().mockResolvedValue({
-                container: document.createElement('div'),
-                viz: {}
-            });
+        it('Should return error when service is not initialized', async () => {
+            let sendMessageResult: any;
             
             const TestComponent = () => {
-                const conversationRef = React.useRef(null);
+                const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
                 
-                const handleClick = () => {
-                    if (conversationRef.current) {
-                        conversationRef.current.sendMessage = mockSendMessage;
-                        
-                        conversationRef.current.sendMessage("Test message");
-                    }
-                };
+                // Call sendMessage immediately before service has time to initialize
+                sendMessageResult = sendMessage('test query');
                 
-                return (
-                    <>
-                        <SpotterAgentEmbed
-                            ref={conversationRef}
-                            worksheetId="test-worksheet-id"
-                        />
-                        <button data-testid="test-button" onClick={handleClick}>
-                            Send Message
-                        </button>
-                    </>
-                );
+                return <div>Test</div>;
             };
+
+            render(<TestComponent />);
             
-            const { getByTestId } = render(<TestComponent />);
+            const result = await sendMessageResult;
+            expect(result).toEqual({
+                error: expect.any(Error)
+            });
+            expect(result.error.message).toBe('SpotterAgent not initialized');
+        });
+
+        it('Should call sendMessage and handle async behavior', async () => {
+            let sendMessageFunction: any;
             
-            fireEvent.click(getByTestId('test-button'));
+            const TestComponent = () => {
+                const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                sendMessageFunction = sendMessage;
+                return <div>Test</div>;
+            };
+
+            render(<TestComponent />);
             
-            expect(mockSendMessage).toHaveBeenCalledWith("Test message");
+            // Test that sendMessage is a function
+            expect(typeof sendMessageFunction).toBe('function');
+            
+            // Call sendMessage - should not throw
+            expect(() => {
+                sendMessageFunction('test query');
+            }).not.toThrow();
         });
 
-        it('Should work with the useEmbedRef hook', () => {
-            const mockSendMessage = jest.fn().mockResolvedValue({
-                container: document.createElement('div'),
-                viz: {}
-            });
+        it('Should handle multiple calls to sendMessage', async () => {
+            let sendMessageFunction: any;
             
             const TestComponent = () => {
-                const embedRef = useEmbedRef<typeof SpotterAgentEmbed>();
-                
-                const handleClick = () => {
-                    if (embedRef.current) {
-                        const service = embedRef.current as unknown as { 
-                            sendMessage: typeof mockSendMessage 
-                        };
-                        
-                        service.sendMessage = mockSendMessage;
-                        
-                        service.sendMessage("Test with useEmbedRef");
-                    }
-                };
-                
-                return (
-                    <>
-                        <SpotterAgentEmbed
-                            ref={embedRef}
-                            worksheetId="test-worksheet-id"
-                        />
-                        <button data-testid="use-embed-ref-button" onClick={handleClick}>
-                            Send with useEmbedRef
-                        </button>
-                    </>
-                );
+                const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                sendMessageFunction = sendMessage;
+                return <div>Test</div>;
             };
+
+            render(<TestComponent />);
             
-            const { getByTestId } = render(<TestComponent />);
+            // Multiple calls should not throw
+            expect(() => {
+                sendMessageFunction('query 1');
+                sendMessageFunction('query 2');
+                sendMessageFunction('query 3');
+            }).not.toThrow();
+        });
+
+        it('Should handle config object changes', () => {
+            const TestComponent = ({ config }: { config: any }) => {
+                const { sendMessage } = useSpotterAgent(config);
+                expect(sendMessage).toBeDefined();
+                return <div>Test</div>;
+            };
+
+            const config1 = { worksheetId: 'test1' };
+            const config2 = { worksheetId: 'test2' };
             
-            fireEvent.click(getByTestId('use-embed-ref-button'));
+            const { rerender } = render(<TestComponent config={config1} />);
             
-            expect(mockSendMessage).toHaveBeenCalledWith("Test with useEmbedRef");
+            // Should not throw when config changes
+            expect(() => {
+                rerender(<TestComponent config={config2} />);
+            }).not.toThrow();
         });
 
-        it('Should work with the className prop', async () => {
-            let capturedInstance: any = null;
-            
+        it('Should handle unmounting without errors', () => {
             const TestComponent = () => {
-                const embedRef = useEmbedRef<typeof SpotterAgentEmbed>();
-                
-                React.useEffect(() => {
-                    capturedInstance = embedRef.current;
-                    
-                    if (capturedInstance) {
-                        const mockConversationService = {
-                            sendMessage: jest.fn().mockResolvedValue({
-                                data: {
-                                    sessionId: 'test-session',
-                                    genNo: 1,
-                                    stateKey: {
-                                        transactionId: 'test-transaction',
-                                        generationNumber: 1
-                                    }
-                                }
-                            })
-                        };
-                        (capturedInstance as any).conversationService = mockConversationService;
-                    }
-                }, []);
-                
-                return (
-                    <SpotterAgentEmbed
-                        ref={embedRef}
-                        worksheetId="test-worksheet-id"
-                        className="embedClass"
-                    />
-                );
+                const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                expect(sendMessage).toBeDefined();
+                return <div>Test</div>;
             };
+
+            const { unmount } = render(<TestComponent />);
             
-            render(<TestComponent />);
+            // Should not throw when unmounting
+            expect(() => {
+                unmount();
+            }).not.toThrow();
+        });
+
+        it('Should create stable hook structure', () => {
+            let hookResult1: any, hookResult2: any;
             
-            expect(capturedInstance).not.toBeNull();
+            const TestComponent = ({ counter }: { counter: number }) => {
+                const result = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                
+                if (counter === 1) {
+                    hookResult1 = result;
+                } else {
+                    hookResult2 = result;
+                }
+                
+                return <div>Test</div>;
+            };
+
+            const { rerender } = render(<TestComponent counter={1} />);
+            rerender(<TestComponent counter={2} />);
             
-            if (capturedInstance) {
-                const result = await capturedInstance.sendMessage("test");
-                expect(result.container.className).toBe("embedClass");
-            }
+            // Both should have same structure
+            expect(hookResult1).toEqual({ sendMessage: expect.any(Function) });
+            expect(hookResult2).toEqual({ sendMessage: expect.any(Function) });
         });
+
+                 it('Should handle different worksheet IDs', () => {
+             const TestComponent = ({ worksheetId }: { worksheetId: string }) => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId });
+                 expect(sendMessage).toBeDefined();
+                 return <div>Test</div>;
+             };
+
+             const { rerender } = render(<TestComponent worksheetId="worksheet1" />);
+             
+             // Should handle different worksheet IDs
+             expect(() => {
+                 rerender(<TestComponent worksheetId="worksheet2" />);
+                 rerender(<TestComponent worksheetId="worksheet3" />);
+             }).not.toThrow();
+         });
+
+         it('Should handle empty query strings', () => {
+             let sendMessageFunction: any;
+             
+             const TestComponent = () => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                 sendMessageFunction = sendMessage;
+                 return <div>Test</div>;
+             };
+
+             render(<TestComponent />);
+             
+             // Should handle empty strings
+             expect(() => {
+                 sendMessageFunction('');
+                 sendMessageFunction('   ');
+             }).not.toThrow();
+         });
+
+         it('Should handle complex config objects', () => {
+             const complexConfig = {
+                 worksheetId: 'test-worksheet',
+                 hiddenActions: [Action.ReportError],
+                 className: 'test-class',
+                 searchOptions: {
+                     searchQuery: 'test query'
+                 }
+             };
+
+             const TestComponent = () => {
+                 const { sendMessage } = useSpotterAgent(complexConfig);
+                 expect(sendMessage).toBeDefined();
+                 return <div>Test</div>;
+             };
+
+             // Should not throw with complex config
+             expect(() => {
+                 render(<TestComponent />);
+             }).not.toThrow();
+         });
+
+         it('Should maintain function identity across re-renders with same config', () => {
+             let sendMessage1: any, sendMessage2: any;
+             
+             const TestComponent = ({ forceRender }: { forceRender: number }) => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                 
+                 if (forceRender === 1) {
+                     sendMessage1 = sendMessage;
+                 } else {
+                     sendMessage2 = sendMessage;
+                 }
+                 
+                 return <div>Test</div>;
+             };
+
+             const { rerender } = render(<TestComponent forceRender={1} />);
+             rerender(<TestComponent forceRender={2} />);
+             
+             // Functions should exist
+             expect(sendMessage1).toBeDefined();
+             expect(sendMessage2).toBeDefined();
+             expect(typeof sendMessage1).toBe('function');
+             expect(typeof sendMessage2).toBe('function');
+         });
+
+         it('Should handle sendMessage calls with null service ref', async () => {
+             let capturedSendMessage: any;
+             
+             const TestComponent = () => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                 capturedSendMessage = sendMessage;
+                 return <div>Test</div>;
+             };
+
+             const { unmount } = render(<TestComponent />);
+             
+             // Unmount to trigger cleanup
+             unmount();
+             
+             // Now call sendMessage after unmount - should return error
+             const result = await capturedSendMessage('test query');
+             expect(result).toEqual({
+                 error: expect.any(Error)
+             });
+         });
+
+         it('Should test service ref cleanup on config change', () => {
+             const TestComponent = ({ worksheetId }: { worksheetId: string }) => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId });
+                 expect(sendMessage).toBeDefined();
+                 return <div>Test</div>;
+             };
+
+             const { rerender } = render(<TestComponent worksheetId="worksheet1" />);
+             
+             // This should trigger the cleanup and create new service
+             rerender(<TestComponent worksheetId="worksheet2" />);
+             
+             // Should still work after rerender
+             expect(() => {
+                 rerender(<TestComponent worksheetId="worksheet3" />);
+             }).not.toThrow();
+         });
+
+         it('Should test different config variations', () => {
+             const configs = [
+                 { worksheetId: 'test1' },
+                 { worksheetId: 'test2', hiddenActions: [Action.ReportError] },
+                 { worksheetId: 'test3', className: 'test-class' },
+                 { worksheetId: 'test4', searchOptions: { searchQuery: 'test' } }
+             ];
+
+             configs.forEach((config, index) => {
+                 const TestComponent = () => {
+                     const { sendMessage } = useSpotterAgent(config);
+                     expect(sendMessage).toBeDefined();
+                     return <div>Test {index}</div>;
+                 };
+
+                 expect(() => {
+                     const { unmount } = render(<TestComponent />);
+                     unmount();
+                 }).not.toThrow();
+             });
+         });
+
+         it('Should handle rapid config changes', () => {
+             const TestComponent = ({ worksheetId }: { worksheetId: string }) => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId });
+                 expect(sendMessage).toBeDefined();
+                 return <div>Test</div>;
+             };
+
+             const { rerender } = render(<TestComponent worksheetId="worksheet1" />);
+             
+             // Rapid config changes to test cleanup logic
+             for (let i = 2; i <= 10; i++) {
+                 rerender(<TestComponent worksheetId={`worksheet${i}`} />);
+             }
+             
+             // Should still work after many changes
+             expect(() => {
+                 rerender(<TestComponent worksheetId="final-worksheet" />);
+             }).not.toThrow();
+         });
+
+         it('Should handle sendMessage with different query types', () => {
+             let sendMessageFunction: any;
+             
+             const TestComponent = () => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId: 'test-worksheet' });
+                 sendMessageFunction = sendMessage;
+                 return <div>Test</div>;
+             };
+
+             render(<TestComponent />);
+             
+             // Test different query types
+             const queries = [
+                 'simple query',
+                 'query with numbers 123',
+                 'query with special chars !@#$%',
+                 'very long query that might test different code paths in the system when processing',
+                 '',
+                 '   whitespace   ',
+                 'null',
+                 'undefined'
+             ];
+
+             queries.forEach(query => {
+                 expect(() => {
+                     sendMessageFunction(query);
+                 }).not.toThrow();
+             });
+         });
+
+         it('Should handle service ref cleanup when it already exists', () => {
+             const TestComponent = ({ worksheetId }: { worksheetId: string }) => {
+                 const { sendMessage } = useSpotterAgent({ worksheetId });
+                 expect(sendMessage).toBeDefined();
+                 return <div>Test</div>;
+             };
+
+             const { rerender } = render(<TestComponent worksheetId="worksheet1" />);
+             
+             // This should trigger the "if (serviceRef.current)" branch in useEffect
+             rerender(<TestComponent worksheetId="worksheet1" />);
+             rerender(<TestComponent worksheetId="worksheet2" />);
+             rerender(<TestComponent worksheetId="worksheet3" />);
+             
+             // Multiple rapid changes should exercise the cleanup logic
+             for (let i = 0; i < 5; i++) {
+                 rerender(<TestComponent worksheetId={`worksheet${i}`} />);
+             }
+         });
+
+         it('Should test various config combinations to hit all branches', () => {
+             const testConfigs = [
+                 { worksheetId: 'test1' },
+                 { worksheetId: 'test2', className: 'custom-class' },
+                 { worksheetId: 'test3', hiddenActions: [Action.ReportError] },
+                 { worksheetId: 'test4', searchOptions: { searchQuery: 'test' } },
+                 { worksheetId: 'test5', insertAsSibling: true },
+                 { worksheetId: 'test6', insertAsSibling: false },
+             ];
+
+             testConfigs.forEach((config, index) => {
+                 const TestComponent = () => {
+                     const { sendMessage } = useSpotterAgent(config);
+                     expect(sendMessage).toBeDefined();
+                     return <div>Test {index}</div>;
+                 };
+
+                 const { unmount } = render(<TestComponent />);
+                 unmount();
+             });
+         });
     });
 
-    describe('PreRenderedLiveboardEmbed', () => {
-        it('should preRender the liveboard ', async () => {
-            const preRenderId = 'tsEmbed-pre-render-wrapper-test';
+    describe('Component Props and Functions', () => {
+        it('Should have PreRenderedLiveboardEmbed component', () => {
+            expect(PreRenderedLiveboardEmbed).toBeDefined();
+            expect(typeof PreRenderedLiveboardEmbed).toBe('object');
+        });
 
-            const { container } = render(
-                <PreRenderedLiveboardEmbed
-                    className="embedClass"
-                    preRenderId="test"
-                    liveboardId="libId"
-                />,
-            );
+        it('Should have useInit hook', () => {
+            expect(typeof useInit).toBe('function');
+        });
 
-            await waitFor(() => getIFrameEl());
-            const preRenderWrapper = document.body.querySelector(`#${preRenderId}`) as HTMLDivElement;
+        it('Should test basic component factory patterns', () => {
+            // Test that components can be created without errors
+            expect(() => {
+                const TestComponent = () => <div>Test</div>;
+                render(<TestComponent />);
+            }).not.toThrow();
+        });
+    });
 
-            expect(preRenderWrapper).toBeInstanceOf(HTMLDivElement);
-            expect((preRenderWrapper as HTMLDivElement).childElementCount).toBe(1);
+    describe('Hook Coverage', () => {
+        it('Should have useInit function available', () => {
+            expect(typeof useInit).toBe('function');
+        });
 
-            const preRenderChildId = 'tsEmbed-pre-render-child-test';
-            const preRenderChild = document.body.querySelector(`#${preRenderChildId}`);
-            expect(preRenderWrapper.children[0]).toBe(preRenderChild);
+        it('Should test useInit hook basic functionality', () => {
+            const TestComponent = () => {
+                const authEE = useInit({ 
+                    thoughtSpotHost: 'localhost',
+                    authType: AuthType.None 
+                });
+                expect(authEE).toBeDefined();
+                expect(authEE.current).toBeDefined();
+                return <div>Test</div>;
+            };
 
-            (window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
-                disconnect: jest.fn(),
-                observe: jest.fn(),
-                unobserve: jest.fn(),
-            }));
-            const { container: libContainer } = render(
-                <LiveboardEmbed
-                    className="embedClass"
-                    preRenderId="test"
-                    liveboardId="libId"
-                />,
-            );
+            render(<TestComponent />);
+        });
 
-            expect(preRenderWrapper.style.opacity).toBe('');
-            expect(preRenderWrapper.style.pointerEvents).toBe('');
-            expect(preRenderWrapper.style.zIndex).toBe('');
+        it('Should handle useInit with different config changes', () => {
+            const TestComponent = ({ host }: { host: string }) => {
+                const authEE = useInit({ 
+                    thoughtSpotHost: host,
+                    authType: AuthType.None 
+                });
+                expect(authEE).toBeDefined();
+                return <div>Test</div>;
+            };
+
+            const { rerender } = render(<TestComponent host="localhost" />);
+            
+            // Change config to test useDeepCompareEffect
+            rerender(<TestComponent host="localhost2" />);
+            rerender(<TestComponent host="localhost3" />);
+        });
+
+        it('Should test useInit with complex config objects', () => {
+            const TestComponent = () => {
+                const authEE = useInit({ 
+                    thoughtSpotHost: 'localhost',
+                    authType: AuthType.None,
+                    suppressNoCookieAccessAlert: true,
+                    suppressErrorAlerts: true
+                });
+                expect(authEE).toBeDefined();
+                return <div>Test</div>;
+            };
+
+            render(<TestComponent />);
         });
     });
 });