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

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

@@ -0,0 +1,185 @@
+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 runChatErrorSharedTests(ChatErrorComponent: 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,
+                    <ChatErrorComponent />,
+                    onAfterInit
+                )
+            );
+
+    it('should render', () => {
+        render(() => {
+            cy.spy(chatUiStore, 'recover').as('recoverSpy');
+            chatUiStore.setError(
+                'Custom error message Custom error message Custom error message Custom error message Custom error message Custom error message Custom error message',
+                {
+                    title: 'Custom error title',
+                    recoverStrategy: {
+                        recoverButtonTitle: 'Recover button',
+                    },
+                    data: { customData: 'Custom data' },
+                }
+            );
+        });
+
+        ChatUiSelectors.chatError.should('contain.text', 'Custom error title');
+        ChatUiSelectors.chatErrorText.should(
+            'have.text',
+            'Custom error message Custom error message Custom error message Custom error message Custom error message Custom error message Custom error message'
+        );
+        ChatUiSelectors.chatErrorRecover.should('have.text', 'Recover button').click();
+        cy.get('@recoverSpy').should('have.been.calledOnce');
+    });
+
+    it('should not render when no error is set', () => {
+        render();
+        ChatUiSelectors.chatError.should('not.exist');
+    });
+
+    it('should render error without recover button when no recover strategy is provided', () => {
+        render(() => {
+            chatUiStore.setError('Error without recovery', {
+                title: 'Non-recoverable error',
+            });
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatError.should('contain.text', 'Non-recoverable error');
+        ChatUiSelectors.chatErrorText.should('have.text', 'Error without recovery');
+        ChatUiSelectors.chatErrorRecover.should('not.exist');
+    });
+
+    it('should render with default title when no title is provided', () => {
+        render(() => {
+            chatUiStore.setError('Error message without title');
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatErrorText.should('have.text', 'Error message without title');
+    });
+
+    it('should handle multiline error messages correctly', () => {
+        render(() => {
+            chatUiStore.setError('First line\nSecond line\nThird line', {
+                title: 'Multiline Error',
+            });
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatError.should('contain.text', 'Multiline Error');
+        ChatUiSelectors.chatErrorText.should('contain.text', 'First line');
+        ChatUiSelectors.chatErrorText.should('contain.text', 'Second line');
+        ChatUiSelectors.chatErrorText.should('contain.text', 'Third line');
+    });
+
+    it('should update error content when error changes', () => {
+        render(() => {
+            chatUiStore.setError('First error', { title: 'First Title' });
+        });
+
+        ChatUiSelectors.chatError.should('contain.text', 'First Title');
+        ChatUiSelectors.chatErrorText.should('have.text', 'First error');
+
+        cy.then(() => {
+            chatUiStore.setError('Second error', { title: 'Second Title' });
+        });
+
+        ChatUiSelectors.chatError.should('contain.text', 'Second Title');
+        ChatUiSelectors.chatErrorText.should('have.text', 'Second error');
+    });
+
+    it('should hide error when error is cleared', () => {
+        render(() => {
+            chatUiStore.setError('Temporary error', { title: 'Error' });
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+
+        cy.then(() => {
+            chatUiStore.resetError(chatUiStore.status);
+        });
+
+        ChatUiSelectors.chatError.should('not.exist');
+    });
+
+    it('should call recover method when recover button is clicked multiple times', () => {
+        render(() => {
+            cy.spy(chatUiStore, 'recover').as('recoverSpy');
+            chatUiStore.setError('Recoverable error', {
+                title: 'Connection Error',
+                recoverStrategy: {
+                    recoverButtonTitle: 'Retry Connection',
+                },
+            });
+        });
+
+        ChatUiSelectors.chatErrorRecover.should('have.text', 'Retry Connection');
+        ChatUiSelectors.chatErrorRecover.click();
+        cy.get('@recoverSpy').should('have.been.calledOnce');
+
+        ChatUiSelectors.chatErrorRecover.click();
+        cy.get('@recoverSpy').should('have.been.calledTwice');
+    });
+
+    it('should render with custom recover button text', () => {
+        render(() => {
+            chatUiStore.setError('Network timeout', {
+                title: 'Connection Failed',
+                recoverStrategy: {
+                    recoverButtonTitle: 'Try Again Now',
+                },
+            });
+        });
+
+        ChatUiSelectors.chatErrorRecover.should('have.text', 'Try Again Now');
+        ChatUiSelectors.chatErrorRecover.should('be.visible');
+    });
+
+    it('should maintain error data when provided', () => {
+        render(() => {
+            chatUiStore.setError('Error with data', {
+                title: 'Data Error',
+                data: { errorCode: 500, timestamp: '2023-10-01' },
+            });
+        });
+
+        ChatUiSelectors.chatError.should('be.visible');
+        ChatUiSelectors.chatError.should('contain.text', 'Data Error');
+        ChatUiSelectors.chatErrorText.should('have.text', 'Error with data');
+
+        // Verify the error data is accessible through the store
+        cy.then(() => {
+            expect(chatUiStore.error?.data).to.deep.equal({
+                errorCode: 500,
+                timestamp: '2023-10-01',
+            });
+        });
+    });
+}

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

@@ -0,0 +1,182 @@
+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';
+
+interface ChatInputFileSharedTestsOptions {
+    isAnvil2?: boolean;
+}
+
+export function runChatInputFileSharedTests(
+    ChatInputFileComponent: FC,
+    options: ChatInputFileSharedTestsOptions = {}
+) {
+    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,
+                    <ChatInputFileComponent />,
+                    onAfterInit
+                )
+            );
+
+    const selectFile = (fileName: string, mimeType = 'text/plain', contents = '') => {
+        cy.get('input[type="file"]').selectFile(
+            {
+                contents: Cypress.Buffer.from(contents),
+                fileName,
+                mimeType,
+                lastModified: Date.now(),
+            },
+            { force: true }
+        );
+    };
+
+    it('should render the upload button when no file is selected', () => {
+        render(() => {
+            chatUiStore.setFilePickerEnabled(true);
+        });
+
+        ChatUiSelectors.chatUploadFile.should('be.visible');
+
+        if (options.isAnvil2) {
+            cy.contains('e.g. Screenshot of issue').should('be.visible');
+        }
+    });
+
+    it('should not render when file picker is disabled', () => {
+        render(() => {
+            chatUiStore.setFilePickerEnabled(false);
+        });
+
+        ChatUiSelectors.chatUploadFile.should('not.exist');
+    });
+
+    it('should display the file name and action buttons after selecting a file', () => {
+        render(() => {
+            chatUiStore.setFilePickerEnabled(true);
+        });
+
+        const fileName = 'test-image.png';
+        selectFile(fileName);
+
+        // Verify the file name is displayed
+        ChatUiSelectors.chatUploadFile.should('be.visible').and('contain', fileName);
+        if (options.isAnvil2) {
+            ChatUiSelectors.chatUploadFileEdit.should('be.visible');
+            ChatUiSelectors.chatUploadFileDelete.should('be.visible');
+            ChatUiSelectors.chatUploadFileBtn.should('not.exist');
+        }
+
+        // Verify the store received the file
+        cy.wrap(chatUiStore).its('file.displayName').should('eq', fileName);
+    });
+
+    if (options.isAnvil2) {
+        it('should allow replacing an already selected file', () => {
+            const initialFileName = 'test-image.png';
+            const newFileName = 'another-document.pdf';
+
+            render(() => {
+                chatUiStore.setFilePickerEnabled(true);
+            });
+
+            selectFile(initialFileName);
+            ChatUiSelectors.chatUploadFileName.should('be.visible').and('contain', initialFileName);
+            cy.wrap(chatUiStore).its('file.displayName').should('eq', initialFileName);
+
+            selectFile(newFileName, 'application/pdf');
+            ChatUiSelectors.chatUploadFileName.should('be.visible').and('contain', newFileName);
+            cy.wrap(chatUiStore).its('file.displayName').should('eq', newFileName);
+        });
+
+        it('should allow deleting a selected file', () => {
+            const fileName = 'test-image.png';
+
+            render(() => {
+                chatUiStore.setFilePickerEnabled(true);
+            });
+
+            selectFile(fileName);
+
+            // Verify the file name is displayed
+            ChatUiSelectors.chatUploadFileName.should('be.visible').and('contain', fileName);
+
+            // Click the delete button
+            ChatUiSelectors.chatUploadFileDelete.click();
+
+            // Verify the file input is reset
+            ChatUiSelectors.chatUploadFile.should('be.visible');
+            ChatUiSelectors.chatUploadFileName.should('not.exist');
+            ChatUiSelectors.chatUploadFileEdit.should('not.exist');
+            ChatUiSelectors.chatUploadFileDelete.should('not.exist');
+
+            // Verify the store no longer has a file
+            cy.wrap(chatUiStore).its('file').should('be.undefined');
+        });
+
+        it('should handle file selection with different file types', () => {
+            render(() => {
+                chatUiStore.setFilePickerEnabled(true);
+            });
+
+            // Test PDF file
+            const pdfFileName = 'test-document.pdf';
+            selectFile(pdfFileName, 'application/pdf', 'test file content');
+
+            ChatUiSelectors.chatUploadFileName.should('contain', pdfFileName);
+            cy.wrap(chatUiStore).its('file.displayName').should('eq', pdfFileName);
+
+            // Replace with image file
+            const imageFileName = 'test-image.jpg';
+            selectFile(imageFileName, 'image/jpeg');
+
+            ChatUiSelectors.chatUploadFileName.should('contain', imageFileName);
+            cy.wrap(chatUiStore).its('file.displayName').should('eq', imageFileName);
+        });
+
+        it('should maintain file picker state during interactions', () => {
+            render(() => {
+                chatUiStore.setFilePickerEnabled(true);
+            });
+
+            const fileName = 'test-file.txt';
+            selectFile(fileName);
+
+            // Verify file is selected
+            ChatUiSelectors.chatUploadFileName.should('be.visible').and('contain', fileName);
+
+            // Edit button should be visible and functional
+            ChatUiSelectors.chatUploadFileEdit.should('be.visible');
+
+            // Delete and re-upload
+            ChatUiSelectors.chatUploadFileDelete.click();
+            ChatUiSelectors.chatUploadFile.should('be.visible');
+
+            // Select file again
+            selectFile(fileName);
+            ChatUiSelectors.chatUploadFileName.should('be.visible').and('contain', fileName);
+        });
+    }
+}

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