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

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

@@ -0,0 +1,99 @@
+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 function runChatInputSharedTests(ChatInputComponent: 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,
+                    <ChatInputComponent />,
+                    onAfterInit
+                )
+            );
+
+    it('should render chat input', () => {
+        render();
+        ChatUiSelectors.chatInput.should('be.visible');
+        ChatUiSelectors.chatSend.should('be.visible');
+    });
+
+    it('should send message when send button is clicked', () => {
+        render(() => {
+            cy.spy(chatUiStore, 'sendMessageText').as('sendMessageSpy');
+        });
+
+        const text = 'Hello, world! '.repeat(30).trim();
+        ChatUiSelectors.chatInput.type(text, { delay: 0 });
+        cy.wait(1);
+        ChatUiSelectors.chatInput.should('have.value', text);
+        ChatUiSelectors.chatSend.click();
+        ChatUiSelectors.chatInput.should('have.value', '');
+        cy.get('@sendMessageSpy').should('have.been.calledWith', text);
+    });
+
+    it('should send message when Enter key is pressed', () => {
+        render(() => {
+            cy.spy(chatUiStore, 'sendMessageText').as('sendMessageSpy');
+        });
+
+        const text = 'Test message with Enter key';
+        ChatUiSelectors.chatInput.type(text, { delay: 0 });
+        cy.wait(1);
+        ChatUiSelectors.chatInput.type('{enter}');
+        ChatUiSelectors.chatInput.should('have.value', '');
+        cy.get('@sendMessageSpy').should('have.been.calledWith', text);
+    });
+
+    it('should not send empty message', () => {
+        render(() => {
+            cy.spy(chatUiStore, 'sendMessageText').as('sendMessageSpy');
+        });
+
+        ChatUiSelectors.chatInput.type('   ', { delay: 0 });
+        cy.wait(1);
+        ChatUiSelectors.chatSend.click();
+        cy.get('@sendMessageSpy').should('not.have.been.called');
+        ChatUiSelectors.chatInput.should('have.value', '   ');
+    });
+
+    it('should handle long text input', () => {
+        render();
+
+        const longText = 'This is a very long message that exceeds normal length. '.repeat(50);
+        ChatUiSelectors.chatInput.type(longText, { delay: 0 });
+        ChatUiSelectors.chatInput.should('have.value', longText);
+    });
+
+    it('should disable send button when input is empty', () => {
+        render();
+
+        ChatUiSelectors.chatSend.should('be.disabled');
+        ChatUiSelectors.chatInput.type('Some text', { delay: 0 });
+        ChatUiSelectors.chatSend.should('not.be.disabled');
+        ChatUiSelectors.chatInput.clear();
+        ChatUiSelectors.chatSend.should('be.disabled');
+    });
+}

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

@@ -0,0 +1,117 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatCustomizations,
+    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';
+
+interface ChatLogProps {
+    className?: string;
+    customizations?: ChatCustomizations;
+}
+
+export function runChatLogSharedTests(ChatLogComponent: FC<ChatLogProps>) {
+    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 = (
+        className?: string,
+        customizations?: ChatCustomizations,
+        onAfterInit?: () => void
+    ) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <ChatLogComponent className={className} customizations={customizations} />,
+                    onAfterInit
+                )
+            );
+
+    it('should render chat log with titan-chat data-cy attribute', () => {
+        render();
+
+        ChatUiSelectors.chat.should('be.visible');
+        ChatUiSelectors.chatMessages.should('exist');
+    });
+
+    it('should apply custom className', () => {
+        const customClass = 'custom-chat-class';
+        render(customClass);
+
+        ChatUiSelectors.chat.should('have.class', customClass);
+    });
+
+    it('should set customization context on mount', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: true,
+            },
+        };
+
+        render(undefined, customizations);
+
+        ChatUiSelectors.chat.should('be.visible');
+        cy.wait(1).then(() => {
+            expect(chatUiStore.customizations).to.deep.equal(customizations);
+        });
+    });
+
+    it('should display messages from store', () => {
+        render(undefined, undefined, () => {
+            chatUiStore.addMessage(true, 'Hello from agent');
+            chatUiStore.addMessage(false, 'Hello from user');
+        });
+
+        ChatUiSelectors.chatMessage.should('have.length', 3); // 1st message is the welcome message
+    });
+
+    it('should show typing indicator when agent is typing', () => {
+        render(undefined, undefined, () => {
+            chatUiStore.setAgentTyping(true);
+        });
+
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+    });
+
+    it('should hide typing indicator when agent is not typing', () => {
+        render(undefined, undefined, () => {
+            chatUiStore.setAgentTyping(false);
+        });
+
+        ChatUiSelectors.chatMessageTyping.should('not.exist');
+    });
+
+    it('should update customization context when customizations prop changes', () => {
+        const initialCustomizations: ChatCustomizations = {
+            input: {
+                isDisabled: false,
+            },
+        };
+
+        render(undefined, initialCustomizations);
+
+        cy.get('[data-cy="titan-chat"]').should('be.visible');
+
+        // Verify initial customizations are set
+        cy.wrap(null).then(() => {
+            expect(chatUiStore.customizations).to.deep.equal(initialCustomizations);
+        });
+    });
+}

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');
+    });
+};