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

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

@@ -1,225 +0,0 @@
-import { ILog, Log } from '@servicetitan/log-service';
-import { Container, Provider } from '@servicetitan/react-ioc';
-import {
-    ApiClientHelpCenter,
-    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 axios from 'axios';
-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 initializeHelpCenterChatbotContainer = () => {
-    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: ApiClientHelpCenter.IChatbotClientSettingsHelpCenter = {
-        area: 'FloatingChat',
-        instance: 'STapp',
-        constructorParametersFactory: () => ({
-            baseUrl: ChatbotBaseUrl,
-            axiosInstance: axios.create(),
-        }),
-    };
-    container
-        .bind<ApiClientHelpCenter.IChatbotClientSettingsHelpCenter>(CHATBOT_CLIENT_SETTINGS)
-        .toConstantValue(clientSettings);
-    container
-        .bind<IChatbotApiClient>(CHATBOT_API_CLIENT)
-        .to(ApiClientHelpCenter.ChatbotApiClient)
-        .inSingletonScope();
-    return container;
-};
-
-interface IChatbotProps {
-    className?: string;
-    customizations?: ChatbotCustomizations;
-}
-
-export function runChatbotHelpCenterSharedTests(
-    ChatbotComponent: FC<IChatbotProps>,
-    wrapperComponent?: (component: ReactElement) => ReactElement
-) {
-    let container: Container;
-    let log: CypressMocks.LogMock;
-    let apiClientSettings: ApiClientHelpCenter.IChatbotClientSettingsHelpCenter;
-    let apiClient: ApiClientHelpCenter.ChatbotApiClient;
-    let uiStore: ChatbotUiStore;
-    let uiBackendStore: ChatbotUiBackendStore;
-
-    beforeEach(() => {
-        container = initializeHelpCenterChatbotContainer();
-        log = container.get<CypressMocks.LogMock>(Log);
-        apiClientSettings =
-            container.get<ApiClientHelpCenter.IChatbotClientSettingsHelpCenter>(
-                CHATBOT_CLIENT_SETTINGS
-            );
-        apiClient = container.get<ApiClientHelpCenter.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 help center API', () => {
-        const sessionMock = CypressMocks.HC.CreateSession;
-        const messageMock = CypressMocks.HC.SendUserMessage;
-        const messageFeedbackMock = CypressMocks.HC.MessageFeedback;
-        const sessionFeedbackMock = CypressMocks.HC.SessionFeedback;
-
-        const aliasFilterOptions = CypressMocks.HC.interceptFilterOptions(ChatbotBaseUrl);
-        const aliasCreateSession = sessionMock.intercept(ChatbotBaseUrl);
-        const aliasSendUserMessage = messageMock.intercept(ChatbotBaseUrl);
-        const aliasMessageFeedback = messageFeedbackMock.intercept(ChatbotBaseUrl);
-        const aliasSessionFeedback = sessionFeedbackMock.intercept(ChatbotBaseUrl);
-
-        render().then(() => {
-            // Expect filters were loaded using the Help Center API
-            cy.wait(aliasFilterOptions).then(interception => {
-                // Check options were loaded correctly
-                expect(interception.request.url).to.equal(
-                    `${ChatbotBaseUrl}/api/Chat/filter-options`
-                );
-                expect(interception.response?.body).to.an('object');
-                expect(interception.response?.body?.sources).to.an('array');
-                expect(interception.response?.body?.contentTypes).to.an('array');
-                expect(interception.response?.body?.productAreas).to.an('array');
-                expect(interception.response?.statusCode).to.equal(200);
-            });
-
-            // Ask the bot a question
-            cy.log('Sending message...');
-            ChatUiSelectors.chatInput.type(`${messageMock.request.text}{enter}`, { delay: 0 });
-
-            // Check that the session was created
-            cy.wait(aliasCreateSession).then(interception => {
-                expect(interception.request.url).to.equal(
-                    `${ChatbotBaseUrl}/api/Chat/create-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(aliasSendUserMessage).then(interception => {
-                expect(interception.request.url).to.equal(
-                    `${ChatbotBaseUrl}/api/Chat/user-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);
-            });
-
-            // Send session feedback (manually)
-            cy.log('Sending session feedback...');
-            uiStore.sendSessionFeedback(
-                new Models.Feedback({
-                    sessionId: sessionMock.response.id,
-                    description: 'Good answer!',
-                    rating: Models.FeedbackRatings.ThumbsUp,
-                })
-            );
-            cy.wait(aliasSessionFeedback).then(interception => {
-                expect(interception.request.url).to.equal(
-                    `${ChatbotBaseUrl}/api/Chat/session-feedback?sessionId=${sessionMock.response.id}`
-                );
-                expect(interception.request.body).to.deep.equal(sessionFeedbackMock.request);
-                expect(interception.response?.statusCode).to.equal(200);
-            });
-
-            // Check the feedback is sent with thumbs up
-            cy.log('Sending message feedback...');
-            ChatUiSelectors.chatbotMessageFeedbackThumbsUp.scrollIntoView().click({ force: true });
-            cy.wait(aliasMessageFeedback).then(interception => {
-                expect(interception.request.url).to.equal(
-                    `${ChatbotBaseUrl}/api/Chat/bot-message-feedback?sessionId=${messageMock.response.sessionId}&botMessageId=${messageMock.response.id}`
-                );
-                expect(interception.request.body).to.deep.equal(messageFeedbackMock.request);
-                expect(interception.response?.statusCode).to.equal(200);
-            });
-        });
-    });
-}

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

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

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