test: fix integration tests

ts/components/dialog/SessionPasswordDialog.tsx

@@ -42,12 +42,18 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
   }
 
   public componentDidMount() {
+    document.addEventListener('keyup', this.onEnterPressed);
+
     setTimeout(() => {
       // tslint:disable-next-line: no-unused-expression
       this.passportInput && this.passportInput.focus();
     }, 1);
   }
 
+  public componentWillUnmount() {
+    document.removeEventListener('keyup', this.onEnterPressed);
+  }
+
   public render() {
     const { passwordAction } = this.props;
     let placeholders: Array<string> = [];
@@ -93,7 +99,8 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
               this.passportInput = input;
             }}
             placeholder={placeholders[0]}
-            onKeyUp={this.onPasswordInput}
+            onChange={this.onPasswordInput}
+            onPaste={this.onPasswordInput}
             data-testid="password-input"
           />
           {passwordAction !== 'enter' && passwordAction !== 'remove' && (
@@ -101,7 +108,8 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
               type="password"
               id="password-modal-input-confirm"
               placeholder={placeholders[1]}
-              onKeyUp={this.onPasswordConfirmInput}
+              onChange={this.onPasswordConfirmInput}
+              onPaste={this.onPasswordConfirmInput}
               data-testid="password-input-confirm"
             />
           )}
@@ -110,7 +118,8 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
               type="password"
               id="password-modal-input-reconfirm"
               placeholder={placeholders[2]}
-              onKeyUp={this.onPasswordRetypeInput}
+              onPaste={this.onPasswordRetypeInput}
+              onChange={this.onPasswordRetypeInput}
               data-testid="password-input-reconfirm"
             />
           )}
@@ -258,6 +267,13 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
     this.closeDialog();
   }
 
+  private async onEnterPressed(event: any) {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+      return this.setPassword();
+    }
+  }
+
   private async handleActionEnter(enteredPassword: string) {
     // be sure the password is valid
     if (!this.validatePassword(enteredPassword)) {
@@ -321,30 +337,18 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
     window.inboxStore?.dispatch(sessionPassword(null));
   }
 
-  private async onPasswordInput(event: any) {
-    if (event.key === 'Enter') {
-      return this.setPassword();
-    }
+  private onPasswordInput(event: any) {
     const currentPasswordEntered = event.target.value;
-
     this.setState({ currentPasswordEntered });
   }
 
-  private async onPasswordConfirmInput(event: any) {
-    if (event.key === 'Enter') {
-      return this.setPassword();
-    }
+  private onPasswordConfirmInput(event: any) {
     const currentPasswordConfirmEntered = event.target.value;
-
     this.setState({ currentPasswordConfirmEntered });
   }
 
-  private async onPasswordRetypeInput(event: any) {
-    if (event.key === 'Enter') {
-      return this.setPassword();
-    }
+  private onPasswordRetypeInput(event: any) {
     const currentPasswordRetypeEntered = event.target.value;
-
     this.setState({ currentPasswordRetypeEntered });
   }
 }

ts/components/settings/section/CategoryPrivacy.tsx

@@ -97,6 +97,7 @@ export const SettingsCategoryPrivacy = (props: {
               displayPasswordModal('change', props.onPasswordUpdated);
             }}
             buttonText={window.i18n('changePassword')}
+            dataTestId="change-password-settings-button"
           />
         )}
         {props.hasPassword && (
@@ -108,6 +109,7 @@ export const SettingsCategoryPrivacy = (props: {
             }}
             buttonColor={SessionButtonColor.Danger}
             buttonText={window.i18n('removePassword')}
+            dataTestId="remove-password-settings-button"
           />
         )}
       </>

ts/test/automation/disappearing_messages.spec.ts

@@ -10,6 +10,7 @@ import {
   waitForReadableMessageWithText,
   waitForTestIdWithText,
 } from './utils';
+import { sleepFor } from '../../session/utils/Promise';
 
 let windows: Array<Page> = [];
 test.beforeEach(beforeAllClean);
@@ -50,7 +51,9 @@ test('Disappearing Messages', async () => {
     'readable-message',
     'You set the disappearing message timer to 5 seconds'
   );
+  await sleepFor(2000);
   // Check top right hand corner indicator
+
   await waitForTestIdWithText(windowA, 'disappearing-messages-indicator', '5 seconds');
   // Send message
   // Wait for tick of confirmation
@@ -87,7 +90,7 @@ test('Disappearing Messages', async () => {
     `${userA.userName} set the disappearing message timer to 5 seconds`
   );
   // Wait 5 seconds
-  await waitForMatchingText(windowB, `${userA.userName} disabled disappearing messages`);
+  await waitForMatchingText(windowB, `${userA.userName} has turned off disappearing messages.`);
   // verify message is deleted in windowB
   const errorDesc2 = 'Should not be found';
   try {

ts/test/automation/password.spec.ts

@@ -1,4 +1,5 @@
 import { _electron, Page, test } from '@playwright/test';
+import { sleepFor } from '../../session/utils/Promise';
 import { beforeAllClean, forceCloseAllWindows } from './setup/beforeEach';
 import { newUser } from './setup/new_user';
 import { openAppAndWait } from './setup/open';
@@ -36,42 +37,40 @@ test.describe('Password checks', () => {
     await clickOnTestIdWithText(window, 'set-password-button');
     // Enter password
     await typeIntoInput(window, 'password-input', testPassword);
-    await window.keyboard.press('Delete');
     // Confirm password
     await typeIntoInput(window, 'password-input-confirm', testPassword);
-    await window.keyboard.press('Delete');
-    // Click OK
-    await clickOnMatchingText(window, 'OK');
-    // await window.keyboard.press('Enter');
+    // Click Done
+    await clickOnMatchingText(window, 'Done');
     // Check toast notification
     await waitForTestIdWithText(
       window,
       'session-toast',
-      'Your password has been set. Please keep it safe'
+      'Your password has been set. Please keep it safe.'
     );
+    // Click on settings tab
+    await sleepFor(300);
+    await clickOnTestIdWithText(window, 'settings-section');
     // Type password into input field
 
     await typeIntoInput(window, 'password-input', testPassword);
-    // Click OK
-    await clickOnMatchingText(window, 'OK');
+
+    // Click Done
+    await clickOnMatchingText(window, 'Done');
+    await clickOnTestIdWithText(window, 'settings-section');
+
     // Change password
-    await clickOnMatchingText(window, 'Change Password');
+    await clickOnTestIdWithText(window, 'change-password-settings-button', 'Change Password');
+
+    console.warn('clicked Change Password');
     // Enter old password
     await typeIntoInput(window, 'password-input', testPassword);
-    await window.keyboard.press('Delete');
     // Enter new password
     await typeIntoInput(window, 'password-input-confirm', newTestPassword);
-    await window.keyboard.press('Delete');
-    // await window.fill('#password-modal-input-confirm', newTestPassword);
     await window.keyboard.press('Tab');
     // Confirm new password
     await typeIntoInput(window, 'password-input-reconfirm', newTestPassword);
-    await window.keyboard.press('Delete');
-    // await window.fill('#password-modal-input-reconfirm', newTestPassword);
     // Press enter on keyboard
     await window.keyboard.press('Enter');
-    // Select OK
-    await clickOnMatchingText(window, 'OK');
     // Check toast notification for 'changed password'
     await waitForTestIdWithText(
       window,
@@ -92,36 +91,44 @@ test.describe('Password checks', () => {
     await clickOnMatchingText(window, 'Set Password');
     // Enter password
     await typeIntoInput(window, 'password-input', testPassword);
-    await window.keyboard.press('Delete');
     // Confirm password
     await typeIntoInput(window, 'password-input-confirm', testPassword);
-    await window.keyboard.press('Delete');
-    // Click OK
+    // Click Done
     await window.keyboard.press('Enter');
+    // // Click on settings tab
+    await sleepFor(100);
+    await clickOnTestIdWithText(window, 'settings-section');
+
     // Type password into input field
+    await sleepFor(100);
     await typeIntoInput(window, 'password-input', testPassword);
-    await window.keyboard.press('Delete');
-    // Click OK
-    await clickOnMatchingText(window, 'OK');
-    // Navigate away from settings tab
+    // Click Done
+    await clickOnMatchingText(window, 'Done');
+    await sleepFor(100);
+    await window.mouse.click(0, 0);
     await clickOnTestIdWithText(window, 'message-section');
+    await sleepFor(100);
+
     // // Click on settings tab
+    await sleepFor(1000);
     await clickOnTestIdWithText(window, 'settings-section');
     // // Try with incorrect password
-    await typeIntoInput(window, 'password-input', '0000');
-    await window.keyboard.press('Delete');
+    await typeIntoInput(window, 'password-input', '000000');
     // Confirm
-    await clickOnMatchingText(window, 'OK');
+    await clickOnMatchingText(window, 'Done');
     // // invalid password banner showing?
     await waitForMatchingText(window, 'Invalid password');
     // // Empty password
     // // Navigate away from settings tab
+    await window.mouse.click(0, 0);
+    await sleepFor(100);
     await clickOnTestIdWithText(window, 'message-section');
+    await sleepFor(100);
     // // Click on settings tab
     await clickOnTestIdWithText(window, 'settings-section');
     // // No password entered
-    await clickOnMatchingText(window, 'OK');
+    await clickOnMatchingText(window, 'Done');
     // // Banner should ask for password to be entered
-    await waitForMatchingText(window, 'Please enter your password');
+    await waitForMatchingText(window, 'Enter password');
   });
 });

ts/test/automation/utils.ts

@@ -28,15 +28,17 @@ export async function waitForMatchingText(window: Page, text: string) {
 }
 
 export async function clickOnMatchingText(window: Page, text: string, rightButton = false) {
+  console.info(`clickOnMatchingText: "${text}"`);
   return window.click(`"${text}"`, rightButton ? { button: 'right' } : undefined);
 }
 
 export async function clickOnTestIdWithText(window: Page, dataTestId: string, text?: string) {
-  if (text) {
-    return window.click(`css=[data-testid=${dataTestId}]:has-text("${text}")`);
-  }
+  console.info(`clickOnTestIdWithText with testId:${dataTestId} and text:${text ? text : 'none'}`);
+
+  const builtSelector = !text
+    ? `css=[data-testid=${dataTestId}]`
+    : `css=[data-testid=${dataTestId}]:has-text("${text}")`;
 
-  const builtSelector = `css=[data-testid=${dataTestId}]`;
   await window.waitForSelector(builtSelector);
   return window.click(builtSelector);
 }
@@ -46,6 +48,7 @@ export function getMessageTextContentNow() {
 }
 
 export async function typeIntoInput(window: Page, dataTestId: string, text: string) {
+  console.info(`typeIntoInput testId: ${dataTestId} : "${text}"`);
   const builtSelector = `css=[data-testid=${dataTestId}]`;
   return window.fill(builtSelector, text);
 }