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

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

@@ -0,0 +1,127 @@
+import { Container, Provider, useDependencies } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    MessageFeedbackGuardrailStore,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { FC, ReactElement } from 'react';
+import { CypressMocks, testInitContainerChatbot, testRenderWrapperChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+export function runChatbotMessageFeedbackFormGuardrailSharedTests(
+    ChatbotMessageFeedbackFormGuardrailComponent: FC,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let api: CypressMocks.ChatbotApiClientMock;
+    let messageFeedbackGuardrailStore: MessageFeedbackGuardrailStore;
+
+    const mockApiClient = () => {
+        api.postSession = cy.stub().resolves(ModelsMocks.mockSession());
+        api.getOptions = cy.stub().resolves(ModelsMocks.mockFrontendModel());
+    };
+
+    beforeEach(() => {
+        container = testInitContainerChatbot();
+        container.bind(MessageFeedbackGuardrailStore).toSelf().inSingletonScope();
+        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
+        messageFeedbackGuardrailStore = container.get(MessageFeedbackGuardrailStore);
+        mockApiClient();
+        cy.viewport(550, 800);
+    });
+
+    const getFormError = () => cy.get('[data-anvil-component="Banner"]');
+    const checkValid = () => {
+        cy.getCy('validator').click();
+        getFormError().should('not.exist');
+    };
+    const checkInvalid = () => {
+        cy.getCy('validator').click();
+        getFormError().should('be.visible');
+    };
+
+    const render = (onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const Validator: FC = () => {
+                const [formStore] = useDependencies(MessageFeedbackGuardrailStore);
+                return (
+                    <button
+                        className="m-t-3"
+                        data-cy="validator"
+                        onClick={() => formStore.formState.validate()}
+                    >
+                        Validate
+                    </button>
+                );
+            };
+
+            const component = (
+                <Provider
+                    singletons={[
+                        {
+                            provide: MessageFeedbackGuardrailStore,
+                            useValue: messageFeedbackGuardrailStore,
+                        },
+                    ]}
+                >
+                    <ChatbotMessageFeedbackFormGuardrailComponent />
+                    <Validator />
+                </Provider>
+            );
+
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render form', () => {
+        render();
+
+        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('be.visible');
+        checkInvalid();
+        getFormError().find('.Banner__title').should('contain.text', 'Form Incomplete');
+        getFormError()
+            .find('ul > li')
+            .should('contain.text', 'At least one input must be provided.');
+
+        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.type('https://example.com');
+        checkValid();
+
+        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.clear();
+        checkInvalid();
+
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Test comment');
+        checkValid();
+    });
+
+    it('should validate form when both fields are filled', () => {
+        render();
+
+        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.type('https://example.com');
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Additional feedback comment');
+        checkValid();
+    });
+
+    it('should show error when form is submitted empty', () => {
+        render();
+
+        checkInvalid();
+        getFormError().should('be.visible');
+        getFormError().find('.Banner__title').should('contain.text', 'Form Incomplete');
+    });
+
+    it('should clear validation error when valid input is provided', () => {
+        render();
+
+        // First show the error
+        checkInvalid();
+        getFormError().should('be.visible');
+
+        // Then provide valid input
+        ChatUiSelectors.chatbotMessageFeedbackLinkUrl.type('https://valid-url.com');
+        checkValid();
+    });
+}

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

@@ -0,0 +1,198 @@
+import { Container, Provider, useDependencies } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotUiStore,
+    IChatbotUiStore,
+    MessageFeedbackStore,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { FC, ReactElement } from 'react';
+import { CypressMocks, testInitContainerChatbot, testRenderWrapperChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+export function runChatbotMessageFeedbackFormSharedTests(
+    ChatbotMessageFeedbackFormComponent: FC,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let api: CypressMocks.ChatbotApiClientMock;
+    let chatbotUiStore: IChatbotUiStore;
+    let messageFeedbackStore: MessageFeedbackStore;
+
+    const mockApiClient = () => {
+        api.postSession = cy.stub().resolves(ModelsMocks.mockSession());
+        api.getOptions = cy.stub().resolves(ModelsMocks.mockFrontendModel());
+    };
+
+    beforeEach(() => {
+        container = testInitContainerChatbot();
+        container.bind<MessageFeedbackStore>(MessageFeedbackStore).toSelf().inSingletonScope();
+        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
+        chatbotUiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        messageFeedbackStore = container.get<MessageFeedbackStore>(MessageFeedbackStore);
+        mockApiClient();
+        cy.viewport(550, 800);
+    });
+
+    const getFormError = () =>
+        ChatUiSelectors.chatbotMessageFeedback.find(
+            '.FormField__errorText,[class^="_error-container"]'
+        );
+    const checkValid = () => {
+        cy.getCy('validator').click();
+        getFormError().should('not.exist');
+    };
+    const checkInvalid = () => {
+        cy.getCy('validator').click();
+        getFormError().should('be.visible');
+    };
+
+    const render = (onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const Validator: FC = () => {
+                const [formStore] = useDependencies(MessageFeedbackStore);
+                return (
+                    <button
+                        style={{ marginTop: '20px' }}
+                        data-cy="validator"
+                        onClick={() => formStore.formState.validate()}
+                    >
+                        Validate
+                    </button>
+                );
+            };
+
+            const component = (
+                <Provider
+                    singletons={[
+                        {
+                            provide: MessageFeedbackStore,
+                            useValue: messageFeedbackStore,
+                        },
+                    ]}
+                >
+                    <ChatbotMessageFeedbackFormComponent />
+                    <Validator />
+                </Provider>
+            );
+
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render default state external', () => {
+        render();
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+
+        // Default render
+        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackUnrelated.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackUnclear.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackNotFull.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackIncorrect.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackOther.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('not.exist');
+        checkValid();
+
+        // Click 'other' and check comment textarea
+        ChatUiSelectors.chatbotMessageFeedbackOther.parent().find('input').click({ force: true });
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment
+            .should('be.visible')
+            .type('Test comment');
+        getFormError().should('not.exist');
+        checkValid();
+
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.clear().blur();
+        getFormError().should('be.visible').should('contain.text', 'Enter details.');
+        checkInvalid();
+    });
+
+    it('should render default state internal', () => {
+        render(() => {
+            chatbotUiStore.customizations.feedback = {
+                isCommentAlwaysRequired: true,
+            };
+        });
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+
+        // Default render
+        ChatUiSelectors.chatbotMessageFeedback.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackUnrelated.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackUnclear.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackNotFull.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackIncorrect.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackOther.should('be.visible');
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('be.visible');
+        checkInvalid();
+
+        // Don't click 'other' and check comment textarea: should be mandatory
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.focus().blur();
+        getFormError().should('be.visible').should('contain.text', 'Enter details.');
+        checkInvalid();
+
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Test comment');
+        checkValid();
+    });
+
+    it('should validate form when selecting feedback option without other', () => {
+        render();
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+
+        ChatUiSelectors.chatbotMessageFeedbackUnrelated
+            .parent()
+            .find('input')
+            .click({ force: true });
+        checkValid();
+
+        ChatUiSelectors.chatbotMessageFeedbackUnclear.parent().find('input').click({ force: true });
+        checkValid();
+
+        ChatUiSelectors.chatbotMessageFeedbackIncorrect
+            .parent()
+            .find('input')
+            .click({ force: true });
+        checkValid();
+    });
+
+    it('should handle multiple selection changes', () => {
+        render();
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+
+        // First select a standard option
+        ChatUiSelectors.chatbotMessageFeedbackUnrelated
+            .parent()
+            .find('input')
+            .click({ force: true });
+        checkValid();
+
+        // Then switch to 'other' option
+        ChatUiSelectors.chatbotMessageFeedbackOther.parent().find('input').click({ force: true });
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.should('be.visible');
+
+        // Should be invalid without comment
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.focus().blur();
+        getFormError().should('be.visible').should('contain.text', 'Enter details.');
+        checkInvalid();
+
+        // Add comment and validate
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Custom feedback');
+        checkValid();
+    });
+
+    it('should show error when other is selected but comment is cleared', () => {
+        render();
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+
+        ChatUiSelectors.chatbotMessageFeedbackOther.parent().find('input').click({ force: true });
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.type('Initial comment');
+        checkValid();
+
+        // Clear the comment
+        ChatUiSelectors.chatbotMessageFeedbackOtherComment.clear().blur();
+        getFormError().should('be.visible').should('contain.text', 'Enter details.');
+        checkInvalid();
+    });
+}

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

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