passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -1,26 +1,34 @@
-import MockPort from "../../../test/mock/MockPort";
-
 /**
- * Returns the default app context for the unit test
- * @param appContext An existing app context
- * @returns {any}
+ * 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.0.0
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-    port: new MockPort(),
-    onImportGpgKeyRequested: jest.fn()
-  };
-  return Object.assign(defaultAppContext, appContext || {});
-}
+
+import {ImportGpgKeyVariations} from "./ImportGpgKey";
 
 /**
  * Default props
  * @returns {{}}
  */
-export function defaultProps() {
-  return {
-    dialogContext: {
-      open: jest.fn()
-    }
+export function defaultProps(props) {
+  const defaultProps = {
+    displayAs: ImportGpgKeyVariations.SETUP,
+    onComplete: jest.fn(() => Promise.resolve()),
+    onSecondaryActionClick: jest.fn(() => Promise.resolve()),
+    context: {
+      port: {
+        request: jest.fn(async() => ({}))
+      }
+    },
+    validatePrivateGpgKey: jest.fn()
   };
+  return Object.assign(defaultProps, props || {});
 }

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

@@ -1,81 +1,227 @@
+/**
+ * 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.0.0
+ */
+
 /**
  * Unit tests on CreateGpgKey in regard of specifications
  */
-import {defaultAppContext, defaultProps} from "./ImportGpgKey.test.data";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import ImportGpgKeyPage from "./ImportGpgKey.test.page";
+import each from "jest-each";
+import {ImportGpgKeyVariations} from "./ImportGpgKey";
+import {defaultProps} from "./ImportGpgKey.test.data";
 
 
 beforeEach(() => {
   jest.resetModules();
 });
 
-describe("Create GPG key", () => {
-  let page; // The page to test against
-  const context = defaultAppContext(); // The context
-  const props = defaultProps(); // The props to pass
+describe("ImportGpgKey", () => {
+  each([
+    {displayAs: ImportGpgKeyVariations.SETUP}, // Import a gpg key for the setup workflow
+    {displayAs: ImportGpgKeyVariations.RECOVER}, // Import a gpg key for the recover workflow
+  ]).describe("Common behavior to all context", _props => {
+    it(`As AN I should be able to paste my secret key, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps(_props);
+      const page = new ImportGpgKeyPage(props);
 
-  beforeEach(() => {
-    page = new ImportGpgKeyPage(context, props);
-  });
+      expect.assertions(1);
+      const expectedPrivateKey = 'Some private key';
+      await page.fill(expectedPrivateKey);
+      expect(page.privateKey).toBe(expectedPrivateKey);
+    });
 
-  it('As AN I should be able to paste my secret key', async() => {
-    const expectedPrivateKey = 'Some private key';
-    await page.fill(expectedPrivateKey);
-    expect(page.privateKey).toBe(expectedPrivateKey);
-  });
+    it(`As AN I cannot update the form fields while submitting the form, scenario: ${JSON.stringify(_props)}`, async() => {
+      let verifyResolve = null;
+      const onComplete = jest.fn(() => new Promise(resolve => verifyResolve = resolve));
+      const props = defaultProps({..._props, onComplete});
+      const page = new ImportGpgKeyPage(props);
 
+      expect.assertions(2);
+      const inProgressFn = async() => {
+        if (page.canChange) {
+          throw new Error("The page state didn't change yet.");
+        }
+        verifyResolve();
+      };
+      await page.fill("some private key");
+      await page.verifyKey(inProgressFn);
+      expect(props.onComplete).toHaveBeenCalled();
+      expect(verifyResolve).toBeDefined();
+    });
 
-  it('As AN I cannot update the form fields while submitting the form', async() => {
-    let verifyResolve = null;
-    const requestMockImpl = jest.fn(() => new Promise(resolve => verifyResolve = resolve));
-    jest.spyOn(context, 'onImportGpgKeyRequested').mockImplementationOnce(requestMockImpl);
-    const inProgressFn = () => {
-      expect(page.canChange).toBeFalsy();
-      verifyResolve();
-    };
-    await page.fill("some private key");
-    await page.verifyKey(inProgressFn);
-    expect(context.onImportGpgKeyRequested).toHaveBeenCalled();
-    expect(verifyResolve).toBeDefined();
-  });
+    it(`As AN I should see a processing feedback while submitting the form, scenario: ${JSON.stringify(_props)}`, async() => {
+      let verifyResolve = null;
+      const onComplete = jest.fn(() => new Promise(resolve => verifyResolve = resolve));
+      const props = defaultProps({..._props, onComplete});
+      const page = new ImportGpgKeyPage(props);
 
-  it('As AN I should see a processing feedback while submitting the form', async() => {
-    let verifyResolve = null;
-    const requestMockImpl = jest.fn(() => new Promise(resolve => verifyResolve = resolve));
-    jest.spyOn(context, 'onImportGpgKeyRequested').mockImplementationOnce(requestMockImpl);
-    const inProgressFn = () => {
-      expect(page.isProcessing).toBeTruthy();
-      verifyResolve();
-    };
-    await page.fill("some private key");
-    await page.verifyKey(inProgressFn);
-    expect(context.onImportGpgKeyRequested).toHaveBeenCalled();
-    expect(verifyResolve).toBeDefined();
-  });
+      expect.assertions(2);
+      const inProgressFn = () => {
+        if (!page.isProcessing) {
+          throw new Error("The page is not yet processing");
+        }
+        verifyResolve();
+      };
+      await page.fill("some private key");
+      await page.verifyKey(inProgressFn);
+      expect(props.onComplete).toHaveBeenCalled();
+      expect(verifyResolve).toBeDefined();
+    });
+
+    it(`As AN I should see an error if the private key is empty after submitting the form (first validation), scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps(_props);
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(1);
+      const emptyPrivateKey = ' ';
+      await page.fill(emptyPrivateKey);
+      await page.verifyKey();
+      expect(page.hasEmptyPrivateKeyError).toBeTruthy();
+    });
+
+    it(`As AN I should see an error if the private key is invalid, scenario: ${JSON.stringify(_props)}`, async() => {
+      const gpgKeyError = {name: 'GpgKeyError'};
+      const onComplete = jest.fn(() => Promise.reject(gpgKeyError));
+      const props = defaultProps({..._props, onComplete});
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(1);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+    });
+
+    it(`As AN I should see an error if the private key is expired, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps({
+        ..._props,
+        validatePrivateGpgKey: jest.fn(() => { throw new Error("The private key should not be expired."); })
+      });
+      props.context.port.request.mockImplementation(() => ({
+        expires: "2021-05-25T09:00:00.000",
+        revoked: false
+      }));
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(2);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+      expect(page.invalidPrivateKeyErrorMessage).toBe("The private key should not be expired.");
+    });
 
+    it(`As AN I should see an error if the private key is revoked, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps({
+        ..._props,
+        validatePrivateGpgKey: jest.fn(() => { throw new Error("The private key should not be revoked."); })
+      });
+      props.context.port.request.mockImplementation(() => ({
+        expires: "Never",
+        revoked: true
+      }));
+      const page = new ImportGpgKeyPage(props);
 
-  it('As AN I should see an error if the private key is empty after submitting the form (first validation)', async() => {
-    const emptyPrivateKey = ' ';
-    await page.fill(emptyPrivateKey);
-    await page.verifyKey();
-    expect(page.hasEmptyPrivateKeyError).toBeTruthy();
+      expect.assertions(2);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+      expect(page.invalidPrivateKeyErrorMessage).toBe("The private key should not be revoked.");
+    });
+
+    it(`As AN I should see an error if the private key format is invalid, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps({
+        ..._props,
+        validatePrivateGpgKey: jest.fn(() => { throw new Error("The private key should be a valid armored GPG key."); })
+      });
+      props.context.port.request.mockImplementation(() => { throw new Error("Invalid Gpg key format."); });
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(2);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+      expect(page.invalidPrivateKeyErrorMessage).toBe("The private key should be a valid armored GPG key.");
+    });
   });
 
-  it('As AN I should see an error if the private key is invalid', async() => {
-    const expectedError = {name: 'GpgKeyError'};
-    jest.spyOn(context, 'onImportGpgKeyRequested').mockImplementationOnce(() => Promise.reject(expectedError));
-    await page.fill('Some private key');
-    await page.verifyKey();
-    expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+  describe('As AN on the Setup workflow', () => {
+    it('As AN on the setup workflow I should be prompted to import my private key', async() => {
+      const props = defaultProps({displayAs: ImportGpgKeyVariations.SETUP});
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(1);
+      expect(page.title).toBe("Please enter your private key to continue.");
+    });
+
+    it(`As AN on the setup workflow I should be able to generate a new key instead`, async() => {
+      const props = defaultProps({displayAs: ImportGpgKeyVariations.SETUP});
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(2);
+      expect(page.secondaryActionLink.textContent).toContain("Or generate a new private key.");
+      await page.clickSecondaryActionLink();
+      expect(props.onSecondaryActionClick).toHaveBeenCalled();
+    });
+
+    it("As AN on the setup workflow I can't provide a key having an expiration date", async() => {
+      const props = defaultProps({
+        displayAs: ImportGpgKeyVariations.SETUP,
+        validatePrivateGpgKey: jest.fn(() => { throw new Error("The private key shouldn't have an expiry date."); })
+      });
+      props.context.port.request.mockImplementation(() => ({
+        expires: "2100-01-01 00:00:00.000",
+        revoked: false
+      }));
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(2);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+      expect(page.invalidPrivateKeyErrorMessage).toBe("The private key shouldn't have an expiry date.");
+    });
   });
 
-  it('As AN I should see an error if the submission failed for an unexpected reason', async() => {
-    const expectedError = {message: 'Some error'};
-    jest.spyOn(context, 'onImportGpgKeyRequested').mockImplementationOnce(() => Promise.reject(expectedError));
-    jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
-    await page.fill('Some private key');
-    await page.verifyKey();
-    expect(props.dialogContext.open).toBeCalledWith(NotifyError, expectedError);
+  describe('As AN on the Recover workflow', () => {
+    it('As AN on the Recover workflow I should be prompted to import my private key', async() => {
+      const props = defaultProps({displayAs: ImportGpgKeyVariations.RECOVER});
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(1);
+      expect(page.title).toBe("Welcome back, please enter your private key to begin the recovery process.");
+    });
+
+    it(`As AN on the recover workflow I should be able to request help if I lost my private key`, async() => {
+      const props = defaultProps({displayAs: ImportGpgKeyVariations.RECOVER});
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(2);
+      expect(page.secondaryActionLink.textContent).toContain("Help, I lost my private key.");
+      await page.clickSecondaryActionLink();
+      expect(props.onSecondaryActionClick).toHaveBeenCalled();
+    });
+
+    it("As AN on the recover workflow I can still provide a key having an expiration date", async() => {
+      const props = defaultProps({displayAs: ImportGpgKeyVariations.RECOVER});
+      props.context.port.request.mockImplementation(() => ({
+        expires: "2100-01-01 00:00:00.000",
+        revoked: false
+      }));
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(1);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeFalsy();
+    });
   });
 });

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

@@ -1,6 +1,18 @@
+/**
+ * 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.0.0
+ */
 import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
-import AuthenticationContextProvider from "../../../contexts/AuthenticationContext";
 import ImportGpgKey from "./ImportGpgKey";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
@@ -10,19 +22,23 @@ import MockTranslationProvider from "../../../test/mock/components/International
 export default class ImportGpgKeyPage {
   /**
    * Default constructor
-   * @param context Context value
    * @param props Props to attach
    */
-  constructor(context, props) {
+  constructor(props) {
     this._page = render(
       <MockTranslationProvider>
-        <AuthenticationContextProvider value={context}>
-          <ImportGpgKey {...props}/>
-        </AuthenticationContextProvider>
+        <ImportGpgKey {...props}/>
       </MockTranslationProvider>
     );
   }
 
+  /**
+   * Returns the title
+   */
+  get title() {
+    return this._page.container.querySelector('h1').textContent;
+  }
+
   /**
    * Returns the private key input
    */
@@ -44,7 +60,6 @@ export default class ImportGpgKeyPage {
     return Boolean(this._page.container.querySelector('.empty-private-key'));
   }
 
-
   /**
    * Returns true if an invalid private key error appears
    */
@@ -52,6 +67,12 @@ export default class ImportGpgKeyPage {
     return Boolean(this._page.container.querySelector('.invalid-private-key'));
   }
 
+  /**
+   * Returns true if an invalid private key error appears
+   */
+  get invalidPrivateKeyErrorMessage() {
+    return this._page.container.querySelector('.invalid-private-key').textContent;
+  }
 
   /**
    * Returns the verify button element
@@ -60,6 +81,12 @@ export default class ImportGpgKeyPage {
     return this._page.container.querySelector('.button.primary');
   }
 
+  /**
+   * Returns the secondary action link element
+   */
+  get secondaryActionLink() {
+    return this._page.container.querySelector('.form-actions a');
+  }
 
   /**
    * Returns true if one is processing
@@ -100,4 +127,13 @@ export default class ImportGpgKeyPage {
     fireEvent.click(this.verifyButton, leftClick);
     await waitFor(inProgressFn);
   }
+
+  /**
+   * Click on the secondary action link.
+   */
+  async clickSecondaryActionLink(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.secondaryActionLink, leftClick);
+    await waitFor(inProgressFn);
+  }
 }

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

@@ -1,33 +1,45 @@
+/**
+ * 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.0.0
+ */
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
-import ImportGpgKey from "./ImportGpgKey";
-
+import ImportGpgKey, {ImportGpgKeyVariations} from "./ImportGpgKey";
+import {defaultProps} from "./ImportGpgKey.test.data";
 
 export default {
   title: 'Passbolt/Authentication/ImportGpgKey',
   component: ImportGpgKey
 };
 
-const context = {
-};
-
-
 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 => <ImportGpgKey {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <ImportGpgKey {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
+  </div>;
 
-
-export const Initial = Template.bind({});
-Initial.parameters = {
+const defaultParameters = {
   css: "ext_authentication"
 };
+
+export const Setup = Template.bind({});
+Setup.args = defaultProps({displayAs: ImportGpgKeyVariations.SETUP});
+Setup.parameters = defaultParameters;
+
+export const Recover = Template.bind({});
+Recover.args = defaultProps({displayAs: ImportGpgKeyVariations.RECOVER});
+Recover.parameters = defaultParameters;

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

@@ -101,14 +101,6 @@ class InstallExtension extends Component {
     window.location.reload();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -134,6 +126,5 @@ class InstallExtension extends Component {
 
 InstallExtension.propTypes = {
   context: PropTypes.any, // The application context
-  t: PropTypes.func, // The translation function
 };
 export default withAppContext(withTranslation('common')(InstallExtension));

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

@@ -1,9 +1,23 @@
+/**
+ * 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.0.0
+ */
+
 /**
  * Default props
  * @returns {{}}
  */
-export function defaultProps() {
-  return {
-    t: text => text
+export function defaultProps(props) {
+  const defaultProps = {
   };
+  return Object.assign(defaultProps, props || {});
 }

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

@@ -1,33 +1,77 @@
+/**
+ * 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.0.0
+ */
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import InstallExtension from "./InstallExtension";
 
-
 export default {
   title: 'Passbolt/Authentication/InstallExtension',
   component: InstallExtension
 };
 
-const context = {
-};
-
-
 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 => <InstallExtension {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <InstallExtension {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
-
+  </div>;
 
-export const Initial = Template.bind({});
-Initial.parameters = {
+const defaultParameters = {
   css: "ext_authentication"
 };
+
+export const Firefox = Template.bind({});
+Firefox.loaders = [
+  async() => {
+    Object.defineProperty(window, "navigator", {
+      value: {userAgent: "Firefox"},
+      writable: true
+    });
+  },
+];
+Firefox.parameters = defaultParameters;
+
+export const Chrome = Template.bind({});
+Chrome.loaders = [
+  async() => {
+    Object.defineProperty(window, "navigator", {
+      value: {userAgent: "Chrome"},
+      writable: true
+    });
+  },
+];
+
+export const Edge = Template.bind({});
+Edge.loaders = [
+  async() => {
+    Object.defineProperty(window, "navigator", {
+      value: {userAgent: "Edge"},
+      writable: true
+    });
+  },
+];
+
+export const UnsupportedBrowser = Template.bind({});
+UnsupportedBrowser.loaders = [
+  async() => {
+    Object.defineProperty(window, "navigator", {
+      value: {userAgent: "Unsupported Browser"},
+      writable: true
+    });
+  },
+];