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

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

@@ -1,99 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,156 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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');
-    });
-};