[#3476] update cypress tests baseurl

frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/ChatPluginConnect.tsx

@@ -6,6 +6,7 @@ import {apiHostUrl} from '../../../../../httpClient';
 import {StateModel} from '../../../../../reducers';
 import {allChannels} from '../../../../../selectors/channels';
 import {connectChatPlugin, updateChannel, disconnectChannel} from '../../../../../actions';
+import {cyChannelCreatedChatPluginCloseButton} from 'handles';
 
 import {Button, LinkButton, SettingsModal} from 'components';
 import {Channel, Source} from 'model';
@@ -209,6 +210,7 @@ const ChatPluginConnect = (props: ConnectedProps<typeof connector>) => {
           title={t('successfullyCreatedChannel')}
           close={handleClose}
           headerClassName={styles.headerModal}
+          dataCyCloseButton={cyChannelCreatedChatPluginCloseButton}
         >
           <Button styleVariant="normal" type="submit" onClick={handleCustomize} className={styles.modalButton}>
             {t('customize')}

frontend/control-center/src/pages/Status/ComponentListItem/ItemInfo.tsx

@@ -151,7 +151,7 @@ const ItemInfo = (props: ComponentInfoProps) => {
             )}
           </div>
 
-          {!needsConfig && (
+          {isComponent && !needsConfig && (
             <div className={styles.enabled}>
               <Toggle value={componentEnabled} updateValue={onEnableComponent} size="small" variant="green" />
             </div>

frontend/inbox/handles/index.ts

@@ -37,6 +37,7 @@ export const cyChannelsChatPluginConnectButton = 'channelsChatPluginConnectButto
 export const cyConnectorsAddNewButton = 'connectorsAddNewButton';
 export const cyChannelsChatPluginFormNameInput = 'channelsChatPluginFormNameInput';
 export const cyChannelsChatPluginFormSubmitButton = 'channelsChatPluginFormSubmitButton';
+export const cyChannelCreatedChatPluginCloseButton = 'channelCreatedChatPluginCloseButton';
 export const cyChannelsFormBackButton = 'channelsFormBackButton';
 
 export const cyOpenStateButton = 'openStateButton';

integration/BUILD

@@ -25,8 +25,9 @@ nodejs_binary(
     data = [
         ":cypress.config.ts",
         "//integration/chat-plugin",
-        "//integration/commands",
+        "//integration/support",
         "//integration/ui",
+        "@npm//@types/node",
         "@npm//cypress",
     ],
     entry_point = {

integration/chat-plugin/BUILD

@@ -23,6 +23,7 @@ ts_web_library(
     deps = [
         "//frontend/chat-plugin/handles:chat-plugin-handles",
         "//frontend/inbox/handles",
+        "@npm//@types/node",
         "@npm//cypress",
     ],
 )

integration/chat-plugin/websocket_test.spec.ts

@@ -1,25 +1,20 @@
-import {cyInputbarTextarea, cyInputbarButton, cyChatPluginMessageList} from 'chat-plugin-handles';
-
-import {
-  cyChannelsChatPluginAddButton,
-  cyConnectorsAddNewButton,
-  cyChannelsChatPluginFormNameInput,
-  cyChannelsChatPluginFormSubmitButton,
-} from 'handles';
+import {cyChatPluginMessageList} from 'chat-plugin-handles';
+
+declare global {
+  namespace Cypress {
+    interface Chainable<Subject> {
+      createChatPluginConversation(): Chainable<Subject>;
+      editContactDetails(): Chainable<Subject>;
+      connectChatPluginConnector(): Chainable<Subject>;
+      editDisplayName(): Chainable<Subject>;
+      listConversationsForContact(): Chainable<Subject>;
+    }
+  }
+}
 
 describe('Websocket test', () => {
   it('Send message from Inbox to Chatplugin and assert Websocket is working', () => {
-    cy.visit('/control-center/connectors');
-    cy.wait(500);
-    cy.url().should('include', '/connectors');
-    cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
-    cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).click();
-    cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
-    cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
-
-    cy.visit('/chatplugin/ui/example?channel_id=' + Cypress.env('channelId'));
-    cy.get(`[data-cy=${cyInputbarTextarea}]`).type(Cypress.env('messageChatplugin'));
-    cy.get(`[data-cy=${cyInputbarButton}]`).click();
+    cy.createChatPluginConversation();
 
     cy.wait(500);
 

integration/cypress.config.ts

@@ -2,9 +2,9 @@ import {defineConfig} from 'cypress';
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://airy.core',
+    baseUrl: 'http://localhost',
     specPattern: 'integration/**/*.spec.?s',
-    supportFile: 'integration/commands/index.ts',
+    supportFile: 'integration/support/index.ts',
   },
   env: {
     chatPluginName: 'Cypress Chatplugin',

integration/commands/BUILD → integration/support/BUILD

@@ -6,15 +6,16 @@ check_pkg(name = "buildifier")
 package(default_visibility = ["//visibility:public"])
 
 ts_web_library(
-    name = "commands",
-    srcs = glob(["*.spec.ts"]),
+    name = "support",
     tsconfig = {
         "compilerOptions": {
             "lib": [
                 "esnext",
                 "dom",
             ],
-            "types": ["cypress"],
+            "types": [
+                "cypress",
+            ],
         },
     },
     deps = [

integration/commands/createChatPluginConversation.ts → integration/support/createChatPluginConversation.ts

@@ -5,14 +5,17 @@ import {
   cyChannelsChatPluginFormSubmitButton,
   cyChannelsChatPluginList,
   cyChannelsFormBackButton,
+  cyChannelCreatedChatPluginCloseButton,
 } from 'handles';
 import {cyInputbarButton, cyInputbarTextarea} from 'chat-plugin-handles';
 
 export const connectChatPluginConnector = (): void => {
   cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
-  cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).click();
-  cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
+  cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).first().click({force: true});
+  cy.wait(500);
+  cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'), {force: true});
   cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
+  cy.get(`[data-cy=${cyChannelCreatedChatPluginCloseButton}]`).click();
 };
 
 export const createChatPluginConversation = (): void => {

integration/ui/connect_chatplugin.spec.ts

@@ -15,11 +15,11 @@ declare global {
 describe('Connect chatplugin channel', () => {
   it('Connect chatplugin channel', () => {
     cy.visit('/control-center/connectors');
-    cy.wait(500);
+    cy.wait(8000);
     cy.url().should('include', '/control-center/connectors');
     cy.connectChatPluginConnector();
 
-    cy.url().should('include', '/control-center/connectors/connected');
+    cy.url().should('include', '/control-center/connectors');
     cy.get(`[data-cy=${cyChannelsFormBackButton}]`).click();
     cy.get(`[data-cy=${cyChannelsChatPluginList}]`).filter(`:contains("${Cypress.env('chatPluginName')}")`);
   });

integration/ui/create_tag.spec.ts

@@ -5,32 +5,16 @@ import {
   cyTagsDialogColorSelectorRed,
   cyTagsSearchField,
   cyTagsTable,
-  cyChannelsChatPluginAddButton,
-  cyConnectorsAddNewButton,
-  cyChannelsChatPluginFormNameInput,
-  cyChannelsChatPluginFormSubmitButton,
   cyTagsTableRowDisplayDeleteModal,
   cyTagsTableRowDisplayDeleteModalInput,
   cyTagsTableRowDisplayDeleteModalButton,
-  cyChannelsFormBackButton,
 } from 'handles';
 
-import {cyInputbarButton, cyInputbarTextarea} from 'chat-plugin-handles';
-
 describe('Creates and Deletes a Tag', () => {
   it('Creates and Deletes a Tag', () => {
-    cy.visit('/control-center/connectors');
-    cy.wait(500);
-    cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
-    cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).click();
-    cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
-    cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
+    cy.createChatPluginConversation();
 
-    cy.get(`[data-cy=${cyChannelsFormBackButton}]`).click();
-
-    cy.visit('/chatplugin/ui/example?channel_id=' + Cypress.env('channelId'));
-    cy.get(`[data-cy=${cyInputbarTextarea}]`).type(Cypress.env('messageChatplugin'));
-    cy.get(`[data-cy=${cyInputbarButton}]`).click();
+    cy.wait(500);
 
     cy.visit('/inbox/inbox');
     cy.get(`[data-cy=${cyShowTagsDialog}]`).click();

integration/ui/filter_conversation.spec.ts

@@ -1,15 +1,4 @@
-import {
-  cySearchButton,
-  cySearchField,
-  cyConversationList,
-  cyChannelsChatPluginAddButton,
-  cyChannelsChatPluginFormNameInput,
-  cyChannelsChatPluginFormSubmitButton,
-  cyChannelsFormBackButton,
-  cyConnectorsAddNewButton,
-} from 'handles';
-
-import {cyInputbarButton, cyInputbarTextarea} from 'chat-plugin-handles';
+import {cySearchButton, cySearchField, cyConversationList} from 'handles';
 
 describe('Filter conversation', () => {
   it('Filter conversation', () => {

integration/ui/suggested_replies.spec.ts

@@ -24,7 +24,7 @@ describe('adds two suggested replies to a message and sends one of the suggested
       cy.visit(`/inbox/inbox/conversations/${Cypress.env('conversationId')}`);
       cy.url().should('include', '/inbox');
 
-      cy.get(`[data-cy=${cySuggestionsButton}]`).should('be.visible').click();
+      cy.get(`[data-cy=${cySuggestionsButton}]`).first().click({force: true});
 
       cy.get(`[data-cy=${cySuggestionsList}]`).contains('Welcome!').click({force: true});
 

lib/typescript/components/alerts/SettingsModal/ModalHeader.tsx

@@ -7,12 +7,13 @@ type ModalHeaderProps = {
   close: (event: React.MouseEvent<HTMLButtonElement>) => void;
   headerClassName: string;
   style: CSSProperties;
+  dataCyCloseButton?: string;
 };
 
-const ModalHeader = ({title, close, headerClassName, style}: ModalHeaderProps) => {
+const ModalHeader = ({title, close, headerClassName, style, dataCyCloseButton}: ModalHeaderProps) => {
   return (
     <div className={styles.modalHeader}>
-      <button className={styles.closeButton} onClick={close}>
+      <button className={styles.closeButton} onClick={close} data-cy={dataCyCloseButton}>
         <CloseIcon className={styles.closeIcon} title="Close" />
       </button>
       <div style={style} className={`${styles.headline} ${headerClassName}`}>

lib/typescript/components/alerts/SettingsModal/index.tsx

@@ -13,10 +13,21 @@ type SettingsModalProps = {
   Icon?: React.ReactElement | null;
   headerClassName?: string;
   style?: CSSProperties;
+  dataCyCloseButton?: string;
 };
 
 export const SettingsModal = (props: SettingsModalProps) => {
-  const {close, title, children, headerClassName, wrapperClassName, style, containerClassName, Icon} = props;
+  const {
+    close,
+    title,
+    children,
+    headerClassName,
+    wrapperClassName,
+    style,
+    containerClassName,
+    Icon,
+    dataCyCloseButton,
+  } = props;
   return (
     <Modal
       className={`${styles.content} ${wrapperClassName}`}
@@ -29,7 +40,13 @@ export const SettingsModal = (props: SettingsModalProps) => {
     >
       <div className={containerClassName}>
         {Icon ? Icon : ''}
-        <ModalHeader title={title ?? ''} close={close} style={style} headerClassName={headerClassName} />
+        <ModalHeader
+          title={title ?? ''}
+          close={close}
+          style={style}
+          headerClassName={headerClassName}
+          dataCyCloseButton={dataCyCloseButton}
+        />
         {children}
       </div>
     </Modal>

tsconfig.json

@@ -5,8 +5,8 @@
   },
   "include": [
     "./frontend/**/*",
-    "./lib/typescript/**/*"
+    "./lib/typescript/**/*",
   ],
-  "types": ["node", "jest", "@testing-library/jest-dom"],
+  "types": ["node", "@testing-library/jest-dom", "jest", "./integration/commands/index.ts"],
   "rootDirs": ["."]
 }