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

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

@@ -0,0 +1,221 @@
+import { ILog, Log } from '@servicetitan/log-service';
+import { Container, Provider } from '@servicetitan/react-ioc';
+import {
+    ApiClientTitanChat,
+    CHATBOT_API_CLIENT,
+    CHATBOT_CLIENT_SETTINGS,
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+    ChatbotUiBackendStore,
+    ChatbotUiStore,
+    IChatbotApiClient,
+    IChatbotUiBackendStore,
+    IChatbotUiStore,
+    Models,
+} from '@servicetitan/titan-chatbot-api';
+import { mount } from 'cypress/react';
+import { FC, ReactElement, useMemo } from 'react';
+import { CypressMocks } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+const ChatbotBaseUrl = 'https://chatbot-api.example.com/base/url';
+const ChatbotVersion = 2;
+
+const initializeTitanChatbotContainer = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<ILog>(Log).to(CypressMocks.LogMock).inSingletonScope();
+    container.bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
+    container
+        .bind<IChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatbotUiBackendStore)
+        .inSingletonScope();
+
+    // Set up Helpcenter API client
+    const clientSettings: ApiClientTitanChat.IChatbotClientSettingsTitanChat = {
+        clientId: 'TitanChatClientId',
+        version: String(ChatbotVersion),
+        constructorParametersFactory: () => ({
+            baseUrl: ChatbotBaseUrl,
+        }),
+    };
+    container
+        .bind<ApiClientTitanChat.IChatbotClientSettingsTitanChat>(CHATBOT_CLIENT_SETTINGS)
+        .toConstantValue(clientSettings);
+    container
+        .bind<IChatbotApiClient>(CHATBOT_API_CLIENT)
+        .to(ApiClientTitanChat.ChatbotApiClient)
+        .inSingletonScope();
+    return container;
+};
+
+interface IChatbotProps {
+    className?: string;
+    customizations?: ChatbotCustomizations;
+}
+
+export function runChatbotTitanChatbotSharedTests(
+    ChatbotComponent: FC<IChatbotProps>,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let log: CypressMocks.LogMock;
+    let apiClientSettings: ApiClientTitanChat.IChatbotClientSettingsTitanChat;
+    let apiClient: ApiClientTitanChat.ChatbotApiClient;
+    let uiStore: ChatbotUiStore;
+    let uiBackendStore: ChatbotUiBackendStore;
+
+    beforeEach(() => {
+        container = initializeTitanChatbotContainer();
+        log = container.get<CypressMocks.LogMock>(Log);
+        apiClientSettings =
+            container.get<ApiClientTitanChat.IChatbotClientSettingsTitanChat>(
+                CHATBOT_CLIENT_SETTINGS
+            );
+        apiClient = container.get<ApiClientTitanChat.ChatbotApiClient>(CHATBOT_API_CLIENT);
+        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        uiBackendStore = container.get<ChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(550, 800);
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+    });
+
+    const render = () => {
+        const ChatbotWrapper: FC = () => {
+            const customizationContext = useMemo<ChatbotCustomizations>(
+                () => ({
+                    filters: { enabled: true },
+                    feedback: { title: 'TITLE' },
+                }),
+                []
+            );
+
+            const component = (
+                <ChatbotComponent
+                    className="h-100vh max-h-100vh of-x-hidden"
+                    customizations={customizationContext}
+                />
+            );
+
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return (
+                <Provider
+                    singletons={[
+                        {
+                            provide: Log,
+                            useValue: log,
+                        },
+                        {
+                            provide: CHATBOT_CLIENT_SETTINGS,
+                            useValue: apiClientSettings,
+                        },
+                        { provide: CHATBOT_API_CLIENT, useValue: apiClient },
+                        {
+                            provide: CHATBOT_UI_STORE_TOKEN,
+                            useValue: uiStore,
+                        },
+                        {
+                            provide: CHATBOT_UI_BACKEND_STORE_TOKEN,
+                            useValue: uiBackendStore,
+                        },
+                    ]}
+                >
+                    {wrappedComponent}
+                </Provider>
+            );
+        };
+        cy.spy(uiStore, 'run').as('runSpy');
+        mount(<ChatbotWrapper />);
+        return cy.wrap(
+            new Promise(resolve => {
+                cy.get('@runSpy')
+                    .should('have.been.calledOnce')
+                    .then((invocation: any) => {
+                        const initPromise = invocation.firstCall.returnValue as ReturnType<
+                            IChatbotUiStore['run']
+                        >;
+                        initPromise.then(resolve);
+                    });
+            })
+        );
+    };
+
+    it('should render the chatbot with titan chat API', () => {
+        const optionsMock = CypressMocks.TC.Options;
+        const sessionMock = CypressMocks.TC.SessionPost;
+        const messageMock = CypressMocks.TC.MessagePost;
+        const messageFeedbackMock = CypressMocks.TC.MessageFeedbackPost;
+        const sessionFeedbackMock = CypressMocks.TC.SessionFeedbackPost;
+
+        const aliasOptions = optionsMock.intercept(ChatbotBaseUrl, ChatbotVersion);
+        const aliasSession = sessionMock.intercept(ChatbotBaseUrl, ChatbotVersion);
+        const aliasMessage = messageMock.intercept(ChatbotBaseUrl, ChatbotVersion);
+        const { aliasPostMessage, aliasPostSession } = CypressMocks.TC.interceptFeedback(
+            ChatbotBaseUrl,
+            ChatbotVersion
+        );
+
+        render().then(() => {
+            cy.log('Getting options...');
+            cy.wait(aliasOptions).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/options`
+                );
+                expect(interception.response?.statusCode).to.equal(200);
+                expect(interception.response?.body).to.deep.equal(optionsMock.response);
+            });
+
+            // Ask the bot a question
+            cy.log('Sending message...');
+            ChatUiSelectors.chatInput.type(`${messageMock.request.question}{enter}`, { delay: 0 });
+
+            // Check that the session was created
+            cy.wait(aliasSession).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/session`
+                );
+                expect(interception.request.body).to.deep.equal(sessionMock.request);
+                expect(interception.response?.body).to.deep.equal(sessionMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            // Check the user message is sent
+            cy.wait(aliasMessage).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/message`
+                );
+                expect(interception.request.body).to.deep.equal(messageMock.request);
+                expect(interception.response?.body).to.deep.equal(messageMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            cy.tick(100);
+            // Send session feedback (manually)
+            cy.log('Sending session feedback...');
+            uiStore.sendSessionFeedback(new Models.Feedback(sessionFeedbackMock.request));
+            cy.wait(aliasPostSession).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/feedback`
+                );
+                expect(interception.request.body).to.deep.equal(sessionFeedbackMock.request);
+                expect(interception.response?.body).to.deep.equal(sessionFeedbackMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+
+            cy.tick(100);
+            // Check the feedback is sent with thumbs up
+            cy.log('Sending message feedback...');
+            ChatUiSelectors.chatbotMessageFeedbackThumbsUp.scrollIntoView().click({ force: true });
+            cy.wait(aliasPostMessage).then(interception => {
+                expect(interception.request.url).to.equal(
+                    `${ChatbotBaseUrl}/api/v${ChatbotVersion}/feedback`
+                );
+                expect(interception.request.body).to.deep.equal(messageFeedbackMock.request);
+                expect(interception.response?.body).to.deep.equal(messageFeedbackMock.response);
+                expect(interception.response?.statusCode).to.equal(200);
+            });
+        });
+    });
+}

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

@@ -0,0 +1,158 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+    ChatbotUiStore,
+    IChatbotUiStore,
+    Models,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { CSSProperties, FC, ReactElement } from 'react';
+import { CypressMocks, testInitContainerChatbot, testRenderWrapperChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+interface IChatbotProps {
+    style?: CSSProperties;
+    customizations?: ChatbotCustomizations;
+}
+
+export function runChatbotSharedTests(
+    ChatbotComponent: FC<IChatbotProps>,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let api: CypressMocks.ChatbotApiClientMock;
+    let chatbotUiStore: IChatbotUiStore;
+
+    const mockApiClient = () => {
+        api.postSession = cy.stub().resolves(ModelsMocks.mockSession());
+        api.getOptions = cy.stub().resolves(ModelsMocks.mockFrontendModel());
+    };
+
+    const mockAskBotApi = (answer: string) => {
+        api.postMessage = cy.stub().as('askBot').resolves(
+            ModelsMocks.mockBotMessage({
+                answer,
+            })
+        );
+        api.postFeedback = cy
+            .stub()
+            .as('askBotFeedback')
+            .resolves(
+                ModelsMocks.mockFeedback({
+                    rating: Models.FeedbackRatings.ThumbsUp,
+                })
+            );
+    };
+
+    beforeEach(() => {
+        container = testInitContainerChatbot();
+        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
+        chatbotUiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        mockApiClient();
+        cy.viewport(550, 800);
+    });
+
+    const render = (onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const customizationContext: ChatbotCustomizations = {
+                filters: { enabled: true },
+                feedback: { title: 'TITLE' },
+            };
+            const component = (
+                <ChatbotComponent
+                    style={{
+                        height: '100vh',
+                        width: '100%',
+                        maxWidth: '100vh',
+                        overflowX: 'hidden',
+                    }}
+                    customizations={customizationContext}
+                />
+            );
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    const doAskBot = (message: string) => {
+        ChatUiSelectors.chatInput.type(`${message}{enter}`, { delay: 0 });
+    };
+    const doTriggerFile = () => {
+        chatbotUiStore.setFilePickerEnabled(true);
+        cy.then(() => {
+            ChatUiSelectors.chatUploadFile.should('be.visible');
+        });
+    };
+
+    it('should render the chatbot component', () => {
+        mockAskBotApi("Hello! I'm chatbot mocked response!!!");
+
+        render();
+
+        // Pick filter
+        ChatUiSelectors.chatbotFilterButton.first().click();
+        ChatUiSelectors.chatbotFilterOptions.find('label').first().click();
+        ChatUiSelectors.chatbotFilterButton.first().click();
+
+        // Ask chatbot
+        doAskBot('Hello, Chatbot!');
+        doAskBot('Hello, Chatbot! Hello, Chatbot! Hello, Chatbot! Hello, Chatbot! Hello, Chatbot!');
+        doTriggerFile();
+
+        // Check if the message is sent
+        cy.get('@askBot').should('have.been.calledTwice');
+    });
+
+    describe('with error handling', () => {
+        const mockAskBotApiError = (errorMessage: string) => {
+            api.postMessage = cy.stub().as('askBot').rejects(new Error(errorMessage));
+        };
+
+        it('should react on send message API error', () => {
+            mockAskBotApiError('Chatbot API error');
+            render();
+
+            doAskBot('Hello, Chatbot!');
+
+            cy.then(() => {
+                ChatUiSelectors.chatMessageFooter
+                    .last()
+                    .should('be.visible')
+                    .should('contain.text', 'Message not delivered. Retry');
+                const errorBanner = ChatUiSelectors.chatError.should('be.visible').within(() => {
+                    errorBanner
+                        .find('.Banner__text > .Banner__title, [class^="_title-container"]')
+                        .should('contain.text', 'Chat Error');
+                    ChatUiSelectors.chatErrorText
+                        .should('be.visible')
+                        .should('contain.text', 'Failed to send message');
+                });
+            });
+
+            cy.then(() => {
+                mockAskBotApi("Hello! I'm chatbot mocked response!!!");
+                ChatUiSelectors.chatMessageErrorRetry.click();
+                ChatUiSelectors.chatMessageContentAgent
+                    .should('be.visible')
+                    .should('contain.text', "Hello! I'm chatbot mocked response!!!");
+            });
+        });
+    });
+
+    describe('with message feedback', () => {
+        it('should render the chatbot component', () => {
+            mockAskBotApi("Hello! I'm chatbot mocked response!!!");
+            render();
+
+            doAskBot('Hello!');
+            ChatUiSelectors.chatbotMessageFeedbackThumbsUp.should('be.visible').click();
+            cy.get('@askBotFeedback').should('have.been.calledOnce');
+            ChatUiSelectors.chatbotMessageFeedbackSuccess
+                .should('be.visible')
+                .should('contain.text', 'Thanks for your feedback.');
+        });
+    });
+}

package/src/utils/chat-ui-selectors.ts

@@ -23,6 +23,18 @@ export class ChatUiSelectors {
     static get chatUploadFile() {
         return cy.getCy(ChatUiSelectors.cy.chatUploadFile);
     }
+    static get chatUploadFileBtn() {
+        return cy.getCy(ChatUiSelectors.cy.chatUploadFileBtn);
+    }
+    static get chatUploadFileName() {
+        return cy.getCy(ChatUiSelectors.cy.chatUploadFileName);
+    }
+    static get chatUploadFileEdit() {
+        return cy.getCy(ChatUiSelectors.cy.chatUploadFileEdit);
+    }
+    static get chatUploadFileDelete() {
+        return cy.getCy(ChatUiSelectors.cy.chatUploadFileDelete);
+    }
     static get chatMessageError() {
         return cy.getCy(ChatUiSelectors.cy.chatMessageError);
     }
@@ -161,6 +173,9 @@ export class ChatUiSelectors {
     static get chatbotSessionFeedbackComment() {
         return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackComment);
     }
+    static get chatbotRestartDialog() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotRestartDialog);
+    }
     static get chatbotFilters() {
         return cy.getCy(ChatUiSelectors.cy.chatbotFilters);
     }
@@ -179,6 +194,9 @@ export class ChatUiSelectors {
     static get chatbotFilterOptions() {
         return cy.getCy(ChatUiSelectors.cy.chatbotFilterOptions);
     }
+    static get chatbotFilterContent() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilterContent);
+    }
     static get chatbotLinksMore() {
         return cy.getCy(ChatUiSelectors.cy.chatbotLinksMore);
     }
@@ -201,6 +219,10 @@ export class ChatUiSelectors {
         chatInput: 'titan-chat-input',
         chatSend: 'titan-chat-send',
         chatUploadFile: 'titan-chat-upload-file',
+        chatUploadFileBtn: 'titan-chat-upload-file-btn',
+        chatUploadFileName: 'titan-chat-upload-file-name',
+        chatUploadFileEdit: 'titan-chat-upload-file-edit',
+        chatUploadFileDelete: 'titan-chat-upload-file-delete',
         chatMessageError: 'titan-chat-message-error',
         chatMessageErrorRetry: 'titan-chat-message-error-retry',
         chatNotifications: 'titan-chat-notifications',
@@ -241,12 +263,14 @@ export class ChatUiSelectors {
         chatbotSessionFeedbackThumbsUp: 'titan-chatbot-session-feedback-thumbs-up',
         chatbotSessionFeedbackThumbsDown: 'titan-chatbot-session-feedback-thumbs-down',
         chatbotSessionFeedbackComment: 'titan-chatbot-session-feedback-comment',
+        chatbotRestartDialog: 'titan-chatbot-restart-dialog',
         chatbotFilters: 'titan-chatbot-filters',
         chatbotFilterSearch: 'titan-chatbot-filter-search',
         chatbotFilterAll: 'titan-chatbot-filter-all',
         chatbotFilterNone: 'titan-chatbot-filter-none',
         chatbotFilterButton: 'titan-chatbot-filter-button',
         chatbotFilterOptions: 'titan-chatbot-filter-options',
+        chatbotFilterContent: 'titan-chatbot-filter-content',
         chatbotLinksMore: 'titan-chatbot-links-more',
         chatbotLinksCollapsible: 'titan-chatbot-links-collapsible',
         chatbotLinksLink: 'titan-chatbot-links-link',

package/src/utils/test-utils-chatbot.tsx

@@ -0,0 +1,73 @@
+import { ILog, Log } from '@servicetitan/log-service';
+import { Container, provide } from '@servicetitan/react-ioc';
+import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotUiBackendStore,
+    ChatbotUiStore,
+    IChatbotApiClient,
+    IChatbotUiBackendStore,
+    IChatbotUiStore,
+} from '@servicetitan/titan-chatbot-api';
+import { mount } from 'cypress/react';
+import { FC, ReactNode } from 'react';
+import { CypressMocks } from '..';
+
+export const testInitContainerChatbot = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<ILog>(Log).to(CypressMocks.LogMock).inSingletonScope();
+    container
+        .bind<IChatbotApiClient>(CHATBOT_API_CLIENT)
+        .to(CypressMocks.ChatbotApiClientMock)
+        .inSingletonScope();
+    container.bind<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN).to(ChatbotUiStore).inSingletonScope();
+    container
+        .bind<IChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatbotUiBackendStore)
+        .inSingletonScope();
+    return container;
+};
+
+export const testRenderWrapperChatbot = async (
+    container: Container,
+    component: ReactNode,
+    onAfterInit: () => void = () => {}
+) => {
+    const log = container.get<ILog>(Log);
+    const chatbotApiClient = container.get<IChatbotApiClient>(CHATBOT_API_CLIENT);
+    const chatbotUiStore = container.get<IChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+    const chatbotUiBackendStore = container.get<IChatbotUiBackendStore>(
+        CHATBOT_UI_BACKEND_STORE_TOKEN
+    );
+
+    chatbotUiBackendStore.subscribe();
+    await chatbotUiStore.run({
+        agentName: 'EchoBot',
+        agentIcon: ChatParticipantIcon.Bot,
+    });
+    onAfterInit?.();
+
+    const RenderWrapper: FC = provide({
+        singletons: [
+            {
+                provide: Log,
+                useValue: log,
+            },
+            { provide: CHATBOT_API_CLIENT, useValue: chatbotApiClient },
+            {
+                provide: CHATBOT_UI_STORE_TOKEN,
+                useValue: chatbotUiStore,
+            },
+            {
+                provide: CHATBOT_UI_BACKEND_STORE_TOKEN,
+                useValue: chatbotUiBackendStore,
+            },
+        ],
+    })(() => component);
+    RenderWrapper.displayName = 'RenderWrapper';
+    mount(<RenderWrapper />);
+};

package/src/utils/test-utils.tsx

@@ -0,0 +1,52 @@
+import { Container, provide } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatParticipantIcon,
+    ChatUiBackendEchoStore,
+    ChatUiStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { mount } from 'cypress/react';
+import { FC, ReactNode } from 'react';
+
+export const testInitContainer = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<IChatUiStore>(CHAT_UI_STORE_TOKEN).to(ChatUiStore).inSingletonScope();
+    container
+        .bind<IChatUiBackendStore>(CHAT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatUiBackendEchoStore)
+        .inSingletonScope();
+    return container;
+};
+
+export const testRenderWrapper = async (
+    chatUiStore: IChatUiStore,
+    chatUiBackendStore: IChatUiBackendStore,
+    component: ReactNode,
+    onAfterInit: () => void = () => {}
+) => {
+    chatUiBackendStore.subscribe();
+    await chatUiStore.run({
+        agentName: 'EchoBot',
+        agentIcon: ChatParticipantIcon.Bot,
+    });
+    onAfterInit?.();
+    const RenderWrapper: FC = provide({
+        singletons: [
+            {
+                provide: CHAT_UI_STORE_TOKEN,
+                useValue: chatUiStore,
+            },
+            {
+                provide: CHAT_UI_BACKEND_STORE_TOKEN,
+                useValue: chatUiBackendStore,
+            },
+        ],
+    })(() => component);
+    RenderWrapper.displayName = 'RenderWrapper';
+    mount(<RenderWrapper />);
+};