passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-quickaccess/components/ResourceAutoSave/SaveResource.test.js

@@ -0,0 +1,60 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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
+ *
+ */
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+import {defaultAppContext, mockExtensionCall} from './SaveResource.test.data';
+import {defaultProps} from '../ResourceCreatePage/ResourceCreatePage.test.data';
+import SaveResourcePage from './SaveResource.test.page';
+import {waitFor} from '@testing-library/react';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See the Create Resource - save resource", () => {
+  let page; // The page to test against
+  const context = defaultAppContext(); // The applicative context
+  const props = defaultProps(); // The props to pass
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mockExtensionCall(context);
+    page = new SaveResourcePage(context, props);
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  it("As a signed-in user creating a password on the quickaccess, I should get warn when I enter a pwned password and not be blocked", async() => {
+    expect.assertions(2);
+
+    await page.fillInputPassword('hello-world');
+    await waitFor(() => {});
+    // we expect a warning to inform about powned password
+    expect(page.pwnedWarningMessage.textContent).toEqual("The password is part of an exposed data breach.");
+
+    await page.fillInputPassword('unavailable');
+    await waitFor(() => {});
+    // we expect a warning to inform about a network issue
+    expect(page.pwnedWarningMessage.textContent).toEqual("The pwnedpasswords service is unavailable, your password might be part of an exposed data breach");
+  });
+});
+
+
+

package/src/react-quickaccess/components/ResourceAutoSave/SaveResource.test.page.js

@@ -0,0 +1,60 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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 {render} from "@testing-library/react";
+import {StaticRouter} from 'react-router-dom';
+import MockTranslationProvider from '../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider';
+import {fireEvent} from '@testing-library/react';
+import SaveResource from "./SaveResource";
+
+/**
+ * The SaveResource component represented as a page
+ */
+export default class SaveResourcePage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(context, props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <StaticRouter context={context}>
+          <SaveResource context={context} prepareResourceContext={props.prepareResourceContext} debug />
+        </StaticRouter>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the password input element
+   */
+  get password() {
+    return this._page.container.querySelector('#password');
+  }
+
+  /**
+   * Returns the pwned warning message
+   */
+  get pwnedWarningMessage() {
+    return this._page.container.querySelector('.pwned-password.warning-message');
+  }
+
+  /** fill the input password with data */
+  async fillInputPassword(data)  {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.password, dataInputEvent);
+    jest.runAllTimers();
+  }
+}

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.js

@@ -9,6 +9,8 @@ import {withPrepareResourceContext} from "../../contexts/PrepareResourceContext"
 import Icon from "../../../shared/components/Icons/Icon";
 import Password from "../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../shared/components/PasswordComplexity/PasswordComplexity";
+import debounce from 'debounce-promise';
+import PownedService from "../../../shared/services/api/secrets/pownedService";
 
 class ResourceCreatePage extends React.Component {
   constructor(props) {
@@ -16,9 +18,12 @@ class ResourceCreatePage extends React.Component {
     this.initEventHandlers();
     this.state = this.getDefaultState();
     this.createInputRef();
+    this.isPwndProcessingPromise = null;
+    this.evaluatePasswordIsInDictionaryDebounce = debounce(this.evaluatePasswordIsInDictionaryDebounce, 300);
   }
 
   async componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     await this.handlePreparedResource();
     this.handleLastGeneratedPassword();
   }
@@ -45,6 +50,8 @@ class ResourceCreatePage extends React.Component {
       password: "",
       passwordError: "",
       passwordEntropy: null,
+      isPwnedServiceAvailable: true,
+      passwordInDictionary: false
     };
   }
 
@@ -201,6 +208,7 @@ class ResourceCreatePage extends React.Component {
    */
   async handleFormSubmit(event) {
     event.preventDefault();
+
     this.setState({
       processing: true,
       error: "",
@@ -259,6 +267,17 @@ class ResourceCreatePage extends React.Component {
     }
   }
 
+  /**
+   * Evaluate to check if password is in a dictionary.
+   * @return {Promise}
+   */
+  async evaluatePasswordIsInDictionaryDebounce() {
+    if (this.state.isPwnedServiceAvailable) {
+      const result = await this.pownedService.evaluateSecret(this.state.password);
+      this.setState({isPwnedServiceAvailable: result.isPwnedServiceAvailable, passwordInDictionary: result.inDictionary});
+    }
+  }
+
   formatValidationFieldError(fieldErrors) {
     if (!fieldErrors) {
       return "";
@@ -267,6 +286,10 @@ class ResourceCreatePage extends React.Component {
   }
 
   handlePasswordChange(event) {
+    if (event.target.value.length) {
+      this.isPwndProcessingPromise = this.evaluatePasswordIsInDictionaryDebounce();
+    }
+
     this.loadPassword(event.target.value);
   }
 
@@ -360,7 +383,10 @@ class ResourceCreatePage extends React.Component {
                 }
               </div>
               <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
-                <label htmlFor="password"><Trans>Password</Trans></label>
+                <label htmlFor="password"><Trans>Password</Trans>
+                  {(this.state.passwordInDictionary || !this.state.isPwnedServiceAvailable)  &&
+                  <Icon name="exclamation"/>
+                  }</label>
                 <div className="password-button-inline">
                   <Password name="password" value={this.state.password} preview={true} onChange={this.handlePasswordChange} disabled={this.state.processing}
                     autoComplete="new-password" placeholder={this.translate('Password')} id="password" inputRef={this.passwordInputRef}/>
@@ -381,6 +407,12 @@ class ResourceCreatePage extends React.Component {
                 {this.state.passwordError &&
                   <div className="error-message">{this.state.passwordError}</div>
                 }
+                {!this.state.isPwnedServiceAvailable &&
+                    <div className="pwned-password warning-message"><Trans>The pwnedpasswords service is unavailable, your password might be part of an exposed data breach</Trans></div>
+                }
+                {this.state.passwordInDictionary &&
+                    <div className="pwned-password warning-message"><Trans>The password is part of an exposed data breach.</Trans></div>
+                }
               </div>
             </div>
           </div>

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.js

@@ -11,6 +11,7 @@ import {defaultAppContext, defaultProps} from "./ResourceCreatePage.test.data";
 
 // Reset the modules before each test.
 beforeEach(() => {
+  jest.useFakeTimers();
   jest.resetModules();
 });
 
@@ -18,6 +19,7 @@ beforeEach(() => {
 afterEach(() => {
   cleanup();
   delete window.passbolt;
+  jest.clearAllTimers();
 });
 
 describe("ResourceCreatePage", () => {
@@ -148,10 +150,18 @@ describe("ResourceCreatePage", () => {
       const createPasswordEventMockCallback = jest.fn();
       const context = defaultAppContext();
       const props = defaultProps();
+      const inputPasswordChange = async password => {
+        const passwordInput = component.container.querySelector('[name="password"]');
+        const passwordInputEvent = {target: {value: password}};
+        fireEvent.change(passwordInput, passwordInputEvent);
+        jest.runAllTimers();
+      };
+
+      const pwnedWarningMessage = () => component.container.querySelector('.pwned-password.warning-message');
       // Mock the passbolt messaging layer.
       context.port = {
-        request: function(event) {
-          return new Promise(resolve => {
+        request: function(event, value) {
+          return new Promise((resolve, reject) => {
             if (event === "passbolt.quickaccess.prepare-resource") {
               resolve({
                 name: "Passbolt Browser Extension Test",
@@ -162,6 +172,14 @@ describe("ResourceCreatePage", () => {
               resolve({
                 id: "newly-created-resource-id"
               });
+            } else if (event === "passbolt.secrets.powned-password") {
+              if (value === "hello-world") {
+                resolve(3);
+              } else if (value === "unavailable") {
+                reject();
+              } else {
+                resolve(0);
+              }
             }
           });
         }
@@ -175,6 +193,8 @@ describe("ResourceCreatePage", () => {
         </MockTranslationProvider>
       );
 
+      expect.assertions(4);
+
       // Wait the passbolt.request executed in the ComponentDidMount is resolved.
       await waitFor(() => {
         if (props.prepareResourceContext.getLastGeneratedPassword.mock.calls.length === 0) {
@@ -186,9 +206,17 @@ describe("ResourceCreatePage", () => {
       const usernameInput = component.container.querySelector('[name="username"]');
       const usernameInputEvent = {target: {value: "test@passbolt.com"}};
       fireEvent.change(usernameInput, usernameInputEvent);
-      const passwordInput = component.container.querySelector('[name="password"]');
-      const passwordInputEvent = {target: {value: "P4ssb0lt"}};
-      fireEvent.change(passwordInput, passwordInputEvent);
+
+      await inputPasswordChange("P4ssb0lt");
+      expect(pwnedWarningMessage()).toBe(null);
+      //Powned password should raise a warning and not block submit
+      await inputPasswordChange("hello-world");
+      await waitFor(() => {});
+      expect(pwnedWarningMessage().textContent).toBe("The password is part of an exposed data breach.");
+      //Service for powned password unavailable should not block
+      await inputPasswordChange("unavailable");
+      await waitFor(() => {});
+      expect(pwnedWarningMessage().textContent).toBe("The pwnedpasswords service is unavailable, your password might be part of an exposed data breach");
 
       // Submit the form.
       const submitButton = component.container.querySelector('button[type="submit"]');
@@ -203,8 +231,9 @@ describe("ResourceCreatePage", () => {
         uri: "https://passbolt-browser-extension/test",
         username: "test@passbolt.com"
       };
-      expect.assertions(1);
-      expect(createPasswordEventMockCallback).toHaveBeenCalledWith(resourceMeta, "P4ssb0lt");
+      expect(createPasswordEventMockCallback).toHaveBeenCalledWith(resourceMeta, "unavailable");
     });
   });
 });
+
+

package/src/react-quickaccess/components/ResourceViewPage/ResourceViewPage.js

@@ -5,6 +5,7 @@ import {Trans, withTranslation} from "react-i18next";
 import {withAppContext} from "../../contexts/AppContext";
 import {withRouter} from "react-router-dom";
 import Icon from "../../../shared/components/Icons/Icon";
+import ClipBoard from '../../../shared/lib/Browser/clipBoard';
 
 class ResourceViewPage extends React.Component {
   constructor(props) {
@@ -81,7 +82,7 @@ class ResourceViewPage extends React.Component {
 
     try {
       this.setState({copyLoginState: 'processing'});
-      await navigator.clipboard.writeText(this.state.resource.username);
+      await ClipBoard.copy(this.state.resource.username, this.props.context.port);
       this.setState({copyLoginState: 'done'});
       setTimeout(() => {
         this.setState({copyLoginState: 'default'});
@@ -130,7 +131,7 @@ class ResourceViewPage extends React.Component {
       }
     }
 
-    await navigator.clipboard.writeText(password);
+    await ClipBoard.copy(password, this.props.context.port);
     this.setState({copySecretState: 'done'});
     setTimeout(() => {
       this.setState({copySecretState: 'default'});

package/src/react-quickaccess/contexts/SsoContext.js

@@ -0,0 +1,150 @@
+/**
+ * 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 PropTypes from "prop-types";
+import {withAppContext} from "./AppContext";
+import {withTranslation} from "react-i18next";
+
+export const SsoContext = React.createContext({
+  loadSsoConfiguration: () => {}, // Load the current sso configuration and store it in the state
+  getProvider: () => {}, // Return the current sso configuration from the context state
+  hasUserAnSsoKit: () => {}, // Returns true if the current user has an SSO kit built locally
+  runSignInProcess: () => {}, // Launches the SSO process with the configured provider
+});
+
+/**
+ * The related context provider
+ */
+export class SsoContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    this.handleSpecificError.bind(this);
+    return {
+      ssoLocalConfiguredProvider: null, // the provider configured for the local SSO kit if any, null otherwise
+      loadSsoConfiguration: this.loadSsoConfiguration.bind(this), // Load the current sso configuration and store it in the state
+      getProvider: this.getProvider.bind(this), // Return the current sso provider configured
+      hasUserAnSsoKit: this.hasUserAnSsoKit.bind(this), // Returns true if the current user has an SSO kit built locally
+      runSignInProcess: this.runSignInProcess.bind(this), // Launches the SSO process with the configured provider
+    };
+  }
+
+  /**
+   * Find the sso configuration
+   * @return {Promise<void>}
+   */
+  async loadSsoConfiguration() {
+    const ssoLocalConfiguredProvider = await this.props.context.port.request("passbolt.sso.get-local-configured-provider");
+    this.setState({ssoLocalConfiguredProvider});
+  }
+
+  /**
+   * Get the current sso provider configured.
+   * @returns {string}
+   */
+  getProvider() {
+    return this.state.ssoLocalConfiguredProvider;
+  }
+
+  /**
+   * Returns true if the current user has an SSO kit built locally
+   * @returns {boolean}
+   */
+  hasUserAnSsoKit() {
+    return Boolean(this.state.ssoLocalConfiguredProvider);
+  }
+
+  /**
+   * Launches the SSO process with the configured provider
+   * @returns {Promise<void>}
+   */
+  async runSignInProcess() {
+    try {
+      const provider = this.getProvider();
+      await this.props.context.port.request(`passbolt.sso.sign-in-with-${provider}`, true);
+    } catch (e) {
+      console.error(e);
+      this.handleSpecificError(e);
+      throw e;
+    }
+  }
+
+  /**
+   * Handles error from the background page during SSO sign-in.
+   * @param {Error} e
+   */
+  handleSpecificError(e) {
+    let errorToThrow = e;
+    switch (e.name) {
+      case 'InvalidMasterPasswordError': {
+        errorToThrow = new Error(this.props.t("The passphrase from the SSO kit doesn't match your private key: {{error}}", {error: e.message}));
+        break;
+      }
+      case 'OutdatedSsoKitError': {
+        errorToThrow = new Error(this.props.t("The SSO kit is outdated and can't be used to decrypt your passphrase: {{error}}", {error: e.message}));
+        break;
+      }
+    }
+
+    throw errorToThrow;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <SsoContext.Provider value={this.state}>
+        {this.props.children}
+      </SsoContext.Provider>
+    );
+  }
+}
+
+SsoContextProvider.propTypes = {
+  context: PropTypes.any, // The application context
+  children: PropTypes.any, // The children components
+  t: PropTypes.func, // The translation function
+};
+export default withAppContext(withTranslation('common')(SsoContextProvider));
+
+/**
+ * Resource Workspace Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withSso(WrappedComponent) {
+  return class withSso extends React.Component {
+    render() {
+      return (
+        <SsoContext.Consumer>
+          {
+            ssoContext => <WrappedComponent ssoContext={ssoContext} {...this.props} />
+          }
+        </SsoContext.Consumer>
+      );
+    }
+  };
+}
+

package/src/react-web-integration/lib/InForm/InFormFieldSelector.js

@@ -20,15 +20,18 @@ export default {
    * Selectors to detect username inputs (input type text or not type with id or class or name contain user)
    * The selector create-account-input is for ovh.com website
    * The selector benutzerkennung is for german website
+   * The selector utilisateur is for french website
    */
   USERNAME_FIELD_SELECTOR: `input[type='text' i][name*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][name*='email' i]:not([hidden]):not([disabled]),
   input[type='text' i][name*='login' i]:not([hidden]):not([disabled]),
   input[type='text' i][name*='benutzerkennung' i]:not([hidden]):not([disabled]),
+  input[type='text' i][name*='utilisateur' i]:not([hidden]):not([disabled]),
   input[type='text' i][id*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][id*='email' i]:not([hidden]):not([disabled]),
   input[type='text' i][id*='login' i]:not([hidden]):not([disabled]),
   input[type='text' i][id*='benutzerkennung' i]:not([hidden]):not([disabled]),
+  input[type='text' i][id*='utilisateur' i]:not([hidden]):not([disabled]),
   input[type='text' i][class*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][class*='email' i]:not([hidden]):not([disabled]),
   input[type='text' i][class*='create-account-input' i]:not([hidden]):not([disabled]),
@@ -42,10 +45,12 @@ export default {
   input[name*='email' i]:not([type]):not([hidden]):not([disabled]),
   input[name*='login' i]:not([type]):not([hidden]):not([disabled]),
   input[name*='benutzerkennung' i]:not([type]):not([hidden]):not([disabled]),
+  input[name*='utilisateur' i]:not([type]):not([hidden]):not([disabled]),
   input[id*='user' i]:not([type]):not([hidden]):not([disabled]),
   input[id*='email' i]:not([type]):not([hidden]):not([disabled]),
   input[id*='login' i]:not([type]):not([hidden]):not([disabled]),
   input[id*='benutzerkennung' i]:not([type]):not([hidden]):not([disabled]),
+  input[id*='utilisateur' i]:not([type]):not([hidden]):not([disabled]),
   input[class*='user' i]:not([type]):not([hidden]):not([disabled]),
   input[class*='email' i]:not([type]):not([hidden]):not([disabled]),
   input[class*='create-account-input' i]:not([type]):not([hidden]):not([disabled]),

package/src/shared/constants/inputs.const.js

@@ -0,0 +1,30 @@
+/**
+ * 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.9.0
+ */
+
+/** user inputs max length */
+export const    USER_INPUT_MAX_LENGTH = 128;
+/** Resource group name max length */
+export const RESOURCE_GROUP_NAME_MAX_LENGTH = 50;
+/** Resource name max length */
+export const RESOURCE_NAME_MAX_LENGTH = 255;
+/** Resource folder name max length */
+export const RESOURCE_FOLDER_NAME_MAX_LENGTH = 256;
+/** Resource name max length */
+export const RESOURCE_TAG_MAX_LENGTH = 128;
+/** Resource password max length */
+export const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
+/** Resource description max length */
+export const RESOURCE_DESCRIPTION_MAX_LENGTH = 10000;
+/** Resource uri max length */
+export const RESOURCE_URI_MAX_LENGTH = 1024;

package/src/shared/lib/Browser/clipBoard.js

@@ -0,0 +1,45 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2023 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.9.0
+ */
+
+/**
+ * A utility class for copying text to the clipboard.
+ * @class ClipBoard
+ */
+
+class ClipBoard {
+  /**
+   * Copies the given text to the clipboard.
+   * @static
+   * @param {string} text - The text to copy to the clipboard.
+   * @returns {Promise}
+   */
+  static async copy(text, port) {
+    if (navigator.clipboard) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        ClipBoard.copyWithBrowserExtension(text, port);
+      }
+    } else {
+      ClipBoard.copyWithBrowserExtension(text, port);
+    }
+  }
+
+  static copyWithBrowserExtension(text, port) {
+    port.request("passbolt.clipboard.copy", text);
+  }
+}
+
+
+export default ClipBoard;

package/src/shared/lib/Browser/clipBoard.test.js

@@ -0,0 +1,59 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2023 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.9.0
+ */
+
+
+/**
+ * Unit tests on ClipBoard in regard of specifications
+ */
+import ClipBoard from './clipBoard';
+
+describe('ClipBoard', () => {
+  const portMock = {
+    request: jest.fn()
+  };
+  const toCopy = "text";
+  describe('copy method', () => {
+    it('should call the navigator.clipboard.writeText method if it is available', async() => {
+      navigator.clipboard = {
+        writeText: jest.fn()
+      };
+      await ClipBoard.copy(toCopy, portMock);
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(toCopy);
+      expect(portMock.request).not.toHaveBeenCalled();
+    });
+
+    it('should call the copyWithBrowserExtension method if the navigator.clipboard API is not available', async() => {
+      navigator.clipboard = null;
+      await ClipBoard.copy(toCopy, portMock);
+      expect(portMock.request).toHaveBeenCalledWith('passbolt.clipboard.copy', toCopy);
+    });
+
+    it('should call the copyWithBrowserExtension method if the writeText method throws an error', async() => {
+      navigator.clipboard = {
+        writeText: jest.fn(() => {
+          throw new Error('Some error');
+        })
+      };
+      await ClipBoard.copy(toCopy, portMock);
+      expect(portMock.request).toHaveBeenCalledWith('passbolt.clipboard.copy', toCopy);
+    });
+  });
+
+  describe('copyWithBrowserExtension: method', () => {
+    it('should call the request method of the port object with the correct arguments', () => {
+      ClipBoard.copyWithBrowserExtension(toCopy, portMock);
+      expect(portMock.request).toHaveBeenCalledWith('passbolt.clipboard.copy', toCopy);
+    });
+  });
+});