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

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

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

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

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

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