passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -0,0 +1,100 @@
+/**
+ * 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.6.0
+ */
+
+/**
+ * Unit tests on ManageAccountRecoveryAdministrationSettings in regard of specifications
+ */
+import {
+  defaultProps,
+  hasChangedPolicyProps,
+  mandatoryPolicyPropsWithOrganisationKey,
+  optInPolicyPropsWithOrganisationKey,
+  optOutPolicyPropsWithOrganisationKey,
+} from "./ManageAccountRecoveryAdministrationSettings.test.data";
+import ManageAccountRecoveryAdministrationSettingsPage from "./ManageAccountRecoveryAdministrationSettings.test.page";
+import {waitFor} from "@testing-library/react";
+import DisplayAdministrationAccountRecoveryActions
+  from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationAccountRecoveryAction/DisplayAdministrationAccountRecoveryActions";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("As AD I should see the account recovery settings", () => {
+  let page; // The page to test against
+
+  it('As AD in the administration workspace, I can see the account recovery section populated with the default value', async() => {
+    expect.assertions(12);
+    const props = defaultProps(); // The props to pass
+    page = new ManageAccountRecoveryAdministrationSettingsPage(props);
+    await waitFor(() => {});
+    expect(props.administrationWorkspaceContext.setDisplayAdministrationWorkspaceAction).toHaveBeenCalledWith(DisplayAdministrationAccountRecoveryActions);
+    expect(props.adminAccountRecoveryContext.findAccountRecoveryPolicy).toBeCalled();
+    expect(page.exists()).toBeTruthy();
+    expect(page.title).toBe("Account Recovery");
+    expect(page.accountRecoveryPolicyTitle).toBe("Account Recovery Policy");
+    expect(page.disableRadioButton.isChecked).toBeTruthy();
+    expect(page.mandatoryRadioButton.isChecked).toBeFalsy();
+    expect(page.optInRadioButton.isChecked).toBeFalsy();
+    expect(page.optOutRadioButton.isChecked).toBeFalsy();
+    expect(page.help).toBeTruthy();
+    expect(page.helpReadDocumentation.getAttribute("rel")).toBe("noopener noreferrer");
+    await page.unmount();
+    expect(props.administrationWorkspaceContext.resetDisplayAdministrationWorkspaceAction).toHaveBeenCalled();
+  });
+
+  it('As AD in the administration workspace, I can see the account recovery section populated with the mandatory value', async() => {
+    expect.assertions(4);
+    const props = mandatoryPolicyPropsWithOrganisationKey(); // The props to pass
+    page = new ManageAccountRecoveryAdministrationSettingsPage(props);
+    expect(page.mandatoryRadioButton.isChecked).toBeTruthy();
+    expect(page.disableRadioButton.isChecked).toBeFalsy();
+    expect(page.optInRadioButton.isChecked).toBeFalsy();
+    expect(page.optOutRadioButton.isChecked).toBeFalsy();
+  });
+
+  it('As AD in the administration workspace, I can see the account recovery section populated with the opt-in value', async() => {
+    expect.assertions(4);
+    const props = optInPolicyPropsWithOrganisationKey(); // The props to pass
+    page = new ManageAccountRecoveryAdministrationSettingsPage(props);
+    expect(page.mandatoryRadioButton.isChecked).toBeFalsy();
+    expect(page.disableRadioButton.isChecked).toBeFalsy();
+    expect(page.optInRadioButton.isChecked).toBeTruthy();
+    expect(page.optOutRadioButton.isChecked).toBeFalsy();
+  });
+
+  it('As AD in the administration workspace, I can see the account recovery section populated with the opt-out value', async() => {
+    expect.assertions(4);
+    const props = optOutPolicyPropsWithOrganisationKey(); // The props to pass
+    page = new ManageAccountRecoveryAdministrationSettingsPage(props);
+    expect(page.mandatoryRadioButton.isChecked).toBeFalsy();
+    expect(page.disableRadioButton.isChecked).toBeFalsy();
+    expect(page.optInRadioButton.isChecked).toBeFalsy();
+    expect(page.optOutRadioButton.isChecked).toBeTruthy();
+  });
+
+  it('As a logged in administrator in the administration workspace, I can select an account recovery policy', async() => {
+    expect.assertions(6);
+    const props = hasChangedPolicyProps(); // The props to pass
+    page = new ManageAccountRecoveryAdministrationSettingsPage(props);
+    expect(page.mandatoryRadioButton.isChecked).toBeTruthy();
+    expect(page.disableRadioButton.isChecked).toBeFalsy();
+    expect(page.optInRadioButton.isChecked).toBeFalsy();
+    expect(page.optOutRadioButton.isChecked).toBeFalsy();
+    await page.clickOnOptInPolicyButton();
+    const newPolicy = "opt-in";
+    expect(props.adminAccountRecoveryContext.changePolicy).toHaveBeenCalledWith(newPolicy);
+    expect(page.warningMessage).toBe("Warning, Don't forget to save your settings to apply your modification.");
+  });
+});

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

@@ -0,0 +1,159 @@
+/**
+ * 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.6.0
+ */
+
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import ManageAccountRecoveryAdministrationSettings from "./ManageAccountRecoveryAdministrationSettings";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The ManageAccountRecoveryAdministrationSettings component represented as a page
+ */
+export default class ManageAccountRecoveryAdministrationSettingsPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <ManageAccountRecoveryAdministrationSettings {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  unmount() {
+    this._page.unmount();
+  }
+
+  /**
+   * Returns the account recovery settings element
+   */
+  get accountRecoverySettings() {
+    return this._page.container.querySelector('.recover-account-settings');
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.recover-account-settings h3').textContent;
+  }
+
+  /**
+   * Returns the account recovery policy title element
+   */
+  get accountRecoveryPolicyTitle() {
+    return this._page.container.querySelector('.recover-account-settings .form h3').textContent;
+  }
+
+  /**
+   * Returns the mandatory radio button element
+   */
+  get mandatoryRadioButton() {
+    const element = this._page.container.querySelector('#accountRecoveryPolicyMandatory');
+    return {
+      get element() { return element; },
+      get isChecked()  { return element.checked; }
+    };
+  }
+
+  /**
+   * Returns the opt-out radio button element
+   */
+  get optOutRadioButton() {
+    const element = this._page.container.querySelector('#accountRecoveryPolicyOptOut');
+    return {
+      get element() { return element; },
+      get isChecked()  { return element.checked; }
+    };
+  }
+
+  /**
+   * Returns the opt-in radio button element
+   */
+  get optInRadioButton() {
+    const element =  this._page.container.querySelector('#accountRecoveryPolicyOptIn');
+    return {
+      get element() { return element; },
+      get isChecked()  { return element.checked; }
+    };
+  }
+
+  /**
+   * Returns the disable radio button element
+   */
+  get disableRadioButton() {
+    const element =  this._page.container.querySelector('#accountRecoveryPolicyDisable');
+    return {
+      get element() { return element; },
+      get isChecked()  { return element.checked; }
+    };
+  }
+
+  /**
+   * Returns the recovery key toggle button element
+   */
+  get recoveryKeyToggleButton() {
+    return this._page.container.querySelector('#recovery-key-toggle-button');
+  }
+
+  /**
+   * Returns the warning message element
+   */
+  get warningMessage() {
+    return this._page.container.querySelector('.warning.message').textContent;
+  }
+
+  /**
+   * Returns the help element
+   */
+  get help() {
+    return this._page.container.querySelector('.col4.last') !== null;
+  }
+
+  /**
+   * Returns the help read documentation element
+   */
+  get helpReadDocumentation() {
+    return this._page.container.querySelector('.col4.last a');
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.accountRecoverySettings !== null;
+  }
+
+  /**
+   * Click on "opt-in" radio button and wait for the component to be updated.
+   */
+  async clickOnOptInPolicyButton() {
+    const leftClick = {button: 0};
+    const element = this._page.container.querySelector('#accountRecoveryPolicyOptIn');
+    fireEvent.click(element, leftClick);
+    element.checked = true;
+  }
+
+  /**
+   * update key
+   */
+  async toggleRecoveryKey() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.recoveryKeyToggleButton, leftClick);
+    await waitFor(() => {});
+  }
+}

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

@@ -0,0 +1,62 @@
+/**
+ * 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.6.0
+ */
+
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import ManageAccountRecoveryAdministrationSettings from "./ManageAccountRecoveryAdministrationSettings";
+import {
+  disabledPolicyProps, disabledPolicyPropsWithOrganisationKey,
+  mandatoryPolicyProps, mandatoryPolicyPropsWithOrganisationKey, optInPolicyProps, optInPolicyPropsWithOrganisationKey,
+  optOutPolicyProps, optOutPolicyPropsWithOrganisationKey
+} from "./ManageAccountRecoveryAdministrationSettings.test.data";
+
+export default {
+  title: 'Passbolt/Administration/ManageAccountRecoveryAdministrationSettings',
+  component: ManageAccountRecoveryAdministrationSettings
+};
+
+const Template = args =>
+  <MemoryRouter initialEntries={['/']}>
+    <div className="panel main">
+      <div className="panel middle">
+        <div className="grid grid-responsive-12">
+          <Route component={routerProps => <ManageAccountRecoveryAdministrationSettings {...args} {...routerProps}/>}></Route>
+        </div>
+      </div>
+    </div>
+  </MemoryRouter>;
+
+export const Default = Template.bind({});
+Default.args = disabledPolicyProps();
+
+export const Mandatory = Template.bind({});
+Mandatory.args = mandatoryPolicyProps();
+
+export const OptOut = Template.bind({});
+OptOut.args = optOutPolicyProps();
+
+export const OptIn = Template.bind({});
+OptIn.args = optInPolicyProps();
+
+export const DefaultWithOrganisationRecoveryKey = Template.bind({});
+DefaultWithOrganisationRecoveryKey.args = disabledPolicyPropsWithOrganisationKey();
+
+export const MandatoryWithOrganisationRecoveryKey = Template.bind({});
+MandatoryWithOrganisationRecoveryKey.args = mandatoryPolicyPropsWithOrganisationKey();
+
+export const OptOutWithOrganisationRecoveryKey = Template.bind({});
+OptOutWithOrganisationRecoveryKey.args = optOutPolicyPropsWithOrganisationKey();
+
+export const OptInWithOrganisationRecoveryKey = Template.bind({});
+OptInWithOrganisationRecoveryKey.args = optInPolicyPropsWithOrganisationKey();