@servicetitan/titan-chat-ui 3.1.0 → 3.1.2

package/src/components/messages/__tests-cy__/message-agent.test.tsx

@@ -1,135 +1,13 @@
+import { runMessageAgentSharedTests } from '@servicetitan/cypress-shared';
 import { BodyText, Button, Stack } from '@servicetitan/design-system';
-import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
 import { MessageAgent } from '../message-agent';
 import { MessageFooter } from '../message-footer';
 
-describe('[MessageAgent]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-        cy.clock(new Date('2023-10-10T10:10:00Z').getTime());
-    });
-
-    it('should be properly rendered', () => {
-        mount(
-            <MessageAgent
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                    className: 'custom-class',
-                }}
-            >
-                <BodyText data-cy="content">message agent content</BodyText>
-            </MessageAgent>
-        );
-        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', () => {
-        mount(
-            <MessageAgent
-                fullWidth
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <BodyText>message agent content</BodyText>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatMessageContentAgent.should('contain.text', 'message agent content');
-    });
-
-    it('should render with custom data-cy', () => {
-        mount(
-            <MessageAgent
-                data-cy="custom-data-cy"
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <BodyText>message agent content</BodyText>
-            </MessageAgent>
-        );
-        cy.getCy('custom-data-cy').should('be.visible');
-    });
-
-    it('should render custom message footer', () => {
-        mount(
-            <MessageAgent
-                messageFooter={
-                    <Stack direction="row" justifyContent="space-between" alignItems="center">
-                        <MessageFooter name="name" timestamp={new Date()} />
-                        <Stack direction="row" spacing="1">
-                            <Button iconName="thumb_up" xsmall fill="subtle" />
-                            <Button iconName="thumb_down" xsmall fill="subtle" />
-                        </Stack>
-                    </Stack>
-                }
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <BodyText>message agent content</BodyText>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatMessageAgent.should('be.visible').children().should('have.length', 2);
-        ChatUiSelectors.chatMessageFooter
-            .should('be.visible')
-            .should('contain.text', 'name • 10:10 AM');
-    });
-
-    it('should render subtle message', () => {
-        mount(
-            <MessageAgent
-                subtle
-                avatar={{
-                    name: 'Test User Name',
-                    icon: ChatParticipantIcon.Bot,
-                }}
-            >
-                <Stack className="border h-100" alignItems="center" data-cy="custom-content">
-                    <BodyText>message agent content</BodyText>
-                </Stack>
-            </MessageAgent>
-        );
-        ChatUiSelectors.chatAvatarBot.should('be.visible');
-        cy.getCy('custom-content')
-            .should('be.visible')
-            .should('contain.text', 'message agent content');
-    });
-
-    describe('with different icon types', () => {
-        const render = (icon: ChatParticipantIcon) => {
-            return mount(
-                <MessageAgent
-                    avatar={{
-                        name: 'Test User Name',
-                        icon,
-                    }}
-                >
-                    <BodyText>message agent content</BodyText>
-                </MessageAgent>
-            );
-        };
-        it('icon bot', () => {
-            render(ChatParticipantIcon.Bot);
-            ChatUiSelectors.chatAvatarBot.should('be.visible');
-        });
-
-        it('icon initials', () => {
-            render(ChatParticipantIcon.Initials);
-            ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'T');
-        });
-
-        it('icon empty', () => {
-            render(ChatParticipantIcon.Empty);
-            ChatUiSelectors.chatAvatarEmpty.should('exist').should('not.be.visible');
-        });
+describe('MessageAgent', () => {
+    runMessageAgentSharedTests(MessageAgent, {
+        TextComponent: BodyText,
+        ButtonComponent: Button,
+        ContainerComponent: Stack,
+        MessageFooterComponent: MessageFooter,
     });
 });

package/src/components/messages/__tests-cy__/message-system.test.tsx

@@ -1,32 +1,10 @@
+import { runMessageSystemSharedTests } from '@servicetitan/cypress-shared';
 import { BodyText, Stack } from '@servicetitan/design-system';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
 import { MessageSystem } from '../message-system';
 
-describe('[MessageSystem]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-    });
-
-    it('should be properly rendered', () => {
-        mount(
-            <MessageSystem className="custom-class">
-                <Stack className="border">
-                    <BodyText data-cy="content">message system content</BodyText>
-                </Stack>
-            </MessageSystem>
-        );
-        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
-    });
-
-    it('should be properly rendered fullwidth', () => {
-        mount(
-            <MessageSystem className="custom-class" fullWidth>
-                <Stack className="border">
-                    <BodyText data-cy="content">message system content</BodyText>
-                </Stack>
-            </MessageSystem>
-        );
-        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
+describe('MessageSystem', () => {
+    runMessageSystemSharedTests(MessageSystem, {
+        TextComponent: BodyText,
+        ContainerComponent: Stack,
     });
 });

package/src/components/messages/__tests-cy__/message-timeout.test.tsx

@@ -1,29 +1,6 @@
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageTimeoutSharedTests } from '@servicetitan/cypress-shared';
 import { MessageTimeout } from '../message-timeout';
 
 describe('MessageTimeout', () => {
-    it('should render message', () => {
-        const onResume = cy.spy().as('onResume');
-        const onReset = cy.spy().as('onReset');
-        mount(<MessageTimeout onResume={onResume} onReset={onReset} />);
-
-        ChatUiSelectors.chatMessageTimeout
-            .should('be.visible')
-            .should(
-                'contain.text',
-                [
-                    'Your session has timed out.',
-                    'Would you like to resume it or start a new one?',
-                    'Continue session or Start new session',
-                ].join('')
-            );
-        ChatUiSelectors.chatMessageTimeoutResume.should('be.visible');
-        ChatUiSelectors.chatMessageTimeoutReset.should('be.visible');
-
-        ChatUiSelectors.chatMessageTimeoutResume.click();
-        cy.get('@onResume').should('have.been.calledOnce');
-        ChatUiSelectors.chatMessageTimeoutReset.click();
-        cy.get('@onReset').should('have.been.calledOnce');
-    });
+    runMessageTimeoutSharedTests(MessageTimeout);
 });

package/src/components/messages/__tests-cy__/message-typing.test.tsx

@@ -1,57 +1,6 @@
-import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageTypingSharedTests } from '@servicetitan/cypress-shared';
 import { MessageTyping } from '../message-typing';
 
-describe('ChatMessageTyping', () => {
-    function render(icon: ChatParticipantIcon) {
-        mount(
-            <MessageTyping
-                avatar={{
-                    name: 'Test User Name',
-                    icon,
-                    className: 'custom-class',
-                }}
-            />
-        );
-        ChatUiSelectors.chatMessageTyping.should('be.visible').children().should('have.length', 2);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    }
-
-    it('should render message with bot icon', () => {
-        render(ChatParticipantIcon.Bot);
-        ChatUiSelectors.chatAvatarBot
-            .should('be.visible')
-            .should('have.class', 'custom-class')
-            .invoke('css', 'background-image')
-            .then(bgColor => {
-                const isSvg = Boolean(
-                    (bgColor as any as string).indexOf('data:image/svg+xml;base64') >= 0
-                );
-                expect(isSvg).to.eq(true);
-            });
-    });
-
-    it('should render message with empty icon', () => {
-        render(ChatParticipantIcon.Empty);
-        ChatUiSelectors.chatAvatarEmpty.should('exist').should('not.be.visible');
-    });
-
-    it('should render message with initials', () => {
-        render(ChatParticipantIcon.Initials);
-        ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'T');
-    });
-
-    it('should not cancel the dots animation', () => {
-        cy.clock();
-        render(ChatParticipantIcon.Initials);
-        // Verify the rendered component + check the dots animation doesn't change over the time
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(10000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(20000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(30000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    });
+describe('MessageTyping', () => {
+    runMessageTypingSharedTests(MessageTyping);
 });

package/src/components/messages/__tests-cy__/message-user.test.tsx

@@ -1,41 +1,7 @@
+import { runMessageUserSharedTests } from '@servicetitan/cypress-shared';
 import { BodyText } from '@servicetitan/design-system';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
 import { MessageUser } from '../message-user';
 
-describe('[MessageUser]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-    });
-
-    it('should be properly rendered', () => {
-        mount(
-            <MessageUser>
-                <BodyText data-cy="content">message user content</BodyText>
-            </MessageUser>
-        );
-        ChatUiSelectors.chatMessageUser.should('be.visible');
-        ChatUiSelectors.chatMessageContent
-            .should('be.visible')
-            .should('contain.text', 'message user content');
-    });
-
-    it('should be properly rendered with long text', () => {
-        const longText = 'message user content '.repeat(100).trim();
-        mount(
-            <MessageUser>
-                <BodyText data-cy="content">{longText}</BodyText>
-            </MessageUser>
-        );
-        ChatUiSelectors.chatMessageContent.should('be.visible').should('contain.text', longText);
-    });
-
-    it('should be rendered with footer', () => {
-        mount(
-            <MessageUser messageFooter={<BodyText>message user footer</BodyText>}>
-                <BodyText data-cy="content">message user content</BodyText>
-            </MessageUser>
-        );
-        ChatUiSelectors.chatMessageFooter.should('be.visible');
-    });
+describe('MessageUser', () => {
+    runMessageUserSharedTests(MessageUser, BodyText);
 });

package/tsconfig.json

@@ -15,7 +15,7 @@
     ],
     "references": [
         {
-            "path": "../titan-chatbot-ui-cypress"
+            "path": "../cypress-shared"
         },
         {
             "path": "../titan-chat-ui-common"