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

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

@@ -1,285 +0,0 @@
-import { Container } from '@servicetitan/react-ioc';
-import {
-    CHATBOT_API_CLIENT,
-    CHATBOT_UI_STORE_TOKEN,
-    ChatbotUiStore,
-    IChatbotUiStore,
-    MessageFeedbackGuardrailStore,
-    MessageFeedbackStore,
-    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 IChatbotMessageFeedbackPopoverProps {
-    botMessage: Models.IBotMessage;
-}
-
-export function runChatbotMessageFeedbackPopoverSharedTests(
-    ChatbotMessageFeedbackPopoverComponent: FC<IChatbotMessageFeedbackPopoverProps>,
-    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());
-        api.postFeedback = cy.stub().resolves(ModelsMocks.mockFeedback());
-    };
-
-    beforeEach(() => {
-        container = testInitContainerChatbot();
-        container.bind(MessageFeedbackStore).toSelf().inSingletonScope();
-        container.bind(MessageFeedbackGuardrailStore).toSelf().inSingletonScope();
-        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
-        chatbotUiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
-        mockApiClient();
-        cy.viewport(550, 800);
-    });
-
-    const render = (botMessage: Models.IBotMessage, onAfterInit?: () => void) => {
-        return cy.wrap(null).then(() => {
-            const component = <ChatbotMessageFeedbackPopoverComponent botMessage={botMessage} />;
-            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
-
-            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
-        });
-    };
-
-    it('should render feedback component for regular bot message', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.customizations.feedback = { title: 'Rate this answer' };
-        });
-
-        // Should show feedback title
-        cy.contains('Rate this answer').should('be.visible');
-
-        // Should show thumbs up button
-        ChatUiSelectors.chatbotMessageFeedbackThumbsUp.should('be.visible');
-
-        // Should show thumbs down button
-        ChatUiSelectors.chatbotMessageFeedbackThumbsDown.should('be.visible');
-    });
-
-    it('should render feedback component for guardrail bot message', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Guardrail response',
-            isGuardrailed: true,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.customizations.feedback = { title: 'Rate this answer' };
-        });
-
-        // Should not show feedback title for guardrail
-        cy.contains('Rate this answer').should('not.exist');
-
-        // Should not show thumbs up button for guardrail
-        ChatUiSelectors.chatbotMessageFeedbackThumbsUp.should('not.exist');
-
-        // Should show "Provide correct answer" link
-        ChatUiSelectors.chatbotMessageFeedbackProvideAnswer.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackProvideAnswer.should(
-            'contain.text',
-            'Provide correct answer'
-        );
-    });
-
-    it('should handle thumbs up feedback submission', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.sendMessageFeedback = cy.stub().resolves();
-        });
-
-        ChatUiSelectors.chatbotMessageFeedbackThumbsUp.click();
-
-        // Should show success state
-        ChatUiSelectors.chatbotMessageFeedbackSuccess.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackSuccess.should(
-            'contain.text',
-            'Thanks for your feedback.'
-        );
-    });
-
-    it('should handle failed feedback submission', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.sendMessageFeedback = cy.stub().rejects(new Error('API Error'));
-        });
-
-        ChatUiSelectors.chatbotMessageFeedbackThumbsUp.click();
-
-        // Should show failure state
-        ChatUiSelectors.chatbotMessageFeedbackFailed.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackFailed.should(
-            'contain.text',
-            'Failed to send feedback.'
-        );
-    });
-
-    it('should open feedback form popover when thumbs down is clicked', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage);
-
-        ChatUiSelectors.chatbotMessageFeedbackThumbsDown.click();
-
-        // Should show popover with form
-        cy.contains("Why didn't this answer solve your problem?").should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.should('be.visible').and('be.disabled');
-    });
-
-    it('should open guardrail feedback form when provide answer link is clicked', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Guardrail response',
-            isGuardrailed: true,
-        });
-
-        render(botMessage);
-
-        ChatUiSelectors.chatbotMessageFeedbackProvideAnswer.click();
-
-        // Should show popover with guardrail form
-        cy.contains('Provide correct answer').should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.should('be.visible').and('be.disabled');
-    });
-
-    it('should enable submit button when regular feedback form is valid', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage);
-
-        ChatUiSelectors.chatbotMessageFeedbackThumbsDown.click();
-
-        // Select a feedback option
-        ChatUiSelectors.chatbotMessageFeedbackUnrelated
-            .parent()
-            .find('input')
-            .click({ force: true });
-
-        // Submit button should be enabled
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.should('be.enabled');
-    });
-
-    it('should enable submit button when guardrail feedback form is valid', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Guardrail response',
-            isGuardrailed: true,
-        });
-
-        render(botMessage);
-
-        ChatUiSelectors.chatbotMessageFeedbackProvideAnswer.click();
-
-        // Fill in the URL field
-        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.type('https://example.com');
-
-        // Submit button should be enabled
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.should('be.enabled');
-    });
-
-    it('should submit feedback form successfully', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.sendMessageFeedback = cy.stub().resolves();
-        });
-
-        ChatUiSelectors.chatbotMessageFeedbackThumbsDown.click();
-        ChatUiSelectors.chatbotMessageFeedbackUnrelated
-            .parent()
-            .find('input')
-            .click({ force: true });
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.click();
-
-        // Should show success state
-        ChatUiSelectors.chatbotMessageFeedbackSuccess.should('be.visible');
-    });
-
-    it('should submit guardrail feedback form successfully', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Guardrail response',
-            isGuardrailed: true,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.sendMessageFeedback = cy.stub().resolves();
-        });
-
-        ChatUiSelectors.chatbotMessageFeedbackProvideAnswer.click();
-        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.type('https://example.com');
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.click();
-
-        // Should show success state
-        ChatUiSelectors.chatbotMessageFeedbackSuccess.should('be.visible');
-    });
-
-    it('should handle form validation errors', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage);
-
-        ChatUiSelectors.chatbotMessageFeedbackThumbsDown.click();
-
-        // Try to submit without selecting feedback
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.should('be.disabled');
-
-        // Select "Other" which requires comment
-        ChatUiSelectors.chatbotMessageFeedbackOther.parent().find('input').click({ force: true });
-
-        // Add comment
-        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Custom feedback');
-
-        // Submit button should be enabled
-        ChatUiSelectors.chatbotMessageFeedbackSubmit.should('be.enabled');
-    });
-
-    it('should not show title when feedback customization title is not set', () => {
-        const botMessage = ModelsMocks.mockBotMessage({
-            answer: 'Test answer',
-            isGuardrailed: false,
-        });
-
-        render(botMessage, () => {
-            chatbotUiStore.customizations.feedback = {};
-        });
-
-        // Should not show any title
-        cy.contains('Rate this answer').should('not.exist');
-
-        // But should still show feedback buttons
-        ChatUiSelectors.chatbotMessageFeedbackThumbsUp.should('be.visible');
-        ChatUiSelectors.chatbotMessageFeedbackThumbsDown.should('be.visible');
-    });
-}

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

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

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

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