Version 2: Add tests for certificate creation components (#185)

* feat: init v2 strcucture * feat(deps): add "craco" to resolve global "crypto" use * feat: add basic connection * feat: use Vite instead of CRA * Version 2 (#101) * Update vite to latest * Update react to latest * Change app structure * Add ThemeProvider * Add FetchingStatusOwerlay component * Add i18n * Add CertificatesProvidersList * Add clsx & scss * Add theme colors * Add table's components * Components refactoring * Rename app providers component * Add CertificatesList component * add post css & autoprefixer * add postcss config * Add Certificates Layout * Improve app sidebar * Fix theme * Refactor app structure * Add vite-plugin-svgr * Add vite-plugin-svgr types * Add --pv-border-radius-base * Style providers list component * Fix contact suport url * Add ESLint & Prettier * Add empty state to CertificatesList * Add empty state to CertificatesProvidersList * Fix body font-family duplication * Rename getCertificatesByProviderId to handleProviderChange * Remove i18next-icu * Improve CertificatesProvidersList accessibility * Use Typography in CertificatesProvidersListItem * Local imports should be at the very bottom * Let's make options non-optional in CertificatesProvidersListItem * Don't use object destructuring in function arguments * Let's remove commented code in App component * Use Typography in CertificatesList empty state * Let's make options non-optional in CertificatesList * Add sticky filters and sticky table header * Table missed type icon identifier * Add actions menu to CertificatesList * Change build dir * Add Date component * Add CertificateName component * Add CertificateSerialNumber component * Fix CertificatesProvidersList labels * Fix sidebar footer labels * Fix CertificatesProvidersList items gap & selected bg * Truncate long provider name * Fix providers list scroll * Remove optional from providers prop * FetchingStatusOwerlay refactoring * Improve table row shadow * Update packages * The table header and body text are not aligned vertically * Fix sidebar contact box size * Row table text is not aligned horizontally * The certificates list table has not equal padding * Fix providers list scrollbar * Add CertificatesTopbar --------- Co-authored-by: alex-slobodian <[email protected]> * Add storybook (#121) Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add certificate viewer (#123) * Add CertificateViewer * Fix certificate viewer dialog width * Fix certificate viewer dialog content padding * Make certificate prop as required dependency in CertificateViewerDialog * Fix certificate viewer dialog width --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Style fetching statuses (#124) * Add styles to FetchingStatusOwerlay * Fix FetchingStatus dialog width --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add delete certificate dialog (#130) * Create CertificateDeleteButton component * Create CertificateDeleteButton component * Create CertificateDeleteDialog * Add delete dialog to certificates list * Fix after merge * Improve Delete button in certificates list * Improve CertificateDeleteDialog * Fix CertificatesList action menu items gap * Fix CertificateDeleteDialog loading state * Fix CertificateDeleteDialog title * Improve accessibility for CertificatesList * Fix naming --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add Certificate creation menu (#136) * Add Certificate creation menu * Fix types --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add Certificate download button (#138) * Add Certificate download button * Fix file name * Fix downloadCertificate * Use downloadFromBuffer method * Fix downloadCertificate --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add Certificate copy button (#142) * Add Copy button component * Fix Copy button component * Add copyCertificate method * Fix naming * Add copy button to list --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add Vitest (#143) * Add vitest * fix vite config * Fix config --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add ci (#145) * Add ci * Fix ci * setup-node * Fix setup-node * chore(ci): enable caching --------- Co-authored-by: alex-slobodian <[email protected]> Co-authored-by: donskov <[email protected]> * Version 2: Add import certificate dialog (#132) * Add CertificatesProvidersSelectList component * Add CertificateImportDialog component * Certificate Import Dialog open/close * Add file drop zone * Styles drop zone * Certificate processing * Fix certificate processing * Add actions * Fix title border * Fix styles * Fix drop zone styles & behaviour * Fix styles * Fix dialog title * Fix CertificatesProvidersSelectList style * Add useCertificateImportDialog * Fix provider selection * Fix provider select popover * Fix upload certificate * Lock fix --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Improve provider list (#147) * Improve providers list accessibility * Add loading skeleton * Add loading to app --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Create Certificate creation Dialog (#144) * Add CertificateTypeSelect component * Add KeyUsagesCheckboxGroup component * Add CountrySelect component * Fix naming * Add CertificateKeyPropertiesSelect * Add CertificateCreateDialog layout * Add CertificateTypeSelect to dialog * Fix CertificateTypeSelect * Add type selection * Add Card component * Add CertificateCreateByEmail block * Fix text field requrid styles * Add CertificateCreateByCname block * Add CertificateAlgorithmInfo component * Add CertificateCreateByCustom component * Add more fields CertificateCreateByCustom component * Add CertificateCreateByCustom to CertificateCreateDialog * Add useCertificateCreateDialog * Fix useCertificateCreateDialog * Fix useCertificateCreateDialog * Fix useCertificateCreateDialog * Fix dialog content width * Add create dialog to app * Fix Certificate Algorithm * Add type onCreate * Fix types * Add certificateSubjectToString method * Fix scroll in provider list * Fix overscroll behavior * Add scroll lock for import & create dialogs * Fix certificateKeyUsageExtensions * Fix form * Fix CertificateTypeSelect styles * Fix CertificateCreateDialog * Fix forms & validations * Fix CertificateCreateByCname * Fix CertificateCreateByEmail * Fix CertificateCreateByCustom * Fix ExtendedKeyUsages --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Improve certificate delete dialog (#151) * Add useCertificateDeleteDialog * Fix Certificate Delete Dialog --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add App error boundary (#148) * Add app error boundary * Fix sorting of imports * Move to react-error-boundary package --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add missed stories to storybook (#153) * Add CertificatesSidebar stories * Add CertificateName stories * Add CertificateSerialNumber stories * Add CertificateTypeLabel stories * Add Date stories --------- Co-authored-by: alex-slobodian <[email protected]> * Remove general block (#156) Co-authored-by: alex-slobodian <[email protected]> * Version2: Add sorting to certificate list (#146) * Add SortButton component * Add sorting to certificate list * Fix sort title direction change * Fix sort button focus * Fix sort button focus * Add serch params for sorting * Fix SortButton disabled --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add certificate creation logic (#149) * Add certificate creation logic * Fixed useCertificateCreateDialog * Fix set ProviderId * Fix algorithm props * Fix algorithm props --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Remove certificate logic (#152) * Remove certificate logic * Rewfactoring useCertificateDeleteDialog * Fix handleOpen * Add list refresh after remove * Fix dialog render --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Certificates list improvements (#158) * Add HighlightedText component * Add highlight to CertificateName * Add highlighted text for certificate name in CertificatesList * Add CertificatesListLoading * Add CertificatesListLoading * Add Empty Search to CertificatesList --------- Co-authored-by: alex-slobodian <[email protected]> * Fix search input (#160) Co-authored-by: alex-slobodian <[email protected]> * Uppdate @peculiar packages (#162) Co-authored-by: alex-slobodian <[email protected]> * Version 2: Fix certificate import dialog (#150) * Fix Certificate Import Dialog * Improve certificate converter * Delete extra convertation --------- Co-authored-by: alex-slobodian <[email protected]> * Add import logic (#164) Co-authored-by: alex-slobodian <[email protected]> * Fix providers list readonly label (#165) Co-authored-by: alex-slobodian <[email protected]> * Fix copy certificate (#169) Co-authored-by: alex-slobodian <[email protected]> * Version2: Add certificate search logic (#167) * Add certificate search logic * Fix useSearch * Fix search input * Fix search input state --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Update packages (#170) * Update storybook * Update vite * Update vitest * Update vitest coverage * Update i18next * Update postcss & sass * Update prettier * Update typescript & eslint * Update @peculiar/react-components --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add certificate viewer dialog hook (#171) * Add certificate viewer dialog hook * Merge branch 'donskov/v2' into aslobodian/v2-certificate-viewer-dialog-hook * Merge branch 'donskov/v2' into aslobodian/v2-certificate-viewer-dialog-hook * Fix CertificatesList loading --------- Co-authored-by: alex-slobodian <[email protected]> * Version 2: Fix certificate name (label) (#174) * Fix certificate name (label) * Fix search * Fix CertificateViewerDialog title * Fix certificateName for list actions --------- Co-authored-by: alex-slobodian <[email protected]> * Add ExtendedKeyUsage for certificate creation (#172) Co-authored-by: alex-slobodian <[email protected]> * Version 2: Fix readme logo (#180) * Fix readme logo * Fix readme logo --------- Co-authored-by: alex-slobodian <[email protected]> * Fix certificate import dialog close (#179) Co-authored-by: alex-slobodian <[email protected]> * Add cerificates sorting by type (#181) Co-authored-by: alex-slobodian <[email protected]> * Version 2: Add gh-pages (#184) * Add gh-pages * fix deploy comand --------- Co-authored-by: alex-slobodian <[email protected]> * Add test for CertificateCreateByCname component * Add test for CertificateCreateByEmail component * Add test for CertificateCreateByCustom component * Fix test for CertificateCreateByCname component * Fix test for CertificateCreateByEmail component * Add test for CertificateCreateDialog component * Add CSR type test for CertificateCreateByCustom component * Add test for useCertificateCreateDialog hook * Fix unused async * Remove render * Add test for loading in CertificateCreateDialog component * Add test for CertificatesProvidersSelectList component * Add test for CertificateTypeSelect component * Add test for CertificateKeyPropertiesSelect component * Add test for KeyUsagesCheckboxGroup component * Add globals * Remove cleanup * Fix test useCertificateCreateDialog hook * Fix test KeyUsagesCheckboxGroup * Fix test CertificateTypeSelect * Fix test CertificateKeyPropertiesSelect * Version 2: Update packages (#191) * Update vite to v.5.4.2 * Update vite-tsconfig-paths to v.5.0.1 * Update typescript to v.5.5.4 * Update storybook to v.8.2.9 * Update @types/react to v.18.3.4 * Update eslint to v.9.9.1 * Update eact-use to v.17.5.1 * Update i18next to v.23.14.0 & react-i18next to v.15.0.1 * Update postcss to v.8.4.41 & react-autoprefixer to v.10.4.20 * Update vitest to v.2.0.5 * Update @peculiar/x509 to v.1.12.1 * Update @peculiar/react-components to v.0.6.4 * Update @peculiar/fortify-webcomponents-react to v.4.0.7 --------- Co-authored-by: alex-slobodian <[email protected]> * Fix tests * Fix tests * Fix tests * Add svgr to tests config * Fix tests --------- Co-authored-by: donskov <[email protected]> Co-authored-by: alex-slobodian <[email protected]>
PeculiarVentures · Sep 17, 2024 · 7b15031 · 7b15031
1 parent a029086
commit 7b15031
Show file tree

Hide file tree

Showing 14 changed files with 855 additions and 8 deletions.
diff --git a/src/components/certificate-create-by-cname/CertificateCreateByCname.test.tsx b/src/components/certificate-create-by-cname/CertificateCreateByCname.test.tsx
@@ -0,0 +1,38 @@
+import { render, vi, userEvent, screen } from "@testing";
+import { CertificateCreateByCname } from "./CertificateCreateByCname";
+
+describe("<CertificateCreateByCname />", () => {
+  const createDataResult = {
+    subject: { CN: "example.com" },
+    algorithm: { hash: "SHA-256", signature: "EC-P256" },
+    type: "x509",
+  };
+
+  it("Should render & submit", async () => {
+    const onCreateButtonClickMock = vi.fn((data) => data);
+
+    render(
+      <CertificateCreateByCname
+        type="x509"
+        onCreateButtonClick={onCreateButtonClickMock}
+      />
+    );
+
+    const buttonElement = screen.getByRole("button", {
+      name: "Create certificate",
+    });
+    expect(buttonElement).toBeDisabled();
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Common name",
+      }),
+      createDataResult.subject.CN
+    );
+
+    await userEvent.click(buttonElement);
+
+    expect(onCreateButtonClickMock).toBeCalledTimes(1);
+    expect(onCreateButtonClickMock).toHaveReturnedWith(createDataResult);
+  });
+});
diff --git a/src/components/certificate-create-by-custom/CertificateCreateByCustom.test.tsx b/src/components/certificate-create-by-custom/CertificateCreateByCustom.test.tsx
@@ -0,0 +1,164 @@
+import { render, vi, userEvent, screen } from "@testing";
+import { CertificateCreateByCustom } from "./CertificateCreateByCustom";
+
+describe("<CertificateCreateByCustom />", () => {
+  it("Should render & submit", async () => {
+    const createDataResult = {
+      subject: {
+        CN: "company.com",
+        E: "[email protected]",
+        O: "Company",
+        OU: "Company unit",
+        L: "New York",
+        ST: "Albany County",
+        C: "US",
+      },
+      extendedKeyUsages: ["1.3.6.1.5.5.7.3.3"],
+      algorithm: {
+        hash: "SHA-512",
+        signature: "EC-P521",
+      },
+      type: "x509",
+    };
+    const onCreateButtonClickMock = vi.fn((data) => data);
+
+    render(
+      <CertificateCreateByCustom
+        type="x509"
+        onCreateButtonClick={onCreateButtonClickMock}
+      />
+    );
+
+    // Subject section
+
+    expect(screen.getByText("Subject")).toBeInTheDocument();
+
+    const buttonElement = screen.getByRole("button", {
+      name: "Create certificate",
+    });
+    expect(buttonElement).toBeDisabled();
+
+    // Common name
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Common name",
+      }),
+      createDataResult.subject.CN
+    );
+
+    expect(buttonElement).toBeDisabled();
+
+    // Email
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Email address",
+      }),
+      createDataResult.subject.E
+    );
+
+    expect(buttonElement).toBeEnabled();
+
+    // Organization
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Organization",
+      }),
+      createDataResult.subject.O
+    );
+
+    // Organization unit
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Organization unit",
+      }),
+      createDataResult.subject.OU
+    );
+
+    // Country
+
+    await userEvent.click(
+      screen.getByRole("combobox", {
+        name: "Country",
+      })
+    );
+
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("United States"));
+
+    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
+
+    // Locality
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Locality",
+      }),
+      createDataResult.subject.L
+    );
+
+    // State
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "State",
+      }),
+      createDataResult.subject.ST
+    );
+
+    // Extended key usages section
+
+    expect(screen.getByText("Extended key usages")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("Code signing"));
+
+    // Key properties
+
+    expect(screen.getByText("Key properties")).toBeInTheDocument();
+
+    // Signature Algorithm
+
+    await userEvent.click(
+      screen.getByRole("combobox", {
+        name: "Signature Algorithm",
+      })
+    );
+
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("EC-P521"));
+
+    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
+
+    // Hash Algorithm
+
+    await userEvent.click(
+      screen.getByRole("combobox", {
+        name: "Hash Algorithm",
+      })
+    );
+
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText("SHA-512"));
+
+    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
+
+    await userEvent.click(buttonElement);
+
+    expect(onCreateButtonClickMock).toBeCalledTimes(1);
+    expect(onCreateButtonClickMock).toHaveReturnedWith(createDataResult);
+  });
+
+  it("Should render CSR type", async () => {
+    render(
+      <CertificateCreateByCustom type="csr" onCreateButtonClick={vi.fn()} />
+    );
+
+    expect(screen.queryByText("Extended key usages")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/certificate-create-by-email/CertificateCreateByEmail.test.tsx b/src/components/certificate-create-by-email/CertificateCreateByEmail.test.tsx
@@ -0,0 +1,62 @@
+import { render, vi, userEvent, screen } from "@testing";
+import { CertificateCreateByEmail } from "./CertificateCreateByEmail";
+
+describe("<CertificateCreateByEmail />", () => {
+  it("Should render & submit", async () => {
+    const emailValue = "[email protected]";
+    const createDataResult = {
+      subject: { CN: emailValue, E: emailValue },
+      algorithm: { hash: "SHA-256", signature: "EC-P256" },
+      type: "x509",
+    };
+    const onCreateButtonClickMock = vi.fn((data) => data);
+
+    render(
+      <CertificateCreateByEmail
+        type="x509"
+        onCreateButtonClick={onCreateButtonClickMock}
+      />
+    );
+
+    const buttonElement = screen.getByRole("button", {
+      name: "Create certificate",
+    });
+    expect(buttonElement).toBeDisabled();
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Email address",
+      }),
+      createDataResult.subject.E
+    );
+
+    await userEvent.click(buttonElement);
+
+    expect(onCreateButtonClickMock).toBeCalledTimes(1);
+    expect(onCreateButtonClickMock).toHaveReturnedWith(createDataResult);
+  });
+
+  it("Should validate incorrect email", async () => {
+    render(
+      <CertificateCreateByEmail type="x509" onCreateButtonClick={vi.fn()} />
+    );
+
+    const buttonElement = screen.getByRole("button", {
+      name: "Create certificate",
+    });
+    expect(buttonElement).toBeDisabled();
+
+    await userEvent.type(
+      screen.getByRole("textbox", {
+        name: "Email address",
+      }),
+      "company"
+    );
+
+    expect(
+      screen.getByText("Please enter valid email address")
+    ).toBeInTheDocument();
+
+    expect(buttonElement).toBeDisabled();
+  });
+});