passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/Authentication/IntroduceSetupExtension/IntroduceSetupExtension.js

@@ -0,0 +1,107 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import React, {Component} from "react";
+import {detectBrowserName} from "../../../../shared/lib/Browser/detectBrowserName";
+import {withAppContext} from "../../../contexts/AppContext";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
+
+class IntroduceSetupExtension extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState();
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the default component state
+   */
+  getDefaultState() {
+    return {
+      browserName: detectBrowserName(),
+      processing: false
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  /**
+   * Toggle the processing mode
+   */
+  async toggleProcessing() {
+    await this.setState({processing: !this.state.processing});
+  }
+
+  /**
+   * Returns true if the component must be in a processing mode
+   */
+  get isProcessing() {
+    return this.state.processing;
+  }
+
+  /**
+   * Go to the next process
+   * @param event A form submit event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.toggleProcessing();
+    this.props.authenticationContext.onCompleteIntroduceSetupExtension();
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="introduce-setup-extension">
+        <h1><Trans>Congratulation! Passbolt extension has been installed.</Trans></h1>
+        <form onSubmit={this.handleSubmit}>
+          <div className={`animated-setup-introduction ${this.state.browserName}`}></div>
+          <div className="arrow"></div>
+          <div className="form-actions">
+            <button
+              type="submit"
+              className={`button primary big full-width ${this.isProcessing ? 'disabled processing' : ''}`}
+              role="button"
+              disabled={this.isProcessing}>
+              <Trans>Next</Trans>
+            </button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+IntroduceSetupExtension.propTypes = {
+  authenticationContext: PropTypes.any, // The authentication context
+  t: PropTypes.func, // The translation function
+};
+export default withAppContext(withAuthenticationContext(withTranslation('common')(IntroduceSetupExtension)));

package/src/react-extension/components/Authentication/IntroduceSetupExtension/IntroduceSetupExtension.test.data.js

@@ -0,0 +1,11 @@
+/**
+ * Default props
+ * @returns {{}}
+ */
+export function defaultProps() {
+  return {
+    authenticationContext: {
+      onCompleteIntroduceSetupExtension: jest.fn()
+    }
+  };
+}

package/src/react-extension/components/Authentication/IntroduceSetupExtension/IntroduceSetupExtension.test.js

@@ -0,0 +1,65 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+
+/**
+ * Unit tests on  InstallExtension in regard of specifications
+ */
+
+import IntroduceSetupExtensionTestPage from "./IntroduceSetupExtension.test.page";
+import {defaultProps} from "./IntroduceSetupExtension.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("As AN I should see setup extension page", () => {
+  let page; // The page to test against
+  const props = defaultProps();
+
+  describe('As AN I should be able to see setup extension for supported browser', () => {
+    /**
+     * Given a AN
+     * Then I should see a setup extension page
+     */
+    it('As AN I should see the setup extension for chrome', () => {
+      Object.defineProperty(window, "navigator", {
+        value: {userAgent: "Chrome"},
+        writable: true
+      });
+      window.chrome = {runtime: "true"};
+      page = new IntroduceSetupExtensionTestPage(props);
+      expect(page.exists()).toBeTruthy();
+      // title
+      expect(page.title).toBe("Congratulation! Passbolt extension has been installed.");
+      // browser image
+      expect(page.browser.className).toBe("animated-setup-introduction chrome");
+    });
+
+    it('As AN I should see the setup extension for firefox', () => {
+      Object.defineProperty(window, "navigator", {
+        value: {userAgent: "Firefox"},
+        writable: true
+      });
+      page = new IntroduceSetupExtensionTestPage(props);
+      // browser image
+      expect(page.browser.className).toBe("animated-setup-introduction firefox");
+    });
+
+    it('As AN I should be able to click next on the page', async() => {
+      page = new IntroduceSetupExtensionTestPage(props);
+      await page.next();
+      expect(props.authenticationContext.onCompleteIntroduceSetupExtension).toHaveBeenCalled();
+    });
+  });
+});

package/src/react-extension/components/Authentication/IntroduceSetupExtension/IntroduceSetupExtension.test.page.js

@@ -0,0 +1,73 @@
+
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import SetupExtension from "./IntroduceSetupExtension";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The SetupExtension component represented as a page
+ */
+export default class IntroduceSetupExtensionTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <SetupExtension {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title
+   */
+  get title() {
+    return this._page.container.querySelector('.introduce-setup-extension h1').textContent;
+  }
+
+  /**
+   * Returns the browser extension div
+   */
+  get browser() {
+    return this._page.container.querySelector('.introduce-setup-extension .animated-setup-introduction');
+  }
+
+  /**
+   * Returns the next button
+   */
+  get nextButton() {
+    return this._page.container.querySelector('.introduce-setup-extension .form-actions .button.primary.big');
+  }
+
+  /**
+   * next page
+   */
+  async next() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.nextButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.title !== null;
+  }
+}

package/src/react-extension/components/Authentication/IntroduceSetupExtension/IntroduceSetupExtension.test.stories.js

@@ -0,0 +1,34 @@
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
+import IntroduceSetupExtension from "./IntroduceSetupExtension";
+
+
+export default {
+  title: 'Passbolt/Authentication/IntroduceSetupExtension',
+  component: IntroduceSetupExtension
+};
+
+const context = {
+  onCompletedIntroduceSetupExtension: jest.fn()
+};
+
+
+const Template = args =>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <IntroduceSetupExtension {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
+        </div>
+      </div>
+    </div>
+  </AuthenticationContext.Provider>;
+
+
+export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import NotifyExpiredSession from "./NotifyExpiredSession";
 
@@ -16,15 +14,14 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <NotifyExpiredSession {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+  <AuthenticationContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <NotifyExpiredSession {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.js

@@ -171,7 +171,7 @@ class AcceptLoginServerKeyChange extends Component {
           <>
             <br/>
             {this.state.errors.hasNotAccepted &&
-            <div className="has-not-accepted error message"><Trans>You must accept the new server key</Trans></div>
+            <div className="has-not-accepted error-message"><Trans>You must accept the new server key</Trans></div>
             }
           </>
           }

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import AcceptLoginServerKeyChange from "./AcceptLoginServerKeyChange";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 
@@ -17,21 +15,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <div id="container" className="container page login">
-          <div className="content">
-            <div className="login-form">
-              <Route component={routerProps => <AcceptLoginServerKeyChange {...args} {...routerProps}/>}></Route>
-            </div>
+  <AuthenticationContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div id="container" className="container page login">
+        <div className="content">
+          <div className="login-form">
+            <Route component={routerProps => <AcceptLoginServerKeyChange {...args} {...routerProps}/>}></Route>
           </div>
         </div>
-      </MemoryRouter>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+      </div>
+    </MemoryRouter>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationLogin/DisplayLoginError/DisplayLoginError.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DisplayLoginError from "./DisplayLoginError";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DisplayLoginError {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DisplayLoginError {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationLogin/DisplayLoginInProgress/DisplayLoginProgress.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DisplayLoginInProgress from "./DisplayLoginInProgress";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DisplayLoginInProgress {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DisplayLoginInProgress {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationLogin/Login/Login.js

@@ -349,6 +349,7 @@ class Login extends Component {
                     ref={this.passphraseInputRef}
                     type={this.state.isObfuscated ? "password" : "text"}
                     name="passphrase"
+                    placeholder={this.translate('Passphrase')}
                     className="login-passphrase-input"
                     style={this.passphraseInputStyle}
                     value={this.state.passphrase}
@@ -356,7 +357,8 @@ class Login extends Component {
                     onFocus={this.handleFocusPassphrase}
                     onBlur={this.handleBlurPassphrase}
                     disabled={!this.areActionsAllowed}
-                    autoFocus={true}/>
+                    autoFocus={true}
+                    autoComplete="off"/>
                   <a
                     className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
                     role="button"

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import Login from "./Login";
 
@@ -24,21 +22,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <Login {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <Login {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.js

@@ -331,6 +331,7 @@ class InputPassphrase extends Component {
                     onChange={this.handleInputChange}
                     disabled={this.state.processing}
                     style={passphraseStyle}
+                    autoComplete="off"
                   />
                   <a
                     className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
@@ -346,7 +347,7 @@ class InputPassphrase extends Component {
                 </div>
                 {this.state.passphraseError &&
                 <div className="input text">
-                  <div className="message error">{this.state.passphraseError}</div>
+                  <div className="error-message">{this.state.passphraseError}</div>
                 </div>
                 }
                 {hasRememberMeOptions &&

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.test.js

@@ -221,7 +221,7 @@ describe("InputPassphrase", () => {
     expect(dialogLabel.textContent).toBe("Please enter a valid passphrase.");
 
     // Throw passphrase error message
-    const errorMessage = container.querySelector(".error.message");
+    const errorMessage = container.querySelector(".error-message");
     expect(errorMessage.textContent).toBe("This is not a valid passphrase.");
   });
 

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import InputPassphrase from "./InputPassphrase";
 import AppContext from "../../../contexts/AppContext";
 
@@ -25,15 +23,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <InputPassphrase {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <InputPassphrase {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
-

package/src/react-extension/components/AuthenticationRecover/RecoverAuthentication/RecoverAuthentication.js

@@ -15,6 +15,7 @@ import HelpOnPassphraseLostSecondaryAction
 import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
 import DisplayLoginInProgress from "../../AuthenticationLogin/DisplayLoginInProgress/DisplayLoginInProgress";
 import {withTranslation} from "react-i18next";
+import IntroduceSetupExtension from "../../Authentication/IntroduceSetupExtension/IntroduceSetupExtension";
 
 /**
  * The component orchestrates the recover authentication process
@@ -72,9 +73,12 @@ class RecoverAuthentication extends Component {
    */
   render() {
     switch (this.props.authenticationContext.state)  {
+      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED:
+        return <IntroduceSetupExtension/>;
       case AuthenticationContextState.RECOVER_INITIALIZED:
+      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
         return <ImportGpgKey
-          title={this.translate("Welcome back, please enter your private key to begin with the recovery process.")}
+          title={this.translate("Welcome back, please enter your private key to begin the recovery process.")}
           secondaryAction={<HelpOnPrivateKeyLostSecondaryAction/>}/>;
       case AuthenticationContextState.GPG_KEY_VALIDATED:
         return <CheckPassphrase canRememberMe={this.canRememberMe} secondaryAction={<HelpOnPassphraseLostSecondaryAction/>}/>;

package/src/react-extension/components/AuthenticationSetup/SetupAuthentication/SetupAuthentication.js

@@ -17,6 +17,7 @@ import GenerateKeySecondaryAction
 import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
 import DisplayLoginInProgress from "../../AuthenticationLogin/DisplayLoginInProgress/DisplayLoginInProgress";
 import {withTranslation} from "react-i18next";
+import IntroduceSetupExtension from "../../Authentication/IntroduceSetupExtension/IntroduceSetupExtension";
 
 /**
  * The component orchestrates the setup authentication process
@@ -73,7 +74,10 @@ class SetupAuthentication extends Component {
    */
   render() {
     switch (this.props.authenticationContext.state)  {
+      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED:
+        return <IntroduceSetupExtension/>;
       case AuthenticationContextState.SETUP_INITIALIZED:
+      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
         return <CreateGpgKey/>;
       case AuthenticationContextState.GPG_KEY_GENERATED:
         return <DownloadRecoveryKit/>;

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.data.js

@@ -1,5 +1,3 @@
-
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.js

@@ -1,5 +1,3 @@
-
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
@@ -126,14 +124,15 @@ describe("Share Action Feedbacks", () => {
 
       it('I should not see the feedback message anymore', async() => {
         jest.spyOn(propsForDisplayTime.actionFeedbackContext, 'remove').mockImplementation(() => {}).mockClear();
-        await page.persist(1);
-        await page.close(1);
 
-        const twoSecondsAfterExpectedRemoval = 2000;
+        const twoSecondsAfterExpectedRemoval = 500;
         setTimeout(() => {
           const firstFeedback = propsWithOneSuccessMessage.actionFeedbackContext.feedbacks[0];
           expect(propsForDisplayTime.actionFeedbackContext.remove).toHaveBeenCalledWith(firstFeedback);
         }, twoSecondsAfterExpectedRemoval);
+
+        await page.persist(1);
+        await page.close(1);
         jest.runAllTimers();
       });
     });