Stashing e2e changes

Author: islathehut

packages/desktop/.env.development

@@ -6,4 +6,5 @@ QPS_ENABLED=true
 QSS_ENDPOINT=ws://127.0.0.1:3003
 LOG_TO_FILE=true
 ENVFILE=.env.development
+NODE_ENV=development
 DEBUG=state-manager*,desktop*,utils*,identity*,backend*,-backend:Libp2p*,-backend:auth:cryptoService,-localfirst*,-backend:Tor*,-backend:TimedQueue

packages/desktop/src/renderer/components/Channel/AddMembersChannel/AddMembersChannelComponent.tsx

@@ -211,6 +211,7 @@ export const AddMembersChannelComponent: React.FC<ReturnType<typeof useModal> &
                   })}
                   component='li'
                   selected={state.selected}
+                  data-testid={`${channelName}-add-members-autocomplete-option-${option.label}`}
                   {...optionProps}
                 >
                   <Grid container item alignItems='center' direction='row' display='flex' gap='5px' padding='0px 0px'>
@@ -229,6 +230,7 @@ export const AddMembersChannelComponent: React.FC<ReturnType<typeof useModal> &
                       userProfile={userProfile}
                       userId={userProfile.userId}
                       size={theme.componentSizes.avatar.small}
+                      data-testid={`${channelName}-add-members-autocomplete-${option.label}-profilePhoto`}
                     />
                     <Typography
                       variant='body2'
@@ -279,6 +281,7 @@ export const AddMembersChannelComponent: React.FC<ReturnType<typeof useModal> &
               sx={{ width: 300 }}
               renderInput={params => <TextField {...params} label='Add members' />}
               onChange={handleAutoCompleteChange}
+              data-testid={`${channelName}-add-members-autocomplete`}
             />
           </ThemeProvider>
         </StyledGrid>
@@ -289,7 +292,7 @@ export const AddMembersChannelComponent: React.FC<ReturnType<typeof useModal> &
             size='small'
             fullWidth
             className={classes.button}
-            data-testid='addMembersChannelButton'
+            data-testid={`${channelName}-add-members-button`}
           >
             Add {selectedMembers.length} members
           </Button>

packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx

@@ -110,7 +110,7 @@ export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) =>
           cursor: 'pointer',
         }}
         onClick={action}
-        data-testid={`contextMenuItem${title}`}
+        data-testid={`contextMenuItem${title.replace(' ', '_')}`}
       >
         <Grid
           style={{

packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx

@@ -116,7 +116,6 @@ describe('Channels panel', () => {
             handleOpen: function (_args?: any): any {},
             handleClose: function (): any {},
           }}
-          myUserProfile={aliceUserProfile}
           isTorInitialized={true}
         />
         <DirectMessagesPanel

packages/e2e-tests/src/selectors.ts

@@ -660,6 +660,22 @@ export class ChannelContextMenu {
     await tab.click()
   }
 
+  async openAddMembersModal() {
+    const tab = this.driver.wait(
+      until.elementLocated(By.xpath('//div[@data-testid="contextMenuItemAdd_members"]')),
+      15_000,
+      `Channel context menu channel add members tab couldn't be located within timeout`,
+      500
+    )
+    await this.driver.wait(
+      until.elementIsVisible(tab),
+      15_000,
+      `Channel context menu channel add members tab was not visibile within timeout`,
+      500
+    )
+    await tab.click()
+  }
+
   // TODO: replace sleep
   async deleteChannel() {
     const button = this.driver.wait(
@@ -677,6 +693,43 @@ export class ChannelContextMenu {
     await button.click()
     await sleep(5000)
   }
+
+  // TODO: replace sleep
+  async addMembersToChannel(channelName: string, memberNames: string[]) {
+    const autoCompleteInput = this.driver.wait(
+      until.elementLocated(By.xpath(`//*[@data-testid="${channelName}-add-members-autocomplete"]`)),
+      20_000,
+      `Channel add members autocomplete input couldn't be located within timeout`,
+      500
+    )
+    await this.driver.wait(
+      until.elementIsVisible(autoCompleteInput),
+      15_000,
+      `Channel context menu channel add members autocomplete input was not visibile within timeout`,
+      500
+    )
+
+    for (const memberName of memberNames) {
+      await autoCompleteInput.click()
+      autoCompleteInput.sendKeys(memberName)
+      autoCompleteInput.sendKeys(Key.ENTER)
+    }
+
+    const button = this.driver.wait(
+      until.elementLocated(By.xpath('//button[@data-testid="addMembersChannelButton"]')),
+      20_000,
+      `Channel add members button couldn't be located within timeout`,
+      500
+    )
+    await this.driver.wait(
+      until.elementIsVisible(button),
+      15_000,
+      `Channel context menu channel add members button was not visibile within timeout`,
+      500
+    )
+    await button.click()
+    await sleep(5000)
+  }
 }
 
 export class UserProfileContextMenu {
@@ -1199,6 +1252,15 @@ export class Channel {
     )
   }
 
+  get lock() {
+    return this.driver.wait(
+      until.elementLocated(By.xpath(`//svg[@data-testid='channelTitle-private']`)),
+      10_000,
+      `Channel title element for ${this.name} couldn't be found within timeout`,
+      500
+    )
+  }
+
   get messagesList() {
     return this.driver.wait(
       until.elementLocated(By.xpath('//ul[@id="messages-scroll"]')),
@@ -2013,7 +2075,7 @@ export class Sidebar {
     return channel
   }
 
-  async addNewChannel(name: string): Promise<Channel> {
+  async addNewChannel(name: string, isPublic: boolean = true): Promise<Channel> {
     const button = await this.driver.wait(
       until.elementLocated(By.xpath('//button[@data-testid="addChannelButton"]')),
       5_000,
@@ -2032,6 +2094,23 @@ export class Sidebar {
     await this.driver.wait(until.elementIsVisible(channelNameInput), 5_000)
     await this.driver.wait(until.elementIsEnabled(channelNameInput), 5_000)
     await channelNameInput.sendKeys(name)
+
+    const channelPrivateToggle = await this.driver.wait(
+      until.elementLocated(By.xpath('//span[@data-testid="createChannel-private-form-control-toggle"]')),
+      5_000,
+      `Channel private toggle couldn't be found within timeout`,
+      500
+    )
+    await this.driver.wait(until.elementIsVisible(channelPrivateToggle), 5_000)
+    if ((await channelPrivateToggle.getAttribute('class')).includes('checked')) {
+      throw new Error('Channel privacy toggle was enabled before clicking')
+    }
+    if (!isPublic) {
+      await channelPrivateToggle.click()
+      if (!(await channelPrivateToggle.getAttribute('class')).includes('checked')) {
+        throw new Error('Channel privacy toggle was disabled after clicking')
+      }
+    }
     const channelNameButton = await this.driver.wait(
       until.elementLocated(By.xpath('//button[@data-testid="channelNameSubmit"]')),
       5_000,