test and fixes for ca forms and modals (#27381)

For #26606

Test and fixes for CA forms

---------

Co-authored-by: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
This commit is contained in:
Gabriel Hernandez 2025-03-21 15:00:30 +00:00 committed by GitHub
parent e7e9f54071
commit 174c389aae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 277 additions and 10 deletions

View file

@ -0,0 +1,70 @@
import React from "react";
import { noop } from "lodash";
import { render, screen } from "@testing-library/react";
import { createCustomRenderer, renderWithSetup } from "test/test-utils";
import createMockConfig from "__mocks__/configMock";
import AddCertAuthorityModal from "./AddCertAuthorityModal";
describe("AddCertAuthorityModal", () => {
it("renders the Digicert form by default", () => {
render(<AddCertAuthorityModal onExit={noop} />);
expect(screen.getByLabelText("Name")).toBeVisible();
expect(screen.getByLabelText("URL")).toBeVisible();
expect(screen.getByLabelText("API token")).toBeVisible();
expect(screen.getByLabelText("Profile GUID")).toBeVisible();
expect(screen.getByLabelText("Certificate common name (CN)")).toBeVisible();
expect(screen.getByLabelText("User principal name (UPN)")).toBeVisible();
expect(screen.getByLabelText("Certificate seat ID")).toBeVisible();
});
it("shows the correct form when the corresponding value in the dropdown is selected.", async () => {
const { user } = renderWithSetup(<AddCertAuthorityModal onExit={noop} />);
// this is selecting the custom scep option from the dropdown
await user.click(screen.getByRole("combobox"));
await user.click(
screen.getByRole("option", {
name: "Custom (SCEP: Simple Certificate Enrollment Protocol)",
})
);
expect(screen.getByLabelText("Name")).toBeVisible();
expect(screen.getByLabelText("SCEP URL")).toBeVisible();
expect(screen.getByLabelText("Challenge")).toBeVisible();
});
it("does not allow NDES option to be selected if there is already an NDES CA added", async () => {
const customRender = createCustomRenderer({
context: {
app: {
config: createMockConfig({
integrations: {
zendesk: [],
jira: [],
ndes_scep_proxy: {
url: "https://ndes.example.com",
admin_url: "https://ndes.example.com/admin",
username: "ndes_user",
password: "ndes_password",
},
},
}),
},
},
});
const { user } = customRender(<AddCertAuthorityModal onExit={noop} />);
// testing library does not see options when it is disabled
// so we can just check that its not queryable to confirm that it is disabled
await user.click(screen.getByRole("combobox"));
expect(
screen.queryByRole("option", {
name: "Microsoft NDES (Network Device Enrollment Service)",
})
).toBeNull();
});
});

View file

@ -0,0 +1,65 @@
import React from "react";
import { noop } from "lodash";
import { render, screen } from "@testing-library/react";
import { renderWithSetup } from "test/test-utils";
import CustomSCEPForm, { ICustomSCEPFormData } from "./CustomSCEPForm";
const createTestFormData = (overrides?: Partial<ICustomSCEPFormData>) => ({
name: "TEST_NAME",
scepURL: "https://test.com",
challenge: "test-challenge",
...overrides,
});
describe("CustomSCEPForm", () => {
it("render the custom button text", () => {
render(
<CustomSCEPForm
formData={createTestFormData()}
isSubmitting={false}
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
expect(screen.getByRole("button", { name: "Submit" })).toBeVisible();
});
it("enables and disabled form submittion depending on the form validation", async () => {
const { user } = renderWithSetup(
<CustomSCEPForm
formData={createTestFormData()}
isSubmitting={false}
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
// data is valid, submit should be enabled
expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled();
// name input is invalidated, submit should be disabled
await user.clear(screen.getByLabelText("Name"));
expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
});
it("disables submit when isSubmitting is set to true", () => {
render(
<CustomSCEPForm
formData={createTestFormData()}
isSubmitting
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
});
});

View file

@ -52,9 +52,9 @@ const CustomSCEPForm = ({
const [
formValidation,
setFormValidation,
] = useState<ICustomSCEPFormValidation>({
isValid: false,
});
] = useState<ICustomSCEPFormValidation>(() =>
validateFormData(formData, validations)
);
const { name, scepURL, challenge } = formData;

View file

@ -0,0 +1,69 @@
import React from "react";
import { noop } from "lodash";
import { render, screen } from "@testing-library/react";
import { renderWithSetup } from "test/test-utils";
import DigicertForm, { IDigicertFormData } from "./DigicertForm";
const createTestFormData = (overrides?: Partial<IDigicertFormData>) => ({
name: "TEST_NAME",
url: "https://test.com",
apiToken: "test-api-123",
profileId: "test-id-123",
commonName: "test-common",
userPrincipalName: "test-principal",
certificateSeatId: "test-seat-123",
...overrides,
});
describe("DigicertForm", () => {
it("render the custom button text", () => {
render(
<DigicertForm
formData={createTestFormData()}
isSubmitting={false}
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
expect(screen.getByRole("button", { name: "Submit" })).toBeVisible();
});
it("enables and disables form submission depending on the form validation", async () => {
const { user } = renderWithSetup(
<DigicertForm
formData={createTestFormData()}
isSubmitting={false}
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
// data is valid, submit should be enabled
expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled();
// name input is invalidated, submit should be disabled
await user.clear(screen.getByLabelText("Name"));
expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
});
it("disables submit when isSubmitting is set to true", () => {
render(
<DigicertForm
formData={createTestFormData()}
isSubmitting
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
});
});

View file

@ -52,9 +52,7 @@ const DigicertForm = ({
);
const [formValidation, setFormValidation] = useState<IDigicertFormValidation>(
{
isValid: false,
}
() => validateFormData(formData, validations)
);
const {

View file

@ -0,0 +1,66 @@
import React from "react";
import { noop } from "lodash";
import { render, screen } from "@testing-library/react";
import { renderWithSetup } from "test/test-utils";
import NDESForm, { INDESFormData } from "./NDESForm";
const createTestFormData = (overrides?: Partial<INDESFormData>) => ({
scepURL: "https://test.com",
adminURL: "https://test.com",
username: "test user",
password: "password123",
...overrides,
});
describe("NDESForm", () => {
it("render the custom button text", () => {
render(
<NDESForm
formData={createTestFormData()}
isSubmitting={false}
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
expect(screen.getByRole("button", { name: "Submit" })).toBeVisible();
});
it("enables and disables form submission depending on the form validation", async () => {
const { user } = renderWithSetup(
<NDESForm
formData={createTestFormData()}
isSubmitting={false}
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
// data is valid, submit should be enabled
expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled();
// name input is invalidated, submit should be disabled
await user.clear(screen.getByLabelText("SCEP URL"));
expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
});
it("disables submit when isSubmitting is set to true", () => {
render(
<NDESForm
formData={createTestFormData()}
isSubmitting
submitBtnText="Submit"
onChange={noop}
onSubmit={noop}
onCancel={noop}
/>
);
expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
});
});

View file

@ -35,9 +35,9 @@ const NDESForm = ({
onSubmit,
onCancel,
}: INDESFormProps) => {
const [formValidation, setFormValidation] = useState<INDESFormValidation>({
isValid: false,
});
const [formValidation, setFormValidation] = useState<INDESFormValidation>(
() => validateFormData(formData)
);
const { scepURL, adminURL, username, password } = formData;

View file

@ -154,7 +154,6 @@ export const createCustomRenderer = (renderOptions?: ICustomRenderOptions) => {
* This is a convenince method that calls the render method from `@testing-library/react` and also
* sets up the also `user-events`library and adds the user object to the returned object.
*/
// eslint-disable-next-line import/prefer-default-export
export const renderWithSetup = (component: JSX.Element) => {
return {
user: userEvent.setup(),