@servicetitan/titan-chatbot-ui-cypress 3.1.0 → 3.1.1

package/src/tests/titan-chat-ui/chat-messages.shared-tests.tsx

@@ -0,0 +1,156 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatMessageModelBase,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+    mockChatMessageModelText,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+export function runChatMessagesSharedTests(
+    ChatMessagesComponent: FC<{
+        className?: string;
+        messages: ChatMessageModelBase[];
+        showTypingIndicator?: boolean;
+    }>
+) {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+        // cy.clock(new Date('2023-10-01T10:10:00Z').getTime());
+    });
+
+    const render = (messages: ChatMessageModelBase[], onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <ChatMessagesComponent messages={messages} />,
+                    onAfterInit
+                )
+            );
+
+    it('should render default chat', () => {
+        render([]);
+
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatMessage.should('have.length', 0);
+    });
+
+    it('should render several consecutive agent messages without extra avatars', () => {
+        render([
+            mockChatMessageModelText(true, {
+                id: 'id1',
+                timestamp: new Date('2023-01-01T10:10:00Z'),
+                message: 'Hello, this is the first message',
+            }),
+            mockChatMessageModelText(true, {
+                id: 'id2',
+                message: 'Hello, this is the second message. '.repeat(5).trim(),
+                timestamp: new Date('2023-01-01T10:10:59.999Z'),
+            }),
+            mockChatMessageModelText(true, {
+                id: 'id3',
+                message: 'Hello, this is the third message',
+                timestamp: new Date('2023-01-01T10:11:00Z'),
+            }),
+            mockChatMessageModelText(true, {
+                id: 'id4',
+                message: 'Hello, this is the forth message',
+                timestamp: new Date('2023-01-01T10:11:01Z'),
+            }),
+            mockChatMessageModelText(false, {
+                id: 'id11',
+                timestamp: new Date('2023-01-01T11:10:00Z'),
+                message: 'Hello, this is the first message',
+            }),
+            mockChatMessageModelText(false, {
+                id: 'id22',
+                message: 'Hello, this is the second message',
+                timestamp: new Date('2023-01-01T11:11:00Z'),
+            }),
+            mockChatMessageModelText(false, {
+                id: 'id33',
+                message: 'Hello, this is the third message',
+                timestamp: new Date('2023-01-01T11:12:00Z'),
+            }),
+            mockChatMessageModelText(false, {
+                id: 'id44',
+                message: 'Hello, this is the forth message',
+                timestamp: new Date('2023-01-01T11:12:01Z'),
+            }),
+        ]);
+
+        const getTimestamp = (i: number) =>
+            ChatUiSelectors.chatMessage
+                .eq(i)
+                .find(`[data-cy="${ChatUiSelectors.cy.chatMessageFooter}"]`);
+
+        ChatUiSelectors.chatMessageAgent.should('have.length', 4);
+        ChatUiSelectors.chatMessageUser.should('have.length', 4);
+
+        // Agent avatar should be visible only for the first message in group
+        const getAvatar = (i: number) =>
+            ChatUiSelectors.chatMessageAgent
+                .find(`[data-cy="${ChatUiSelectors.cy.chatAvatar}"]`)
+                .eq(i);
+        getAvatar(0).should('be.visible');
+        getAvatar(1).should('not.exist');
+        getAvatar(2).should('not.exist');
+        getAvatar(3).should('not.exist');
+
+        // Footer with date should be visible only for the different formatted timestamps
+        getTimestamp(0).should('not.exist');
+        getTimestamp(1).should('be.visible').should('contain.text', 'agent • 10:10 AM');
+        getTimestamp(2).should('not.exist');
+        getTimestamp(3).should('be.visible').should('contain.text', 'agent • 10:11 AM');
+        getTimestamp(4).should('be.visible').should('contain.text', '11:10 AM');
+        getTimestamp(5).should('be.visible').should('contain.text', '11:11 AM');
+        getTimestamp(6).should('not.exist');
+        getTimestamp(7).should('be.visible').should('contain.text', '11:12 AM');
+    });
+
+    it('should render empty state when no messages', () => {
+        render([]);
+
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatMessage.should('have.length', 0);
+    });
+
+    it('should handle mixed message types correctly', () => {
+        render([
+            mockChatMessageModelText(false, {
+                id: 'user1',
+                timestamp: new Date('2023-01-01T10:00:00Z'),
+                message: 'User message first',
+            }),
+            mockChatMessageModelText(true, {
+                id: 'agent1',
+                timestamp: new Date('2023-01-01T10:01:00Z'),
+                message: 'Agent response',
+            }),
+            mockChatMessageModelText(false, {
+                id: 'user2',
+                timestamp: new Date('2023-01-01T10:02:00Z'),
+                message: 'User follow-up',
+            }),
+        ]);
+
+        ChatUiSelectors.chatMessage.should('have.length', 3);
+        ChatUiSelectors.chatMessageUser.should('have.length', 2);
+        ChatUiSelectors.chatMessageAgent.should('have.length', 1);
+    });
+}

package/src/tests/titan-chat-ui/chat-notifications.shared-tests.tsx

@@ -0,0 +1,153 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatRunState,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+export const runChatNotificationsTests = (ChatNotifications: FC) => {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+    });
+
+    const render = (onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <ChatNotifications />,
+                    onAfterInit
+                )
+            );
+
+    it('should render notifications container', () => {
+        render();
+        ChatUiSelectors.chatNotifications.should('exist');
+    });
+
+    it('should show timer when timer is set and no error', () => {
+        render(() => {
+            chatUiStore.setTimer({
+                secondsLeft: 30,
+                secondsTotal: 60,
+            });
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chatNotifications.should('be.visible');
+        ChatUiSelectors.chatTimer.should('be.visible');
+        ChatUiSelectors.chatError.should('not.exist');
+    });
+
+    it('should show error when error is present', () => {
+        render(() => {
+            chatUiStore.setError('Test error message');
+        });
+
+        ChatUiSelectors.chatNotifications.should('be.visible');
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatTimer.should('not.exist');
+    });
+
+    it('should hide timer when error is present', () => {
+        render(() => {
+            chatUiStore.setTimer({
+                secondsLeft: 30,
+                secondsTotal: 60,
+            });
+            chatUiStore.setError('Test error message');
+        });
+
+        ChatUiSelectors.chatNotifications.should('be.visible');
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatTimer.should('not.exist');
+    });
+
+    it('should be empty when no timer and no error', () => {
+        render(() => {
+            chatUiStore.resetError(ChatRunState.Started);
+            chatUiStore.setTimer(undefined);
+        });
+
+        ChatUiSelectors.chatNotifications.should('exist');
+        ChatUiSelectors.chatTimer.should('not.exist');
+        ChatUiSelectors.chatError.should('not.exist');
+    });
+
+    it('should update when timer is added', () => {
+        render();
+
+        ChatUiSelectors.chatTimer.should('not.exist');
+
+        cy.then(() => {
+            chatUiStore.setTimer({
+                secondsLeft: 30,
+                secondsTotal: 60,
+            });
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chatTimer.should('be.visible');
+    });
+
+    it('should update when error is added', () => {
+        render();
+
+        ChatUiSelectors.chatError.should('not.exist');
+
+        cy.then(() => {
+            chatUiStore.setError('New error message');
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+    });
+
+    it('should switch from timer to error when error occurs', () => {
+        render(() => {
+            chatUiStore.setTimer({
+                secondsLeft: 30,
+                secondsTotal: 60,
+            });
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chatTimer.should('be.visible');
+        ChatUiSelectors.chatError.should('not.exist');
+
+        cy.then(() => {
+            chatUiStore.setError('Error occurred');
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatTimer.should('not.exist');
+    });
+
+    it('should handle error recovery', () => {
+        render(() => {
+            chatUiStore.setError('Test error');
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+
+        cy.then(() => {
+            chatUiStore.resetError(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chatError.should('not.exist');
+    });
+};

package/src/tests/titan-chat-ui/chat-timer.shared-tests.tsx

@@ -0,0 +1,106 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+export const runChatTimerTests = (ChatTimer: FC) => {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+    });
+
+    const render = (onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(chatUiStore, chatUiBackendStore, <ChatTimer />, onAfterInit)
+            );
+
+    it('should not render when timer is not set', () => {
+        render();
+        ChatUiSelectors.chatTimer.should('not.exist');
+    });
+
+    it('should render timer when timer is set', () => {
+        render(() => {
+            chatUiStore.setTimer({ secondsLeft: 30, secondsTotal: 60 });
+        });
+
+        ChatUiSelectors.chatTimer.should('be.visible');
+        ChatUiSelectors.chatTimer.should('contain.text', 'Chat inactive');
+        ChatUiSelectors.chatTimer.should(
+            'contain.text',
+            'Are you still there? Please respond within'
+        );
+        ChatUiSelectors.chatTimer.should('contain.text', '30s');
+        ChatUiSelectors.chatTimer.should('contain.text', 'or this chat will time out.');
+    });
+
+    it('should display correct seconds left', () => {
+        render(() => {
+            chatUiStore.setTimer({ secondsLeft: 45, secondsTotal: 60 });
+        });
+
+        ChatUiSelectors.chatTimer.should('contain.text', '45s');
+    });
+
+    it('should render restart button with correct text', () => {
+        render(() => {
+            chatUiStore.setTimer({ secondsLeft: 30, secondsTotal: 60 });
+        });
+
+        ChatUiSelectors.chatTimerRestart.should('be.visible');
+        ChatUiSelectors.chatTimerRestart.should('contain.text', "I'm here");
+    });
+
+    it('should call restartTimers when restart button is clicked', () => {
+        render(() => {
+            chatUiStore.setTimer({ secondsLeft: 30, secondsTotal: 60 });
+            cy.spy(chatUiStore, 'restartTimers').as('restartTimersSpy');
+        });
+
+        ChatUiSelectors.chatTimerRestart.click();
+        cy.get('@restartTimersSpy').should('have.been.called');
+    });
+
+    it('should update display when timer seconds change', () => {
+        render(() => {
+            chatUiStore.setTimer({ secondsLeft: 30, secondsTotal: 60 });
+        });
+
+        ChatUiSelectors.chatTimer.should('contain.text', '30s');
+
+        // Update timer value and wait for re-render
+        cy.then(() => {
+            chatUiStore.setTimer({ secondsLeft: 15, secondsTotal: 60 });
+        });
+        ChatUiSelectors.chatTimer.should('contain.text', '15s');
+    });
+
+    it('should hide timer when timer is cleared', () => {
+        render(() => {
+            chatUiStore.setTimer({ secondsLeft: 30, secondsTotal: 60 });
+        });
+
+        ChatUiSelectors.chatTimer.should('be.visible');
+
+        // Clear timer
+        cy.then(() => {
+            chatUiStore.setTimer();
+        });
+        ChatUiSelectors.chatTimer.should('not.exist');
+    });
+};

package/src/tests/titan-chat-ui/chat.shared-tests.tsx

@@ -0,0 +1,158 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatCustomizations,
+    ChatRunState,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { ComponentType } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface IChatProps {
+    className?: string;
+    customizations?: ChatCustomizations;
+}
+
+export function runChatSharedTests(ChatComponent: ComponentType<IChatProps>) {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+    });
+
+    const render = (props?: IChatProps, onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <ChatComponent {...props} />,
+                    onAfterInit
+                )
+            );
+
+    it('should render chat component with default state', () => {
+        render();
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chat.should('be.visible');
+    });
+
+    it('should render loading component when chat is starting', () => {
+        render(undefined, () => {
+            chatUiStore.setStatus(ChatRunState.Initializing);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatConnecting.should('exist');
+        ChatUiSelectors.chatMessages.should('not.exist');
+        ChatUiSelectors.chatInput.should('not.exist');
+    });
+
+    it('should render chat messages and input when not starting', () => {
+        render(undefined, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatConnecting.should('not.exist');
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatInput.should('exist');
+        ChatUiSelectors.chatNotifications.should('exist');
+    });
+
+    it('should apply custom className when provided', () => {
+        const customClass = 'custom-chat-class';
+        render({ className: customClass });
+
+        ChatUiSelectors.chat.should('have.class', customClass);
+    });
+
+    it('should render custom loading component when provided', () => {
+        const customLoadingComponent = <div data-cy="custom-loading">Custom Loading</div>;
+        const customizations: ChatCustomizations = {
+            loadingComponent: customLoadingComponent,
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Initializing);
+        });
+
+        cy.get('[data-cy="custom-loading"]').should('exist');
+        cy.get('[data-cy="custom-loading"]').should('contain.text', 'Custom Loading');
+        ChatUiSelectors.chatConnecting.should('not.exist');
+    });
+
+    it('should render custom footer component when provided', () => {
+        const customFooterComponent = <div data-cy="custom-footer">Custom Footer</div>;
+        const customizations: ChatCustomizations = {
+            footerComponent: customFooterComponent,
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        cy.get('[data-cy="custom-footer"]').should('exist');
+        cy.get('[data-cy="custom-footer"]').should('contain.text', 'Custom Footer');
+    });
+
+    it('should hide chat input when input is disabled in customizations', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: true,
+            },
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatInput.should('not.exist');
+        ChatUiSelectors.chatUploadFile.should('not.exist');
+    });
+
+    it('should show chat input and upload file when input is enabled', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: false,
+            },
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+            chatUiStore.setFilePickerEnabled(true);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatInput.should('exist');
+        ChatUiSelectors.chatUploadFile.should('exist');
+    });
+
+    it('should set customization context in store when customizations are provided', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: true,
+            },
+        };
+
+        render({ customizations });
+
+        cy.wait(1).then(() => {
+            expect(chatUiStore.customizations).to.deep.equal(customizations);
+        });
+    });
+}