passbolt-styleguide/src/react-quickaccess/components/PassphraseDialog/PassphraseDialog.test.js

Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.

import React from "react";
import {render, fireEvent, cleanup} from '@testing-library/react';
import PassphraseDialog from "./PassphraseDialog";
import MockTranslationProvider
  from "../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider";
import UserSettings from "../../../shared/lib/Settings/UserSettings";
import userSettingsFixture from "../../../react-extension/test/fixture/Settings/userSettings";
import {waitFor} from "@testing-library/dom";

// Reset the modules before each test.
beforeEach(() => {
  jest.resetModules();
});

// Cleanup after each test.
afterEach(cleanup);

describe("PassphraseDialog", () => {
  it("should execute the onComplete prop function when the passphrase is correct", async() => {
    const onComplete = jest.fn();
    const appContext = {
      userSettings: new UserSettings(userSettingsFixture),
    };
    const component = render(
      <MockTranslationProvider>
        <PassphraseDialog debug context={appContext} onComplete={onComplete} />
      </MockTranslationProvider>
    );
    // mock the passbolt messaging layer.
    appContext.port = {
      emit: () => new Promise(resolve => resolve()),
      request: () => new Promise(resolve => resolve())
    };

    // Fill the passphrase input.
    const passphraseInput = component.container.querySelector('[name="passphrase"]');
    const event = {target: {value: "admin@passbolt.com"}};
    fireEvent.change(passphraseInput, event);

    // Click on submit.
    const submitButton = component.container.querySelector('button[type="submit"]');
    fireEvent.click(submitButton, {button: 0});

    await waitFor(() => {});
    expect(onComplete).toHaveBeenCalled();
  });
});