passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Administration/DisplayMfaAdministration/DisplayMfaAdministration.test.data.js

@@ -1,55 +1,141 @@
-
 /**
- * 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) 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.8.0
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-  };
-  return Object.assign(defaultAppContext, appContext || {});
-}
+
+import {defaultAppContext} from "../../../contexts/ApiAppContext.test.data";
 
 /**
- * Default props
- * @returns {{resource: {id: string, name: string}}}
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(data = {}) {
+  const defaultProps = {
+    context: defaultAppContext(data?.context),
     administrationWorkspaceContext: {
-      must: {
-        save: false
-      },
-      onResetActionsSettings: jest.fn(),
-      can: {
-        save: false
-      },
-      onSaveEnabled: jest.fn(),
-      onGetMfaRequested: () => mockMfaSettings,
-      onSaveMfaRequested: jest.fn()
-    }
+      setDisplayAdministrationWorkspaceAction: jest.fn(),
+      resetDisplayAdministrationWorkspaceAction: jest.fn()
+    },
+    actionFeedbackContext: {
+      displaySuccess: () => jest.fn(),
+      displayError: jest.fn()
+    },
   };
+  return Object.assign(defaultProps, data);
 }
 
+/**
+ * Mock settings result from server
+ * @returns {object}
+ */
 export const mockMfaSettings = {
-  "header": {
-    "id": "eae592b6-19d5-4b07-9103-49d04b135093",
-    "status": "success",
-    "servertime": 1604490709,
-    "title": "app_orgsettings_get_success",
-    "action": "6d616537-c449-589d-bebe-b2d5883e9d35",
-    "message": "The operation was successful.",
-    "url": "\/mfa\/settings.json?api-version=v2",
-    "code": 200
+  "providers": [
+    "totp",
+    "yubikey",
+    "duo"
+  ],
+  "yubikey": {
+    "clientId": "80412",
+    "secretKey": "pas6lyijz2AIhX3D9eLIYAxv63lt@"
   },
-  "body": {
-    "providers": [
-      "totp",
-      "yubikey"
-    ],
-    "yubikey": {
-      "clientId": "43664",
-      "secretKey": "a6zf3pavrJEjvmXm6dfkm8jfkNY="
-    }
+  "duo": {
+    "hostName": "api-123456af.duosecurity.com",
+    "integrationKey": "PAGI605APMFKP8YSME6T",
+    "salt": "salt1".repeat(8),
+    "secretKey": "PACNkhAAlVLH0m8d3efssULkizlEtunMhIsOTCLT"
   }
 };
+
+export const mockDefaultMfaModel = {
+  "duoHostname": "",
+  "duoIntegrationKey": "",
+  "duoSalt": "",
+  "duoSecretKey": "",
+  "duoToggle": false,
+  "totpProviderToggle": false,
+  "yubikeyClientIdentifier": "",
+  "yubikeySecretKey": "",
+  "yubikeyToggle": false,
+};
+
+
+/**
+ * Mock settings model for UI
+ * @returns {object}
+ */
+export const mockModel = {
+  totpProviderToggle: true,
+  yubikeyToggle: true,
+  duoToggle: true,
+  yubikeyClientIdentifier: "80412",
+  yubikeySecretKey: "pas6lyijz2AIhX3D9eLIYAxv63lt@",
+  duoHostname: "api-123456af.duosecurity.com",
+  duoIntegrationKey: "PAGI605APMFKP8YSME6T",
+  duoSalt: "salt1".repeat(8),
+  duoSecretKey: "PACNkhAAlVLH0m8d3efssULkizlEtunMhIsOTCLT"
+};
+
+/**
+ * Default mfa settings.
+ * @param {Object} data The settings to override
+ * @returns {object}
+ */
+export function defaultMfaSettings(data = {}) {
+  return {
+    ...mockMfaSettings,
+    ...data
+  };
+}
+
+/**
+ * mock for yubikey errors.
+ * @param {Object} data The settings to override
+ * @returns {object}
+ */
+export function mockYubikeyError(data = {}) {
+  return {
+    ...{
+      "yubikeyClientIdentifierError": "A client identifier is required.",
+      "yubikeySecretKeyError": "A secret key is required.",
+    },
+    ...data
+  };
+}
+
+/**
+ * mock for duo errors.
+ * @param {Object} data The settings to override
+ * @returns {object}
+ */
+export function mockDuoError(data = {}) {
+  return {
+    ...{
+      "duoHostnameError": "A hostname is required.",
+      "duoIntegrationKeyError": "An integration key is required.",
+      "duoSaltError": "A salt is required.",
+      "duoSecretKeyError": "A secret key is required.",
+    },
+    ...data
+  };
+}
+/**
+ * mfa settings for UI.
+ * @param {Object} data The settings to override
+ * @returns {object}
+ */
+export function defaultSettingsModel(data = {}) {
+  return {
+    ...mockModel,
+    ...data
+  };
+}

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

@@ -15,12 +15,16 @@
 /**
  * Unit tests on DisplayMfaAdministration in regard of specifications
  */
-import {defaultAppContext, defaultProps, mockMfaSettings} from "./DisplayMfaAdministration.test.data";
+import {defaultProps, mockMfaSettings} from "./DisplayMfaAdministration.test.data";
+import {defaultAppContext} from "../../../contexts/ApiAppContext.test.data";
 import DisplayMfaAdministrationPage from "./DisplayMfaAdministration.test.page";
 import {waitFor} from "@testing-library/react";
 import {ActionFeedbackContext} from "../../../contexts/ActionFeedbackContext";
+import {mockApiResponse} from '../../../../../test/mocks/mockApiResponse';
+import {enableFetchMocks} from 'jest-fetch-mock';
 
 beforeEach(() => {
+  enableFetchMocks();
   jest.resetModules();
 });
 
@@ -34,116 +38,87 @@ describe("See the MFA settings", () => {
      * I should see the MFA provider activation state on the administration settings page
      */
     beforeEach(() => {
+      fetch.doMockOnceIf(/mfa\/settings*/, () => mockApiResponse(mockMfaSettings));
       page = new DisplayMfaAdministrationPage(context, props);
     });
 
     it('As AD I should see if all fields is available for my Passbolt instance on the administration settings page', async() => {
-      await waitFor(() => {
-      });
+      await waitFor(() => {});
+
+      expect.assertions(10);
+
       expect(page.exists()).toBeTruthy();
       // check fields in the form
       expect(page.totp.checked).toBeTruthy();
       expect(page.yubikey.checked).toBeTruthy();
-      expect(page.duo.checked).toBe(false);
+      expect(page.duo.checked).toBeTruthy();
       await page.checkDuo();
 
-      expect(page.yubikeyClientIdentifier.value).toBe(mockMfaSettings.body.yubikey.clientId);
-      expect(page.yubikeySecretKey.value).toBe(mockMfaSettings.body.yubikey.secretKey);
-      expect(page.duoHostname.value).toBe("");
-      expect(page.duoIntegrationKey.value).toBe("");
-      expect(page.duoSalt.value).toBe("");
-      expect(page.duoSecretKey.value).toBe("");
+      expect(page.yubikeyClientIdentifier.value).toBe(mockMfaSettings.yubikey.clientId);
+      expect(page.yubikeySecretKey.value).toBe(mockMfaSettings.yubikey.secretKey);
+      expect(page.duoHostname).toBe(null);
+      expect(page.duoIntegrationKey).toBe(null);
+      expect(page.duoSalt).toBe(null);
+      expect(page.duoSecretKey).toBe(null);
     });
 
     it('As AD I should save mfa on the administration settings page', async() => {
-      await waitFor(() => {});
-      await page.checkYubikey();
-      expect(props.administrationWorkspaceContext.onSaveEnabled).toHaveBeenCalled();
-      const propsUpdated = {
-        administrationWorkspaceContext: {
-          must: {
-            save: true
-          },
-          onResetActionsSettings: jest.fn(),
-          can: {
-            save: true
-          },
-          onSaveEnabled: jest.fn(),
-          onGetMfaRequested: () => mockMfaSettings,
-          onSaveMfaRequested: jest.fn()
-        }
-      };
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
+      //Call to save the settings
+      fetch.doMockOnceIf(/mfa\/settings*/, () => mockApiResponse({}));
+      //Call to API to retrieve the settings
+      fetch.doMockOnceIf(/mfa\/settings*/, () => mockApiResponse(mockMfaSettings));
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
 
-      const result = {
-        "duo": null,
-        "providers": ["totp"],
-        "yubikey": null,
-      };
-      page.rerender(context, propsUpdated);
+
+      await page.checkYubikey();
+      await page.saveSettings();
+
       await waitFor(() => {});
-      expect(propsUpdated.administrationWorkspaceContext.onSaveMfaRequested).toHaveBeenCalledWith(result);
+
+      expect.assertions(3);
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith("The multi factor authentication settings for the organization were updated.");
-      expect(propsUpdated.administrationWorkspaceContext.onResetActionsSettings).toHaveBeenCalled();
+      // We expect the button to be disable
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
     });
 
-    it('As AD I should see a processing feedback while submitting the form', async() => {
-      await waitFor(() => {});
+    it('As AD I should see an error toaster if the submit operation fails for an unexpected reason', async() => {
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
       await page.checkYubikey();
 
-      const propsUpdated = {
-        administrationWorkspaceContext: {
-          must: {
-            save: true
-          },
-          onResetActionsSettings: jest.fn(),
-          can: {
-            save: true
-          },
-          onSaveEnabled: jest.fn(),
-          onGetMfaRequested: () => mockMfaSettings,
-          onSaveMfaRequested: jest.fn()
-        }
-      };
-      // Mock the request function to make it the expected result
-      let updateResolve;
-      const requestMockImpl = jest.fn(() => new Promise(resolve => {
-        updateResolve = resolve;
-      }));
-      jest.spyOn(propsUpdated.administrationWorkspaceContext, 'onSaveMfaRequested').mockImplementation(requestMockImpl);
-
-      page.rerender(context, propsUpdated);
-      // API calls are made on submit, wait they are resolved.
-      await waitFor(() => {
-        expect(page.totp.getAttribute("disabled")).not.toBeNull();
-        expect(page.yubikey.getAttribute("disabled")).not.toBeNull();
-        expect(page.duo.getAttribute("disabled")).not.toBeNull();
-        updateResolve();
-      });
-    });
+      // Mock the request function to make it return an error.
+      const error = {message: "The service is unavailable"};
+
+      fetch.doMockOnceIf(/mfa\/settings*/, () => Promise.reject(error));
+
+      jest.spyOn(ActionFeedbackContext._currentValue, 'displayError').mockImplementation(() => {});
+      await page.saveSettings();
 
-    it('As AD I shouldn’t be able to submit the form if there is an invalid field', async() => {
       await waitFor(() => {});
-      await page.checkDuo();
-      page.fillYubikeyClientIdentifier("");
+
+      expect.assertions(2);
+      // Throw general error message
+      expect(ActionFeedbackContext._currentValue.displayError).toHaveBeenCalledWith("The service is unavailable");
+    });
+
+    it('As AD I should see an error message if inputs are empty', async() => {
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
       page.fillYubikeySecret("");
+      page.fillYubikeyClientIdentifier("");
+      page.fillSecretKey("");
+      page.fillIntegrationKey("");
+      page.fillDuoHostname("");
+      page.fillDuoSalt("");
+
+      await page.saveSettings();
 
-      const propsUpdated = {
-        administrationWorkspaceContext: {
-          must: {
-            save: true
-          },
-          onResetActionsSettings: jest.fn(),
-          can: {
-            save: true
-          },
-          onSaveEnabled: jest.fn()
-        }
-      };
-
-      page.rerender(context, propsUpdated);
       await waitFor(() => {});
-      // Throw error message
+
+      expect.assertions(7);
+      // Throw general error message
       expect(page.yubikeyClientIdentifierErrorMessage).toBe("A client identifier is required.");
       expect(page.yubikeySecretKeyErrorMessage).toBe("A secret key is required.");
       expect(page.duoHostnameErrorMessage).toBe("A hostname is required.");
@@ -152,56 +127,35 @@ describe("See the MFA settings", () => {
       expect(page.duoSecretKeyErrorMessage).toBe("A secret key is required.");
     });
 
-    it('As AD I should see an error toaster if the submit operation fails for an unexpected reason', async() => {
-      await waitFor(() => {});
-      await page.checkYubikey();
-
-      const propsUpdated = {
-        administrationWorkspaceContext: {
-          must: {
-            save: true
-          },
-          onResetActionsSettings: jest.fn(),
-          can: {
-            save: true
-          },
-          onSaveEnabled: jest.fn(),
-          onGetMfaRequested: () => mockMfaSettings,
-          onSaveMfaRequested: jest.fn()
-        }
-      };
 
-      // Mock the request function to make it return an error.
-      const error = {message: "The service is unavailable"};
-      jest.spyOn(propsUpdated.administrationWorkspaceContext, 'onSaveMfaRequested').mockImplementation(() => Promise.reject(error));
-      jest.spyOn(ActionFeedbackContext._currentValue, 'displayError').mockImplementation(() => {});
-
-      page.rerender(context, propsUpdated);
-      await waitFor(() => {});
-      // Throw general error message
-      expect(ActionFeedbackContext._currentValue.displayError).toHaveBeenCalledWith("The service is unavailable");
+    it('As AD I should not be able to click on save if there is no change', async() => {
+      expect.assertions(2);
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
+      await page.checkYubikey();
+      //We set the value by default
+      await page.checkYubikey();
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
     });
 
     it('As AD I want to see the passwords I entered in the MFA administration settings forms', async() => {
-      await page.checkDuo();
-
       await page.toggleObfuscate(page.duoSecretKeyButton);
       await page.toggleObfuscate(page.duoSaltKeyButton);
       await page.toggleObfuscate(page.yubikeySecretKeyButton);
 
+      expect.assertions(3);
+
       expect(page.isObfuscated(page.yubikeySecretKeyButton)).toBeFalsy();
       expect(page.isObfuscated(page.duoSecretKeyButton)).toBeFalsy();
       expect(page.isObfuscated(page.duoSaltKeyButton)).toBeFalsy();
     });
-  });
-
-  describe('As AD I see all fields disabled if mfa setting are not yet fetched', () => {
-    /**
-     * Given the mfa settings
-     * And the mfa settings are not loaded yet
-     */
 
     it('I should see all fields disabled”', () => {
+      fetch.doMockOnceIf(/mfa\/settings*/, () => mockApiResponse(mockMfaSettings));
+
+      expect.assertions(3);
+
       page = new DisplayMfaAdministrationPage(context, props);
       expect(page.totp.getAttribute("disabled")).not.toBeNull();
       expect(page.yubikey.getAttribute("disabled")).not.toBeNull();

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

@@ -16,6 +16,8 @@ import AppContext from "../../../contexts/AppContext";
 import React from "react";
 import DisplayMfaAdministration from "./DisplayMfaAdministration";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import {AdminMfaContextProvider} from "../../../contexts/Administration/AdministrationMfa/AdministrationMfaContext";
+import DisplayAdministrationMfaActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationMfaActions/DisplayAdministrationMfaActions";
 
 /**
  * The DisplayMfaAdministration component represented as a page
@@ -30,17 +32,10 @@ export default class DisplayMfaAdministrationPage {
     this._page = render(
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
-          <DisplayMfaAdministration {...props}/>
-        </AppContext.Provider>
-      </MockTranslationProvider>
-    );
-  }
-
-  rerender(appContext, props) {
-    this._page.rerender(
-      <MockTranslationProvider>
-        <AppContext.Provider value={appContext}>
-          <DisplayMfaAdministration {...props}/>
+          <AdminMfaContextProvider  {...props}>
+            <DisplayAdministrationMfaActions />
+            <DisplayMfaAdministration {...props}/>
+          </AdminMfaContextProvider>
         </AppContext.Provider>
       </MockTranslationProvider>
     );
@@ -180,6 +175,14 @@ export default class DisplayMfaAdministrationPage {
     return this._page.container.querySelector('.duo_secret_key.error-message').textContent;
   }
 
+  /**
+   * Returns the HTMLElement button of the toolbar that is the "Save Settings"
+   * @returns {HTMLElement}
+   */
+  get toolbarActionsSaveButton() {
+    return this._page.container.querySelectorAll(".actions-wrapper .actions a")[0];
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -211,16 +214,26 @@ export default class DisplayMfaAdministrationPage {
     this.fillInput(this.yubikeySecretKey, data);
   }
 
-  /** fill the duo secret element with data */
-  fillDuoSecret(data) {
-    this.fillInput(this.duoSecretKey, data);
-  }
-
   /** fill the duo salt element with data */
   fillDuoSalt(data) {
     this.fillInput(this.duoSalt, data);
   }
 
+  /** fill the duo hostname element with data */
+  fillDuoHostname(data) {
+    this.fillInput(this.duoHostname, data);
+  }
+
+  /** fill the duo integration key with data */
+  fillIntegrationKey(data) {
+    this.fillInput(this.duoIntegrationKey, data);
+  }
+
+  /** fill the duo secret key with data */
+  fillSecretKey(data) {
+    this.fillInput(this.duoSecretKey, data);
+  }
+
   /** Click on the duo element */
   async checkDuo() {
     await this.click(this.duo);
@@ -243,4 +256,21 @@ export default class DisplayMfaAdministrationPage {
   isObfuscated(component) {
     return component.getAttribute('type') === "password";
   }
+
+  /**
+   * Returns true if the save button in the toolbar is enabled.
+   * @returns {boolean}
+   */
+  isSaveButtonEnabled() {
+    return !this.toolbarActionsSaveButton.className.toString().includes("disabled");
+  }
+
+  /**
+   * Simulates a click on the "Save settings" button.
+   * To work properly, the form needs to be valid otherwise the sate doesn't change and this blocks the test.
+   * @returns {Promise<void>}
+   */
+  async saveSettings() {
+    await this.click(this.toolbarActionsSaveButton);
+  }
 }

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

@@ -1,30 +1,34 @@
 import React from "react";
 import PropTypes from "prop-types";
 import DisplayMfaAdministration from "./DisplayMfaAdministration";
-
+import {AdminMfaContextProvider} from "../../../contexts/Administration/AdministrationMfa/AdministrationMfaContext";
+import {defaultProps, mockMfaSettings} from "./DisplayMfaAdministration.test.data";
+import {mockApiResponse} from '../../../../../test/mocks/mockApiResponse';
+import MockFetch from '../../../test/mock/MockFetch';
 
 export default {
   title: 'Components/Administration/DisplayMfaAdministration',
   component: DisplayMfaAdministration
 };
 
+
+const mockFetch = new MockFetch();
+mockFetch.addGetFetchRequest(/mfa\/settings/, async() => mockApiResponse(mockMfaSettings));
+
+
 const Template = args =>
-  <div className="page administration"><div className="grid grid-responsive-12">
-    <DisplayMfaAdministration {...args}/>
-  </div>
-  </div>;
+  <AdminMfaContextProvider{...args}>
+    <div className="panel middle">
+      <div className="grid grid-responsive-12">
+        <DisplayMfaAdministration {...args}/>
+      </div>
+    </div>
+  </AdminMfaContextProvider>;
 
 Template.propTypes = {
   context: PropTypes.object,
 };
 
 export const Initial = Template.bind({});
-Initial.args = {
-  administrationWorkspaceContext: {
-    onGetMfaRequested: () => ({
-      body: {
-        providers: []
-      }
-    })
-  }
-};
+Initial.args = defaultProps();
+