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

package/src/tests/titan-chat-ui/message-timeout.shared-tests.tsx

@@ -0,0 +1,117 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface MessageTimeoutProps {
+    onResume: () => void;
+    onReset: () => void;
+}
+
+export function runMessageTimeoutSharedTests(MessageTimeoutComponent: FC<MessageTimeoutProps>) {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+    });
+
+    const render = (onResume?: () => void, onReset?: () => void, onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <MessageTimeoutComponent
+                        onResume={onResume ?? cy.spy().as('onResume')}
+                        onReset={onReset ?? cy.spy().as('onReset')}
+                    />,
+                    onAfterInit
+                )
+            );
+
+    it('should render timeout message with proper text content', () => {
+        render();
+
+        ChatUiSelectors.chatMessageTimeout.should('be.visible');
+        ChatUiSelectors.chatMessageTimeout.should('contain.text', 'Your session has timed out.');
+        ChatUiSelectors.chatMessageTimeout.should(
+            'contain.text',
+            'Would you like to resume it or start a new one?'
+        );
+    });
+
+    it('should render resume and reset links', () => {
+        render();
+
+        ChatUiSelectors.chatMessageTimeoutResume
+            .should('be.visible')
+            .should('contain.text', 'Continue session');
+
+        ChatUiSelectors.chatMessageTimeoutReset
+            .should('be.visible')
+            .should('contain.text', 'Start new session');
+    });
+
+    it('should call onResume when continue session link is clicked', () => {
+        const onResume = cy.spy().as('onResume');
+        render(onResume);
+
+        ChatUiSelectors.chatMessageTimeoutResume.click();
+        cy.get('@onResume').should('have.been.calledOnce');
+    });
+
+    it('should call onReset when start new session link is clicked', () => {
+        const onReset = cy.spy().as('onReset');
+        render(undefined, onReset);
+
+        ChatUiSelectors.chatMessageTimeoutReset.click();
+        cy.get('@onReset').should('have.been.calledOnce');
+    });
+
+    it('should handle both callbacks being provided', () => {
+        const onResume = cy.spy().as('onResume');
+        const onReset = cy.spy().as('onReset');
+        render(onResume, onReset);
+
+        ChatUiSelectors.chatMessageTimeoutResume.click();
+        cy.get('@onResume').should('have.been.calledOnce');
+        cy.get('@onReset').should('not.have.been.called');
+
+        ChatUiSelectors.chatMessageTimeoutReset.click();
+        cy.get('@onReset').should('have.been.calledOnce');
+        cy.get('@onResume').should('have.been.calledOnce');
+    });
+
+    it('should have proper data-cy attributes', () => {
+        render();
+
+        ChatUiSelectors.chatMessageTimeout.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-timeout'
+        );
+        ChatUiSelectors.chatMessageTimeoutResume.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-timeout-resume'
+        );
+        ChatUiSelectors.chatMessageTimeoutReset.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-timeout-reset'
+        );
+    });
+}

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

@@ -0,0 +1,92 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatParticipantIcon,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface MessageTypingProps {
+    avatar: {
+        name: string;
+        icon: ChatParticipantIcon;
+        className?: string;
+    };
+}
+
+export function runMessageTypingSharedTests(MessageTypingComponent: FC<MessageTypingProps>) {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+    });
+
+    const render = (icon: ChatParticipantIcon, onAfterInit?: () => void) =>
+        cy.wrap(null).then(() =>
+            testRenderWrapper(
+                chatUiStore,
+                chatUiBackendStore,
+                <MessageTypingComponent
+                    avatar={{
+                        name: 'Test User Name',
+                        icon,
+                        className: 'custom-class',
+                    }}
+                />,
+                onAfterInit
+            )
+        );
+
+    it('should render typing message with proper structure', () => {
+        render(ChatParticipantIcon.Bot);
+
+        ChatUiSelectors.chatMessageTyping.should('be.visible').children().should('have.length', 2);
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+    });
+
+    it('should render typing message with user icon', () => {
+        render(ChatParticipantIcon.Initials);
+
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+    });
+
+    it('should render typing message with agent icon', () => {
+        render(ChatParticipantIcon.Bot);
+
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+    });
+
+    it('should render typing message with empty icon', () => {
+        render(ChatParticipantIcon.Empty);
+
+        ChatUiSelectors.chatMessageTyping.should('be.visible');
+        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
+    });
+
+    it('should have proper data-cy attributes', () => {
+        render(ChatParticipantIcon.Bot);
+
+        ChatUiSelectors.chatMessageTyping.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-typing'
+        );
+        ChatUiSelectors.chatMessageTypingDots.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-typing-dots'
+        );
+    });
+}

package/src/tests/titan-chat-ui/message-user.shared-tests.tsx

@@ -0,0 +1,138 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC, ReactNode } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface MessageUserProps {
+    children?: ReactNode;
+    messageFooter?: ReactNode;
+    isError?: boolean;
+    className?: string;
+}
+
+export function runMessageUserSharedTests(
+    MessageUserComponent: FC<MessageUserProps>,
+    TextComponent: FC<any>
+) {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: IChatUiBackendStore;
+
+    beforeEach(() => {
+        container = testInitContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(800, 800);
+    });
+
+    const render = (
+        children?: ReactNode,
+        messageFooter?: ReactNode,
+        isError?: boolean,
+        className?: string,
+        onAfterInit?: () => void
+    ) =>
+        cy.wrap(null).then(() =>
+            testRenderWrapper(
+                chatUiStore,
+                chatUiBackendStore,
+                <MessageUserComponent
+                    messageFooter={messageFooter}
+                    isError={isError}
+                    className={className}
+                >
+                    {children}
+                </MessageUserComponent>,
+                onAfterInit
+            )
+        );
+
+    it('should render user message with basic content', () => {
+        render(<TextComponent data-cy="content">message user content</TextComponent>);
+
+        ChatUiSelectors.chatMessageUser.should('be.visible');
+        ChatUiSelectors.chatMessageContent
+            .should('be.visible')
+            .should('contain.text', 'message user content');
+    });
+
+    it('should render user message with long text content', () => {
+        const longText = 'message user content '.repeat(100).trim();
+        render(<TextComponent data-cy="content">{longText}</TextComponent>);
+
+        ChatUiSelectors.chatMessageContent.should('be.visible').should('contain.text', longText);
+    });
+
+    it('should render user message with footer', () => {
+        render(
+            <TextComponent data-cy="content">message user content</TextComponent>,
+            <TextComponent>message user footer</TextComponent>
+        );
+
+        ChatUiSelectors.chatMessageFooter.should('be.visible');
+        ChatUiSelectors.chatMessageFooter.should('contain.text', 'message user footer');
+    });
+
+    it('should render user message with error state', () => {
+        render(
+            <TextComponent data-cy="content">error message content</TextComponent>,
+            undefined,
+            true
+        );
+
+        ChatUiSelectors.chatMessageUser.should('be.visible');
+        ChatUiSelectors.chatMessageContent.should('be.visible');
+    });
+
+    it('should render user message with custom className', () => {
+        render(
+            <TextComponent data-cy="content">message content</TextComponent>,
+            undefined,
+            false,
+            'custom-message-class'
+        );
+
+        ChatUiSelectors.chatMessageUser.should('be.visible');
+        ChatUiSelectors.chatMessageUser.should('have.class', 'custom-message-class');
+    });
+
+    it('should not render footer when messageFooter is not provided', () => {
+        render(<TextComponent data-cy="content">message without footer</TextComponent>);
+
+        ChatUiSelectors.chatMessageUser.should('be.visible');
+        ChatUiSelectors.chatMessageFooter.should('not.exist');
+    });
+
+    it('should have proper data-cy attributes for testing', () => {
+        render(<TextComponent data-cy="content">test message</TextComponent>);
+
+        ChatUiSelectors.chatMessageUser.should('have.attr', 'data-cy', 'titan-chat-message-user');
+        ChatUiSelectors.chatMessageContent.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-content'
+        );
+    });
+
+    it('should render both content and footer when both are provided', () => {
+        render(
+            <TextComponent data-cy="content">message content</TextComponent>,
+            <TextComponent data-cy="footer">message footer</TextComponent>
+        );
+
+        ChatUiSelectors.chatMessageUser.should('be.visible');
+        ChatUiSelectors.chatMessageContent
+            .should('be.visible')
+            .should('contain.text', 'message content');
+        ChatUiSelectors.chatMessageFooter
+            .should('be.visible')
+            .should('contain.text', 'message footer');
+    });
+}

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

@@ -0,0 +1,164 @@
+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 IChatFiltersProps {
+    className?: string;
+}
+
+export function runChatbotFiltersSharedTests(
+    ChatFiltersComponent: FC<IChatFiltersProps>,
+    wrapperComponent?: (component: ReactElement) => ReactElement
+) {
+    let container: Container;
+    let api: CypressMocks.ChatbotApiClientMock;
+    let chatbotUiStore: IChatbotUiStore;
+
+    const filter = (index: number) => ChatUiSelectors.chatbotFilterButton.eq(index);
+    const filterOptions = (index: number) =>
+        ChatUiSelectors.chatbotFilterOptions.then($options =>
+            ChatUiSelectors.chatbotFilterOptions.eq($options.length === 1 ? 0 : index)
+        );
+    const filterContent = (index: number) => {
+        const selector = `[data-cy="${ChatUiSelectors.cy.chatbotFilterContent}"], [data-anvil-component="Popover"]`;
+        return cy
+            .get(selector)
+            .then($options => cy.get(selector).eq($options.length === 1 ? 0 : index));
+    };
+
+    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 = (className?: string, onAfterInit?: () => void) => {
+        return cy.wrap(null).then(() => {
+            const component = (
+                <div
+                    style={{
+                        position: 'absolute',
+                        bottom: '2rem',
+                        left: '2rem',
+                        width: 'calc(100% - 4rem)',
+                    }}
+                >
+                    <ChatFiltersComponent className={className} />
+                </div>
+            );
+            const wrappedComponent = wrapperComponent ? wrapperComponent(component) : component;
+
+            return testRenderWrapperChatbot(container, wrappedComponent, onAfterInit);
+        });
+    };
+
+    it('should render filters container when filters are available', () => {
+        render().then(() => {
+            chatbotUiStore.setFilters(ModelsMocks.mockFrontendModel());
+        });
+
+        ChatUiSelectors.chatbotFilters.should('be.visible');
+        ChatUiSelectors.chatbotFilterButton.should('have.length', 1);
+    });
+
+    it('should not render anything when no filters are available', () => {
+        render().then(() => {
+            chatbotUiStore.setFilters(ModelsMocks.mockFrontendModelEmpty());
+        });
+
+        ChatUiSelectors.chatbotFilters.should('not.exist');
+    });
+
+    it('should apply custom className to filters container', () => {
+        const customClass = 'custom-filters-class';
+
+        render(customClass).then(() => {
+            chatbotUiStore.setFilters(ModelsMocks.mockFrontendModel());
+        });
+
+        ChatUiSelectors.chatbotFilters.should('have.class', customClass);
+    });
+
+    it('should cascade filters 1', () => {
+        render().then(() => {
+            chatbotUiStore.setFilters(ModelsMocks.mockFrontendModel());
+        });
+
+        filter(0).click();
+        filterOptions(0).within(() => {
+            cy.contains('Knowledge Base').should('be.visible');
+            cy.contains('Jarvis').should('be.visible').click();
+        });
+
+        ChatUiSelectors.chatbotFilterButton.should('have.length', 2);
+        filter(0).should('contain.text', 'Sources');
+        filter(1).should('contain.text', 'Content Types').click();
+        filterOptions(1).within(() => {
+            cy.contains('Xxx').should('be.visible').click();
+            cy.contains('Yyy').should('be.visible').click();
+            cy.contains('Release Notes').should('be.visible').click();
+        });
+
+        ChatUiSelectors.chatbotFilterButton.should('have.length', 2);
+        filter(0).should('contain.text', 'Sources1');
+        filter(1).should('contain.text', 'Content Types3');
+    });
+
+    it('should cascade filters 2', () => {
+        render().then(() => {
+            chatbotUiStore.setFilters(ModelsMocks.mockFrontendModel());
+        });
+
+        filter(0).click();
+        filterOptions(0).within(() => {
+            cy.contains('Knowledge Base').should('be.visible').click();
+            cy.contains('Jarvis').should('be.visible').click();
+        });
+
+        ChatUiSelectors.chatbotFilterButton.should('have.length', 3);
+        filter(0).should('contain.text', 'Sources');
+        filter(1).should('contain.text', 'Content Types').click();
+        filter(2).should('contain.text', 'Product Areas');
+        filterOptions(1).within(() => {
+            cy.contains('Xxx').should('be.visible').click();
+            cy.contains('Yyy').should('be.visible').click();
+            cy.contains('FAQ').should('be.visible').click();
+            cy.contains('How To').should('be.visible').click();
+            cy.contains('Release Notes').should('be.visible').click();
+        });
+
+        filter(2).should('contain.text', 'Product Areas').click();
+        filterOptions(2).within(() => {
+            cy.contains('Call Booking').should('be.visible').click();
+            cy.contains('Marketing').should('be.visible').click();
+            cy.contains('Marketing Pro').should('be.visible').click();
+        });
+
+        ChatUiSelectors.chatbotFilterButton.should('have.length', 3);
+        filter(0).should('contain.text', 'Sources2');
+        filter(1).should('contain.text', 'Content Types5');
+        filter(2).should('contain.text', 'Product Areas3');
+
+        filter(0).click();
+        filterContent(0).within(() => {
+            ChatUiSelectors.chatbotFilterNone.click();
+        });
+
+        ChatUiSelectors.chatbotFilterButton.should('have.length', 1);
+    });
+}