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

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

@@ -0,0 +1,112 @@
+import { Container } from '@servicetitan/react-ioc';
+import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
+import { CHATBOT_API_CLIENT, ModelsMocks } from '@servicetitan/titan-chatbot-api';
+import { FC, ReactElement } from 'react';
+import { CypressMocks, testInitContainerChatbot, testRenderWrapperChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+interface IChatbotMessageTypingProps {
+    avatar: {
+        name: string;
+        icon: ChatParticipantIcon;
+    };
+}
+
+export function runChatbotMessageTypingSharedTests(
+    ChatbotMessageTypingComponent: FC<IChatbotMessageTypingProps>,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let api: CypressMocks.ChatbotApiClientMock;
+
+    const mockApiClient = () => {
+        api.postSession = cy.stub().resolves(ModelsMocks.mockSession());
+        api.getOptions = cy.stub().resolves(ModelsMocks.mockFrontendModel());
+    };
+
+    beforeEach(() => {
+        container = testInitContainerChatbot();
+        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
+        mockApiClient();
+        cy.viewport(550, 800);
+    });
+
+    const render = (icon: ChatParticipantIcon, onAfterInit?: () => void) => {
+        const avatar = {
+            name: 'Test User Name',
+            icon,
+        };
+        return cy.wrap(null).then(() => {
+            const component = <ChatbotMessageTypingComponent avatar={avatar} />;
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render message with bot icon', () => {
+        render(ChatParticipantIcon.Bot);
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+        ChatUiSelectors.chatAvatarBot
+            .should('be.visible')
+            .invoke('css', 'background-image')
+            .then(bgColor => {
+                const isSvg = Boolean(
+                    (bgColor as any as string).indexOf('data:image/svg+xml;base64') >= 0
+                );
+                expect(isSvg).to.eq(true);
+            });
+    });
+
+    it('should render message with empty icon', () => {
+        render(ChatParticipantIcon.Empty);
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+        ChatUiSelectors.chatAvatarBot.should('not.exist');
+        ChatUiSelectors.chatAvatarInitials.should('not.exist');
+    });
+
+    it('should render message with initials', () => {
+        render(ChatParticipantIcon.Initials);
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+        ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'TU');
+    });
+
+    it('should show different messages during the time', () => {
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+        render(ChatParticipantIcon.Bot);
+
+        // Verify the rendered component shows typing dots initially
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+
+        // After 10 seconds, should show first message
+        cy.tick(10000);
+        ChatUiSelectors.chatMessageContentAgent
+            .should('be.visible')
+            .should('contain.text', 'Looking for the final details');
+        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
+
+        // After 20 seconds total, should show second message
+        cy.tick(10000);
+        ChatUiSelectors.chatMessageContentAgent
+            .should('be.visible')
+            .should(
+                'contain.text',
+                'This is taking longer than usual, please give me a little bit more time'
+            );
+        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
+
+        // After additional time, should still show the same message
+        cy.tick(60000);
+        ChatUiSelectors.chatMessageContentAgent
+            .should('be.visible')
+            .should(
+                'contain.text',
+                'This is taking longer than usual, please give me a little bit more time'
+            );
+        ChatUiSelectors.chatMessageTypingDots.should('not.exist');
+    });
+}

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

@@ -0,0 +1,91 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotUiStore,
+    IChatbotUiStore,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { FC, ReactElement } from 'react';
+import { CypressMocks } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainerChatbot, testRenderWrapperChatbot } from '../../utils/test-utils-chatbot';
+
+interface IChatbotRestartDialogProps {
+    confirmText: string;
+    onClose: () => void;
+}
+
+export function runChatbotRestartDialogSharedTests(
+    ChatbotRestartDialogComponent: FC<IChatbotRestartDialogProps>,
+    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());
+    };
+
+    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 = (confirmText: string, onClose: () => void, onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const component = (
+                <ChatbotRestartDialogComponent confirmText={confirmText} onClose={onClose} />
+            );
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render restart dialog with confirm text', () => {
+        const onClose = cy.stub();
+        const confirmText = 'Are you sure you want to restart the conversation?';
+
+        render(confirmText, onClose);
+
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible').within(() => {
+            cy.contains(confirmText).should('be.visible');
+            cy.get('button').contains('Restart').should('be.visible');
+            cy.get('button').contains('Cancel').should('be.visible');
+        });
+    });
+
+    it('should call onClose when Cancel button is clicked', () => {
+        const onClose = cy.stub().as('onClose');
+        const confirmText = 'Test confirmation text';
+
+        render(confirmText, onClose);
+
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible').within(() => {
+            cy.get('button').contains('Cancel').closest('button').click();
+        });
+        cy.get('@onClose').should('have.been.called');
+    });
+
+    it('should call restart and onClose when Restart button is clicked', () => {
+        const onClose = cy.stub().as('onClose');
+        const confirmText = 'Test confirmation text';
+
+        render(confirmText, onClose).then(() => {
+            cy.spy(chatbotUiStore, 'restart').as('restart');
+        });
+
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible').within(() => {
+            cy.get('button').contains('Restart').closest('button').click();
+        });
+        cy.wait(1);
+        cy.get('@onClose').should('have.been.called');
+        cy.get('@restart').should('have.been.called');
+    });
+}

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

@@ -0,0 +1,116 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotUiStore,
+    IChatbotUiStore,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { FC, ReactElement } from 'react';
+import { CypressMocks, testInitContainerChatbot, testRenderWrapperChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+interface ILinkProps {
+    className?: string;
+    onClick?: (...args: any[]) => any;
+}
+
+export function runChatbotRestartLinkSharedTests(
+    ChatbotRestartLinkComponent: FC<ILinkProps>,
+    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());
+    };
+
+    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 = (props: ILinkProps = {}, onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const component = (
+                <ChatbotRestartLinkComponent {...props}>
+                    Restart Session
+                </ChatbotRestartLinkComponent>
+            );
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render restart link with children', () => {
+        render();
+
+        ChatUiSelectors.chatbotRestartLink.should('be.visible');
+        cy.contains('Restart Session').should('be.visible');
+    });
+
+    it('should open restart dialog when link is clicked', () => {
+        render();
+
+        ChatUiSelectors.chatbotRestartLink.click();
+
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible').within(() => {
+            cy.contains('Restart Titan session?').should('be.visible');
+            cy.get('button').contains('Restart').should('be.visible');
+            cy.get('button').contains('Cancel').should('be.visible');
+        });
+    });
+
+    it('should call onClick prop when link is clicked', () => {
+        const onClick = cy.stub().as('onClick');
+
+        render({ onClick });
+
+        ChatUiSelectors.chatbotRestartLink.click();
+
+        cy.get('@onClick').should('have.been.called');
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible');
+    });
+
+    it('should close dialog when Cancel button is clicked', () => {
+        render();
+
+        ChatUiSelectors.chatbotRestartLink.click();
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible').within(() => {
+            cy.get('button').contains('Cancel').closest('button').click();
+        });
+        ChatUiSelectors.chatbotRestartDialog.should('not.exist');
+    });
+
+    it('should close dialog and restart session when Restart button is clicked', () => {
+        render().then(() => {
+            cy.spy(chatbotUiStore, 'restart').as('restart');
+        });
+
+        ChatUiSelectors.chatbotRestartLink.click();
+        ChatUiSelectors.chatbotRestartDialog.should('be.visible').within(() => {
+            cy.get('button').contains('Restart').closest('button').click();
+        });
+        cy.wait(1).then(() => {
+            cy.get('@restart').should('have.been.called');
+        });
+        ChatUiSelectors.chatbotRestartDialog.should('not.exist');
+    });
+
+    it('should pass through additional Link props', () => {
+        const customClassName = 'custom-restart-link';
+
+        render({ className: customClassName });
+
+        ChatUiSelectors.chatbotRestartLink
+            .should('be.visible')
+            .should('have.class', customClassName);
+    });
+}

package/src/tests/titan-chatbot-ui/chatbot-session-feedback-modal.shared-tests.tsx

@@ -0,0 +1,182 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotUiStore,
+    IChatbotUiStore,
+    Models,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { FC, ReactElement } from 'react';
+import { CypressMocks, testInitContainerChatbot, testRenderWrapperChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+interface IChatbotSessionFeedbackModalProps {
+    onClose: () => void;
+}
+
+export function runChatbotSessionFeedbackModalSharedTests(
+    ChatbotSessionFeedbackModalComponent: FC<IChatbotSessionFeedbackModalProps>,
+    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());
+    };
+
+    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 assertButtonSelection = (element: Cypress.Chainable<JQuery>, selected: boolean) => {
+        element.should($el => {
+            const hasClass = $el.hasClass('Button--selected');
+            const hasAttr = $el.attr('aria-pressed') === 'true';
+            expect(hasClass || hasAttr).to.equal(selected);
+        });
+    };
+
+    const render = (onAfterInit?: () => void, onClose = cy.stub()) => {
+        return cy.wrap(null).then(() => {
+            const TestComponent: FC = () => {
+                const component = <ChatbotSessionFeedbackModalComponent onClose={onClose} />;
+                return wrapperComponent ? wrapperComponent(component) : component;
+            };
+            return testRenderWrapperChatbot(container, <TestComponent />, onAfterInit);
+        });
+    };
+
+    it('should render the feedback modal with all elements', () => {
+        render();
+
+        ChatUiSelectors.chatbotSessionFeedbackModal.should('be.visible');
+        ChatUiSelectors.chatbotSessionFeedbackThumbsUp.should('be.visible');
+        ChatUiSelectors.chatbotSessionFeedbackThumbsDown.should('be.visible');
+        ChatUiSelectors.chatbotSessionFeedbackComment.should('be.visible');
+        ChatUiSelectors.chatbotSessionFeedbackCancel.should('be.visible');
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.should('be.visible');
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.should('be.disabled');
+    });
+
+    it('should enable submit button when thumbs up is selected', () => {
+        render();
+
+        ChatUiSelectors.chatbotSessionFeedbackThumbsUp.click();
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.should('not.be.disabled');
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsUp, true);
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsDown, false);
+    });
+
+    it('should enable submit button when thumbs down is selected', () => {
+        render();
+
+        ChatUiSelectors.chatbotSessionFeedbackThumbsDown.click();
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.should('not.be.disabled');
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsDown, true);
+    });
+
+    it('should allow switching between thumbs up and thumbs down', () => {
+        render();
+
+        ChatUiSelectors.chatbotSessionFeedbackThumbsUp.click();
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsUp, true);
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsDown, false);
+
+        ChatUiSelectors.chatbotSessionFeedbackThumbsDown.click();
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsDown, true);
+        assertButtonSelection(ChatUiSelectors.chatbotSessionFeedbackThumbsUp, false);
+    });
+
+    it('should allow entering a comment', () => {
+        render();
+
+        const testComment = 'This is my feedback comment';
+        ChatUiSelectors.chatbotSessionFeedbackComment.type(testComment);
+        ChatUiSelectors.chatbotSessionFeedbackComment.should('have.value', testComment);
+    });
+
+    it('should call onClose when cancel button is clicked', () => {
+        const onClose = cy.stub().as('onClose');
+        render(undefined, onClose);
+
+        ChatUiSelectors.chatbotSessionFeedbackCancel.click();
+        cy.then(() => {
+            cy.get('@onClose').should('have.been.called');
+        });
+    });
+
+    it('should submit feedback with thumbs up and close modal', () => {
+        const onClose = cy.stub().as('onClose');
+        render(undefined, onClose);
+
+        ChatUiSelectors.chatbotSessionFeedbackThumbsUp.click();
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.click();
+
+        cy.wait(1).then(() => {
+            cy.get('@onClose').should('have.been.called');
+        });
+    });
+
+    it('should submit feedback with thumbs down, comment and close modal', () => {
+        const onClose = cy.stub().as('onClose');
+        render(undefined, onClose);
+
+        const testComment = 'This did not help me at all';
+        ChatUiSelectors.chatbotSessionFeedbackThumbsDown.click();
+        ChatUiSelectors.chatbotSessionFeedbackComment.type(testComment);
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.click();
+
+        cy.wait(1).then(() => {
+            cy.get('@onClose').should('have.been.called');
+        });
+    });
+
+    it('should send session feedback to the store when submitting', () => {
+        const onClose = cy.stub();
+        render(undefined, onClose);
+
+        cy.spy(chatbotUiStore, 'sendSessionFeedback').as('sendSessionFeedback');
+
+        ChatUiSelectors.chatbotSessionFeedbackThumbsUp.click();
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.click();
+
+        cy.get('@sendSessionFeedback').should('have.been.called');
+        cy.get('@sendSessionFeedback').should(
+            'have.been.calledWith',
+            new Models.Feedback({
+                sessionId: ModelsMocks.mockSession().id,
+                rating: Models.FeedbackRatings.ThumbsUp,
+            })
+        );
+    });
+
+    it('should send session feedback with comment when submitting', () => {
+        const onClose = cy.stub();
+        render(undefined, onClose);
+
+        cy.spy(chatbotUiStore, 'sendSessionFeedback').as('sendSessionFeedback');
+
+        const testComment = 'Great experience!';
+        ChatUiSelectors.chatbotSessionFeedbackThumbsUp.click();
+        ChatUiSelectors.chatbotSessionFeedbackComment.type(testComment);
+        ChatUiSelectors.chatbotSessionFeedbackSubmit.click();
+
+        cy.get('@sendSessionFeedback').should('have.been.called');
+        cy.get('@sendSessionFeedback').should(
+            'have.been.calledWithMatch',
+            new Models.Feedback({
+                sessionId: ModelsMocks.mockSession().id,
+                rating: Models.FeedbackRatings.ThumbsUp,
+                description: testComment,
+            })
+        );
+    });
+}