[#1272] Make cypress tests independent from each other (#1317)

frontend/chat-plugin/handles/BUILD

@@ -1,4 +1,7 @@
 load("@com_github_airyhq_bazel_tools//web:typescript.bzl", "ts_web_library")
+load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
+
+check_pkg(name = "buildifier")
 
 package(default_visibility = ["//visibility:public"])
 

frontend/ui/handles/BUILD

@@ -1,4 +1,7 @@
 load("@com_github_airyhq_bazel_tools//web:typescript.bzl", "ts_web_library")
+load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
+
+check_pkg(name = "buildifier")
 
 package(default_visibility = ["//visibility:public"])
 

frontend/ui/handles/index.ts

@@ -2,13 +2,10 @@ export const cyMessageList = 'messageList';
 export const cyInputBar = 'inputBar';
 export const cyMessageTextArea = 'messageTextArea';
 export const cyMessageSendButton = 'messageSendButton';
-
 export const cySearchButton = 'searchButton';
 export const cySearchField = 'searchField';
 export const cySearchFieldBackButton = 'searchFieldBackButton';
-
 export const cyConversationList = 'conversationList';
-
 export const cyShowTagsDialog = 'showTagsDialog';
 export const cyTagsDialogInput = 'tagsDialogInput';
 export const cyTagsDialogButton = 'tagsDialogButton';
@@ -18,9 +15,22 @@ export const cyTagsDialogColorSelectorGreen = 'tagsDialogColorSelectorGreen';
 export const cyTagsDialogColorSelectorPurple = 'tagsDialogColorSelectorPurple';
 export const cyTagsSearchField = 'tagsSearchField';
 export const cyTagsTable = 'tagsTable';
+export const cyTagsTableRowDisplayDeleteModal = 'tagsTableRowDisplayDeleteModal';
+export const cyTagsTableRowDisplayDeleteModalInput = 'tagsTableRowDisplayDeleteModalInput';
+export const cyTagsTableRowDisplayDeleteModalButton = 'tagsTableRowDisplayDeleteModalButton';
+
 export const cyChannelsChatPluginAddButton = 'channelsChatPluginAddButton';
+export const cyChannelsFacebookAddButton = 'channelsFacebookAddButton';
+export const cyChannelsTwilioSmsAddButton = 'channelsTwilioSmsAddButton';
+export const cyChannelsTwilioWhatsappAddButton = 'channelsTwilioWhatsappAddButton';
+export const cyChannelsGoogleAddButton = 'channelsGoogleAddButton';
 export const cyChannelsChatPluginList = 'channelsChatPluginList';
+export const cyChannelsFacebookList = 'channelsFacebookList';
+export const cyChannelsTwilioSmsList = 'channelsTwilioSmsList';
+export const cyChannelsTwilioWhatsappList = 'channelsTwilioWhatsappList';
+export const cyChannelsGoogleList = 'channelsGoogleList';
+
 export const cyChannelsChatPluginConnectButton = 'channelsChatPluginConnectButton';
 export const cyChannelsChatPluginFormNameInput = 'channelsChatPluginFormNameInput';
 export const cyChannelsChatPluginFormSubmitButton = 'channelsChatPluginFormSubmitButton';
-export const cyChannelsChatPluginFormBackButton = 'channelsChatPluginFormBackButton';
+export const cyChannelsFormBackButton = 'channelsFormBackButton';

frontend/ui/src/pages/Channels/ConnectedChannelsBySourceCard/index.tsx

@@ -13,12 +13,10 @@ type ConnectedChannelsBySourceCardProps = {
   sourceTypeInfo: SourceTypeInfo;
   channels: Channel[];
   connected: string;
-  dataCyAddChannelButton?: string;
-  dataCyChannelList?: string;
 };
 
 const ConnectedChannelsBySourceCard = (props: ConnectedChannelsBySourceCardProps & RouteComponentProps) => {
-  const {sourceTypeInfo, channels, dataCyChannelList, dataCyAddChannelButton} = props;
+  const {sourceTypeInfo, channels} = props;
 
   const hasExtraChannels = channels.length > sourceTypeInfo.channelsToShow;
 
@@ -35,7 +33,7 @@ const ConnectedChannelsBySourceCard = (props: ConnectedChannelsBySourceCardProps
             <div
               className={styles.connectedChannelBox}
               onClick={() => props.history.push(sourceTypeInfo.channelsListRoute)}>
-              <div className={styles.connectedChannel} data-cy={dataCyChannelList}>
+              <div className={styles.connectedChannel} data-cy={sourceTypeInfo.dataCyChannelList}>
                 {channels.slice(0, sourceTypeInfo.channelsToShow).map((channel: Channel) => {
                   return (
                     <li key={channel.sourceChannelId} className={styles.channelListEntry}>
@@ -65,7 +63,7 @@ const ConnectedChannelsBySourceCard = (props: ConnectedChannelsBySourceCardProps
               type="button"
               className={styles.addChannelButton}
               onClick={() => props.history.push(sourceTypeInfo.newChannelRoute)}
-              data-cy={dataCyAddChannelButton}>
+              data-cy={sourceTypeInfo.dataCyAddChannelButton}>
               <div className={styles.channelButtonIcon} title="Add a channel">
                 <PlusCircleIcon />
               </div>

frontend/ui/src/pages/Channels/ConnectedChannelsList/index.tsx

@@ -15,7 +15,7 @@ import {ReactComponent as PLusIcon} from 'assets/images/icons/plus.svg';
 import {ReactComponent as CloseIcon} from 'assets/images/icons/close.svg';
 
 import styles from './index.module.scss';
-
+import {cyChannelsFormBackButton} from 'handles';
 import {
   CHANNELS_FACEBOOK_ROUTE,
   CHANNELS_CHAT_PLUGIN_ROUTE,
@@ -106,10 +106,12 @@ const ConnectedChannelsList = (props: ConnectedChannelsListProps) => {
           </div>
         </div>
       </div>
-      <Link to={CHANNELS_ROUTE} className={styles.backButton}>
+
+      <Link to={CHANNELS_ROUTE} className={styles.backButton} data-cy={cyChannelsFormBackButton}>
         <ArrowLeftIcon className={styles.backIcon} />
         Back to channels
       </Link>
+
       <div className={styles.channelsList}>
         {filteredChannels.length > 0 ? (
           sortBy(filteredChannels, (channel: Channel) => channel.metadata.name.toLowerCase()).map(

frontend/ui/src/pages/Channels/MainPage/index.tsx

@@ -14,7 +14,18 @@ import {ReactComponent as WhatsappLogo} from 'assets/images/icons/whatsapp_avata
 import {ReactComponent as GoogleAvatarIcon} from 'assets/images/icons/google_avatar.svg';
 
 import styles from './index.module.scss';
-
+import {
+  cyChannelsChatPluginAddButton,
+  cyChannelsChatPluginList,
+  cyChannelsFacebookAddButton,
+  cyChannelsFacebookList,
+  cyChannelsGoogleAddButton,
+  cyChannelsGoogleList,
+  cyChannelsTwilioSmsAddButton,
+  cyChannelsTwilioSmsList,
+  cyChannelsTwilioWhatsappAddButton,
+  cyChannelsTwilioWhatsappList,
+} from 'handles';
 import {
   CHANNELS_FACEBOOK_ROUTE,
   CHANNELS_TWILIO_SMS_ROUTE,
@@ -38,6 +49,8 @@ export type SourceTypeInfo = {
   configKey: string;
   channelsToShow: number;
   itemInfoString: string;
+  dataCyAddChannelButton: string;
+  dataCyChannelList: string;
 };
 
 const sourceTypesInfo: SourceTypeInfo[] = [
@@ -51,6 +64,8 @@ const sourceTypesInfo: SourceTypeInfo[] = [
     configKey: 'sources-chatplugin',
     channelsToShow: 4,
     itemInfoString: 'channels',
+    dataCyAddChannelButton: cyChannelsChatPluginAddButton,
+    dataCyChannelList: cyChannelsChatPluginList,
   },
   {
     type: SourceType.facebook,
@@ -62,6 +77,8 @@ const sourceTypesInfo: SourceTypeInfo[] = [
     configKey: 'sources-facebook',
     channelsToShow: 4,
     itemInfoString: 'channels',
+    dataCyAddChannelButton: cyChannelsFacebookAddButton,
+    dataCyChannelList: cyChannelsFacebookList,
   },
   {
     type: SourceType.twilioSMS,
@@ -73,6 +90,8 @@ const sourceTypesInfo: SourceTypeInfo[] = [
     configKey: 'sources-twilio',
     channelsToShow: 2,
     itemInfoString: 'phones',
+    dataCyAddChannelButton: cyChannelsTwilioSmsAddButton,
+    dataCyChannelList: cyChannelsTwilioSmsList,
   },
   {
     type: SourceType.twilioWhatsapp,
@@ -84,6 +103,8 @@ const sourceTypesInfo: SourceTypeInfo[] = [
     configKey: 'sources-twilio',
     channelsToShow: 2,
     itemInfoString: 'phones',
+    dataCyAddChannelButton: cyChannelsTwilioWhatsappAddButton,
+    dataCyChannelList: cyChannelsTwilioWhatsappList,
   },
   {
     type: SourceType.google,
@@ -95,6 +116,8 @@ const sourceTypesInfo: SourceTypeInfo[] = [
     configKey: 'sources-google',
     channelsToShow: 4,
     itemInfoString: 'channels',
+    dataCyAddChannelButton: cyChannelsGoogleAddButton,
+    dataCyChannelList: cyChannelsGoogleList,
   },
 ];
 

frontend/ui/src/pages/Channels/Providers/Airy/ChatPlugin/ChatPluginConnect.tsx

@@ -18,7 +18,6 @@ import {
   cyChannelsChatPluginConnectButton,
   cyChannelsChatPluginFormNameInput,
   cyChannelsChatPluginFormSubmitButton,
-  cyChannelsChatPluginFormBackButton,
 } from 'handles';
 
 import {CHANNELS_CHAT_PLUGIN_ROUTE, CHANNELS_CONNECTED_ROUTE} from '../../../../../routes/routes';
@@ -289,7 +288,7 @@ const ChatPluginConnect = (props: ChatPluginProps) => {
           </div>
         )}
       </div>
-      <LinkButton onClick={props.history.goBack} type="button" dataCy={cyChannelsChatPluginFormBackButton}>
+      <LinkButton onClick={props.history.goBack} type="button">
         <ArrowLeftIcon className={styles.backIcon} />
         Back
       </LinkButton>

frontend/ui/src/pages/Channels/SourceTypeDescriptionCard/index.tsx

@@ -27,7 +27,11 @@ const SourceTypeDescriptionCard = (props: SourceTypeDescriptionCardProps) => {
 
       {displayButton && (
         <div className={styles.channelButton}>
-          <button type="button" className={styles.addChannelButton} onClick={addChannelAction}>
+          <button
+            type="button"
+            className={styles.addChannelButton}
+            onClick={addChannelAction}
+            data-cy={sourceTypeInfo.dataCyAddChannelButton}>
             <div className={styles.channelButtonIcon} title="Add a channel">
               <PlusCircleIcon />
             </div>

frontend/ui/src/pages/Tags/TableRow.tsx

@@ -11,6 +11,7 @@ import Tag from '../../components/Tag';
 import {Tag as TagModel, TagColor} from 'httpclient';
 import {Settings} from '../../reducers/data/settings';
 import {StateModel} from '../../reducers';
+import {cyTagsTableRowDisplayDeleteModal} from 'handles';
 
 type TableRowProps = {
   tag: TagModel;
@@ -136,7 +137,11 @@ const TableRowComponent = (props: TableRowProps) => {
           <button type="button" className={styles.actionButton} onClick={() => setTagState({...tag, edit: true})}>
             <EditIcon className={styles.actionSVG} title="Edit tag" />
           </button>
-          <button type="button" className={styles.actionButton} onClick={deleteClicked}>
+          <button
+            type="button"
+            className={styles.actionButton}
+            onClick={deleteClicked}
+            data-cy={cyTagsTableRowDisplayDeleteModal}>
             <TrashIcon className={styles.actionSVG} title="Delete tag" />
           </button>
         </div>

frontend/ui/src/pages/Tags/index.tsx

@@ -16,6 +16,7 @@ import SimpleTagForm from './SimpleTagForm';
 import EmptyStateTags from './EmptyStateTags';
 import {StateModel} from '../../reducers';
 import {setPageTitle} from '../../services/pageTitle';
+import {cyTagsTableRowDisplayDeleteModalInput, cyTagsTableRowDisplayDeleteModalButton} from 'handles';
 
 const initialState = {
   modal: {
@@ -141,11 +142,15 @@ class Tags extends Component<ConnectedProps<typeof connector>, typeof initialSta
               onChange={this.handleDelete}
               onKeyDown={this.keyPressed}
               autoFocus={true}
+              dataCy={cyTagsTableRowDisplayDeleteModalInput}
             />
             <p className={styles.errorMessage}>{this.state.modal.error}</p>
             <div className={styles.confirmDeleteActions}>
               <LinkButton onClick={this.closeModal}>Cancel</LinkButton>
-              <Button styleVariant="warning" onClick={this.confirmDelete}>
+              <Button
+                styleVariant="warning"
+                onClick={this.confirmDelete}
+                dataCy={cyTagsTableRowDisplayDeleteModalButton}>
                 Delete
               </Button>
             </div>

integration/BUILD

@@ -1,4 +1,7 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
+
+check_pkg(name = "buildifier")
 
 nodejs_binary(
     name = "cypress",

integration/chat-plugin/BUILD

@@ -1,4 +1,7 @@
 load("@com_github_airyhq_bazel_tools//web:typescript.bzl", "ts_web_library")
+load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
+
+check_pkg(name = "buildifier")
 
 ts_web_library(
     name = "specs",

integration/chat-plugin/create_conversation.spec.ts

@@ -1,19 +1,10 @@
 import {cyBubble, cyInputbarTextarea, cyInputbarButton} from 'chat-plugin-handles';
 
-describe(
-  'Chatplugin',
-  {
-    baseUrl: 'http://airy.core/chatplugin/ui',
-  },
-  () => {
-    const channelId = 'bbeff18c-6517-5506-b464-8353b8923d46';
-    const messageChatplugin = 'Hello from Chatplugin!';
-
-    it('Creates a chat plugin conversation', () => {
-      cy.visit('/example?channel_id=' + channelId);
-      cy.get(`[data-cy=${cyBubble}]`).click();
-      cy.get(`[data-cy=${cyInputbarTextarea}]`).type(messageChatplugin);
-      cy.get(`[data-cy=${cyInputbarButton}]`).click();
-    });
-  }
-);
+describe('Create UI Conversation', () => {
+  it('Creates a chat plugin conversation', () => {
+    cy.visit('http://airy.core/chatplugin/ui/example?channel_id=' + Cypress.env('channelId'));
+    cy.get(`[data-cy=${cyBubble}]`).click();
+    cy.get(`[data-cy=${cyInputbarTextarea}]`).type(Cypress.env('messageChatplugin'));
+    cy.get(`[data-cy=${cyInputbarButton}]`).click();
+  });
+});

integration/cypress.json

@@ -1,10 +1,16 @@
 {
-    "baseUrl": "http://airy.core/ui",
+   "baseUrl": "http://airy.core/ui",
     "integrationFolder": "integration",
     "testFiles": "**/*.spec.?s",
     "env": {
-        "username": "grace@example.com",
-        "password": "the_answer_is_42"
+       "username": "grace@example.com",
+       "password": "the_answer_is_42",
+       "chatPluginName": "Cypress Chatplugin",
+       "tagName": "Cypress Tag",
+       "searchQuery": "Cypress Filter",
+       "messageInbox": "Hello from Cypress Inbox!",
+       "messageChatplugin": "Hello from Cypress Chatplugin!",
+       "channelId": "3502a0a7-933d-5410-b5fc-51f041146d89"
     },
     "viewportHeight": 800,
     "viewportWidth": 1280

integration/ui/BUILD

@@ -1,9 +1,13 @@
 load("@com_github_airyhq_bazel_tools//web:typescript.bzl", "ts_web_library")
+load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
+
+check_pkg(name = "buildifier")
 
 ts_web_library(
     name = "specs",
     srcs = glob(["*.spec.ts"]),
     deps = [
+        "//frontend/chat-plugin/handles:chat-plugin-handles",
         "//frontend/ui/handles",
         "@npm//cypress",
     ],

integration/ui/connect_chatplugin.spec.ts

@@ -3,14 +3,12 @@ import {
   cyChannelsChatPluginConnectButton,
   cyChannelsChatPluginFormNameInput,
   cyChannelsChatPluginFormSubmitButton,
-  cyChannelsChatPluginFormBackButton,
   cyChannelsChatPluginList,
+  cyChannelsFormBackButton,
 } from 'handles';
 
 describe('Connect chatplugin channel', () => {
   it('Logs into the UI', () => {
-    const chatPluginName = 'Cypress Chatplugin';
-
     cy.visit('/login');
 
     cy.get('form')
@@ -20,16 +18,15 @@ describe('Connect chatplugin channel', () => {
       })
       .submit();
 
-    cy.url().should('include', '/inbox');
     cy.visit('/channels');
+    cy.wait(500);
+    cy.url().should('include', '/channels');
     cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
     cy.get(`[data-cy=${cyChannelsChatPluginConnectButton}]`).click();
-    cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(chatPluginName);
+    cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
     cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
-    cy.get(`[data-cy=${cyChannelsChatPluginFormBackButton}]`).click();
-    cy.get(`[data-cy=${cyChannelsChatPluginList}]`)
-      .children()
-      .filter(`:contains(${chatPluginName})`)
-      .should('have.length', 1);
+    cy.url().should('include', '/channels/connected');
+    cy.get(`[data-cy=${cyChannelsFormBackButton}]`).click();
+    cy.get(`[data-cy=${cyChannelsChatPluginList}]`).filter(`:contains("${Cypress.env('chatPluginName')}")`);
   });
 });