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

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

@@ -0,0 +1,189 @@
+import { Container } from '@servicetitan/react-ioc';
+import { CHATBOT_API_CLIENT, 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 IChatbotLinksProps {
+    seeMoreLabel?: string;
+    seeLessLabel?: string;
+    links?: Models.ScoredUrl[];
+    onToggle?: () => void;
+    linkProps?: {
+        primary?: boolean;
+        className?: string;
+    };
+}
+
+export function runChatbotLinksSharedTests(
+    ChatbotLinksComponent: FC<IChatbotLinksProps>,
+    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 = (
+        props: {
+            seeMoreLabel?: string;
+            seeLessLabel?: string;
+            links?: Models.ScoredUrl[];
+            onToggle?: () => void;
+            linkProps?: {
+                primary?: boolean;
+                className?: string;
+            };
+        } = {},
+        onAfterInit?: () => void
+    ) => {
+        const defaultProps = {
+            seeMoreLabel: 'See more',
+            seeLessLabel: 'See less',
+            links: ModelsMocks.mockScoredUrls(),
+            ...props,
+        };
+
+        return cy.wrap(null).then(() => {
+            const component = <ChatbotLinksComponent {...defaultProps} />;
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render component with links when links are provided', () => {
+        render();
+
+        ChatUiSelectors.chatbotLinksMore.should('be.visible');
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'See more');
+        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
+    });
+
+    it('should not render anything when no links are provided', () => {
+        render({ links: [] });
+
+        ChatUiSelectors.chatbotLinksMore.should('not.exist');
+        ChatUiSelectors.chatbotLinksCollapsible.should('not.exist');
+    });
+
+    it('should toggle collapsible when clicking the toggle button', () => {
+        render();
+
+        // Initially collapsed
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'See more');
+        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
+
+        // Click to expand
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'See less');
+        ChatUiSelectors.chatbotLinksLink.should('be.visible');
+
+        // Click to collapse
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'See more');
+        ChatUiSelectors.chatbotLinksLink.should('not.be.visible');
+    });
+
+    it('should render all links when expanded', () => {
+        const testLinks = [
+            ModelsMocks.mockScoredUrl({ url: 'https://test1.com', title: 'Test Link 1' }),
+            ModelsMocks.mockScoredUrl({ url: 'https://test2.com', title: 'Test Link 2' }),
+            ModelsMocks.mockScoredUrl({ url: 'https://test3.com', title: 'Test Link 3' }),
+        ];
+
+        render({ links: testLinks });
+
+        // Expand the links
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        // Check that all links are rendered
+        ChatUiSelectors.chatbotLinksLink.should('have.length', 3);
+        ChatUiSelectors.chatbotLinksLink.eq(0).should('contain.text', 'Test Link 1');
+        ChatUiSelectors.chatbotLinksLink.eq(1).should('contain.text', 'Test Link 2');
+        ChatUiSelectors.chatbotLinksLink.eq(2).should('contain.text', 'Test Link 3');
+    });
+
+    it('should render link with url as text when title is not provided', () => {
+        const testLinks = [
+            ModelsMocks.mockScoredUrl({ url: 'https://test-no-title.com', title: undefined }),
+        ];
+
+        render({ links: testLinks });
+
+        // Expand the links
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        ChatUiSelectors.chatbotLinksLink.should('contain.text', 'https://test-no-title.com');
+    });
+
+    it('should set correct href and target attributes on links', () => {
+        const testLinks = [
+            ModelsMocks.mockScoredUrl({ url: 'https://external-link.com', title: 'External Link' }),
+        ];
+
+        render({ links: testLinks });
+
+        // Expand the links
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        ChatUiSelectors.chatbotLinksLink
+            .should('have.attr', 'href', 'https://external-link.com')
+            .and('have.attr', 'target', '_blank');
+    });
+
+    it('should call onToggle callback with delay when toggling', () => {
+        const onToggleSpy = cy.stub().as('onToggle');
+
+        render({ onToggle: onToggleSpy });
+
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        // Callback should not be called immediately
+        cy.get('@onToggle').should('not.have.been.called');
+
+        // Wait for the 200ms delay
+        cy.wait(250);
+        cy.get('@onToggle').should('have.been.calledOnce');
+    });
+
+    it('should use custom labels when provided', () => {
+        render({
+            seeMoreLabel: 'Show links',
+            seeLessLabel: 'Hide links',
+        });
+
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'Show links');
+
+        ChatUiSelectors.chatbotLinksMore.click();
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'Hide links');
+    });
+
+    it('should apply custom link props when provided', () => {
+        const testLinks = [ModelsMocks.mockScoredUrl({ url: 'https://test.com', title: 'Test' })];
+
+        render({
+            links: testLinks,
+            linkProps: {
+                className: 'custom-link-class',
+            },
+        });
+
+        // Expand the links
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        ChatUiSelectors.chatbotLinksLink.should('have.class', 'custom-link-class');
+    });
+}

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

@@ -0,0 +1,127 @@
+import { Log } from '@servicetitan/log-service';
+import { Container, Provider } from '@servicetitan/react-ioc';
+import {
+    CHATBOT_API_CLIENT,
+    CHATBOT_UI_BACKEND_STORE_TOKEN,
+    CHATBOT_UI_STORE_TOKEN,
+    ChatbotCustomizations,
+    ChatbotUiBackendStore,
+    ChatbotUiStore,
+    Models,
+    ModelsMocks,
+} from '@servicetitan/titan-chatbot-api';
+import { mount } from 'cypress/react';
+import { FC, ReactElement, useMemo } from 'react';
+import { CypressMocks, testInitContainerChatbot } from '../..';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+
+interface IChatbotProps {
+    className?: string;
+    customizations?: ChatbotCustomizations;
+}
+
+export function runChatbotLiveSharedTests(
+    ChatbotComponent: FC<IChatbotProps>,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let log: CypressMocks.LogMock;
+    let api: CypressMocks.ChatbotApiClientMock;
+    let uiStore: ChatbotUiStore;
+    let uiBackendStore: ChatbotUiBackendStore;
+
+    const mockApi = () => {
+        api.postSession = cy.stub().resolves(ModelsMocks.mockSession());
+        api.getOptions = cy.stub().resolves(ModelsMocks.mockFrontendModel());
+    };
+
+    beforeEach(() => {
+        cy.intercept('GET', 'https://fonts.gstatic.com/**', {
+            statusCode: 200,
+            body: new ArrayBuffer(0),
+            headers: {
+                'Content-Type': 'font/woff2',
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
+            },
+        });
+        container = testInitContainerChatbot();
+        log = container.get<CypressMocks.LogMock>(Log);
+        api = container.get<CypressMocks.ChatbotApiClientMock>(CHATBOT_API_CLIENT);
+        uiStore = container.get<ChatbotUiStore>(CHATBOT_UI_STORE_TOKEN);
+        uiBackendStore = container.get<ChatbotUiBackendStore>(CHATBOT_UI_BACKEND_STORE_TOKEN);
+        mockApi();
+        cy.viewport(550, 800);
+    });
+
+    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,
+                })
+            );
+    };
+
+    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_API_CLIENT, useValue: api },
+                        {
+                            provide: CHATBOT_UI_STORE_TOKEN,
+                            useValue: uiStore,
+                        },
+                        {
+                            provide: CHATBOT_UI_BACKEND_STORE_TOKEN,
+                            useValue: uiBackendStore,
+                        },
+                    ]}
+                >
+                    {wrappedComponent}
+                </Provider>
+            );
+        };
+        mount(<ChatbotWrapper />);
+    };
+
+    const ask = (message: string) => {
+        ChatUiSelectors.chatInput.type(`${message}{enter}`, { delay: 0 });
+    };
+
+    it.skip('should render the chatbot component', () => {
+        mockAskBotApi("Hello! I'm chatbot mocked response!!!");
+        render();
+        ask('Hello!');
+        ChatUiSelectors.chatbotMessageFeedbackThumbsUp.should('be.visible').click();
+        cy.get('@askBotFeedback').should('have.been.calledOnce');
+    });
+}

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

@@ -0,0 +1,187 @@
+import { Container } from '@servicetitan/react-ioc';
+import { ChatMessageModelText, mockChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
+import { CHATBOT_API_CLIENT, 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 IChatbotMessageAnswerReadonlyProps {
+    message: ChatMessageModelText;
+}
+
+export function runChatbotMessageAnswerReadonlySharedTests(
+    ChatbotMessageAnswerReadonlyComponent: FC<IChatbotMessageAnswerReadonlyProps>,
+    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 = (message: ChatMessageModelText, onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const component = <ChatbotMessageAnswerReadonlyComponent message={message} />;
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render basic readonly message answer', () => {
+        const message = mockChatMessageModelText(false, {
+            message: 'This is a readonly answer from the chatbot',
+        });
+
+        render(message);
+
+        cy.contains('This is a readonly answer from the chatbot').should('be.visible');
+    });
+
+    it('should render multiline text correctly', () => {
+        const multilineMessage = 'Line 1\nLine 2\nLine 3';
+        const message = mockChatMessageModelText(false, {
+            message: multilineMessage,
+        });
+
+        render(message);
+
+        cy.contains('Line 1').should('be.visible');
+        cy.contains('Line 2').should('be.visible');
+        cy.contains('Line 3').should('be.visible');
+    });
+
+    it('should render readonly message without bot message data', () => {
+        const message = mockChatMessageModelText(false, {
+            message: 'Simple readonly answer',
+            data: undefined,
+        });
+
+        render(message);
+
+        cy.contains('Simple readonly answer').should('be.visible');
+
+        // Should not render links when no bot message data
+        ChatUiSelectors.chatbotLinksLink.should('not.exist');
+    });
+
+    it('should render readonly message with bot message data but no links', () => {
+        const botMessageWithoutLinks: Models.IBotMessageWithFeedback = {
+            ...ModelsMocks.mockBotMessage({ answer: 'Answer without links' }),
+            scoredUrls: [],
+        };
+
+        const message = mockChatMessageModelText(false, {
+            message: 'Answer without links',
+            data: botMessageWithoutLinks,
+        });
+
+        render(message);
+
+        cy.contains('Answer without links').should('be.visible');
+
+        // Should not render links when scoredUrls is empty
+        ChatUiSelectors.chatbotLinksCollapsible.should('not.exist');
+    });
+
+    it('should render readonly message with bot message data and links', () => {
+        const botMessageWithFeedback: Models.IBotMessageWithFeedback = {
+            ...ModelsMocks.mockBotMessage({ answer: 'Readonly answer with links' }),
+            scoredUrls: [
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/article1',
+                    title: 'Example Article 1',
+                    score: 0.9,
+                }),
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/article2',
+                    title: 'Example Article 2',
+                    score: 0.8,
+                }),
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/article3',
+                    title: 'Example Article 3',
+                    score: 0.7,
+                }),
+            ],
+        };
+
+        const message = mockChatMessageModelText(false, {
+            message: 'Readonly answer with links',
+            data: botMessageWithFeedback,
+        });
+
+        render(message);
+
+        cy.contains('Readonly answer with links').should('be.visible');
+
+        // Check that links are rendered with correct labels
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'Learn more').click();
+        ChatUiSelectors.chatbotLinksLink.should('be.visible');
+    });
+
+    it('should render readonly message with bot message data and single link', () => {
+        const botMessageWithSingleLink: Models.IBotMessageWithFeedback = {
+            ...ModelsMocks.mockBotMessage({ answer: 'Answer with single link' }),
+            scoredUrls: [
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/single-article',
+                    title: 'Single Article',
+                    score: 0.95,
+                }),
+            ],
+        };
+
+        const message = mockChatMessageModelText(false, {
+            message: 'Answer with single link',
+            data: botMessageWithSingleLink,
+        });
+
+        render(message);
+
+        cy.contains('Answer with single link').should('be.visible');
+
+        // Check that single link is rendered
+        ChatUiSelectors.chatbotLinksMore.should('be.visible').click();
+        ChatUiSelectors.chatbotLinksLink.should('have.length', 1);
+    });
+
+    it('should handle null/undefined scoredUrls gracefully', () => {
+        const botMessageWithNullUrls: Models.IBotMessageWithFeedback = {
+            ...ModelsMocks.mockBotMessage({ answer: 'Answer with null URLs' }),
+            scoredUrls: null as any,
+        };
+
+        const message = mockChatMessageModelText(false, {
+            message: 'Answer with null URLs',
+            data: botMessageWithNullUrls,
+        });
+
+        render(message);
+
+        cy.contains('Answer with null URLs').should('be.visible');
+
+        // Should not render links when scoredUrls is null
+        ChatUiSelectors.chatbotLinksCollapsible.should('not.exist');
+    });
+
+    it('should render empty message gracefully', () => {
+        const message = mockChatMessageModelText(false, {
+            message: '',
+        });
+
+        render(message);
+
+        // Component should still render even with empty message
+        cy.get('body').should('be.visible');
+    });
+}

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

@@ -0,0 +1,144 @@
+import { Container } from '@servicetitan/react-ioc';
+import { ChatMessageModelText, mockChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
+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 IChatbotMessageAnswerProps {
+    message: ChatMessageModelText;
+}
+
+export function runChatbotMessageAnswerSharedTests(
+    ChatbotMessageAnswerComponent: FC<IChatbotMessageAnswerProps>,
+    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 = (message: ChatMessageModelText, onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const component = <ChatbotMessageAnswerComponent message={message} />;
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render basic message answer', () => {
+        const message = mockChatMessageModelText(false, {
+            message: 'This is a test answer from the chatbot',
+        });
+
+        render(message);
+
+        ChatUiSelectors.chatbotMessageAnswer.should('be.visible');
+        ChatUiSelectors.chatbotMessageAnswer.should(
+            'contain.text',
+            'This is a test answer from the chatbot'
+        );
+    });
+
+    it('should render message answer with bot message data and links', () => {
+        const botMessageWithFeedback: Models.IBotMessageWithFeedback = {
+            ...ModelsMocks.mockBotMessage({ answer: 'Test answer with links' }),
+            scoredUrls: [
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/article1',
+                    title: 'Example Article 1',
+                    score: 0.9,
+                }),
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/article2',
+                    title: 'Example Article 2',
+                    score: 0.8,
+                }),
+            ],
+        };
+
+        const message = mockChatMessageModelText(false, {
+            message: 'Test answer with links',
+            data: botMessageWithFeedback,
+        });
+
+        render(message);
+
+        ChatUiSelectors.chatbotMessageAnswer.should('be.visible');
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Test answer with links');
+
+        // Check that links are rendered
+        ChatUiSelectors.chatbotLinksMore.should('contain.text', 'Learn more').click();
+        ChatUiSelectors.chatbotLinksLink.should('be.visible');
+    });
+
+    it('should render multiline text correctly', () => {
+        const multilineMessage = 'Line 1\nLine 2\nLine 3';
+        const message = mockChatMessageModelText(false, {
+            message: multilineMessage,
+        });
+
+        render(message);
+
+        ChatUiSelectors.chatbotMessageAnswer.should('be.visible');
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Line 1');
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Line 2');
+        ChatUiSelectors.chatbotMessageAnswer.should('contain.text', 'Line 3');
+    });
+
+    it('should trigger scroll when links are toggled for last message', () => {
+        const botMessageWithFeedback: Models.IBotMessageWithFeedback = {
+            ...ModelsMocks.mockBotMessage({ answer: 'Last message with links' }),
+            scoredUrls: [
+                ModelsMocks.mockScoredUrl({
+                    url: 'https://example.com/article',
+                    title: 'Example Article',
+                    score: 0.9,
+                }),
+            ],
+        };
+
+        const message = mockChatMessageModelText(false, {
+            message: 'Last message with links',
+            data: botMessageWithFeedback,
+        });
+
+        render(message, () => {
+            // Set this message as the last message in the store
+            chatbotUiStore.setMessages([message]);
+        });
+
+        cy.wait(1).then(() => {
+            // Verify the message is the last one in the store
+            expect(chatbotUiStore.messages.at(-1)?.id).to.equal(message.id);
+        });
+
+        ChatUiSelectors.chatbotMessageAnswer.should('be.visible');
+
+        // Toggle links to trigger scroll
+        ChatUiSelectors.chatbotLinksMore.click();
+
+        // Verify scroll was triggered (this would be implementation-specific)
+        cy.wait(150); // Wait for setTimeout to complete
+    });
+}