[#1914] Cypress test for conversation state (#2061)

frontend/ui/handles/index.ts

@@ -34,5 +34,9 @@ export const cyChannelsChatPluginConnectButton = 'channelsChatPluginConnectButto
 export const cyChannelsChatPluginFormNameInput = 'channelsChatPluginFormNameInput';
 export const cyChannelsChatPluginFormSubmitButton = 'channelsChatPluginFormSubmitButton';
 export const cyChannelsFormBackButton = 'channelsFormBackButton';
+export const cyOpenStateButton = 'openStateButton';
+export const cyClosedStateButton = 'closedStateButton';
+export const cyConversationListItemInfo = 'conversationListItemInfo';
+export const cyConversationStatus = 'conversationStatus';
 export const cySuggestionsButton = 'suggestionsButton';
 export const cySuggestionsList = 'suggestionsList';

frontend/ui/src/pages/Inbox/ConversationListItem/index.tsx

@@ -14,6 +14,7 @@ import {readConversations, conversationState} from '../../../actions/conversatio
 import styles from './index.module.scss';
 import {ReactComponent as Checkmark} from 'assets/images/icons/checkmark-circle.svg';
 import {newestFilteredConversationFirst} from '../../../selectors/conversations';
+import {cyOpenStateButton, cyClosedStateButton, cyConversationListItemInfo} from 'handles';
 
 type ConversationListItemProps = {
   conversation: MergedConversation;
@@ -50,15 +51,20 @@ const ConversationListItem = (props: ConversationListItemProps) => {
   const OpenStateButton = () => {
     return (
       <div className={styles.openStateButton} title="Set to closed">
-        <button onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => eventHandler(event)} />
+        <button
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => eventHandler(event)}
+          data-cy={cyOpenStateButton}
+        />
       </div>
     );
   };
 
   const ClosedStateButton = () => {
     return (
       <div className={styles.closedStateButton} title="Set to open">
-        <button onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => eventHandler(event)}>
+        <button
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => eventHandler(event)}
+          data-cy={cyClosedStateButton}>
           <Checkmark />
         </button>
       </div>
@@ -85,7 +91,7 @@ const ConversationListItem = (props: ConversationListItemProps) => {
           <div className={styles.profileImage}>
             <Avatar contact={participant} />
           </div>
-          <div className={styles.contactDetails}>
+          <div className={styles.contactDetails} data-cy={cyConversationListItemInfo}>
             <div className={styles.topRow}>
               <div className={`${styles.profileName} ${unread ? styles.unread : ''}`}>
                 {participant && participant.displayName}

frontend/ui/src/pages/Inbox/Messenger/ConversationStatus/index.tsx

@@ -4,6 +4,7 @@ import {withRouter, RouteComponentProps} from 'react-router-dom';
 import styles from './index.module.scss';
 import {conversationState} from '../../../../actions/conversations';
 import {StateModel} from '../../../../reducers';
+import {cyConversationStatus} from 'handles';
 
 const mapStateToProps = (state: StateModel, ownProps) => {
   return {
@@ -25,7 +26,8 @@ function ConversationStatus(props: Props) {
 
   return (
     <div
-      className={`${styles.conversationStatus} ${currentConversationState === 'CLOSED' ? styles.closed : styles.open}`}>
+      className={`${styles.conversationStatus} ${currentConversationState === 'CLOSED' ? styles.closed : styles.open}`}
+      data-cy={cyConversationStatus}>
       <div className={styles.closedButtonWrapper}>
         <div
           className={styles.closedButton}

integration/ui/state_conversations.spec.ts

@@ -0,0 +1,30 @@
+import {cyOpenStateButton, cyClosedStateButton, cyConversationListItemInfo, cyConversationStatus} from 'handles';
+
+function closeConversation() {
+  cy.get(`[data-cy=${cyOpenStateButton}]`).click();
+  cy.get(`[data-cy=${cyClosedStateButton}]`);
+  cy.get(`[data-cy=${cyConversationStatus}]`).invoke('attr', 'class').should('contain', 'closed');
+}
+
+function openConversation() {
+  cy.get(`[data-cy=${cyClosedStateButton}]`).first().click();
+  cy.get(`[data-cy=${cyOpenStateButton}]`);
+  cy.get(`[data-cy=${cyConversationStatus}]`).invoke('attr', 'class').should('contain', 'open');
+}
+
+describe('toggles the state of a conversation, accurately changing the Open and Closed state buttons in the ConversationList and Messenger', () => {
+  it('toggles the state of a conversation', () => {
+    cy.visit('/ui/');
+    cy.url().should('include', '/inbox');
+
+    cy.get(`[data-cy=${cyConversationListItemInfo}]`).then(conversationListItemInfo => {
+      if (conversationListItemInfo.find(`[data-cy=${cyOpenStateButton}]`).length > 0) {
+        closeConversation();
+        openConversation();
+      } else {
+        openConversation();
+        closeConversation();
+      }
+    });
+  });
+});