passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/DownloadRecoveryKit.js

@@ -17,7 +17,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import {withUserSettings} from "../../../contexts/UserSettingsContext";
 import {Trans, withTranslation} from "react-i18next";
-import AnimatedFeedback from "../../Common/Icons/AnimatedFeedback";
+import AnimatedFeedback from "../../../../shared/components/Icons/AnimatedFeedback";
 
 /**
  * This component displays the user profile information
@@ -57,16 +57,14 @@ class DownloadRecoveryKit extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col7 last">
+          <div className="col7 main-column last">
             <h3><Trans>The passphrase was updated!</Trans></h3>
             <div className="feedback-card">
               <AnimatedFeedback name='success' />
               <div className="additional-information">
                 <p><Trans>Your passphrase has been changed. Make sure you keep a backup of your secret key encrypted with this new passphrase.</Trans></p>
                 <p><Trans>Keep this backup in a safe place, you will need it in case of emergency.</Trans></p>
-                <p>
-                  <a className="button primary medium" role="button" onClick={this.handleDownloadBackup}><Trans>Download backup</Trans></a>
-                </p>
+                <button type="button" className="button primary" onClick={this.handleDownloadBackup}><Trans>Download backup</Trans></button>
               </div>
             </div>
           </div>

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/DownloadRecoveryKit.test.page.js

@@ -51,7 +51,7 @@ export default class DownloadRecoveryKitPage {
    * Returns the download backup button element
    */
   get downloadBackupButton() {
-    return this._page.container.querySelector('.additional-information a.button');
+    return this._page.container.querySelector('.additional-information button.button');
   }
 
   /**

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.js

@@ -19,12 +19,14 @@ import {withUserSettings} from "../../../contexts/UserSettingsContext";
 import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
-import Icon from "../../Common/Icons/Icon";
 import debounce from "debounce-promise";
 import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {Trans, withTranslation} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
+import Password from "../../../../shared/components/Password/Password";
+import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
+import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
 
 /**
  * This component displays the user choose passphrase information
@@ -48,12 +50,7 @@ class EnterNewPassphrase extends React.Component {
   get defaultState() {
     return {
       passphrase: '', // The current passphrase
-      passphraseStrength: {  // The current passphrase strength
-        id: '',
-        label: ''
-      },
-      isObfuscated: true, // True if the passphrase should not be visible
-      errors: {}, // The list of errors
+      passphraseEntropy: 0,  // The current passphrase entropy
       actions: {
         processing: false // True if one's processing passphrase
       },
@@ -61,7 +58,8 @@ class EnterNewPassphrase extends React.Component {
         enoughLength: '',
         uppercase: '',
         alphanumeric: '',
-        specialCharacters: ''
+        specialCharacters: '',
+        notInDictionary: ''
       }
     };
   }
@@ -78,7 +76,9 @@ class EnterNewPassphrase extends React.Component {
    */
   get isValid() {
     const validation = {
-      enoughLength:  this.state.passphrase.length >= 8
+      enoughLength:  this.state.passphrase.length >= 8,
+      enoughEntropy: this.state.passphraseEntropy !== 0,
+      notInDictionary: this.state.hintClassNames.notInDictionary === "success"
     };
     return Object.values(validation).every(value => value);
   }
@@ -102,9 +102,6 @@ class EnterNewPassphrase extends React.Component {
    */
   bindEventHandlers() {
     this.handlePassphraseChange = this.handlePassphraseChange.bind(this);
-    this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
-    this.handleFocusPassphrase = this.handleFocusPassphrase.bind(this);
-    this.handleBlurPassphrase = this.handleBlurPassphrase.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -116,6 +113,20 @@ class EnterNewPassphrase extends React.Component {
     this.passphraseInput = React.createRef();
   }
 
+  /**
+   * Whenever the component is mounted
+   */
+  componentDidMount() {
+    this.focusOnPassphrase();
+  }
+
+  /**
+   * Put the focus on the passphrase input
+   */
+  focusOnPassphrase() {
+    this.passphraseInput.current.focus();
+  }
+
   /**
    * Whenever the passphrase change
    * @param event The input event
@@ -123,31 +134,33 @@ class EnterNewPassphrase extends React.Component {
   async handlePassphraseChange(event) {
     const passphrase = event.target.value;
     this.setState({passphrase});
-    const passphraseStrength = this.evaluatePassphraseStrength(passphrase);
+    const passphraseEntropy = SecretGenerator.entropy(passphrase);
     const hintClassNames = await this.evaluatePassphraseHintClassNames(passphrase);
-    this.setState({passphraseStrength, hintClassNames});
-    await this.checkPassphraseIsInDictionary(passphrase, hintClassNames);
+    this.setState({passphraseEntropy, hintClassNames});
+    await this.checkPassphraseIsInDictionary();
   }
 
   /**
    * check if the passphrase is in dictionary
-   * @param passphrase
-   * @param hintClassNames
    * @returns {Promise<void>}
    */
-  async checkPassphraseIsInDictionary(passphrase, hintClassNames) {
+  async checkPassphraseIsInDictionary() {
     const hintClassName = condition => condition ? 'success' : 'error';
+
     // debounce only to check the passphrase is in dictionary
-    const isPwned = await this.evaluatePassphraseIsInDictionaryDebounce(passphrase).catch(() => null);
-    hintClassNames.notInDictionary = isPwned !== null ? hintClassName(!isPwned) : null;
-    this.setState({hintClassNames});
-  }
+    const isPwned = await this.evaluatePassphraseIsInDictionaryDebounce(this.state.passphrase).catch(() => null);
+    const notInDictionary = isPwned !== null ? hintClassName(!isPwned) : null;
 
-  /**
-   * Whenever one wants to toggle the obfusctated mode
-   */
-  handleToggleObfuscate() {
-    this.toggleObfuscate();
+    // if the passphrase is in dictionary, force the complexity to n/a
+    const passphraseEntropy = isPwned ? 0 : this.state.passphraseEntropy;
+
+    this.setState({
+      hintClassNames: {
+        ...this.state.hintClassNames,
+        notInDictionary
+      },
+      passphraseEntropy
+    });
   }
 
   /**
@@ -159,14 +172,6 @@ class EnterNewPassphrase extends React.Component {
     this.generateGpgKey();
   }
 
-  /**
-   * Returns the strength evaluation of the passphrase
-   * @param passphrase The passphrase to evaluate
-   */
-  evaluatePassphraseStrength(passphrase) {
-    return SecurityComplexity.getStrength(passphrase);
-  }
-
   /**
    * Evaluate the passphrase hints classnames
    * @param passphrase The passphrase to evaluate
@@ -183,48 +188,6 @@ class EnterNewPassphrase extends React.Component {
     };
   }
 
-  /**
-   * Returns the security token code of the suer
-   */
-  get securityTokenCode() {
-    return this.props.context.userSettings.getSecurityTokenCode();
-  }
-
-  /**
-   * Returns the style of the security token (color and text color)
-   */
-  get securityTokenStyle() {
-    const {userSettings} = this.props.context;
-    const inverseStyle =  {background: userSettings.getSecurityTokenTextColor(), color: userSettings.getSecurityTokenBackgroundColor()};
-    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
-    return this.state.hasPassphraseFocus ? inverseStyle : fullStyle;
-  }
-
-  /**
-   * Get the passphrase input style.
-   * @return {Object}
-   */
-  get passphraseInputStyle() {
-    const {userSettings} = this.props.context;
-    const emptyStyle =  {background: "", color: ""};
-    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
-    return this.state.hasPassphraseFocus ? fullStyle : emptyStyle;
-  }
-
-  /**
-   * Whenever the user focus on the passphrase input
-   */
-  handleFocusPassphrase() {
-    this.setState({hasPassphraseFocus: true});
-  }
-
-  /**
-   * Whenever the user blurs on the passphrase input
-   */
-  handleBlurPassphrase() {
-    this.setState({hasPassphraseFocus: false});
-  }
-
   /**
    * Evaluate if the passphrase is in dictionary
    * @param passphrase The passphrase to evaluate
@@ -252,7 +215,7 @@ class EnterNewPassphrase extends React.Component {
    */
   async onGpgKeyGeneratedFailure(error) {
     await this.toggleProcessing();
-    const ErrorDialogProps = {message: error.message};
+    const ErrorDialogProps = {error: error};
     this.props.dialogContext.open(NotifyError, ErrorDialogProps);
   }
 
@@ -289,38 +252,21 @@ class EnterNewPassphrase extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col7">
+          <div className="col7 main-column">
             <form className="enter-passphrase" onSubmit={this.handleSubmit}>
               <h3><Trans>Please enter a new passphrase</Trans></h3>
               <div className="form-content">
-                <div className="input text password required">
-                  <input
+                <div className="input-password-wrapper input required">
+                  <Password
                     id="passphrase-input"
-                    type={this.state.isObfuscated ? "password" : "text"}
-                    ref={this.passphraseInput}
+                    autoComplete="off"
+                    inputRef={this.passphraseInput}
                     value={this.state.passphrase}
-                    style={this.passphraseInputStyle}
+                    preview={true}
+                    securityToken={this.props.context.userSettings.getSecurityToken()}
                     onChange={this.handlePassphraseChange}
-                    onFocus={this.handleFocusPassphrase}
-                    onBlur={this.handleBlurPassphrase}
-                    disabled={!this.areActionsAllowed}
-                    autoFocus={true}
-                    autoComplete="off"/>
-                  <a
-                    className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
-                    role="button"
-                    onClick={this.handleToggleObfuscate}>
-                    <Icon name="eye-open"/>
-                    <span className="visually-hidden">view</span>
-                  </a>
-                  <span className="security-token" style={this.securityTokenStyle}>
-                    {this.securityTokenCode}
-                  </span>
-                  <div className="password-complexity">
-                    <span className="progress">
-                      <span className={`progress-bar ${this.state.passphraseStrength.id}`}/>
-                    </span>
-                  </div>
+                    disabled={!this.areActionsAllowed}/>
+                  <PasswordComplexity entropy={this.state.passphraseEntropy}/>
                 </div>
                 <div className="password-hints">
                   <ul>
@@ -343,10 +289,10 @@ class EnterNewPassphrase extends React.Component {
                 </div>
               </div>
               <div className="submit-wrapper">
-                <button className="button cancel medium" type="button" disabled={!this.areActionsAllowed} onClick={this.handleCancel}>
+                <button className="button cancel" type="button" disabled={!this.areActionsAllowed} onClick={this.handleCancel}>
                   <Trans>Cancel</Trans>
                 </button>
-                <FormSubmitButton primary={true} medium={true} disabled={this.mustBeDisabled} processing={this.isProcessing} value={this.translate('Update')}/>
+                <FormSubmitButton primary={true} disabled={this.mustBeDisabled} processing={this.isProcessing} value={this.translate('Update')}/>
               </div>
             </form>
           </div>

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.js

@@ -20,9 +20,15 @@ import {defaultProps} from "./EnterNewPassphrase.test.data";
 import {waitFor} from "@testing-library/react";
 import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+import PwnedPasswords from "../../../../shared/lib/Secret/PwnedPasswords";
+
+jest.mock("../../../../shared/lib/Secret/PwnedPasswords");
 
 beforeEach(() => {
+  jest.useFakeTimers();
   jest.resetModules();
+  jest.clearAllMocks();
+  PwnedPasswords.pwnedPasswords.mockResolvedValue(false);
 });
 
 describe("As LU I should see the user confirm passphrase page", () => {
@@ -43,18 +49,21 @@ describe("As LU I should see the user confirm passphrase page", () => {
     });
 
     it('As LU I should be able to enter my new passphrase', async() => {
+      expect.assertions(1);
       const expectedPassphrase = 'La belle vie';
       await page.insertPassphrase(expectedPassphrase);
       expect(page.passphrase).toBe(expectedPassphrase);
     });
 
     it('As LU I should initially see the passphrase I typed as obfuscated', async() => {
+      expect.assertions(1);
       const passphrase = 'La belle vie';
       await page.insertPassphrase(passphrase);
       expect(page.isObfuscated).toBeTruthy();
     });
 
     it('As LU I should be able to see the non-obfuscate passphrase I typed', async() => {
+      expect.assertions(1);
       const passphrase = 'La belle vie';
       await page.insertPassphrase(passphrase);
       await page.toggleObfuscate();
@@ -74,45 +83,49 @@ describe("As LU I should see the user confirm passphrase page", () => {
     });
 
     it('As LU I should see the passphrase fair strength updated on change', async() => {
-      const fairPassphrase = 'abcdefgh1234=5';
+      const fairPassphrase = 'abcdefgh1234=5ABCD';
       await page.insertPassphrase(fairPassphrase);
       await waitFor(() => expect(page.isFairPassphrase).toBeTruthy());
     });
 
     it('As LU I should see the passphrase strong strength updated on change', async() => {
-      const strongPassphrase = 'abcdefgh1234=5ABCD';
+      const strongPassphrase = 'abcdefgh1234=5ABCD===';
       await page.insertPassphrase(strongPassphrase);
       await waitFor(() => expect(page.isStrongPassphrase).toBeTruthy());
     });
 
     it('As LU I should see the passphrase very strong strength updated on change', async() => {
-      const veryStrongPassphrase = 'abcdefgh1234=5ABCD===';
+      const veryStrongPassphrase = 'abcdefgh1234=5ABCD===!';
       await page.insertPassphrase(veryStrongPassphrase);
       await waitFor(() => expect(page.isVeryStrongPassphrase).toBeTruthy());
     });
 
     it('As LU I should not go to the next step if the passphrase is not strong enough', async() => {
+      expect.assertions(1);
       const veryWeakPassphrase = 'blabla';
       await page.insertPassphrase(veryWeakPassphrase);
       expect(page.canUpdate).toBeFalsy();
     });
 
     it('As LU I should not go to the next step if the passphrase is empty', async() => {
+      expect.assertions(1);
       const veryWeakPassphrase = '';
       await page.insertPassphrase(veryWeakPassphrase);
       expect(page.canUpdate).toBeFalsy();
     });
 
     it('As LU I should go to the next step if the passphrase is strong enough', async() => {
+      expect.hasAssertions();
       const veryStrongPassphrase = 'abcdefgh1234=5ABCD===';
       await page.insertPassphrase(veryStrongPassphrase);
-      expect(page.canUpdate).toBeTruthy();
+      await waitFor(() => expect(page.canUpdate).toBeTruthy());
     });
 
-
     it('As LU I cannot update the form fields while submitting the form', async() => {
+      expect.hasAssertions();
       const veryStrongPassphrase = 'abcdefgh1234=5ABCD===';
       await page.insertPassphrase(veryStrongPassphrase);
+      await waitFor(() => expect(page.canUpdate).toBeTruthy());
 
       let generateResolve = null;
       const requestMockImpl = jest.fn(() => new Promise(resolve => generateResolve = resolve));
@@ -126,8 +139,10 @@ describe("As LU I should see the user confirm passphrase page", () => {
     });
 
     it('As LU I should see a processing feedback while submitting the form', async() => {
+      expect.hasAssertions();
       const veryStrongPassphrase = 'abcdefgh1234=5ABCD===';
       await page.insertPassphrase(veryStrongPassphrase);
+      await waitFor(() => expect(page.canUpdate).toBeTruthy());
 
       let generateResolve;
       const requestMockImpl = jest.fn(() => new Promise(resolve => generateResolve = resolve));
@@ -140,21 +155,24 @@ describe("As LU I should see the user confirm passphrase page", () => {
     });
 
     it('As LU I should be able to cancel the confirmation of my passphrase', async() => {
+      expect.assertions(1);
       await page.cancel();
       expect(props.userSettingsContext.onGoToIntroductionPassphraseRequested).toHaveBeenCalled();
     });
 
     it('As LU I should see an error dialog if there is an api error', async() => {
+      expect.hasAssertions();
       expect(page.updateButton.getAttribute("disabled")).not.toBeNull();
-      expect(page.updateButton.className).toBe('button primary disabled medium');
+      expect(page.updateButton.className).toBe('button primary disabled');
 
       // Fill the form
       page.insertPassphrase("passphrase");
+      await waitFor(() => expect(page.canUpdate).toBeTruthy());
       const mockReject = error => jest.fn(() => new Promise((resolve, reject) => reject(error)));
       jest.spyOn(props.userSettingsContext, 'onUpdatePassphraseRequested').mockImplementationOnce(mockReject(new PassboltApiFetchError("Jest simulate API error.")));
 
       await page.update();
-      const ErrorDialogProps = {message: "Jest simulate API error."};
+      const ErrorDialogProps = {error: new Error("Jest simulate API error.")};
       expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, ErrorDialogProps);
     });
   });

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.page.js

@@ -86,42 +86,42 @@ export default class EnterNewPassphrasePage {
    * Returns true if the current passphrase is very weak
    */
   get isVeryWeakPassphrase() {
-    return Boolean(this._page.container.querySelector('.very-weak'));
+    return Boolean(this._page.container.querySelector('.complexity-text').textContent.startsWith('Very weak'));
   }
 
   /**
    * Returns true if the current passphrase is weak
    */
   get isWeakPassphrase() {
-    return Boolean(this._page.container.querySelector('.weak'));
+    return Boolean(this._page.container.querySelector('.complexity-text').textContent.startsWith('Weak'));
   }
 
   /**
    * Returns true if the current passphrase is fair
    */
   get isFairPassphrase() {
-    return Boolean(this._page.container.querySelector('.fair'));
+    return Boolean(this._page.container.querySelector('.complexity-text').textContent.startsWith('Fair'));
   }
 
   /**
    * Returns true if the current passphrase is strong
    */
   get isStrongPassphrase() {
-    return Boolean(this._page.container.querySelector('.strong'));
+    return Boolean(this._page.container.querySelector('.complexity-text').textContent.startsWith('Strong'));
   }
 
   /**
    * Returns true if the current passphrase is very strong
    */
   get isVeryStrongPassphrase() {
-    return Boolean(this._page.container.querySelector('.very-strong'));
+    return Boolean(this._page.container.querySelector('.complexity-text').textContent.startsWith('Very strong'));
   }
 
   /**
    * Returns the update button element
    */
   get updateButton() {
-    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.js

@@ -67,8 +67,8 @@ class ChangeUserSecurityToken extends Component {
    * Get the security token from the logged in user
    */
   getSecurityTokenFromLoggedInUser() {
-    const background = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-    const code = this.props.context.userSettings.getSecurityTokenCode();
+    const background = this.props.context.userSettings.getSecurityToken().backgroundColor;
+    const code = this.props.context.userSettings.getSecurityToken().code;
     this.setState({background, code});
   }
 
@@ -218,7 +218,7 @@ class ChangeUserSecurityToken extends Component {
    */
   async onSaveFailure(error) {
     await this.toggleProcessing();
-    const ErrorDialogProps = {message: error.message};
+    const ErrorDialogProps = {error: error};
     this.props.dialogContext.open(NotifyError, ErrorDialogProps);
   }
 
@@ -319,7 +319,7 @@ class ChangeUserSecurityToken extends Component {
     return (
       <div className="grid grid-responsive-12 profile-choose-security-token">
         <div className="row">
-          <div className="col7">
+          <div className="col7 main-column">
             <form onSubmit={this.handleSubmit}>
               <h3><Trans>Update the Security Token</Trans></h3>
               <div className={`input-security-token input required ${this.hasErrors ? "error" : ""}`}>
@@ -373,7 +373,7 @@ class ChangeUserSecurityToken extends Component {
               </div>
             </form>
           </div>
-          <div className="col4 last ">
+          <div className="col4 last">
             <div className="sidebar-help">
               <h3><Trans>Why is this token needed?</Trans></h3>
               <p>

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.test.js

@@ -20,6 +20,7 @@ describe("Display change user security token", () => {
   });
 
   it('As LU I should be able to choose the color of my security token', async() => {
+    expect.assertions(1);
     const colorToPick = '#009688';
     const expectedSelectedColor = 'rgb(0, 150, 136)';
     await page.selectColor(colorToPick);
@@ -27,17 +28,20 @@ describe("Display change user security token", () => {
   });
 
   it('As LU I should be able to choose the code of my security token', async() => {
+    expect.assertions(1);
     const expectedSelectedCode = '';
     await page.fillCode(expectedSelectedCode);
     expect(page.code).toBe(expectedSelectedCode);
   });
 
   it('As LU I should be able to randomize the code of my security token', async() => {
+    expect.assertions(1);
     await page.randomize();
     expect(page.code.length).toBe(3);
   });
 
   it('As LU I cannot update the form fields while submitting the form', async() => {
+    expect.assertions(4);
     let saveResolve = null;
     const requestMockImpl = jest.fn(() => new Promise(resolve => saveResolve = resolve));
     jest.spyOn(props.userSettingsContext, 'onUpdateSecurityTokenRequested').mockImplementationOnce(requestMockImpl);
@@ -51,6 +55,7 @@ describe("Display change user security token", () => {
   });
 
   it('As LU I should see a processing feedback while submitting the form', async() => {
+    expect.assertions(5);
     let saveResolve = null;
     const requestMockImpl = jest.fn(() => new Promise(resolve => saveResolve = resolve));
     jest.spyOn(props.userSettingsContext, 'onUpdateSecurityTokenRequested').mockImplementationOnce(requestMockImpl);
@@ -65,6 +70,7 @@ describe("Display change user security token", () => {
   });
 
   it('As LU I should see an error if the security token is empty after submitting the form (first validation)', async() => {
+    expect.assertions(1);
     const emptyCode = ' ';
     await page.fillCode(emptyCode);
     await page.save();
@@ -72,6 +78,7 @@ describe("Display change user security token", () => {
   });
 
   it('As LU I should see an error if the security token is not 3 length after submitting the form (first validation)', async() => {
+    expect.assertions(1);
     const notGoodLengthCode = 'AB';
     await page.fillCode(notGoodLengthCode);
     await page.save();
@@ -79,12 +86,13 @@ describe("Display change user security token", () => {
   });
 
   it('As LU I should see an error if the submission failed for an unexpected reason', async() => {
-    const expectedError = {message: 'Some error'};
-    jest.spyOn(props.userSettingsContext, 'onUpdateSecurityTokenRequested').mockImplementationOnce(() => Promise.reject(expectedError));
+    expect.assertions(1);
+    const error = new Error('Some error');
+    jest.spyOn(props.userSettingsContext, 'onUpdateSecurityTokenRequested').mockImplementationOnce(() => Promise.reject(error));
     jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
     await page.fillCode('ABC');
     await page.save();
-    expect(props.dialogContext.open).toBeCalledWith(NotifyError, expectedError);
+    expect(props.dialogContext.open).toBeCalledWith(NotifyError, {error: error});
   });
 });
 

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.test.stories.js

@@ -12,8 +12,12 @@ export default {
 
 const context = {
   userSettings: {
-    getSecurityTokenBackgroundColor: () => '#8bc34a',
-    getSecurityTokenCode: () => "ABC"
+    getSecurityToken: () => (
+      {
+        code: "ABC",
+        backgroundColor: '#8bc34a'
+      }
+    )
   }
 };
 
@@ -21,7 +25,11 @@ const context = {
 const Template = args =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <ChangeUserSecurityToken {...args} {...routerProps}/>}></Route>
+      <div className="page settings">
+        <div className="profile-choose-security-token">
+          <Route component={routerProps => <ChangeUserSecurityToken {...args} {...routerProps}/>}></Route>
+        </div>
+      </div>
     </MemoryRouter>
   </AppContext.Provider>;