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

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

@@ -0,0 +1,170 @@
+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, ReactNode } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface MessageAgentSharedTestsOptions {
+    isAnvil2?: boolean;
+}
+
+interface MessageAgentProps {
+    'avatar'?: {
+        name: string;
+        icon: ChatParticipantIcon;
+        className?: string;
+    };
+    'children'?: ReactNode;
+    'messageFooter'?: ReactNode;
+    'fullWidth'?: boolean;
+    'data-cy'?: string;
+}
+
+interface MessageAgentComponents {
+    TextComponent: FC<any>;
+    ButtonComponent: FC<any>;
+    ContainerComponent: FC<any>;
+    MessageFooterComponent: FC<any>;
+    thumbUpIcon?: any;
+    thumbDownIcon?: any;
+}
+
+export function runMessageAgentSharedTests(
+    MessageAgentComponent: FC<MessageAgentProps>,
+    components: MessageAgentComponents,
+    options: MessageAgentSharedTestsOptions = {}
+) {
+    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 = (props?: any, onAfterInit?: () => void) => {
+        const defaultProps = {
+            avatar: {
+                name: 'Test User Name',
+                icon: ChatParticipantIcon.Bot,
+            },
+            children: options.isAnvil2 ? (
+                <components.TextComponent variant="body" data-cy="content">
+                    message agent content
+                </components.TextComponent>
+            ) : (
+                <components.TextComponent data-cy="content">
+                    message agent content
+                </components.TextComponent>
+            ),
+        };
+
+        return cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <MessageAgentComponent {...defaultProps} {...props} />,
+                    onAfterInit
+                )
+            );
+    };
+
+    const createMessageFooter = () => {
+        if (options.isAnvil2) {
+            return (
+                <components.ContainerComponent
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                >
+                    <components.MessageFooterComponent
+                        name="name"
+                        timestamp={new Date('2022-01-01T10:10:00')}
+                    />
+                    <components.ContainerComponent direction="row" gap="1" alignItems="center">
+                        <components.ButtonComponent
+                            icon={components.thumbUpIcon}
+                            size="small"
+                            appearance="ghost"
+                        />
+                        <components.ButtonComponent
+                            icon={components.thumbDownIcon}
+                            size="small"
+                            appearance="ghost"
+                        />
+                    </components.ContainerComponent>
+                </components.ContainerComponent>
+            );
+        }
+
+        return (
+            <components.ContainerComponent
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+            >
+                <components.MessageFooterComponent
+                    name="name"
+                    timestamp={new Date('2022-01-01T10:10:00')}
+                />
+                <components.ContainerComponent direction="row" spacing="1">
+                    <components.ButtonComponent iconName="thumb_up" xsmall fill="subtle" />
+                    <components.ButtonComponent iconName="thumb_down" xsmall fill="subtle" />
+                </components.ContainerComponent>
+            </components.ContainerComponent>
+        );
+    };
+
+    it('should be properly rendered', () => {
+        render({
+            avatar: {
+                name: 'Test User Name',
+                icon: ChatParticipantIcon.Bot,
+                className: 'custom-class',
+            },
+        });
+
+        ChatUiSelectors.chatMessageAgent.should('be.visible').children().should('have.length', 2);
+        ChatUiSelectors.chatAvatarBot.should('be.visible').should('have.class', 'custom-class');
+        ChatUiSelectors.chatMessageContentAgent.should('contain.text', 'message agent content');
+    });
+
+    it('should be full width', () => {
+        render({
+            fullWidth: true,
+        });
+
+        ChatUiSelectors.chatMessageContentAgent.should('contain.text', 'message agent content');
+    });
+
+    it('should render with custom data-cy', () => {
+        render({
+            'data-cy': 'custom-data-cy',
+        });
+
+        cy.getCy('custom-data-cy').should('be.visible');
+    });
+
+    it('should render custom message footer', () => {
+        render({
+            messageFooter: createMessageFooter(),
+        });
+
+        ChatUiSelectors.chatMessageAgent.should('be.visible').children().should('have.length', 2);
+        ChatUiSelectors.chatMessageFooter
+            .should('be.visible')
+            .should('contain.text', 'name • 10:10 AM');
+    });
+}

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

@@ -0,0 +1,139 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatMessageModelFile,
+    ChatMessageState,
+    ChatParticipantIcon,
+    ChatParticipantModel,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { FC } from 'react';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface MessageContentFileSharedTestsOptions {
+    isAnvil2?: boolean;
+}
+
+export function runMessageContentFileSharedTests(
+    MessageContentFileComponent: FC<{ message: ChatMessageModelFile }>,
+    options: MessageContentFileSharedTestsOptions = {}
+) {
+    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 = (message: ChatMessageModelFile, onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <MessageContentFileComponent message={message} />,
+                    onAfterInit
+                )
+            );
+
+    const createFileMessage = (
+        fileName: string,
+        state: ChatMessageState = ChatMessageState.Delivered
+    ): ChatMessageModelFile => ({
+        id: 'test-file-message',
+        type: 'file',
+        participant: {
+            isAgent: false,
+            icon: ChatParticipantIcon.Empty,
+            name: 'Test User',
+        } as ChatParticipantModel,
+        fileName,
+        state,
+        timestamp: new Date(),
+    });
+
+    const getIconSelector = () => {
+        return options.isAnvil2 ? '[data-anv="icon"]' : '[data-anvil-component="Icon"]';
+    };
+
+    it('should render file name with attach icon', () => {
+        const message = createFileMessage('test-document.pdf');
+        render(message);
+
+        cy.get(getIconSelector()).should('be.visible');
+        cy.contains('test-document.pdf').should('be.visible');
+    });
+
+    it('should display file name for different file types', () => {
+        const imageMessage = createFileMessage('image.jpg');
+        render(imageMessage);
+
+        cy.contains('image.jpg').should('be.visible');
+    });
+
+    it('should not show status text when message is in sent state', () => {
+        const message = createFileMessage('document.pdf', ChatMessageState.Delivered);
+        render(message);
+
+        cy.contains('File uploaded').should('exist');
+        cy.contains('Please wait while uploading...').should('not.exist');
+    });
+
+    it('should show "Please wait while uploading..." when message is delivering', () => {
+        const message = createFileMessage('document.pdf', ChatMessageState.Delivering);
+        render(message);
+
+        cy.contains('document.pdf').should('be.visible');
+        cy.contains('Please wait while uploading...').should('be.visible');
+        cy.contains('File uploaded').should('not.exist');
+    });
+
+    it('should show "File uploaded" when message is delivered', () => {
+        const message = createFileMessage('document.pdf', ChatMessageState.Delivered);
+        render(message);
+
+        cy.contains('document.pdf').should('be.visible');
+        cy.contains('File uploaded').should('be.visible');
+        cy.contains('Please wait while uploading...').should('not.exist');
+    });
+
+    it('should render with long file names', () => {
+        const message = createFileMessage('very-long-file-name-that-might-cause-layout-issues.pdf');
+        render(message);
+
+        cy.contains('very-long-file-name-that-might-cause-layout-issues.pdf').should('be.visible');
+    });
+
+    it('should render file with special characters in name', () => {
+        const message = createFileMessage('test file (1) - copy.pdf');
+        render(message);
+
+        cy.contains('test file (1) - copy.pdf').should('be.visible');
+    });
+
+    it('should not show status text when message is in pending state', () => {
+        const message = createFileMessage('document.pdf', ChatMessageState.Delivering);
+        render(message);
+
+        cy.contains('document.pdf').should('be.visible');
+        cy.contains('File uploaded').should('not.exist');
+        cy.contains('Please wait while uploading...').should('be.visible');
+    });
+
+    it('should not show status text when message is in error state', () => {
+        const message = createFileMessage('document.pdf', ChatMessageState.Failed);
+        render(message);
+
+        cy.contains('document.pdf').should('be.visible');
+        cy.contains('File uploaded').should('not.exist');
+        cy.contains('Please wait while uploading...').should('not.exist');
+    });
+}

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

@@ -0,0 +1,147 @@
+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 MessageSystemSharedTestsOptions {
+    isAnvil2?: boolean;
+}
+
+interface MessageSystemProps {
+    className?: string;
+    fullWidth?: boolean;
+    children?: ReactNode;
+}
+
+interface MessageSystemComponents {
+    TextComponent: FC<any>;
+    ContainerComponent: FC<any>;
+}
+
+export function runMessageSystemSharedTests(
+    MessageSystemComponent: FC<MessageSystemProps>,
+    components: MessageSystemComponents,
+    options: MessageSystemSharedTestsOptions = {}
+) {
+    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 = (
+        props: { className?: string; fullWidth?: boolean; children?: ReactNode } = {},
+        onAfterInit?: () => void
+    ) =>
+        cy.wrap(null).then(() =>
+            testRenderWrapper(
+                chatUiStore,
+                chatUiBackendStore,
+                <MessageSystemComponent className={props.className} fullWidth={props.fullWidth}>
+                    {props.children}
+                </MessageSystemComponent>,
+                onAfterInit
+            )
+        );
+
+    const createTestContent = () => {
+        if (options.isAnvil2) {
+            return (
+                <components.ContainerComponent>
+                    <components.TextComponent variant="body" data-cy="content">
+                        message system content
+                    </components.TextComponent>
+                </components.ContainerComponent>
+            );
+        }
+
+        return (
+            <components.ContainerComponent className="border">
+                <components.TextComponent data-cy="content">
+                    message system content
+                </components.TextComponent>
+            </components.ContainerComponent>
+        );
+    };
+
+    const createSimpleTestContent = () => {
+        if (options.isAnvil2) {
+            return <components.TextComponent variant="body">Test content</components.TextComponent>;
+        }
+
+        return <components.TextComponent>Test content</components.TextComponent>;
+    };
+
+    it('should be properly rendered', () => {
+        render({
+            className: 'custom-class',
+            children: createTestContent(),
+        });
+
+        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
+        cy.get('[data-cy="content"]').should('contain.text', 'message system content');
+    });
+
+    it('should be properly rendered fullwidth', () => {
+        render({
+            className: 'custom-class',
+            fullWidth: true,
+            children: createTestContent(),
+        });
+
+        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
+        cy.get('[data-cy="content"]').should('contain.text', 'message system content');
+    });
+
+    it('should render with default data-cy attribute', () => {
+        render({
+            children: createSimpleTestContent(),
+        });
+
+        ChatUiSelectors.chatMessageSystem.should(
+            'have.attr',
+            'data-cy',
+            'titan-chat-message-system'
+        );
+    });
+
+    it('should render without children', () => {
+        render();
+
+        ChatUiSelectors.chatMessageSystem.should('not.be.visible');
+    });
+
+    it('should handle complex children structure', () => {
+        const complexChildren = options.isAnvil2 ? (
+            <components.ContainerComponent>
+                <components.TextComponent variant="body">First line</components.TextComponent>
+                <components.TextComponent variant="body">Second line</components.TextComponent>
+            </components.ContainerComponent>
+        ) : (
+            <components.ContainerComponent>
+                <components.TextComponent>First line</components.TextComponent>
+                <components.TextComponent>Second line</components.TextComponent>
+            </components.ContainerComponent>
+        );
+
+        render({
+            children: complexChildren,
+        });
+
+        ChatUiSelectors.chatMessageSystem.should('be.visible');
+        cy.contains('First line').should('be.visible');
+        cy.contains('Second line').should('be.visible');
+    });
+}

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'
+        );
+    });
+}