passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Administration/TestSsoSettingsDialog/TestSsoSettingsDialog.test.js

@@ -0,0 +1,187 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.9.0
+ */
+
+/**
+ * Unit tests on TestSsoSettingsDialog in regard of specifications
+ */
+import SsoProviders from "../ManageSsoSettings/SsoProviders.data";
+import {waitFor} from "@testing-library/react";
+import {defaultProps} from "./TestSsoSettingsDialog.test.data";
+import {v4 as uuid} from "uuid";
+import TestSsoSettingsDialogPage from "../TestSsoSettingsDialog/TestSsoSettingsDialog.test.page";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("TestSsoSettingsDialog", () => {
+  describe("As a signed-in administrator I can save the SSO server settings", () => {
+    /*
+     * Covers as well:
+     * As AD I cannot save the SSO settings before testing them
+     */
+    it('As AD I should see a dialog to invite me to test the SSO settings before saving them', async() => {
+      expect.assertions(4);
+
+      const props = defaultProps();
+      const page = new TestSsoSettingsDialogPage(props);
+
+      expect(page.title.textContent).toBe("Test Single Sign-On configuration");
+      expect(page.ssoLoginButton).toBeTruthy();
+      expect(page.saveButton).toBeTruthy();
+      expect(page.saveButton.classList.contains("disabled")).toBeTruthy();
+    });
+
+    it('As AD I need to successfully sign in with the new SSO settings before saving them (happy path)', async() => {
+      expect.assertions(7);
+
+      const expectedSsoToken = uuid();
+      const expectedConfigurationId = uuid();
+
+      const props = defaultProps({
+        configurationId: expectedConfigurationId,
+        provider: SsoProviders.find(provider => provider.id === "azure"),
+        onClose: jest.fn()
+      });
+
+      let ssoLoginResolve = null;
+      props.context.port.addRequestListener('passbolt.sso.test.azure', async configurationId => {
+        expect(configurationId).toBe(expectedConfigurationId);
+        return new Promise(resolve => {
+          ssoLoginResolve = resolve;
+        });
+      });
+
+      props.context.port.addRequestListener("passbolt.sso.activate-settings", async(configurationId, ssoToken) => {
+        expect(configurationId).toBe(expectedConfigurationId);
+        expect(ssoToken).toBe(expectedSsoToken);
+      });
+
+      const page = new TestSsoSettingsDialogPage(props);
+      await waitFor(() => {});
+
+      expect(page.saveButton.classList.contains("disabled")).toBeTruthy();
+
+      await page.clickOnLogin();
+
+      await ssoLoginResolve(expectedSsoToken);
+
+      await waitFor(() => {
+        if (page.saveButton.classList.contains("disabled")) {
+          throw new Error("page is not ready yet");
+        }
+      });
+
+      expect(page.title.textContent).toBe("Save Single Sign-On configuration");
+
+      expect(page.saveButton.classList.contains("disabled")).toBeFalsy();
+      await page.saveSettings();
+
+      await waitFor(() => {
+        if (props.onClose.mock.calls.length === 0) {
+          throw new Error("page is not ready yet");
+        }
+      });
+
+      expect(props.onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('As AD I need to successfully sign in with the new SSO settings before saving them (error from API during test)', async() => {
+      expect.assertions(2);
+
+      const expectedError = new Error("Something went wrong!");
+
+      const props = defaultProps({
+        configurationId: uuid(),
+        provider: SsoProviders.find(provider => provider.id === "azure")
+      });
+
+      props.context.port.addRequestListener('passbolt.sso.test.azure', async() => {
+        throw expectedError;
+      });
+
+      const page = new TestSsoSettingsDialogPage(props);
+      await waitFor(() => {});
+
+      expect(page.saveButton.classList.contains("disabled")).toBeTruthy();
+
+      await page.clickOnLogin();
+
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: expectedError});
+    });
+
+    it('As AD I need to successfully sign in with the new SSO settings before saving them (error from API during activation)', async() => {
+      expect.assertions(3);
+
+      const expectedError = new Error("Something went wrong!");
+
+      const props = defaultProps({
+        configurationId: uuid(),
+        provider: SsoProviders.find(provider => provider.id === "azure")
+      });
+
+      props.context.port.addRequestListener('passbolt.sso.test.azure', async() => uuid());
+      props.context.port.addRequestListener("passbolt.sso.activate-settings", async() => {
+        throw expectedError;
+      });
+
+      const page = new TestSsoSettingsDialogPage(props);
+      await waitFor(() => {});
+
+      expect(page.saveButton.classList.contains("disabled")).toBeTruthy();
+
+      await page.clickOnLogin();
+
+      await waitFor(() => {
+        if (page.saveButton.classList.contains("disabled")) {
+          throw new Error("page is not ready yet");
+        }
+      });
+
+      expect(page.saveButton.classList.contains("disabled")).toBeFalsy();
+      await page.saveSettings();
+
+      await waitFor(() => {});
+
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: expectedError});
+    });
+
+    it("As AD I can't save the SSO settings on a failed sign in test attempt", async() => {
+      expect.assertions(3);
+
+      const expectedError = new Error("User closed the popup!");
+      expectedError.name = 'UserClosedSsoPopUpError';
+
+      const props = defaultProps({
+        configurationId: uuid(),
+        provider: SsoProviders.find(provider => provider.id === "azure")
+      });
+
+      props.context.port.addRequestListener('passbolt.sso.test.azure', async() => {
+        throw expectedError;
+      });
+
+      const page = new TestSsoSettingsDialogPage(props);
+      await waitFor(() => {});
+
+      expect(page.saveButton.classList.contains("disabled")).toBeTruthy();
+
+      await page.clickOnLogin();
+
+      expect(props.dialogContext.open).not.toHaveBeenCalledWith();
+      expect(page.saveButton.classList.contains("disabled")).toBeTruthy();
+    });
+  });
+});

package/src/react-extension/components/Administration/TestSsoSettingsDialog/TestSsoSettingsDialog.test.page.js

@@ -0,0 +1,120 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.9.0
+ */
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import AdminSsoContextProvider from "../../../contexts/AdminSsoContext";
+import TestSsoSettingsDialog from "./TestSsoSettingsDialog";
+
+/**
+ * The TestSsoSettingsDialogPage component represented as a page
+ */
+export default class TestSsoSettingsDialogPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this.props = props;
+    this.render(props);
+  }
+
+  /**
+   * Do a rendering of the page.
+   * If the page already exists, do a rerender instead
+   * @param {object} props the props of the components
+   */
+  render(props) {
+    this._page = render(<MockTranslationProvider>
+      <AdminSsoContextProvider {...props}>
+        <TestSsoSettingsDialog {...props}/>
+      </AdminSsoContextProvider>
+    </MockTranslationProvider>);
+  }
+
+  /**
+   * Shortcut method for the container querySelector.
+   * @param {string} stringSelector
+   * @returns {HTMLElement}
+   */
+  select(stringSelector) {
+    return this._page.container.querySelector(stringSelector);
+  }
+
+  /**
+   * Simulates a click on the given HTML element.
+   * The clicks is consider done when the callback returns {true}.
+   * @param {HTMLElement} element The HTML element onto simulate the click
+   * @param {function} callback The callback to be used in the waitFor method to ensure the click is done (returns true when it's done)
+   * @returns {Promise<void>}
+   */
+  async clickOn(element, callback) {
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {
+      if (!callback()) {
+        throw new Error("Page didn't react yet on the event.");
+      }
+    });
+  }
+
+  /**
+   * Simulates a click on the login with SSO provider button
+   * @returns {Promise<void>}
+   */
+  async clickOnLogin() {
+    await this.clickOn(this.ssoLoginButton, this.isSaveButtonProcessing.bind(this));
+  }
+
+  /**
+   * Simulates a click on the save button in the dialog
+   * @returns {Promise<void>}
+   */
+  async saveSettings() {
+    await this.clickOn(this.saveButton, () => true);
+  }
+
+  /**
+   * Returns true if the submit button is in processing state.
+   * @returns {boolean}
+   */
+  isSaveButtonProcessing() {
+    return Boolean(this.select(".test-sso-settings-dialog button[type='submit'] .svg-icon.spinner"));
+  }
+
+  /**
+   * Returns the title page HTML element
+   * @returns {HTMLElement}
+   */
+  get title() {
+    return this.select(".dialog-title-wrapper h2");
+  }
+
+  /**
+   * Returns the SSO login button HTMLElemnt.
+   * @returns {HTMLElement}
+   */
+  get ssoLoginButton() {
+    return this.select(".test-sso-settings-dialog a.sso-login-button");
+  }
+
+  /**
+   * Returns the save button HTMLElemnt.
+   * @returns {HTMLElement}
+   */
+  get saveButton() {
+    return this.select(".test-sso-settings-dialog button[type='submit']");
+  }
+}

package/src/react-extension/components/Administration/TestSsoSettingsDialog/TestSsoSettingsDialog.test.stories.js

@@ -0,0 +1,31 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.9.0
+ */
+import React from "react";
+import TestSsoSettingsDialog from "./TestSsoSettingsDialog";
+import {defaultProps} from "./TestSsoSettingsDialog.test.data";
+import AdminSsoContextProvider from "../../../contexts/AdminSsoContext";
+import SsoProviders from "../ManageSsoSettings/SsoProviders.data";
+
+export default {
+  title: 'Components/Administration/TestSsoSettingsDialog',
+  component: TestSsoSettingsDialog
+};
+
+const Template = args =>
+  <AdminSsoContextProvider {...args}>
+    <TestSsoSettingsDialog {...args}/>;
+  </AdminSsoContextProvider>;
+
+export const Default = Template.bind({});
+Default.args = defaultProps({provider: SsoProviders.at(0)});

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

@@ -17,10 +17,11 @@ import debounce from "debounce-promise";
 import {Trans, withTranslation} from "react-i18next";
 import Password from "../../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
 import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
 import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
+import PownedService from "../../../../shared/services/api/secrets/pownedService";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * The component display variations.
@@ -106,6 +107,7 @@ class CheckPassphrase extends Component {
    * Whenever the component is mounted
    */
   componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     this.focusOnPassphrase();
   }
 
@@ -133,7 +135,6 @@ class CheckPassphrase extends Component {
     event.preventDefault();
     this.validate();
     await this.isPwndProcessingPromise;
-
     if (this.isValid) {
       this.toggleProcessing();
       await this.check();
@@ -150,12 +151,13 @@ class CheckPassphrase extends Component {
       return;
     }
 
-    const passphrase = this.state.passphrase;
     let passphraseInDictionnary = false;
     let passphraseEntropy = this.state.passphraseEntropy;
 
     try {
-      passphraseInDictionnary = await SecretComplexity.ispwned(passphrase);
+      const result =  await this.pownedService.evaluateSecret(this.state.passphrase);
+      passphraseInDictionnary = result.inDictionary;
+      isPwnedServiceAvailable = result.isPwnedServiceAvailable;
       if (passphraseInDictionnary) {
         passphraseEntropy = 0;
       }
@@ -183,6 +185,7 @@ class CheckPassphrase extends Component {
   handleChangePassphrase(event) {
     const passphrase = event.target.value;
     let passphraseEntropy = null;
+
     if (passphrase.length) {
       passphraseEntropy = SecretGenerator.entropy(passphrase);
       this.isPwndProcessingPromise = this.evaluatePassphraseIsInDictionaryDebounce();
@@ -345,6 +348,7 @@ CheckPassphrase.defaultProps = {
 };
 
 CheckPassphrase.propTypes = {
+  context: PropTypes.any, // The application context
   onComplete: PropTypes.func.isRequired, // The callback to trigger when the user wants to verify its passphrase
   displayAs: PropTypes.PropTypes.oneOf([
     CheckPassphraseVariations.SETUP,
@@ -353,4 +357,4 @@ CheckPassphrase.propTypes = {
   canRememberMe: PropTypes.bool, // True if the remember me flag must be displayed
   onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
 };
-export default withTranslation("common")(CheckPassphrase);
+export default withAppContext(withTranslation("common")(CheckPassphrase));

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

@@ -12,6 +12,7 @@
  * @since         3.0.0
  */
 
+import {defaultAppContext} from "../../../contexts/ApiAppContext.test.data";
 import {CheckPassphraseVariations} from "./CheckPassphrase";
 
 /**
@@ -20,6 +21,9 @@ import {CheckPassphraseVariations} from "./CheckPassphrase";
  */
 export function defaultProps(props) {
   const defaultProps = {
+    context: defaultAppContext({port: {
+      request: () => Promise.resolve(0)
+    }}),
     displayAs: CheckPassphraseVariations.SETUP,
     canRememberMe: false,
     onComplete: jest.fn(() => Promise.resolve()),

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

@@ -19,16 +19,20 @@ import {defaultProps} from "./CheckPassphrase.test.data";
 import CheckPassphrasePage from "./CheckPassphrase.test.page";
 import each from "jest-each";
 import {CheckPassphraseVariations} from "./CheckPassphrase";
-import PwnedPasswords from "../../../../shared/lib/Secret/PwnedPasswords";
 import {waitFor} from "@testing-library/dom";
 
 jest.mock("../../../../shared/lib/Secret/PwnedPasswords");
 
 beforeEach(() => {
   jest.resetModules();
-  PwnedPasswords.pwnedPasswords.mockResolvedValue(false);
+  jest.useFakeTimers();
 });
 
+afterEach(() => {
+  jest.clearAllTimers();
+});
+
+
 describe("Check passphrase", () => {
   let page, // The page to test against.
     props; // The component props
@@ -42,7 +46,6 @@ describe("Check passphrase", () => {
     it(`As AN I should be able to enter my secret key passphrase, scenario: ${JSON.stringify(_props)}`, async() => {
       props = defaultProps(_props);
       page = new CheckPassphrasePage(props);
-
       expect.assertions(1);
       const expectedPassphrase = "some passphrase";
       await page.fillPassphrase(expectedPassphrase);
@@ -131,11 +134,7 @@ describe("Check passphrase", () => {
       await page.toggleRememberMe();
       expect(page.rememberMe).toBe("true");
       await page.fillPassphrase('some passphrase');
-      await page.verify(() => {
-        if (!props.onComplete.mock.calls.length) {
-          throw new Error("The page is still processing");
-        }
-      });
+      await page.verify();
       expect(props.onComplete).toHaveBeenCalledWith("some passphrase", true);
     });
 
@@ -179,59 +178,29 @@ describe("Check passphrase", () => {
 
   describe("Check pwned passphrase", () => {
     it("As AN completing the setup I should not be able to use a passphrase that is part of a data breach.", async() => {
-      let pwnedResolve;
-      const pwnedServiceImpl = () => new Promise(resolve => {
-        pwnedResolve = resolve;
-      });
-
-      PwnedPasswords.pwnedPasswords.mockImplementation(pwnedServiceImpl);
       props = defaultProps({displayAs: CheckPassphraseVariations.SETUP});
       page = new CheckPassphrasePage(props);
+      jest.spyOn(props.context.port, 'request').mockImplementationOnce(() => Promise.resolve(80));
 
       expect.assertions(1);
       await page.fillPassphrase('test@test.com');
       await page.verify();
 
-      await waitFor(() => {
-        if (pwnedResolve === undefined) {
-          throw new Error("Service is not called yet!");
-        }
-      });
-      await pwnedResolve(1);
-      await waitFor(() => {
-        if (page.isProcessing) {
-          throw new Error("The page is still processing");
-        }
-      });
+      await waitFor(() => {});
 
       expect(props.onComplete).not.toHaveBeenCalled();
     });
 
     it("As AN completing the recover I should be able to recover my account even if my passphrase is part of a data breach.", async() => {
-      let pwnedResolve;
-      const pwnedServiceImpl = () => new Promise(resolve => {
-        pwnedResolve = resolve;
-      });
-
-      PwnedPasswords.pwnedPasswords.mockImplementation(pwnedServiceImpl);
       props = defaultProps({displayAs: CheckPassphraseVariations.RECOVER});
+      jest.spyOn(props.context.port, 'request').mockImplementationOnce(() => Promise.resolve(2));
       page = new CheckPassphrasePage(props);
 
       expect.assertions(1);
       await page.fillPassphrase('test@test.com');
       await page.verify();
 
-      await waitFor(() => {
-        if (pwnedResolve === undefined) {
-          throw new Error("Service is not called yet!");
-        }
-      });
-      await pwnedResolve(1);
-      await waitFor(() => {
-        if (page.isProcessing) {
-          throw new Error("The page is still processing");
-        }
-      });
+      await waitFor(() => {});
 
       expect(props.onComplete).toHaveBeenCalledWith("test@test.com", false);
     });

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

@@ -124,6 +124,7 @@ export default class CheckPassphrasePage {
    */
   async fillPassphrase(passphrase) {
     fireEvent.change(this.passphraseInput, {target: {value: passphrase}});
+    jest.runAllTimers();
     await waitFor(() => {});
   }
 

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

@@ -16,14 +16,14 @@ import PropTypes from "prop-types";
 import debounce from "debounce-promise";
 import {Trans, withTranslation} from "react-i18next";
 import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import Password from "../../../../shared/components/Password/Password";
 import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
 import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
 import Tooltip from "../../Common/Tooltip/Tooltip";
 import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
-
+import {withAppContext} from "../../../contexts/AppContext";
+import PownedService from '../../../../shared/services/api/secrets/pownedService';
 /**
  * The component display variations.
  * @type {Object}
@@ -36,6 +36,7 @@ export const CreateGpgKeyVariation = {
 /**
  * The component allows the user to create a Gpg key by automatic generation or by manually importing one
  */
+
 class CreateGpgKey extends Component {
   /**
    * Default constructor
@@ -123,6 +124,7 @@ class CreateGpgKey extends Component {
    * Whenever the component is mounted
    */
   componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     this.focusOnPassphrase();
   }
 
@@ -194,8 +196,9 @@ class CreateGpgKey extends Component {
       notInDictionaryHint = "error";
     } else {
       try {
-        const isPwned = await SecretComplexity.ispwned(passphrase);
-        notInDictionaryHint = isPwned ? "error" : "success";
+        const result = await this.pownedService.evaluateSecret(passphrase);
+        isPwnedServiceAvailable = result.isPwnedServiceAvailable;
+        notInDictionaryHint =  isPwnedServiceAvailable ? (result.inDictionary ? "error" : "success") : "unavailable";
       } catch (error) {
         // If the service is unavailable don't block the user journey.
         if (error instanceof ExternalServiceUnavailableError || error instanceof ExternalServiceError) {
@@ -336,6 +339,7 @@ CreateGpgKey.defaultProps = {
 };
 
 CreateGpgKey.propTypes = {
+  context: PropTypes.any, // The application context
   onComplete: PropTypes.func.isRequired, // The callback function to call when the form is submitted
   displayAs: PropTypes.PropTypes.oneOf([
     CreateGpgKeyVariation.SETUP,
@@ -344,4 +348,4 @@ CreateGpgKey.propTypes = {
   onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
 };
 
-export default withTranslation("common")(CreateGpgKey);
+export default withAppContext(withTranslation("common")(CreateGpgKey));

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

@@ -12,6 +12,7 @@
  * @since         3.0.0
  */
 import {CreateGpgKeyVariation} from "./CreateGpgKey";
+import {defaultAppContext} from "../../../contexts/ApiAppContext.test.data";
 
 /**
  * Default props
@@ -19,6 +20,9 @@ import {CreateGpgKeyVariation} from "./CreateGpgKey";
  */
 export function defaultProps(props) {
   const defaultProps = {
+    context: defaultAppContext({port: {
+      request: () => Promise.resolve(0)
+    }}),
     displayAs: CreateGpgKeyVariation.SETUP,
     onComplete: jest.fn(() => Promise.resolve()),
     onSecondaryActionClick: jest.fn(() => Promise.resolve()),

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

@@ -20,16 +20,20 @@ import each from "jest-each";
 import {CreateGpgKeyVariation} from "./CreateGpgKey";
 import {defaultProps} from "./CreateGpgKey.test.data";
 import CreateGpgKeyPage from "./CreateGpgKey.test.page";
-import PwnedPasswords from "../../../../shared/lib/Secret/PwnedPasswords";
 
 jest.mock("../../../../shared/lib/Secret/PwnedPasswords");
 
 beforeEach(() => {
   jest.resetModules();
+  jest.useFakeTimers();
   jest.clearAllMocks();
-  PwnedPasswords.pwnedPasswords.mockResolvedValue(false);
 });
 
+afterEach(() => {
+  jest.clearAllTimers();
+});
+
+
 describe("CreateGpgKey", () => {
   each([
     {displayAs: CreateGpgKeyVariation.SETUP}, // Create a gpg key for the setup workflow
@@ -212,5 +216,15 @@ describe("CreateGpgKey", () => {
       expect.assertions(1);
       expect(page.title).toBe("Welcome to Passbolt, please select a passphrase!");
     });
+
+    it('As AN I should be inform about ExternalServiceUnavailableError for powned password service', async() => {
+      const props = defaultProps({displayAs: CreateGpgKeyVariation.SETUP});
+      jest.spyOn(props.context.port, "request").mockImplementationOnce(() => Promise.reject());
+      const page = new CreateGpgKeyPage(props);
+      expect.assertions(2);
+      await page.fill("Service is unavailable");
+      expect(page.notInDictionaryHint.classList.contains("unavailable")).toBeTruthy();
+      expect(page.tootltip.textContent).toBe("The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach");
+    });
   });
 });