passbolt-styleguide 3.8.4 → 3.9.0-alpha2

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

@@ -0,0 +1,332 @@
+/**
+ * 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.3
+ */
+
+import {enableFetchMocks} from 'jest-fetch-mock';
+import {mockApiResponse} from '../../../../../test/mocks/mockApiResponse';
+import {defaultAppContext} from '../../../contexts/ApiAppContext.test.data';
+import DisplaySelfRegistrationAdministrationPage from './DisplaySelfRegistrationAdministration.test.page';
+import {defaultProps, domains, mockResult} from './DisplaySelfRegistrationAdministration.test.data';
+import {waitFor} from '@testing-library/react';
+import * as uuid from 'uuid';
+import {ActionFeedbackContext} from "../../../contexts/ActionFeedbackContext";
+import ConfirmSaveSelfRegistrationSettings from './ConfirmSaveSelfRegistrationSettings/ConfirmSaveSelfRegistrationSettings';
+import ConfirmDeletionSelfRegistrationSettings from './ConfirmDeletionSelfRegistrationSettings/ConfirmDeletionSelfRegistrationSettings';
+
+jest.mock('uuid');
+
+/**
+ * Unit tests on DisplaySelfRegistrationAdministration in regard of specifications
+ */
+
+describe("DisplaySelfRegistrationAdministration", () => {
+  beforeEach(() => {
+    enableFetchMocks();
+    jest.resetModules();
+    jest.restoreAllMocks();
+  });
+
+  let page; // The page to test against
+  const props = defaultProps(); // The props to pass
+  const context = defaultAppContext();
+  const gmailDomain = "gmail.com";
+  const requiredDomain = "A domain is required.";
+
+
+  describe("As a logged in administrator I can enable the User self registration", () => {
+    beforeEach(() => {
+      fetch.doMockOnceIf(/self-registration\/settings*/, () => mockApiResponse(mockResult([])));
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+    });
+
+    it('As a logged in administrator when the User self registration is not configured, I can access the User self registration settings page', async() => {
+      fetch.doMockOnceIf(/self-registration\/settings*/, () => mockApiResponse(mockResult(null, false)));
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+
+      expect.assertions(7);
+
+      expect(page.exists()).toBeTruthy();
+      expect(page.toggle.checked).toBeFalsy();
+      expect(page.disabledDescription).toBeDefined();
+      expect(page.helpBox).toBeDefined();
+      expect(page.helpBoxButton).toBeDefined();
+      expect(page.saveSettingsButton).toBeDefined();
+      // We expect to have the button disable for the first usage
+      expect(page.saveSettingsButton.className.includes("disabled")).toBeTruthy();
+    });
+
+    it('As a logged in administrator I can enable the User self registration setting', async() => {
+      expect.assertions(3);
+
+      expect(page.helpBoxButton).toBeDefined();
+      expect(page.helpBoxButton.textContent).toEqual("Read the documentation");
+      expect(page.helpBoxButton.getAttribute('href')).toEqual('https://help.passbolt.com/configure/self-registration');
+    });
+
+    it('As a logged in administrator I can enable the User self registration setting', async() => {
+      expect.assertions(5);
+
+      await page.clickOnToggle();
+
+      expect(page.toggle.checked).toBeTruthy();
+      expect(page.enabledLabel).toBeDefined();
+      expect(page.enabledDescription).toBeDefined();
+      // We should pre-populate with profesional domain
+      expect(page.firstInputRow.value).toEqual("passbolt.com");
+      expect(page.firstDeleteButton.getAttribute("disabled")).toBeNull();
+    });
+
+    it('As a logged in administrator I can enable the User self registration setting', async() => {
+      expect.assertions(5);
+
+      const contextWithPublicDomain = defaultAppContext({
+        loggedInUser: {
+          username: "user@gmail.com"
+        }
+      });
+      fetch.doMockOnceIf(/self-registration\/settings*/, () => mockApiResponse(mockResult([])));
+      page = new DisplaySelfRegistrationAdministrationPage(context, defaultProps({
+        context: contextWithPublicDomain
+      }));
+
+      await waitFor(() => {});
+      await page.clickOnToggle();
+      expect(page.toggle.checked).toBeTruthy();
+      expect(page.enabledLabel).toBeDefined();
+      expect(page.enabledDescription).toBeDefined();
+      // We should not pre-populate with public domain
+      expect(page.firstInputRow.value).toEqual("");
+      expect(page.firstDeleteButton.getAttribute("disabled")).toBeNull();
+    });
+  });
+  describe("As a logged administrator I can add domains to the User self registration list", () => {
+    beforeEach(() => {
+      fetch.doMockOnceIf(/self-registration\/settings*/, () => mockApiResponse(mockResult()));
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+      let index = 0;
+      jest.spyOn(uuid, 'v4').mockImplementation(() => (index++).toString());
+    });
+
+    it('As a logged in administrator I can add a new input field to the User self registration list', async() => {
+      expect.assertions(7);
+      // We expect to not have 4 items
+      expect(page.inputByIndex(0).value).toBe('passbolt.com');
+      expect(page.inputByIndex(1).value).toBe('passbolt.io');
+      expect(page.inputByIndex(2).value).toBe('passbolt.lu');
+      expect(page.inputByIndex(3)).toBeNull();
+
+      await page.addDomain();
+
+      expect(page.inputByIndex(3)).toBeDefined();
+      expect(page.inputByIndex(3).value).toBe('');
+      //We expected to have a delete button closed to the input
+      expect(page.deleteButtonByIndex(3)).toBeDefined();
+    });
+
+    it("As an administrator on the self registration admin settings form, I want to see the new row having focus when I click on the add a new row button", async() => {
+      expect.assertions(1);
+      await page.addDomain();
+
+      expect(page.hasFocus(page.inputByIndex(3))).toBeTruthy();
+    });
+
+
+    it('As a logged in administrator I can add a new non-professional domain to the User self registration but I should see a warning message', async() => {
+      expect.assertions(7);
+
+      //Mock API calls
+      fetch.doMockIf(/self-registration\/settings*/, () => mockApiResponse(mockResult([gmailDomain])));
+
+      expect(page.warningMessage).toBeNull();
+
+      await page.addDomain();
+      await page.fillInput(page.inputByIndex(3), gmailDomain);
+      await page.focusOut(page.inputByIndex(3));
+
+      expect(page.warningMessage).toBeDefined();
+      expect(page.warningMessage.textContent).toBe("This is not a safe professional domain");
+      expect(page.subtitle.classList.contains('warning')).toBeTruthy();
+
+      //Warning should not block the save
+      await page.clickOnSave();
+      expect(page.warningMessage).toBeDefined();
+      expect(page.warningMessage.textContent).toBe("This is not a safe professional domain");
+      expect(page.subtitle.classList.contains('warning')).toBeTruthy();
+    });
+  });
+
+  describe("As a logged administrator I can save a list of domains", () => {
+    beforeEach(() => {
+      mockUuidGeneration();
+      jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
+    });
+
+    it('As a logged in administrator I can save a list of domains when there is no error and one domain field filled in', async() => {
+      expect.assertions(2);
+      //Mock API calls
+      fetch.doMockIf(/self-registration\/settings*/, () => mockApiResponse(mockResult([])));
+
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+
+      await waitFor(() => {});
+      await page.clickOnToggle();
+      await page.clickOnSave();
+
+      // We expect to have a banner when settings changes are not saved
+      expect(page.settingsChangedBanner).not.toBeNull();
+      expect(props.dialogContext.open).toHaveBeenCalledWith(ConfirmSaveSelfRegistrationSettings, expect.objectContaining({"domains": new Map(Object.entries(domains))}));
+    });
+
+    it('As a logged in administrator I can save a list of domains when there is no error and at least one domain filled in ', async() => {
+      expect.assertions(2);
+      //Mock get all
+      fetch.doMockIf(/self-registration\/settings*/, () => mockApiResponse(mockResult()));
+
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+
+      await waitFor(() => {});
+      await page.addDomain();
+      // fill with non profession domain
+      await page.fillInput(page.inputByIndex(3), gmailDomain);
+      // We expect to have a banner when settings changes are not saved
+      expect(page.settingsChangedBanner).not.toBeNull();
+      await page.clickOnSave();
+      expect(props.dialogContext.open).toHaveBeenCalledWith(ConfirmSaveSelfRegistrationSettings, expect.objectContaining({"domains": new Map(Object.entries(domains))}));
+    });
+
+    it('As a logged in administrator I cannot save the User self registration list when the format is not valid', async() => {
+      expect.assertions(7);
+      //Mock API calls
+      fetch.doMockIf(/self-registration\/settings*/, () => mockApiResponse(mockResult()));
+
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+
+      await waitFor(() => {});
+      jest.spyOn(page.inputByIndex(1), 'focus');
+
+      // fill with non profession domain
+      await page.fillInput(page.inputByIndex(1), "");
+      await page.clickOnSave();
+
+      expect(page.errorMessage.textContent).toBe(requiredDomain);
+      expect(page.subtitle.classList.contains('error')).toBeTruthy();
+      // Check if input is focus
+      expect(page.inputByIndex(1).focus).toHaveBeenCalled();
+
+      await page.fillInput(page.inputByIndex(1), "127.0.0.1");
+
+      expect(page.errorMessage.textContent).toBe("This should be a valid domain");
+      expect(page.subtitle.classList.contains('error')).toBeTruthy();
+
+      await page.fillInput(page.inputByIndex(1), "passbolt.com");
+      await page.fillInput(page.inputByIndex(2), "passbolt.com");
+
+      //Check duplication
+      expect(page.errorMessage.textContent).toBe("This domain already exist");
+      expect(page.subtitle.classList.contains('error')).toBeTruthy();
+    });
+
+    it('As an administrator on the self registration admin settings form, I want to see the warning message on a row domain even when there are errors on other domains rows', async() => {
+      expect.assertions(4);
+      //Mock API calls
+      fetch.doMockIf(/self-registration\/settings*/, () => mockApiResponse(mockResult()));
+
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+
+      await waitFor(() => {});
+      jest.spyOn(page.inputByIndex(1), 'focus');
+
+      // fill with non profession domain
+      await page.fillInput(page.inputByIndex(1), "");
+      await page.clickOnSave();
+
+      expect(page.errorMessage.textContent).toBe("A domain is required.");
+
+      // Lets add a new domain
+      await page.addDomain();
+      await page.fillInput(page.inputByIndex(2), gmailDomain);
+      await page.focusOut(page.inputByIndex(2));
+
+      expect(page.warningMessage).toBeDefined();
+      expect(page.warningMessage.textContent).toBe("This is not a safe professional domain");
+      expect(page.subtitle.classList.contains('warning')).toBeTruthy();
+    });
+  });
+  describe("As a logged administrator I can remove a domain from the list", () => {
+    beforeEach(() => {
+      mockUuidGeneration();
+      fetch.doMockOnceIf(/self-registration\/settings*/, () => mockApiResponse(mockResult()));
+      page = new DisplaySelfRegistrationAdministrationPage(context, props);
+    });
+    it('As a logged in administrator I can remove a domain from an existing list of domains', async() => {
+      expect.assertions(2);
+
+      expect(page.inputByIndex(1).value).toBe("passbolt.io");
+      await page.removeDomain(1);
+      expect(page.inputByIndex(1)).toBeNull();
+    });
+
+    it('As a logged in administrator I can not remove the domain when there’s only one item in the list of domains allowed to self register', async() => {
+      expect.assertions(4);
+
+      expect(page.inputByIndex(1).value).toBe("passbolt.io");
+      await page.removeDomain(1);
+      await page.removeDomain(2);
+      expect(page.inputByIndex(1)).toBeNull();
+      expect(page.inputByIndex(2)).toBeNull();
+
+      expect(page.deleteButtonByIndex(0).classList.contains("disabled")).toBeTruthy();
+    });
+
+    it('As a logged in administrator I can reset the “User self registration” settings when I disable and enable the setting', async() => {
+      expect.assertions(5);
+      //Disable settings
+      await page.clickOnToggle();
+      await page.clickOnSave();
+
+      //Test to check that data are not anymore present on the UI
+      await page.clickOnToggle();
+
+      expect(props.dialogContext.open).toHaveBeenCalledWith(ConfirmDeletionSelfRegistrationSettings, expect.objectContaining({onClose: expect.any(Function), onSubmit: expect.any(Function)}));
+      //As index are generated by the function, a new input should have an incremented index
+      expect(page.inputByIndex(0)).toBeNull();
+      expect(page.inputByIndex(2)).toBeNull();
+      expect(page.inputByIndex(3)).not.toBeNull();
+      //New input should be prepopulate with the domain of the organization
+      expect(page.firstInputRow.value).toEqual("passbolt.com");
+    });
+
+    it("As an administrator on the self registration admin settings form, I should not see an error when I enable the settings which previously were containing error", async() => {
+      expect.assertions(4);
+
+      //We generate an error
+      await page.fillInput(page.inputByIndex(1), "");
+      await page.clickOnSave();
+
+      expect(page.errorMessage.textContent).toBe(requiredDomain);
+      expect(page.subtitle.classList.contains('error')).toBeTruthy();
+
+      // We disable self registration
+      await page.clickOnToggle();
+      // We enable it agzain
+      await page.clickOnToggle();
+      expect(page.errorMessage).toBeNull();
+      expect(page.subtitle.classList.contains('error')).toBeFalsy();
+    });
+  });
+});
+
+function mockUuidGeneration() {
+  let index = 0;
+  jest.spyOn(uuid, 'v4').mockImplementation(() => (index++).toString());
+}

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

@@ -0,0 +1,247 @@
+/**
+ * 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.8.3
+ */
+
+import React from "react";
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import AppContext from "../../../contexts/AppContext";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayAdministrationSelfRegistrationActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationSelfRegistrationActions/DisplayAdministrationSelfRegistrationActions";
+import DisplaySelfRegistrationAdministration from "./DisplaySelfRegistrationAdministration";
+import {AdminSelfRegistrationContextProvider} from "../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+
+/**
+ * The DisplaySelfRegistrationAdministration component represented as a page
+ */
+export default class DisplaySelfRegistrationAdministrationPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(appContext, props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <AppContext.Provider value={appContext}>
+          <AdminSelfRegistrationContextProvider  {...props}>
+            <DisplayAdministrationSelfRegistrationActions />
+            <DisplaySelfRegistrationAdministration {...props}/>
+          </AdminSelfRegistrationContextProvider>
+        </AppContext.Provider>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the self registration parent class
+   */
+  get selfRegistration() {
+    return this._page.container.querySelector('.self-registration ');
+  }
+
+  get actions() {
+    return this._page.container.querySelector(".actions");
+  }
+  /**
+   * Returns the save settings button
+   */
+  get saveSettingsButton() {
+    return this._page.container.querySelector('#save-settings');
+  }
+
+  /**
+   * Returns the toggle settings
+   */
+  get toggle() {
+    return this._page.container.querySelector('#settings-toggle');
+  }
+
+  /**
+   * Returns the first domain row
+   */
+  get domainRows() {
+    return this._page.container.querySelectorAll('.domain-row');
+  }
+
+  /**
+   * Returns the first domain row
+   */
+  get firstInputRow() {
+    return this._page.container.querySelector('.full-width');
+  }
+
+  /**
+   * Returns the first delere button row
+   */
+  get firstDeleteButton() {
+    return this._page.container.querySelector('.button-icon');
+  }
+
+  /**
+   * Returns the enable description
+   */
+  get enabledDescription() {
+    return this._page.container.querySelector('#enabled-description');
+  }
+
+  /**
+   * Returns the enable label
+   */
+  get enabledLabel() {
+    return this._page.container.querySelector('#enabled-label');
+  }
+
+  /**
+   * Returns the save dialog confirmation
+   */
+  get saveDialogConfirmation() {
+    return this._page.container.querySelector(' save-self-recovery-settings-dialog');
+  }
+
+  /**
+   * Returns the disable description
+   */
+  get disabledDescription() {
+    return this._page.container.querySelector('#disabled-description');
+  }
+
+  /**
+   * Returns the help box
+   */
+  get helpBox() {
+    return this._page.container.querySelector('.sidebar-help');
+  }
+
+  /**
+   * Returns banner for settings changes
+   */
+  get settingsChangedBanner() {
+    return this._page.container.querySelector("#self-registration-setting-overridden-banner");
+  }
+
+  /**
+   * Returns the help box button
+   */
+  get helpBoxButton() {
+    return this._page.container.querySelector('.sidebar-help .button');
+  }
+
+  /**
+   * Returns the add domain button
+   */
+  get addDomainButton() {
+    return this._page.container.querySelector('.domain-add .button');
+  }
+
+  /**
+   * Returns the warning message
+   */
+  get warningMessage() {
+    return this._page.container.querySelector('.warning-message');
+  }
+
+  /**
+   * Returns the error message
+   */
+  get errorMessage() {
+    return this._page.container.querySelector('.error-message');
+  }
+
+  /**
+   * Returns the subtitle
+   */
+  get subtitle() {
+    return this._page.container.querySelector('#self-registration-subtitle');
+  }
+
+  /**
+   * input by index
+   */
+  inputByIndex(index) {
+    return this._page.container.querySelector(`#input-${index}`);
+  }
+
+  /**
+   * row delete button by index
+   */
+  deleteButtonByIndex(index) {
+    return this._page.container.querySelector(`#delete-${index}`);
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.selfRegistration !== null;
+  }
+
+  /**
+   * click on toggle to enable/disable setting
+   */
+  async clickOnToggle() {
+    return this.click(this.toggle);
+  }
+
+  /**
+   * click on save settings button
+   */
+  async clickOnSave() {
+    return this.click(this.saveSettingsButton);
+  }
+
+  /**
+   * click on the add button domain
+   */
+  async addDomain() {
+    return this.click(this.addDomainButton);
+  }
+
+  /**
+   * click on the remove button domain
+   * @param {number} index
+   */
+  async removeDomain(index) {
+    const element = this.deleteButtonByIndex(index);
+    return this.click(element);
+  }
+
+  /**
+   * click on the container to focus out
+   */
+  async focusOut(element) {
+    element.blur();
+  }
+
+  /**
+   * Click on the element
+   *
+   */
+  async click(element) {
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {
+    });
+  }
+
+  /** fill the input element with data */
+  async fillInput(element, data) {
+    element.focus();
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(element, dataInputEvent);
+  }
+
+  /** check if item has focus */
+  hasFocus(element) {
+    return element === document.activeElement;
+  }
+}

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

@@ -0,0 +1,72 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.3
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import {mockApiResponse} from '../../../../../test/mocks/mockApiResponse';
+import MockFetch from '../../../test/mock/MockFetch';
+import DisplaySelfRegistrationAdministration from "./DisplaySelfRegistrationAdministration";
+import {AdminSelfRegistrationContextProvider} from "../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+import {defaultProps, mockResult} from "./DisplaySelfRegistrationAdministration.test.data";
+
+
+export default {
+  title: 'Components/Administration/DisplaySelfRegistrationAdministration',
+  component: DisplaySelfRegistrationAdministration
+};
+
+let currentStory = null;
+const mockFetch = new MockFetch();
+mockFetch.addGetFetchRequest(/self-registration\/settings\.json/, async() => {
+  switch (currentStory) {
+    case 'components-administration-displayselfregistrationadministration--default': {
+      return mockApiResponse(mockResult(null));
+    }
+    case 'components-administration-displayselfregistrationadministration--with-profesionnal-domains': {
+      return mockApiResponse(mockResult());
+    }
+  }
+  throw new Error("Unsupported story");
+});
+
+const decorators = [
+  (Story, context) => {
+    currentStory = context.id;
+    return <>
+      <Story/>
+    </>;
+  }
+];
+
+
+const Template = args =>
+  <AdminSelfRegistrationContextProvider {...args}>
+    <div className="panel middle">
+      <div className="grid grid-responsive-12">
+        <DisplaySelfRegistrationAdministration {...args}/>
+      </div>
+    </div>
+  </AdminSelfRegistrationContextProvider>;
+
+Template.propTypes = {
+  context: PropTypes.object,
+};
+
+export const Default = Template.bind({});
+Default.args = defaultProps();
+Default.decorators = decorators;
+
+export const withProfesionnalDomains = Template.bind({});
+withProfesionnalDomains.args = defaultProps();
+withProfesionnalDomains.decorators = decorators;