passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.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.6.0
+ */
+
+import {
+  defaultProps, formatDateTimeAgo, oneUserAccountRequestsApproved, oneUserAccountRequestsPending,
+  userAccountRequestsApproved, userAccountRequestsRejectedWithPending
+} from "./DisplayUserDetailsAccountRecovery.test.data";
+import DisplayUserDetailsAccountRecoveryPage from "./DisplayUserDetailsAccountRecovery.test.page";
+import HandleReviewAccountRecoveryRequestWorkflow from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
+
+/**
+ * Unit tests on DisplayUserDetailsAccountRecovery in regard of specifications
+ */
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See account recovery", () => {
+  let page; // The page to test against
+
+  describe(' As LU I can see user account recovery requests during pending', () => {
+    const userWithPending = {
+      userWorkspaceContext: {
+        details: {
+          user: {
+            id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+            pending_account_recovery_request: {"status": "pending"}
+          }
+        }
+      }
+    };
+    const props = defaultProps(userWithPending); // The props to pass
+
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+    it('I should see the user account recovery request during pending status', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(oneUserAccountRequestsPending));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.title).toBe('Account recovery');
+      expect(page.currentStatus).toBe('Current status');
+      expect(page.currentStatusButton.textContent).toBe('Review');
+      expect(page.previousRecoveryRequest).toBe('Never');
+      expect(page.numberOfRecovery).toBe('1');
+    });
+
+    it('I should see the user account recovery previous request during pending status', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(userAccountRequestsRejectedWithPending));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.currentStatus).toBe('Current status');
+      expect(page.currentStatusButton.textContent).toBe('Review');
+      expect(page.previousRecoveryRequest).toBe(`Rejected ${formatDateTimeAgo(userAccountRequestsRejectedWithPending[1].created)}`);
+      expect(page.numberOfRecovery).toBe('2');
+    });
+
+    it('I should review the user account recovery request during pending status', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(oneUserAccountRequestsPending));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.currentStatusButton.textContent).toBe('Review');
+      await page.reviewAccountRecovery();
+      const accountRecoveryRequestId = props.userWorkspaceContext.details.user.pending_account_recovery_request.id;
+      expect(props.workflowContext.start).toHaveBeenLastCalledWith(HandleReviewAccountRecoveryRequestWorkflow, {accountRecoveryRequestId});
+    });
+  });
+
+  describe(' As LU I can see user account recovery requests', () => {
+    const props = defaultProps(); // The props to pass
+
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+
+    it('I should see the user account recovery request', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(oneUserAccountRequestsApproved));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.currentStatusButton).toBeNull();
+      expect(page.previousRecoveryRequest).toBe('Approved 1 year ago');
+      expect(page.numberOfRecovery).toBe('1');
+    });
+
+    it('I should see the user account recovery previous request', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(userAccountRequestsApproved));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.title).toBe('Account recovery');
+      expect(page.currentStatusButton).toBeNull();
+      expect(page.previousRecoveryRequest).toBe(`Approved ${formatDateTimeAgo(userAccountRequestsApproved[1].created)}`);
+      expect(page.numberOfRecovery).toBe('2');
+    });
+
+    it('I should see user account recovery request with 0 request', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve([]));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.title).toBe('Account recovery');
+      expect(page.currentStatusButton).toBeNull();
+      expect(page.previousRecoveryRequest).toBe('Never');
+      expect(page.numberOfRecovery).toBe('0');
+    });
+  });
+
+  describe(' As LU I see a loading state when the activity are not loaded', () => {
+    let findResolve;
+    const loadingFindMockImpl = jest.fn(() => new Promise(resolve => {
+      findResolve = resolve;
+    }));
+    const props = defaultProps(); // The props to pass
+
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+
+    beforeEach(() => {
+      mockContextRequest(loadingFindMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+    });
+
+    it('I should see the loading message “Retrieving account recovery”', async() => {
+      await page.toggleCollapse();
+
+      const inProgressFn = () => {
+        expect(page.isLoading()).toBeTruthy();
+        findResolve([]);
+      };
+      await page.waitForLoading(inProgressFn);
+      expect(page.isLoading()).toBeFalsy();
+    });
+  });
+});

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.page.js

@@ -0,0 +1,113 @@
+/**
+ * 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 DisplayUserDetailsAccountRecovery from "./DisplayUserDetailsAccountRecovery";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The DisplayUserDetailsAccountRecoveryPage component represented as a page
+ */
+export default class DisplayUserDetailsAccountRecoveryPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <DisplayUserDetailsAccountRecovery {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the current status label
+   */
+  get currentStatus() {
+    return this._page.container.querySelector('.pending-request-status .label').textContent;
+  }
+
+  /**
+   * Returns the current status button
+   */
+  get currentStatusButton() {
+    return this._page.container.querySelector('.pending-request-status a');
+  }
+
+
+  /**
+   * Returns the previous recovery request value
+   */
+  get previousRecoveryRequest() {
+    return this._page.container.querySelector('.previous-request .value').textContent;
+  }
+
+  /**
+   * Returns the number of request value
+   */
+  get numberOfRecovery() {
+    return this._page.container.querySelector('.requests-count .value').textContent;
+  }
+
+  /**
+   * Returns true if the component is in a collapsed mode
+   */
+  get title() {
+    return this._page.container.querySelector('h4 a').textContent;
+  }
+
+  /**
+   * Returns the loading element
+   */
+  get loadingMessage() {
+    return this._page.container.querySelector('.processing-text');
+  }
+
+  /**
+   * Returns true
+   */
+  isLoading() {
+    return this.loadingMessage !== null && this.loadingMessage.innerHTML === 'Retrieving account recovery';
+  }
+
+  /**
+   * Toggle the collapse / expand component behavior
+   */
+  async toggleCollapse() {
+    const element = this._page.container.querySelector('h4 a');
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Wait for the activities to be loaded while an in-progress function should be satisfied
+   * @param inProgressFn An in-progress function
+   * @returns {Promise<void>} The promise that the load operation is completed
+   */
+  async waitForLoading(inProgressFn) {
+    await waitFor(inProgressFn);
+  }
+
+  /**
+   * Review account recovery
+   */
+  async reviewAccountRecovery() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.currentStatusButton, leftClick);
+    await waitFor(() => {});
+  }
+}

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.stories.js

@@ -0,0 +1,142 @@
+/**
+ * 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 MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayUserDetailsAccountRecovery from "./DisplayUserDetailsAccountRecovery";
+import {
+  defaultProps, oneUserAccountRequestsApproved, oneUserAccountRequestsPending,
+  userAccountRequestsApproved, userAccountRequestsApprovedWithPending,
+  userAccountRequestsRejected, userAccountRequestsRejectedWithPending
+} from "./DisplayUserDetailsAccountRecovery.test.data";
+
+export default {
+  title: 'Passbolt/UserDetails/DisplayUserDetailsAccountRecovery',
+  component: DisplayUserDetailsAccountRecovery
+};
+
+const Template = args =>
+  <MockTranslationProvider>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserDetailsAccountRecovery {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
+      </div>
+    </div>
+  </MockTranslationProvider>;
+
+const contextWithLoadingRequest = {
+  context: {
+    port: {}
+  }
+};
+export const Loading = Template.bind({});
+Loading.args = defaultProps(contextWithLoadingRequest);
+
+const contextWithNoAccountRecoveryRequest = {
+  context: {
+    port: {
+      request: () => []
+    }
+  }
+};
+export const NoAccountRecovery = Template.bind({});
+NoAccountRecovery.args = defaultProps(contextWithNoAccountRecoveryRequest);
+
+const contextWithPreviousApproved = {
+  context: {
+    port: {
+      request: () => userAccountRequestsApproved
+    }
+  }
+};
+export const AccountRecoveryApproved = Template.bind({});
+AccountRecoveryApproved.args = defaultProps(contextWithPreviousApproved);
+
+const contextWithPreviousRejected = {
+  context: {
+    port: {
+      request: () => userAccountRequestsRejected
+    }
+  }
+};
+export const AccountRecoveryRejected = Template.bind({});
+AccountRecoveryRejected.args = defaultProps(contextWithPreviousRejected);
+
+const contextWithPreviousApprovedAndPending = {
+  context: {
+    port: {
+      request: () => userAccountRequestsApprovedWithPending
+    }
+  },
+  userWorkspaceContext: {
+    details: {
+      user: {
+        id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+        pending_account_recovery_request: {"status": "pending"}
+      }
+    }
+  }
+};
+export const AccountRecoveryApprovedWithPending = Template.bind({});
+AccountRecoveryApprovedWithPending.args = defaultProps(contextWithPreviousApprovedAndPending);
+
+const contextWithPreviousRejectedAndPending = {
+  context: {
+    port: {
+      request: () => userAccountRequestsRejectedWithPending
+    }
+  },
+  userWorkspaceContext: {
+    details: {
+      user: {
+        id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+        pending_account_recovery_request: {"status": "pending"}
+      }
+    }
+  }
+};
+export const AccountRecoveryRejectedWithPending = Template.bind({});
+AccountRecoveryRejectedWithPending.args = defaultProps(contextWithPreviousRejectedAndPending);
+
+const contextWithOnePending = {
+  context: {
+    port: {
+      request: () => oneUserAccountRequestsPending
+    }
+  },
+  userWorkspaceContext: {
+    details: {
+      user: {
+        id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+        pending_account_recovery_request: {"status": "pending"}
+      }
+    }
+  }
+};
+export const AccountRecoveryWithOneRequestPending = Template.bind({});
+AccountRecoveryWithOneRequestPending.args = defaultProps(contextWithOnePending);
+
+const contextWithOneRequest = {
+  context: {
+    port: {
+      request: () => oneUserAccountRequestsApproved
+    }
+  }
+};
+export const AccountRecoveryWithOneRequest = Template.bind({});
+AccountRecoveryWithOneRequest.args = defaultProps(contextWithOneRequest);
+