E2e tests for mfa. Fix a bug that made mfa impossible to disable

packages/app/components/profile/multiFactorAuth/MfaDisable.tsx

@@ -38,9 +38,12 @@ export default class MfaDisable extends React.Component<
   onSubmit = (form: FormModel) => {
     return this.props
       .onSubmit(form, () => {
-        const { totp } = form.serialize() as { totp: string };
+        const { totp, password } = form.serialize() as {
+          totp: string;
+          password?: string;
+        };
 
-        return disableMFA(this.context.userId, totp);
+        return disableMFA(this.context.userId, totp, password);
       })
       .then(() => this.props.onComplete())
       .catch(resp => {

packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx

@@ -77,7 +77,11 @@ const linksByOs: {
 
 export default function OsInstruction({ os }: { os: OS }) {
   return (
-    <div className={styles.osInstruction}>
+    <div
+      className={styles.osInstruction}
+      data-testid="os-instruction"
+      data-os={os}
+    >
       <h3 className={styles.instructionTitle}>
         <Message {...messages.installOnOfTheApps} />
       </h3>

packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx

@@ -15,7 +15,11 @@ export default function OsInstruction({
   onClick: (event: React.MouseEvent<any>) => void;
 }) {
   return (
-    <div className={clsx(styles.osTile, className)} onClick={onClick}>
+    <div
+      className={clsx(styles.osTile, className)}
+      onClick={onClick}
+      data-testid="os-tile"
+    >
       <img className={styles.osLogo} src={logo} alt={label} />
       <div className={styles.osName}>{label}</div>
     </div>

packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx

@@ -40,7 +40,9 @@ export default function KeyForm({
       </div>
 
       <div className={profileForm.formRow}>
-        <div className={styles.key}>{formattedSecret}</div>
+        <div className={styles.key} data-testid="secret">
+          {formattedSecret}
+        </div>
       </div>
 
       <div className={profileForm.formRow}>