Add component tests for existing components

cypress/component/ConversationAlert.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ConversationAlert from '../../packages/module/src/ConversationAlert';
+
+describe('ConversationAlert', () => {
+  it('renders assistant conversation alert', () => {
+    cy.mount(<ConversationAlert title='You can start a new conversation at any time by typing below.'/>);
+
+    cy.get('.pf-v5-c-alert__title').first().should('contain', 'You can start a new conversation at any time by typing below.');
+    cy.get('.pf-v5-c-alert__icon').first().should('exist');
+  })
+})

cypress/component/LoadingMessage.cy.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import LoadingMessage from '../../packages/module/src/LoadingMessage';
+import GrinIcon from '@patternfly/react-icons/dist/js/icons/grin-icon';
+
+describe('LoadingMessage', () => {
+  it('renders default loading message', () => {
+    cy.mount(<LoadingMessage />);
+
+    cy.get('[data-test-id="assistant-loading-icon"]').should('have.length', 1);
+    cy.get('[data-test-id="assistant-loading-dots"]').should('have.length', 1);
+  })
+
+  it('renders custom loading message', () => {
+    cy.mount(<LoadingMessage icon={GrinIcon} />);
+
+    cy.get('[data-test-id="assistant-loading-icon"]').should('have.length', 1);
+    cy.get('[data-test-id="assistant-loading-dots"]').should('have.length', 1);
+  })
+})
+

cypress/component/SystemMessageEntry.cy.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import SystemMessageEntry from '@patternfly/virtual-assistant/src/SystemMessageEntry';
+
+describe('SystemMessageEntry', () => {
+  it('renders assistant system message entry', () => {
+    cy.mount(<SystemMessageEntry>Some text</SystemMessageEntry>);
+
+    cy.get('[data-test-id="assistant-system-message-entry"]').first().should('contain', 'Some text');
+  })
+})

cypress/component/VirtualAssistant.cy.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import VirtualAssistant from '../../packages/module/src/VirtualAssistant';
+
+describe('VirtualAssistant', () => {
+  it('renders virtual assistant body', () => {
+    cy.mount(<VirtualAssistant />);
+
+    cy.get('[data-test-id="assistant-title"]').first().should('contain', 'Virtual Assistant');
+    cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Type a message...');
+    cy.get('[data-test-id="assistant-send-button"]').first().should('not.be.disabled');
+  })
+
+  it('renders a customized title and placeholder', () => {
+    cy.mount(<VirtualAssistant title="PatternFly assistant" inputPlaceholder="You can ask anything in here." />);
+
+    cy.get('[data-test-id="assistant-title"]').should('contain', 'PatternFly assistant');
+    cy.get('[data-test-id="assistant-text-input"]').should('have.attr', 'placeholder', 'You can ask anything in here.');
+    cy.get('[data-test-id="assistant-send-button"]').should('not.be.disabled');
+  })
+
+  it('listens to messages', () => {
+    cy.mount(<VirtualAssistant onChangeMessage={cy.stub().as('change')} onSendMessage={cy.stub().as('send')} />);
+
+    cy.get('[data-test-id="assistant-text-input"]').type('my message');
+    cy.get('[data-test-id="assistant-send-button"]').click();
+    cy.get('@change').should('have.been.called');
+    cy.get('@send').should('have.been.called');
+  })
+
+  it('renders header with disabled send button', () => {
+    cy.mount(<VirtualAssistant isSendButtonDisabled />);
+    cy.get('[data-test-id="assistant-send-button"]').should('be.disabled');
+  })
+})

cypress/component/VirtualAssistantAction.cy.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import VirtualAssistantAction from '@patternfly/virtual-assistant/src/VirtualAssistantAction';
+import { AngleDownIcon } from '@patternfly/react-icons';
+
+describe('VirtualAssistantAction', () => {
+  it('renders assistant action', () => {
+    cy.mount(<VirtualAssistantAction aria-label="Minimize virtual assistant" onClick={cy.stub().as('action')}>
+      <AngleDownIcon/>
+    </VirtualAssistantAction>);
+    cy.get('[aria-label="Minimize virtual assistant"]').click();
+    cy.get('@action').should('have.been.called');
+    cy.get('.pf-v5-svg').should('exist');
+  })
+})

packages/module/src/LoadingMessage/LoadingMessage.tsx

@@ -68,12 +68,12 @@ export const LoadingMessage: React.FunctionComponent<LoadingMessageProps> = ({ i
   return (
     <Split className={classes.chatbot}>
       <SplitItem>
-        <Icon size="lg" className="pf-v5-u-mr-sm pf-v5-u-pt-md">
+        <Icon size="lg" className="pf-v5-u-mr-sm pf-v5-u-pt-md" data-test-id="assistant-loading-icon">
           <IconComponent />
         </Icon>
       </SplitItem>
       <SplitItem className={classnames(classes.bubble," pf-u-background-color-200")} >
-        <div className={classnames(classes.typing,"pf-v5-u-display-flex pf-u-align-items-center")}>
+        <div className={classnames(classes.typing,"pf-v5-u-display-flex pf-u-align-items-center")} data-test-id="assistant-loading-dots">
           <div className={classes.dot}></div>
           <div className={classes.dot}></div>
           <div className={classes.dot}></div>

packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx

@@ -3,7 +3,7 @@ import { Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
 
 export interface SystemMessageEntryProps {
-    /** Message rendered within the system message entry */
+  /** Message rendered within the system message entry */
   children: React.ReactNode;
 }
 
@@ -18,7 +18,7 @@ export const SystemMessageEntry: React.FunctionComponent<SystemMessageEntryProps
   const classes = useStyles();
   return (
     <TextContent>
-      <Text component={TextVariants.small} className={classes.systemMessageText}>
+      <Text data-test-id="assistant-system-message-entry" component={TextVariants.small} className={classes.systemMessageText}>
         {props.children}
       </Text>
     </TextContent>