Skip to content

Commit

Permalink
Merge pull request #1019 from syucream/fix/test-with-initial-values
Browse files Browse the repository at this point in the history
Improve some FE tests
  • Loading branch information
userlocalhost authored Dec 11, 2023
2 parents 29c146d + d433df5 commit 70bce5b
Show file tree
Hide file tree
Showing 11 changed files with 372 additions and 80 deletions.
11 changes: 11 additions & 0 deletions frontend/src/TestWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,14 @@ export const TestWrapper: FC<{ children: React.ReactNode }> = ({
</ThemeProvider>
);
};

export const TestWrapperWithoutRoutes: FC<{ children: React.ReactNode }> = ({
children,
}) => {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
<SnackbarProvider>{children}</SnackbarProvider>
</ThemeProvider>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe("BooleanAttributeValueField", () => {
name: "entity",
},
attrs: {
boolean: {
"0": {
type: EntryAttributeTypeTypeEnum.BOOLEAN,
index: 0,
isMandatory: false,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* @jest-environment jsdom
*/

import { EntryAttributeTypeTypeEnum } from "@dmm-com/airone-apiclient-typescript-fetch";
import { zodResolver } from "@hookform/resolvers/zod";
import { act, screen, render, renderHook } from "@testing-library/react";
import React from "react";
import { useForm } from "react-hook-form";

import { DateAttributeValueField } from "./DateAttributeValueField";
import { schema, Schema } from "./EntryFormSchema";

import { TestWrapper } from "TestWrapper";

import "@testing-library/jest-dom";

describe("DateAttributeValueField", () => {
const defaultValues: Schema = {
name: "entry",
schema: {
id: 1,
name: "entity",
},
attrs: {
"0": {
type: EntryAttributeTypeTypeEnum.DATE,
index: 0,
isMandatory: false,
schema: {
id: 1,
name: "date",
},
value: {
asString: "2020-01-01",
},
},
},
};

test("should provide date value editor", () => {
const {
result: {
current: { control, getValues, setValue },
},
} = renderHook(() =>
useForm<Schema>({
resolver: zodResolver(schema),
mode: "onBlur",
defaultValues,
})
);

render(
<DateAttributeValueField
attrId={0}
control={control}
setValue={setValue}
/>,
{
wrapper: TestWrapper,
}
);

expect(screen.getByRole("textbox")).toHaveValue("2020/01/01");
expect(getValues("attrs.0.value.asString")).toEqual("2020-01-01");

// Open the date picker
act(() => {
screen.getByRole("button").click();
});
// Select 2020-01-02
act(() => {
screen.getByRole("gridcell", { name: "2" }).click();
});

expect(screen.getByRole("textbox")).toHaveValue("2020/01/02");
expect(getValues("attrs.0.value.asString")).toEqual("2020-1-2");
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe("GroupAttributeValueField", () => {
name: "entity",
},
attrs: {
group: {
"0": {
type: EntryAttributeTypeTypeEnum.GROUP,
index: 0,
isMandatory: false,
Expand All @@ -44,7 +44,7 @@ describe("GroupAttributeValueField", () => {
asGroup: { id: 1, name: "group1" },
},
},
arrayGroup: {
"1": {
type: EntryAttributeTypeTypeEnum.ARRAY_GROUP,
index: 1,
isMandatory: false,
Expand All @@ -53,7 +53,12 @@ describe("GroupAttributeValueField", () => {
name: "array-group",
},
value: {
asArrayGroup: [],
asArrayGroup: [
{
id: 1,
name: "group1",
},
],
},
},
},
Expand Down Expand Up @@ -107,7 +112,11 @@ describe("GroupAttributeValueField", () => {
);
});

// TODO check the initial value, then trigger the change event and check the new value
expect(screen.getByRole("combobox")).toHaveValue("group1");
expect(getValues("attrs.0.value.asGroup")).toEqual({
id: 1,
name: "group1",
});

// Open the select options
act(() => {
Expand All @@ -119,7 +128,6 @@ describe("GroupAttributeValueField", () => {
});

expect(screen.getByRole("combobox")).toHaveValue("group2");

expect(getValues("attrs.0.value.asGroup")).toEqual({
id: 2,
name: "group2",
Expand Down Expand Up @@ -160,14 +168,11 @@ describe("GroupAttributeValueField", () => {
);
});

// Open the select options
act(() => {
screen.getByRole("button", { name: "Open" }).click();
});
// Select "group1" element
act(() => {
within(screen.getByRole("presentation")).getByText("group1").click();
});
expect(screen.getByRole("button", { name: "group1" })).toBeInTheDocument();
expect(getValues("attrs.1.value.asArrayGroup")).toEqual([
{ id: 1, name: "group1" },
]);

// Open the select options
act(() => {
screen.getByRole("button", { name: "Open" }).click();
Expand All @@ -179,7 +184,6 @@ describe("GroupAttributeValueField", () => {

expect(screen.getByRole("button", { name: "group1" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "group2" })).toBeInTheDocument();

expect(getValues("attrs.1.value.asArrayGroup")).toEqual([
{ id: 1, name: "group1" },
{ id: 2, name: "group2" },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe("ObjectAttributeValueField", () => {
name: "entity",
},
attrs: {
role: {
"0": {
type: EntryAttributeTypeTypeEnum.OBJECT,
index: 0,
isMandatory: false,
Expand All @@ -49,7 +49,7 @@ describe("ObjectAttributeValueField", () => {
asObject: { id: 1, name: "entry1" },
},
},
arrayObject: {
"1": {
type: EntryAttributeTypeTypeEnum.ARRAY_OBJECT,
index: 1,
isMandatory: false,
Expand All @@ -58,10 +58,15 @@ describe("ObjectAttributeValueField", () => {
name: "array-object",
},
value: {
asArrayObject: [],
asArrayObject: [
{
id: 1,
name: "entry1",
},
],
},
},
namedObject: {
"2": {
type: EntryAttributeTypeTypeEnum.NAMED_OBJECT,
index: 2,
isMandatory: false,
Expand All @@ -70,10 +75,16 @@ describe("ObjectAttributeValueField", () => {
name: "named-object",
},
value: {
asNamedObject: { name: "", object: null },
asNamedObject: {
name: "initial name",
object: {
id: 1,
name: "entry1",
},
},
},
},
arrayNamedObject: {
"3": {
type: EntryAttributeTypeTypeEnum.ARRAY_NAMED_OBJECT,
index: 3,
isMandatory: false,
Expand Down Expand Up @@ -132,7 +143,11 @@ describe("ObjectAttributeValueField", () => {
);
});

// TODO check the initial value, then trigger the change event and check the new value
expect(screen.getByRole("combobox")).toHaveValue("entry1");
expect(getValues("attrs.0.value.asObject")).toEqual({
id: 1,
name: "entry1",
});

// Open the select options
act(() => {
Expand All @@ -144,7 +159,6 @@ describe("ObjectAttributeValueField", () => {
});

expect(screen.getByRole("combobox")).toHaveValue("entry2");

expect(getValues("attrs.0.value.asObject")).toEqual({
id: 2,
name: "entry2",
Expand All @@ -154,6 +168,72 @@ describe("ObjectAttributeValueField", () => {

// TODO test array-object
// TODO current how to handle RHF state can be wrong, AutoComplete with multiple=true doesn't work with the empty initial value
test("should provide array-object value editor", async () => {
const {
result: {
current: { control, setValue, getValues },
},
} = renderHook(() =>
useForm<Schema>({
resolver: zodResolver(schema),
mode: "onBlur",
defaultValues,
})
);

/* eslint-disable */
jest
.spyOn(
require("../../../repository/AironeApiClientV2").aironeApiClientV2,
"getEntryAttrReferrals"
)
.mockResolvedValue(Promise.resolve(entries));
/* eslint-enable */

await act(async () => {
render(
<ObjectAttributeValueField
attrId={1}
control={control}
setValue={setValue}
multiple
/>,
{ wrapper: TestWrapper }
);
});

expect(screen.getByRole("button", { name: "entry1" })).toBeInTheDocument();
expect(getValues("attrs.1.value.asArrayObject")).toEqual([
{
id: 1,
name: "entry1",
},
]);

// Open the select options
act(() => {
screen.getByRole("button", { name: "Open" }).click();
});
// Select "role2" element
act(() => {
within(screen.getByRole("presentation")).getByText("entry2").click();
});

expect(screen.getByRole("button", { name: "entry1" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "entry2" })).toBeInTheDocument();
expect(getValues("attrs.1.value.asArrayObject")).toEqual([
{
id: 1,
name: "entry1",
_boolean: false,
},
{
id: 2,
name: "entry2",
_boolean: false,
},
]);
});

test("should provide named-object value editor", async () => {
const {
Expand Down Expand Up @@ -188,8 +268,12 @@ describe("ObjectAttributeValueField", () => {
);
});

expect(screen.getByRole("textbox")).toHaveValue("");
expect(screen.getByRole("combobox")).toHaveValue("");
expect(screen.getByRole("textbox")).toHaveValue("initial name");
expect(screen.getByRole("combobox")).toHaveValue("entry1");
expect(getValues("attrs.2.value.asNamedObject")).toEqual({
name: "initial name",
object: { id: 1, name: "entry1" },
});

// Edit name
act(() => {
Expand All @@ -203,19 +287,17 @@ describe("ObjectAttributeValueField", () => {
});
// Select "role1" element
act(() => {
within(screen.getByRole("presentation")).getByText("entry1").click();
within(screen.getByRole("presentation")).getByText("entry2").click();
});

expect(screen.getByRole("textbox")).toHaveValue("new name");
expect(screen.getByRole("combobox")).toHaveValue("entry1");

expect(screen.getByRole("combobox")).toHaveValue("entry2");
expect(getValues("attrs.2.value.asNamedObject")).toEqual({
name: "new name",
object: { id: 1, name: "entry1", _boolean: false },
object: { id: 2, name: "entry2", _boolean: false },
});
});

// TODO test array-named-object
test("should provide array-named-object value editor", async () => {
const {
result: {
Expand Down
Loading

0 comments on commit 70bce5b

Please sign in to comment.