fix(id): unique ids for all elements (#11346)

* fix(id): unique ids for all elements * chore(tests): rever test index util * chore(tests): register when neccessary * chore(tests): fix admin tests * chore(tests): revert commented console.info
botpress · Jan 31, 2022 · d8602aa · d8602aa
1 parent 2b0df4d
commit d8602aa
Show file tree

Hide file tree

Showing 40 changed files with 106 additions and 83 deletions.
diff --git a/modules/channel-web/src/views/lite/components/Header.tsx b/modules/channel-web/src/views/lite/components/Header.tsx
@@ -101,7 +101,7 @@ class Header extends React.Component<HeaderProps> {
       <button
         type="button"
         tabIndex={-1}
-        id="btn-delete"
+        id="btn-delete-conversation"
         ref={el => (this.btnEls[0] = el)}
         className={'bpw-header-icon bpw-header-icon-delete'}
         onClick={this.handleDeleteConversation}

diff --git a/modules/code-editor/src/views/full/FileNavigator.tsx b/modules/code-editor/src/views/full/FileNavigator.tsx
@@ -160,7 +160,7 @@ class FileNavigator extends React.Component<Props, State> {
         ContextMenu.show(
           <Menu>
             <MenuItem
-              id="btn-delete"
+              id="btn-menu-delete-file"
               icon="delete"
               text={lang.tr('delete')}
               onClick={() => this.props.deleteFile(file)}
@@ -226,7 +226,12 @@ class FileNavigator extends React.Component<Props, State> {
         ) : (
           <MenuItem id="btn-rename" icon="edit" text={lang.tr('rename')} onClick={() => this.renameTreeNode(node)} />
         )}
-        <MenuItem id="btn-delete" icon="delete" text={lang.tr('delete')} onClick={() => this.props.deleteFile(file)} />
+        <MenuItem
+          id="btn-delete-file"
+          icon="delete"
+          text={lang.tr('delete')}
+          onClick={() => this.props.deleteFile(file)}
+        />
         <MenuDivider />
         <MenuItem
           id="btn-duplicate"

diff --git a/modules/code-editor/src/views/full/SidePanel.tsx b/modules/code-editor/src/views/full/SidePanel.tsx
@@ -260,7 +260,7 @@ class PanelContent extends React.Component<Props> {
         label={lang.tr('module.code-editor.sidePanel.rawFileEditor')}
         actions={[
           {
-            id: 'btn-upload',
+            id: 'btn-upload-sidepanel',
             icon: <Icon icon="upload" />,
             key: 'upload',
             onClick: () => this.setState({ selectedFile: undefined, isUploadModalOpen: true })

diff --git a/modules/code-editor/src/views/full/components/NameModal.tsx b/modules/code-editor/src/views/full/components/NameModal.tsx
@@ -84,7 +84,7 @@ const NameModal: FC<Props> = props => {
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button
               type="submit"
-              id="btn-submit"
+              id="btn-submit-name"
               text={lang.tr('submit')}
               intent={Intent.PRIMARY}
               onClick={submit}

diff --git a/modules/code-editor/src/views/full/components/NewFileModal.tsx b/modules/code-editor/src/views/full/components/NewFileModal.tsx
@@ -121,7 +121,7 @@ const NewFileModal: FC<Props> = props => {
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button
               type="submit"
-              id="btn-submit"
+              id="btn-submit-new-file"
               text={lang.tr('submit')}
               intent={Intent.PRIMARY}
               onClick={submit}

diff --git a/modules/code-editor/src/views/full/components/UploadModal.tsx b/modules/code-editor/src/views/full/components/UploadModal.tsx
@@ -171,7 +171,7 @@ export const UploadModal: FC<Props> = props => {
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button
-              id="btn-submit"
+              id="btn-submit-upload"
               text={isLoading ? lang.tr('pleaseWait') : lang.tr('submit')}
               disabled={isLoading || hasError || (alreadyExists && !overwrite)}
               onClick={submitChanges}

diff --git a/modules/libraries/src/views/full/UploadLibrary.tsx b/modules/libraries/src/views/full/UploadLibrary.tsx
@@ -98,7 +98,7 @@ const UploadLibrary: FC<Props> = props => {
       />
 
       <Button
-        id="btn-submit"
+        id="btn-submit-upload-library"
         text={isLoading ? lang.tr('pleaseWait') : lang.tr('submit')}
         disabled={isLoading || hasError || !filePath}
         onClick={submitChanges}

diff --git a/packages/bp/e2e/admin/auth.test.ts b/packages/bp/e2e/admin/auth.test.ts
@@ -117,15 +117,15 @@ describe('Auth UI', () => {
   it('Preview non-hidden auth strategies', async () => {
     await page.goto(`${bpConfig.host}/admin/login`)
 
-    expect(await doesElementExist('#btn-default')).toBeTruthy()
-    expect(await doesElementExist('#btn-botpress')).toBeTruthy()
+    expect(await doesElementExist('#btn-default-signin')).toBeTruthy()
+    expect(await doesElementExist('#btn-botpress-signin')).toBeTruthy()
     expect(await doesElementExist('#btn-botpress2')).toBeFalsy()
   })
 
   it('Revert config', async () => {
-    await clickOn('#btn-default')
-    await fillField('#email', bpConfig.email)
-    await fillField('#password', bpConfig.password)
+    await clickOn('#btn-default-signin')
+    await fillField('#email-login', bpConfig.email)
+    await fillField('#password-login', bpConfig.password)
     await clickOn('#btn-signin')
 
     const token = await extractTokenFromUrlResponse(`${bpConfig.apiHost}/api/v2/admin/auth/login/basic/default`)

diff --git a/packages/bp/e2e/admin/bots.test.ts b/packages/bp/e2e/admin/bots.test.ts
@@ -31,7 +31,7 @@ describe('Admin - Bot Management', () => {
     await fillField('#input-botId', importBotId)
     await uploadFile('input[type="file"]', path.join(__dirname, '../assets/bot-import-test.tgz'))
 
-    await clickOn('#btn-upload')
+    await clickOn('#btn-import-bot')
     await expectAdminApiCallSuccess(`workspace/bots/${importBotId}/import`, 'POST')
   })
 
@@ -45,7 +45,7 @@ describe('Admin - Bot Management', () => {
   it('Delete imported bot', async () => {
     await gotoAndExpect(`${bpConfig.host}/admin/workspace/${workspaceId}/bots`)
 
-    await clickButtonForBot('#btn-delete', importBotId)
+    await clickButtonForBot('#btn-delete-bot-item', importBotId)
 
     await clickOn(CONFIRM_DIALOG.ACCEPT)
     await expectAdminApiCallSuccess(`workspace/bots/${importBotId}/delete`, 'POST')
@@ -70,7 +70,7 @@ describe('Admin - Bot Management', () => {
   })
 
   it('Export bot', async () => {
-    await clickButtonForBot('#btn-export', tempBotId)
+    await clickButtonForBot('#btn-export-bot-item', tempBotId)
 
     const response = await expectAdminApiCallSuccess(`workspace/bots/${tempBotId}/export`, 'GET')
 
@@ -79,27 +79,27 @@ describe('Admin - Bot Management', () => {
   })
 
   it('Create revision', async () => {
-    await clickButtonForBot('#btn-createRevision', tempBotId)
+    await clickButtonForBot('#btn-createRevision-bot-item', tempBotId)
     await expectAdminApiCallSuccess(`workspace/bots/${tempBotId}/revisions`, 'POST')
   })
 
   it('Rollback revision', async () => {
     // FIXME: Super Hack to make sure the revision is 'ready'
     await page.waitForTimeout(500)
 
-    await clickButtonForBot('#btn-rollbackRevision', tempBotId)
+    await clickButtonForBot('#btn-rollbackRevision-bot-item', tempBotId)
     await expectMatchElement('#select-revisions')
 
     await page.keyboard.press('ArrowDown')
     await page.keyboard.press('Enter')
     await clickOn('#chk-confirm')
 
-    await clickOn('#btn-submit')
+    await clickOn('#btn-submit-rollback')
     await expectAdminApiCallSuccess(`workspace/bots/${tempBotId}/rollback`, 'POST')
   })
 
   it('Delete temporary bot', async () => {
-    await clickButtonForBot('#btn-delete', tempBotId)
+    await clickButtonForBot('#btn-delete-bot-item', tempBotId)
 
     await clickOn(CONFIRM_DIALOG.ACCEPT)
     await expectAdminApiCallSuccess(`workspace/bots/${tempBotId}/delete`, 'POST')

diff --git a/packages/bp/e2e/admin/logout.test.ts b/packages/bp/e2e/admin/logout.test.ts
@@ -11,14 +11,14 @@ describe('Admin - Logout', () => {
 
   if (bpConfig.recreateBot) {
     it('Delete test bot', async () => {
-      await clickButtonForBot('#btn-delete')
+      await clickButtonForBot('#btn-delete-bot-item')
       await clickOn(CONFIRM_DIALOG.ACCEPT)
       await expectAdminApiCallSuccess(`workspace/bots/${bpConfig.botId}/delete`, 'POST')
     })
   }
 
   it('Ensure that the previous token is invalid', async () => {
-    await clickOn('#btn-menu')
+    await clickOn('#btn-menu-user-dropdown')
     await clickOn('#btn-logout')
 
     const response = await getResponse('/api/v2/admin/auth/logout', 'POST')

diff --git a/packages/bp/e2e/admin/ui.test.ts b/packages/bp/e2e/admin/ui.test.ts
@@ -11,6 +11,7 @@ const LAST_NAME = 'Lalancette'
 describe('Admin - UI', () => {
   it('Load code editor page', async () => {
     await clickOn('#btn-menu-code-editor')
+
     const response = await getResponse(`${bpConfig.apiHost}/api/v1/bots/___/mod/code-editor/files`, 'GET')
     expect(response.status()).toBe(200)
   })
@@ -35,7 +36,7 @@ describe('Admin - UI', () => {
   })
 
   it('Change user profile', async () => {
-    await clickOn('#btn-menu')
+    await clickOn('#btn-menu-user-dropdown')
     await clickOn('#btn-profile')
 
     await fillField('#input-firstname', FIRST_NAME)
@@ -49,37 +50,37 @@ describe('Admin - UI', () => {
     await uploadFile('input[type="file"]', path.join(__dirname, '../assets/alien.png'))
     const { url } = await expectCallSuccess(`${bpConfig.host}/api/v1/media`, 'POST')
 
-    await clickOn('#btn-submit')
+    await clickOn('#btn-submit-update-user')
     await expectCallSuccess(`${bpConfig.host}/api/v2/admin/user/profile`, 'POST')
     await closeToaster()
 
     const src = await page.$eval('img.dropdown-picture', img => img.getAttribute('src'))
     expect(src?.includes(url)).toBeTruthy()
 
-    await clickOn('#btn-menu')
+    await clickOn('#btn-menu-user-dropdown')
     await expectMatch(`Signed in as ${FIRST_NAME} ${LAST_NAME}`)
-    await clickOn('#btn-menu')
+    await clickOn('#btn-menu-user-dropdown')
   })
 
   it('Update password', async () => {
-    await clickOn('#btn-menu')
+    await clickOn('#btn-menu-user-dropdown')
     await clickOn('#btn-changepass')
     await fillField('#input-password', bpConfig.password)
     await fillField('#input-newPassword', NEW_PASSWORD)
     await fillField('#input-confirmPassword', NEW_PASSWORD)
 
-    await clickOn('#btn-submit')
+    await clickOn('#btn-submit-update-password')
     await expectCallSuccess(`${bpConfig.host}/api/v2/admin/auth/login/basic/default`, 'POST')
   })
 
   it('Revert password', async () => {
-    await clickOn('#btn-menu')
+    await clickOn('#btn-menu-user-dropdown')
     await clickOn('#btn-changepass')
     await fillField('#input-password', NEW_PASSWORD)
     await fillField('#input-newPassword', bpConfig.password)
     await fillField('#input-confirmPassword', bpConfig.password)
 
-    await clickOn('#btn-submit')
+    await clickOn('#btn-submit-update-password')
     await expectCallSuccess(`${bpConfig.host}/api/v2/admin/auth/login/basic/default`, 'POST')
   })
 })
diff --git a/packages/bp/e2e/admin/users.test.ts b/packages/bp/e2e/admin/users.test.ts
@@ -10,7 +10,7 @@ describe('Admin - Users', () => {
   })
 
   it('Create a new collaborator', async () => {
-    await clickOn('#btn-create')
+    await clickOn('#btn-create-collaborator')
     await clickOn('#select-email')
     await page.type('#select-email', testUserEmail)
     await page.keyboard.press('Enter')
@@ -21,9 +21,9 @@ describe('Admin - Users', () => {
     await page.keyboard.press('Enter')
 
     await Promise.all([
-      clickOn('#btn-submit'),
       expectAdminApiCallSuccess('workspace/collaborators', 'POST'),
-      expectAdminApiCallSuccess('workspace/collaborators?roles=admin,dev,editor,agent,chatuser', 'GET')
+      expectAdminApiCallSuccess('workspace/collaborators?roles=admin,dev,editor,agent,chatuser', 'GET'),
+      clickOn('#btn-submit-create-user')
     ])
 
     await clickOn('button[aria-label="Close"]')

diff --git a/packages/bp/e2e/modules/code-editor.test.ts b/packages/bp/e2e/modules/code-editor.test.ts
@@ -26,7 +26,7 @@ describe('Module - Code Editor', () => {
   it('Create new action', async () => {
     await clickOn('#btn-add-action')
     await fillField('#input-name', 'hello.js', { delay: 100 })
-    await clickOn('#btn-submit')
+    await clickOn('#btn-submit-new-file')
 
     await page.focus('#monaco-editor')
     await page.mouse.click(469, 297)
@@ -63,7 +63,7 @@ describe('Module - Code Editor', () => {
   it('Delete file', async () => {
     await waitForFilesToLoad()
     await clickOnTreeNode('.hello_copy.js', 'right')
-    await clickOn('#btn-delete')
+    await clickOn('#btn-delete-file')
     await clickOn(CONFIRM_DIALOG.ACCEPT)
 
     await expectBotApiCallSuccess('mod/code-editor/remove', 'POST')

diff --git a/packages/bp/e2e/utils/index.ts b/packages/bp/e2e/utils/index.ts
@@ -27,19 +27,20 @@ export const loginOrRegister = async () => {
     return
   }
 
-  await fillField('#email', bpConfig.email)
-  await fillField('#password', bpConfig.password)
-
   if (page.url().includes('/register')) {
+    await fillField('#email-register', bpConfig.email)
+    await fillField('#password-register', bpConfig.password)
     await fillField('#confirmPassword', bpConfig.password)
     await clickOn('#btn-register')
   } else {
+    await fillField('#email-login', bpConfig.email)
+    await fillField('#password-login', bpConfig.password)
     await clickOn('#btn-signin')
   }
 }
 
 export const logout = async () => {
-  await clickOn('#btn-menu')
+  await clickOn('#btn-menu-user-dropdown')
   await clickOn('#btn-logout')
 
   const response = await getResponse('/api/v2/admin/auth/logout', 'POST')
@@ -153,20 +154,20 @@ export const clickOnTreeNode = async (searchText: string, button: MouseButton =
 }
 
 export const clickButtonForBot = async (buttonId: string, botId: string = bpConfig.botId) => {
-  await page.waitForSelector('#btn-menu')
+  await page.waitForSelector('.btn-menu-bot-item')
 
   const botRow = await expectMatchElement('.bp_table-row', { text: botId })
-  await clickOn('#btn-menu', undefined, botRow)
+  await clickOn('.btn-menu-bot-item', undefined, botRow)
 
   await expectMatchElement(buttonId)
   await clickOn(buttonId)
 }
 
 export const clickButtonForUser = async (buttonId: string, userId: string) => {
-  await page.waitForSelector('#btn-menu')
+  await page.waitForSelector('#btn-menu-collaborators')
 
   const userRow = await expectMatchElement('.bp_table-row', { text: userId })
-  await clickOn('#btn-menu', undefined, userRow)
+  await clickOn('#btn-menu-collaborators', undefined, userRow)
 
   await expectMatchElement(buttonId)
   await clickOn(buttonId)

diff --git a/packages/ui-admin/src/app/StatusBar/LangSwitcher.tsx b/packages/ui-admin/src/app/StatusBar/LangSwitcher.tsx
@@ -53,7 +53,7 @@ const LangSwitcher: FC<Props> = props => {
   return (
     <Popover minimal position={Position.TOP} interactionKind={PopoverInteractionKind.CLICK}>
       <Button
-        id="btn-menu"
+        id="btn-menu-lang"
         icon={<img src={requireFlag(props.contentLang)} alt={props.contentLang} className={style.flag} />}
         text={props.contentLang?.toUpperCase()}
         style={{ color: Colors.GRAY1 }}

diff --git a/packages/ui-admin/src/auth/AuthMethodPicker.tsx b/packages/ui-admin/src/auth/AuthMethodPicker.tsx
@@ -26,7 +26,7 @@ export const AuthMethodPicker: FC<Props> = props => {
         return (
           <Button
             key={strategyId}
-            id={`btn-${strategyId}`}
+            id={`btn-${strategyId}-signin`}
             text={label ? lang.tr('admin.signInWithLabel', { label }) : defaultLabel}
             onClick={() => props.onStrategySelected(strategyId)}
           />

diff --git a/packages/ui-admin/src/auth/ChangePasswordForm.tsx b/packages/ui-admin/src/auth/ChangePasswordForm.tsx
@@ -20,7 +20,7 @@ export const ChangePasswordForm: FC<Props> = props => {
     <form onSubmit={onSubmit}>
       {props.email && (
         <FormGroup label={lang.tr('email')}>
-          <InputGroup tabIndex={-1} value={props.email} disabled={true} type="text" id="email" />
+          <InputGroup tabIndex={-1} value={props.email} disabled={true} type="text" id="email-change-password" />
         </FormGroup>
       )}
 

diff --git a/packages/ui-admin/src/auth/LoginForm.tsx b/packages/ui-admin/src/auth/LoginForm.tsx
@@ -23,7 +23,7 @@ export const LoginForm: FC<Props> = props => {
           value={email}
           onChange={e => setEmail(e.target.value)}
           type="text"
-          id="email"
+          id="email-login"
           autoFocus={true}
         />
       </FormGroup>
@@ -34,7 +34,7 @@ export const LoginForm: FC<Props> = props => {
           value={password}
           onChange={e => setPassword(e.target.value)}
           type="password"
-          id="password"
+          id="password-login"
         />
       </FormGroup>
 

diff --git a/packages/ui-admin/src/auth/RegisterForm.tsx b/packages/ui-admin/src/auth/RegisterForm.tsx
@@ -26,7 +26,7 @@ export const RegisterForm: FC<Props> = props => {
           value={email}
           onChange={e => setEmail(e.target.value)}
           type="text"
-          id="email"
+          id="email-register"
           autoFocus={true}
         />
       </FormGroup>
@@ -37,7 +37,7 @@ export const RegisterForm: FC<Props> = props => {
           value={password}
           onChange={e => setPassword(e.target.value)}
           type="password"
-          id="password"
+          id="password-register"
         />
       </FormGroup>
 

diff --git a/packages/ui-admin/src/management/modules/ModuleUpload.tsx b/packages/ui-admin/src/management/modules/ModuleUpload.tsx
@@ -112,7 +112,7 @@ export const ImportModal: FC<Props> = props => {
         </Dialog.Body>
         <Dialog.Footer>
           <Button
-            id="btn-submit"
+            id="btn-submit-module-upload"
             text={isLoading ? lang.tr('pleaseWait') : lang.tr('submit')}
             disabled={isLoading}
             onClick={submitChanges}