@servicetitan/titan-chat-ui 2.0.2 → 2.0.4

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

@@ -1,7 +1,5 @@
-// eslint-disable-next-line spaced-comment
-/// <reference types="../../../cypress" />
-import { ChatUiSelectors } from '@local/utils';
 import { BodyText, Button, Stack } from '@servicetitan/design-system';
+import { ChatUiSelectors } from '@servicetitan/titan-chat-ui-cypress';
 import { mount } from 'cypress/react';
 import { ChatParticipantIcon } from '../../../models/support-chat';
 import { MessageAgent } from '../message-agent';
@@ -48,7 +46,7 @@ describe('[MessageAgent]', () => {
     it('should render with custom data-cy', () => {
         mount(
             <MessageAgent
-                data-cy2="custom-data-cy"
+                data-cy="custom-data-cy"
                 avatar={{
                     name: 'Test User Name',
                     icon: ChatParticipantIcon.Bot,
@@ -57,7 +55,7 @@ describe('[MessageAgent]', () => {
                 <BodyText>message agent content</BodyText>
             </MessageAgent>
         );
-        cy.getCy2('custom-data-cy').should('be.visible');
+        cy.getCy('custom-data-cy').should('be.visible');
     });
 
     it('should render custom message footer', () => {

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

@@ -1,7 +1,5 @@
-// eslint-disable-next-line spaced-comment
-/// <reference types="../../../cypress" />
-import { ChatUiSelectors } from '@local/utils';
 import { BodyText, Stack } from '@servicetitan/design-system';
+import { ChatUiSelectors } from '@servicetitan/titan-chat-ui-cypress';
 import { mount } from 'cypress/react';
 import { MessageSystem } from '../message-system';
 

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

@@ -1,6 +1,4 @@
-// eslint-disable-next-line spaced-comment
-/// <reference types="../../../cypress" />
-import { ChatUiSelectors } from '@local/utils';
+import { ChatUiSelectors } from '@servicetitan/titan-chat-ui-cypress';
 import { mount } from 'cypress/react';
 import { MessageTimeout } from '../message-timeout';
 

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

@@ -1,6 +1,4 @@
-// eslint-disable-next-line spaced-comment
-/// <reference types="../../../cypress" />
-import { ChatUiSelectors } from '@local/utils';
+import { ChatUiSelectors } from '@servicetitan/titan-chat-ui-cypress';
 import { mount } from 'cypress/react';
 import { ChatParticipantIcon } from '../../../models/support-chat';
 import { MessageTyping } from '../message-typing';

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

@@ -1,7 +1,5 @@
-// eslint-disable-next-line spaced-comment
-/// <reference types="../../../cypress" />
-import { ChatUiSelectors } from '@local/utils';
 import { BodyText } from '@servicetitan/design-system';
+import { ChatUiSelectors } from '@servicetitan/titan-chat-ui-cypress';
 import { mount } from 'cypress/react';
 import { MessageUser } from '../message-user';
 

package/src/components/messages/message-agent.tsx

@@ -12,7 +12,7 @@ export interface IMessageAgentProps {
     subtle?: boolean;
     omitAvatar?: boolean;
     className?: string;
-    ['data-cy2']?: string;
+    ['data-cy']?: string;
 }
 
 export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
@@ -26,7 +26,7 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
     subtle,
     ...rest
 }) => {
-    const dataCy2 = rest['data-cy2'] ?? 'titan-chat-message-agent';
+    const dataCy = rest['data-cy'] ?? 'titan-chat-message-agent';
     return (
         <div
             className={classNames(
@@ -36,8 +36,8 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
                 },
                 className
             )}
-            data-cy="titan-chat-message"
-            data-cy2={dataCy2}
+            data-cy2="titan-chat-message"
+            data-cy={dataCy}
         >
             <div className={Styles.messageAvatar}>
                 {!omitAvatar && avatar ? <MessageAvatar {...avatar} /> : <div />}

package/src/components/messages/message-system.tsx

@@ -6,7 +6,7 @@ import * as Styles from './message-system.module.less';
 export interface IMessageSystemProps {
     fullWidth?: boolean;
     className?: string;
-    ['data-cy2']?: string;
+    ['data-cy']?: string;
 }
 
 export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
@@ -15,7 +15,7 @@ export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
     fullWidth,
     ...rest
 }) => {
-    const dataCy2 = rest['data-cy2'] ?? 'titan-chat-message-system';
+    const dataCy = rest['data-cy'] ?? 'titan-chat-message-system';
     return (
         <div
             className={classNames(
@@ -25,8 +25,8 @@ export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
                 },
                 className
             )}
-            data-cy="titan-chat-message"
-            data-cy2={dataCy2}
+            data-cy2="titan-chat-message"
+            data-cy={dataCy}
         >
             <Stack direction="column" spacing="1" className={Styles.messageContent}>
                 {children}

package/src/components/messages/message-timeout.tsx

@@ -17,7 +17,7 @@ export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume })
     }, [onReset]);
 
     return (
-        <MessageSystem data-cy2="titan-chat-message-timeout" fullWidth>
+        <MessageSystem data-cy="titan-chat-message-timeout" fullWidth>
             <Stack direction="column" spacing="2">
                 <Divider />
                 <BodyText el="div" className="ta-center">

package/src/components/messages/message-typing.tsx

@@ -9,7 +9,7 @@ export interface IMessageTypingProps {
 }
 
 export const MessageTyping: FC<IMessageTypingProps> = ({ avatar }) => (
-    <MessageAgent avatar={avatar} data-cy2="titan-chat-message-typing" subtle>
+    <MessageAgent avatar={avatar} data-cy="titan-chat-message-typing" subtle>
         <Stack className="h-100" alignItems="center">
             <div className={Styles.dotsContainer} data-cy="titan-chat-message-typing-dots">
                 <span className={Styles.dot} />

package/src/components/messages/message-user.tsx

@@ -18,8 +18,8 @@ export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
     return (
         <div
             className={classNames(Styles.messageRoot, 'max-w-100', className)}
-            data-cy="titan-chat-message"
-            data-cy2="titan-chat-message-user"
+            data-cy2="titan-chat-message"
+            data-cy="titan-chat-message-user"
         >
             <Stack
                 direction="column"

package/src/stores/__tests__/chat-input.store.test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@jest/globals';
-import { initTestContainer } from '@local/utils';
 import { Container } from '@servicetitan/react-ioc';
+import { initTestContainer } from '../../utils/test-utils';
 import { ChatInputStore } from '../chat-input.store';
 
 const initContainer = initTestContainer(ChatInputStore, () => {});

package/src/stores/__tests__/chat-ui.store.test.ts

@@ -1,5 +1,4 @@
 import { expect } from '@jest/globals';
-import { initTestContainer } from '@local/utils';
 import { FileDescriptor } from '@servicetitan/form';
 import { Container } from '@servicetitan/react-ioc';
 import {
@@ -13,6 +12,7 @@ import {
     ChatParticipantIcon,
     ChatRunState,
 } from '../../models';
+import { initTestContainer } from '../../utils/test-utils';
 import { ChatUiEvent, ChatUiStore, symbolAgent, symbolUser } from '../chat-ui.store';
 
 const mockAudio = {

package/src/utils/test-utils.ts

@@ -0,0 +1,22 @@
+import { Container } from '@servicetitan/react-ioc';
+
+type Newable<T> = new (...args: never[]) => T;
+
+export const initTestContainer = (
+    serviceIdentifier: Newable<unknown> | Newable<unknown>[],
+    initDependenciesFn: (container: Container) => void
+) => {
+    const rootContainer = new Container();
+    if (Array.isArray(serviceIdentifier)) {
+        serviceIdentifier.forEach(identifier => rootContainer.bind(identifier).toSelf());
+    } else {
+        rootContainer.bind(serviceIdentifier).toSelf();
+    }
+
+    return () => {
+        const container = new Container();
+        container.parent = rootContainer;
+        initDependenciesFn(container);
+        return container;
+    };
+};

package/tsconfig.json

@@ -13,7 +13,7 @@
     ],
     "references": [
         {
-            "path": "../utils"
+            "path": "../titan-chat-ui-cypress"
         }
     ]
 }