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

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

@@ -0,0 +1,158 @@
+import { Container } from '@servicetitan/react-ioc';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatCustomizations,
+    ChatRunState,
+    ChatUiBackendEchoStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '@servicetitan/titan-chat-ui-common';
+import { ComponentType } from 'react';
+import { ChatUiSelectors } from '../../utils/chat-ui-selectors';
+import { testInitContainer, testRenderWrapper } from '../../utils/test-utils';
+
+interface IChatProps {
+    className?: string;
+    customizations?: ChatCustomizations;
+}
+
+export function runChatSharedTests(ChatComponent: ComponentType<IChatProps>) {
+    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?: IChatProps, onAfterInit?: () => void) =>
+        cy
+            .wrap(null)
+            .then(() =>
+                testRenderWrapper(
+                    chatUiStore,
+                    chatUiBackendStore,
+                    <ChatComponent {...props} />,
+                    onAfterInit
+                )
+            );
+
+    it('should render chat component with default state', () => {
+        render();
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chat.should('be.visible');
+    });
+
+    it('should render loading component when chat is starting', () => {
+        render(undefined, () => {
+            chatUiStore.setStatus(ChatRunState.Initializing);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatConnecting.should('exist');
+        ChatUiSelectors.chatMessages.should('not.exist');
+        ChatUiSelectors.chatInput.should('not.exist');
+    });
+
+    it('should render chat messages and input when not starting', () => {
+        render(undefined, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatConnecting.should('not.exist');
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatInput.should('exist');
+        ChatUiSelectors.chatNotifications.should('exist');
+    });
+
+    it('should apply custom className when provided', () => {
+        const customClass = 'custom-chat-class';
+        render({ className: customClass });
+
+        ChatUiSelectors.chat.should('have.class', customClass);
+    });
+
+    it('should render custom loading component when provided', () => {
+        const customLoadingComponent = <div data-cy="custom-loading">Custom Loading</div>;
+        const customizations: ChatCustomizations = {
+            loadingComponent: customLoadingComponent,
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Initializing);
+        });
+
+        cy.get('[data-cy="custom-loading"]').should('exist');
+        cy.get('[data-cy="custom-loading"]').should('contain.text', 'Custom Loading');
+        ChatUiSelectors.chatConnecting.should('not.exist');
+    });
+
+    it('should render custom footer component when provided', () => {
+        const customFooterComponent = <div data-cy="custom-footer">Custom Footer</div>;
+        const customizations: ChatCustomizations = {
+            footerComponent: customFooterComponent,
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        cy.get('[data-cy="custom-footer"]').should('exist');
+        cy.get('[data-cy="custom-footer"]').should('contain.text', 'Custom Footer');
+    });
+
+    it('should hide chat input when input is disabled in customizations', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: true,
+            },
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatInput.should('not.exist');
+        ChatUiSelectors.chatUploadFile.should('not.exist');
+    });
+
+    it('should show chat input and upload file when input is enabled', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: false,
+            },
+        };
+
+        render({ customizations }, () => {
+            chatUiStore.setStatus(ChatRunState.Started);
+            chatUiStore.setFilePickerEnabled(true);
+        });
+
+        ChatUiSelectors.chat.should('exist');
+        ChatUiSelectors.chatMessages.should('exist');
+        ChatUiSelectors.chatInput.should('exist');
+        ChatUiSelectors.chatUploadFile.should('exist');
+    });
+
+    it('should set customization context in store when customizations are provided', () => {
+        const customizations: ChatCustomizations = {
+            input: {
+                isDisabled: true,
+            },
+        };
+
+        render({ customizations });
+
+        cy.wait(1).then(() => {
+            expect(chatUiStore.customizations).to.deep.equal(customizations);
+        });
+    });
+}

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