Merge pull request #496 from huwshimi/client-identity-form-tests

WD-17058 - chore(tests): add tests for client and identity forms
canonical · Dec 4, 2024 · 534d322 · 534d322
2 parents 11be37f + 4b3636d
commit 534d322
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 9 deletions.
diff --git a/ui/src/pages/clients/ClientForm/ClientForm.test.tsx b/ui/src/pages/clients/ClientForm/ClientForm.test.tsx
@@ -0,0 +1,70 @@
+import { screen } from "@testing-library/dom";
+import { render } from "@testing-library/react";
+import { faker } from "@faker-js/faker";
+import { Formik } from "formik";
+import userEvent from "@testing-library/user-event";
+
+import ClientForm from "./ClientForm";
+import { ClientFormTypes } from "./ClientForm";
+import { Label } from "./types";
+
+const initialValues = {
+  client_uri: "",
+  client_name: "",
+  grant_types: [],
+  response_types: [],
+  scope: "",
+  redirect_uris: [],
+  request_object_signing_alg: "",
+};
+
+test("submits field data", async () => {
+  const values = {
+    client_uri: faker.word.sample(),
+    client_name: faker.word.sample(),
+    scope: faker.word.sample(),
+    redirect_uris: [faker.word.sample()],
+    request_object_signing_alg: faker.word.sample(),
+  };
+  const onSubmit = vi.fn();
+  render(
+    <Formik<ClientFormTypes> initialValues={initialValues} onSubmit={onSubmit}>
+      {(formik) => (
+        <>
+          <ClientForm formik={formik} />
+          <button onClick={() => void formik.submitForm()}>Submit</button>
+        </>
+      )}
+    </Formik>,
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", { name: Label.NAME }),
+    values.client_name,
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", { name: Label.SCOPE }),
+    values.scope,
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", { name: Label.REDIRECT_URI }),
+    values.redirect_uris[0],
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", { name: Label.CLIENT_URI }),
+    values.client_uri,
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", { name: Label.SIGNING_ALGORITHM }),
+    values.request_object_signing_alg,
+  );
+  await userEvent.click(
+    screen.getByRole("checkbox", { name: "authorization_code" }),
+  );
+  await userEvent.click(screen.getByRole("checkbox", { name: "id_token" }));
+  await userEvent.click(screen.getByRole("button"));
+  expect(onSubmit.mock.calls[0][0]).toMatchObject({
+    ...values,
+    grant_types: ["authorization_code"],
+    response_types: ["id_token"],
+  });
+});
diff --git a/ui/src/pages/clients/ClientForm/ClientForm.tsx b/ui/src/pages/clients/ClientForm/ClientForm.tsx
@@ -2,6 +2,7 @@ import { FC } from "react";
 import { Form, Input } from "@canonical/react-components";
 import { FormikProps } from "formik";
 import CheckboxList from "components/CheckboxList";
+import { Label } from "./types";
 
 export interface ClientFormTypes {
   client_uri?: string;
@@ -32,7 +33,7 @@ const ClientForm: FC<Props> = ({ formik }) => {
         id="client_name"
         name="client_name"
         type="text"
-        label="Name"
+        label={Label.NAME}
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
         value={formik.values.client_name}
@@ -43,7 +44,7 @@ const ClientForm: FC<Props> = ({ formik }) => {
         id="scope"
         name="scope"
         type="text"
-        label="Scope"
+        label={Label.SCOPE}
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
         value={formik.values.scope}
@@ -54,7 +55,7 @@ const ClientForm: FC<Props> = ({ formik }) => {
         id="redirect_uris"
         name="redirect_uris"
         type="text"
-        label="Redirect uri"
+        label={Label.REDIRECT_URI}
         onBlur={formik.handleBlur}
         onChange={(e) =>
           void formik.setFieldValue("redirect_uris", [e.target.value])
@@ -69,7 +70,7 @@ const ClientForm: FC<Props> = ({ formik }) => {
         id="client_uri"
         name="client_uri"
         type="text"
-        label="Client uri"
+        label={Label.CLIENT_URI}
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
         value={formik.values.client_uri}
@@ -80,7 +81,7 @@ const ClientForm: FC<Props> = ({ formik }) => {
         id="request_object_signing_alg"
         name="request_object_signing_alg"
         type="text"
-        label="Signing algorithm"
+        label={Label.SIGNING_ALGORITHM}
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
         value={formik.values.request_object_signing_alg}
@@ -92,15 +93,15 @@ const ClientForm: FC<Props> = ({ formik }) => {
         required
       />
       <CheckboxList
-        label="Grant types"
+        label={Label.GRANT_TYPES}
         values={["authorization_code", "refresh_token"]}
         checkedValues={formik.values.grant_types ?? []}
         toggleValue={(value: string) =>
           toggle(formik.values.grant_types ?? [], "grant_types", value)
         }
       />
       <CheckboxList
-        label="Response types"
+        label={Label.RESPONSE_TYPES}
         values={["code", "id_token"]}
         checkedValues={formik.values.response_types ?? []}
         toggleValue={(value: string) =>

diff --git a/ui/src/pages/clients/ClientForm/types.ts b/ui/src/pages/clients/ClientForm/types.ts
@@ -0,0 +1,9 @@
+export enum Label {
+  NAME = "Name",
+  SCOPE = "Scope",
+  REDIRECT_URI = "Redirect uri",
+  CLIENT_URI = "Client uri",
+  SIGNING_ALGORITHM = "Signing algorithm",
+  GRANT_TYPES = "Grant types",
+  RESPONSE_TYPES = "Response types",
+}
diff --git a/ui/src/pages/identities/IdentityForm/IdentityForm.test.tsx b/ui/src/pages/identities/IdentityForm/IdentityForm.test.tsx
@@ -0,0 +1,57 @@
+import { screen } from "@testing-library/dom";
+import { faker } from "@faker-js/faker";
+import userEvent from "@testing-library/user-event";
+import { Formik } from "formik";
+
+import IdentityForm from "./IdentityForm";
+import { IdentityFormTypes } from "./IdentityForm";
+import { Label } from "./types";
+import MockAdapter from "axios-mock-adapter";
+import { axiosInstance } from "api/axios";
+import { mockSchema } from "test/mocks/schemas";
+import { renderComponent } from "test/utils";
+
+const mock = new MockAdapter(axiosInstance);
+
+const initialValues = {
+  email: "",
+  schemaId: "",
+};
+
+beforeEach(() => {
+  mock.reset();
+});
+
+test("submits field data", async () => {
+  const schemas = [mockSchema(), mockSchema()];
+  mock.onGet("/schemas?page_token=&page_size=50").reply(200, { data: schemas });
+  const values = {
+    email: faker.word.sample(),
+    schemaId: schemas[0].id,
+  };
+  const onSubmit = vi.fn();
+  renderComponent(
+    <Formik<IdentityFormTypes>
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+    >
+      {(formik) => (
+        <>
+          <IdentityForm formik={formik} />
+          <button onClick={() => void formik.submitForm()}>Submit</button>
+        </>
+      )}
+    </Formik>,
+  );
+  await userEvent.type(
+    screen.getByRole("textbox", { name: Label.EMAIL }),
+    values.email,
+  );
+  await screen.findByRole("option", { name: schemas[0].id });
+  await userEvent.selectOptions(
+    screen.getByRole("combobox", { name: Label.SCHEMA }),
+    values.schemaId,
+  );
+  await userEvent.click(screen.getByRole("button"));
+  expect(onSubmit.mock.calls[0][0]).toMatchObject(values);
+});
diff --git a/ui/src/pages/identities/IdentityForm/IdentityForm.tsx b/ui/src/pages/identities/IdentityForm/IdentityForm.tsx
@@ -4,6 +4,7 @@ import { FormikProps } from "formik";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchSchemas } from "api/schema";
+import { Label } from "./types";
 
 export interface IdentityFormTypes {
   schemaId: string;
@@ -31,7 +32,7 @@ const IdentityForm: FC<Props> = ({ formik }) => {
       <Input
         {...formik.getFieldProps("email")}
         type="text"
-        label="Email"
+        label={Label.EMAIL}
         error={formik.touched.email ? formik.errors.email : null}
       />
       <Select
@@ -44,7 +45,7 @@ const IdentityForm: FC<Props> = ({ formik }) => {
           },
           ...schemaOptions,
         ]}
-        label="Schema"
+        label={Label.SCHEMA}
         error={formik.touched.schemaId ? formik.errors.schemaId : null}
       />
     </Form>

diff --git a/ui/src/pages/identities/IdentityForm/types.ts b/ui/src/pages/identities/IdentityForm/types.ts
@@ -0,0 +1,4 @@
+export enum Label {
+  EMAIL = "Email",
+  SCHEMA = "Schema",
+}