Skip to content

Commit

Permalink
issue #234: tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@k-allagbe
k-allagbe committed Feb 10, 2025
1 parent 8aff473 commit 60379ad
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 68 deletions.
8 changes: 7 additions & 1 deletion src/components/StyledDeleteButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,13 @@ const StyledDeleteButton = React.forwardRef<

return (
<Tooltip enterDelay={enterDelay} title={tooltipTitle}>
<IconButton ref={ref} {...props} size="small" className="text-white">
<IconButton
ref={ref}
{...props}
size="small"
className="text-white"
data-testid="styled-delete-button"
>
<DeleteIcon />
</IconButton>
</Tooltip>
Expand Down
1 change: 0 additions & 1 deletion src/components/VerifiedListRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const VerifiedListRow: React.FC<VerifiedListRowProps> = ({
tooltip={t("deleteVerifiedListRow")}
hideButton={verified || hideDelete}
onClick={onDelete}
data-testid={`delete-row-button`}
/>
</Box>

Expand Down
8 changes: 4 additions & 4 deletions src/components/__tests__/BaseInformationForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ describe("BaseInformationForm Rendering", () => {
it("should render all fields with correct components", () => {
render(<Wrapper initialData={DEFAULT_LABEL_DATA} />);

const verifiedFields = ["name", "registrationNumber", "lotNumber", "npk"];
const quantityFields = ["weight", "density", "volume"];
const verifiedFields = ["name", "lotNumber", "npk"];
const verifiedLists = ["registrationNumbers", "weight", "density", "volume"];

verifiedFields.forEach((key) => {
const verifiedInput = screen.getByTestId(
Expand All @@ -43,9 +43,9 @@ describe("BaseInformationForm Rendering", () => {
expect(verifiedInput).toBeInTheDocument();
});

quantityFields.forEach((key) => {
verifiedLists.forEach((key) => {
const quantityInput = screen.getByTestId(
`quantity-multi-input-baseInformation.${key}`,
`fields-container-baseInformation.${key}`,
);
expect(quantityInput).toBeInTheDocument();
});
Expand Down
136 changes: 79 additions & 57 deletions src/components/__tests__/VerifiedQuantityMultiInput.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { VerifiedQuantityList } from "@/types/types";
import { VerifiedQuantities } from "@/types/types";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FormProvider, useForm } from "react-hook-form";
import VerifiedQuantityList from "../VerifiedQuantityList";

const Wrapper = ({
label = "Test Label",
Expand All @@ -18,11 +19,11 @@ const Wrapper = ({
placeholder?: string;
path?: string;
unitOptions?: string[];
defaultValues?: VerifiedQuantityList;
defaultValues?: VerifiedQuantities;
loading?: boolean;
onSubmit?: (data: VerifiedQuantityList) => void;
onSubmit?: (data: VerifiedQuantities) => void;
}) => {
const methods = useForm<VerifiedQuantityList>({
const methods = useForm<VerifiedQuantities>({
defaultValues,
mode: "onSubmit",
});
Expand Down Expand Up @@ -57,7 +58,7 @@ describe("QuantityMultiInput rendering", () => {
"Test Label",
);
expect(screen.getByTestId("add-button-")).toBeInTheDocument();
expect(screen.getByTestId("toggle-verified-btn-")).toBeInTheDocument();
expect(screen.getByTestId(/^toggle-verified-btn-/)).toBeInTheDocument();

const dropdowns = screen.getAllByTestId(/quantities\.\d+-value-input/);
expect(dropdowns.length).toBe(1);
Expand All @@ -71,15 +72,10 @@ describe("QuantityMultiInput rendering", () => {
) as HTMLInputElement;
expect(inputField).toHaveValue("0");

const removeButtons = screen.getAllByTestId(
/delete-button-\.quantities-\d+/,
);
expect(removeButtons.length).toBe(1);

expect(screen.getByTestId("add-button-")).toBeInTheDocument();
});

it("renders initial rows and dropdown options correctly based on defaultValues", () => {
it("renders the correct number of rows and dropdown options based on defaultValues", () => {
const defaultValues = {
quantities: [
{ value: "10", unit: "kg" },
Expand All @@ -89,87 +85,111 @@ describe("QuantityMultiInput rendering", () => {
};
render(<Wrapper defaultValues={defaultValues} />);

const fieldRows = screen.getAllByTestId(/field-row-\.quantities-\d+/);
// Check number of field rows
const fieldRows = screen.getAllByTestId("field-row");
expect(fieldRows.length).toBe(2);

const inputs = fieldRows.map(
(row) =>
row.querySelector(
"[data-testid^='.quantities.'][data-testid$='-value-input'] input",
) as HTMLInputElement,
);
expect(inputs[0].value).toBe("10");
expect(inputs[1].value).toBe("20");
// Check input values
const valueInputs = screen.getAllByTestId(/\.quantities\.\d+-value-input/);
expect(valueInputs.length).toBe(2);
expect(
(valueInputs[0].querySelector("input") as HTMLInputElement).value,
).toBe("10");
expect(
(valueInputs[1].querySelector("input") as HTMLInputElement).value,
).toBe("20");

const dropdowns = screen.getAllByTestId(/quantities\.\d+-value-input/);
expect(dropdowns.length).toBe(2);
expect(dropdowns[0].children.length).toBeGreaterThan(0);
// Check unit dropdowns
const unitInputs = screen.getAllByTestId(/\.quantities\.\d+-unit-input/);
expect(unitInputs.length).toBe(2);
expect(
(unitInputs[0].querySelector("input") as HTMLInputElement).value,
).toBe("kg");
expect(
(unitInputs[1].querySelector("input") as HTMLInputElement).value,
).toBe("lb");
});

it("handles loading state correctly", () => {
const { rerender } = render(<Wrapper loading={true} />);

const skeleton = screen.getByTestId("styled-skeleton");
expect(skeleton).toBeInTheDocument();
// Check if loading skeleton is displayed
expect(screen.getByTestId("styled-skeleton")).toBeInTheDocument();

// Ensure form elements are hidden during loading
expect(screen.queryByTestId("add-button-")).not.toBeInTheDocument();
expect(
screen.queryByTestId("toggle-verified-btn-"),
screen.queryByTestId("toggle-verified-btn-.verified"),
).not.toBeInTheDocument();
expect(
screen.queryByTestId(/\.quantities\.\d+-value-input/),
).not.toBeInTheDocument();
expect(
screen.queryByTestId(/quantities\.\d+-value-input/),
screen.queryByTestId(/\.quantities\.\d+-unit-input/),
).not.toBeInTheDocument();

// Rerender with loading false
rerender(<Wrapper loading={false} />);

// Check if loading skeleton is removed
expect(screen.queryByTestId("styled-skeleton")).not.toBeInTheDocument();

// Ensure form elements are visible after loading
expect(screen.getByTestId("add-button-")).toBeInTheDocument();
expect(screen.getByTestId("toggle-verified-btn-")).toBeInTheDocument();
expect(screen.getAllByTestId(/quantities\.\d+-value-input/).length).toBe(1);
expect(
screen.getByTestId("toggle-verified-btn-.verified"),
).toBeInTheDocument();
expect(screen.getAllByTestId(/\.quantities\.\d+-value-input/).length).toBe(
1,
);
expect(screen.getAllByTestId(/\.quantities\.\d+-unit-input/).length).toBe(
1,
);
});
});

describe("QuantityMultiInput functionality", () => {
it("disables inputs rows and add row button when status is Verified", () => {
it("disables input fields and add row button when verified is true", () => {
const defaultValues = {
quantities: [{ value: "50", unit: "kg" }],
verified: true,
};
render(<Wrapper defaultValues={defaultValues} />);

screen.getAllByTestId(/quantities\.\d+-value-input/).forEach((field) => {
// Ensure value and unit inputs are disabled
screen.getAllByTestId(/\.quantities\.\d+-value-input/).forEach((field) => {
expect(field.querySelector("input")).toBeDisabled();
});
screen.getAllByTestId(/quantities\.\d+-value-input/).forEach((dropdown) => {
expect(dropdown.querySelector("input")).toBeDisabled();
});
screen
.getAllByTestId(/delete-button-\.quantities-\d+/)
.forEach((button) => {
expect(button).toBeDisabled();
.getAllByTestId(/\.quantities\.\d+-unit-input/)
.forEach((dropdown) => {
expect(dropdown.querySelector("input")).toBeDisabled();
});

// Ensure add button is disabled
expect(screen.getByTestId("add-button-")).toBeDisabled();

userEvent.click(screen.getByTestId("toggle-verified-btn-"));
// Ensure verified style is applied
expect(screen.getByTestId("verified-field-")).toHaveClass(
"border-green-500 bg-gray-300",
);

// Toggle verification
userEvent.click(screen.getByTestId("toggle-verified-btn-.verified"));

screen.getAllByTestId(/quantities\.\d+-value-input/).forEach((field) => {
// Ensure inputs and buttons remain disabled
screen.getAllByTestId(/\.quantities\.\d+-value-input/).forEach((field) => {
expect(field.querySelector("input")).toBeDisabled();
});
screen.getAllByTestId(/quantities\.\d+-value-input/).forEach((dropdown) => {
expect(dropdown.querySelector("input")).toBeDisabled();
});
screen
.getAllByTestId(/delete-button-\.quantities-\d+/)
.forEach((button) => {
expect(button).toBeDisabled();
.getAllByTestId(/\.quantities\.\d+-unit-input/)
.forEach((dropdown) => {
expect(dropdown.querySelector("input")).toBeDisabled();
});
expect(screen.getByTestId("add-button-")).toBeDisabled();
expect(screen.getByTestId("quantity-multi-input-")).toHaveClass(
"border-green-500",
);
});

it("handles Add and Remove row functionality", () => {
it("handles adding and removing rows correctly", () => {
const defaultValues = {
quantities: [
{ value: "10", unit: "kg" },
Expand All @@ -179,21 +199,23 @@ describe("QuantityMultiInput functionality", () => {
};
render(<Wrapper defaultValues={defaultValues} />);

let fieldRows = screen.getAllByTestId(/field-row-\.quantities-\d+/);
// Check initial row count
let fieldRows = screen.getAllByTestId("field-row");
expect(fieldRows.length).toBe(2);

const removeButtons = screen.getAllByTestId(
/delete-button-\.quantities-\d+/,
);
// Click remove button on first row
const removeButtons = screen.getAllByTestId("styled-delete-button");
fireEvent.click(removeButtons[0]);

fieldRows = screen.queryAllByTestId(/field-row-\.quantities-\d+/);
// Ensure one row is removed
fieldRows = screen.queryAllByTestId("field-row");
expect(fieldRows.length).toBe(1);

const addButton = screen.getByTestId("add-button-");
fireEvent.click(addButton);
// Click add button
fireEvent.click(screen.getByTestId("add-button-"));

fieldRows = screen.getAllByTestId(/field-row-\.quantities-\d+/);
// Ensure row is added back
fieldRows = screen.getAllByTestId("field-row");
expect(fieldRows.length).toBe(2);
});

Expand Down
10 changes: 5 additions & 5 deletions src/types/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export type Quantity = {

export const DEFAULT_QUANTITY = { value: "", unit: "" };

export type VerifiedQuantityList = VerifiedField & {
export type VerifiedQuantities = VerifiedField & {
quantities: Quantity[];
};

Expand All @@ -116,7 +116,7 @@ export const UNITS = {
ingredients: ["%", "ppm"],
};

export const DEFAULT_QUANTITY_FIELD: VerifiedQuantityList = {
export const DEFAULT_QUANTITY_FIELD: VerifiedQuantities = {
verified: false,
quantities: [DEFAULT_QUANTITY],
};
Expand Down Expand Up @@ -148,9 +148,9 @@ export type BaseInformation = {
registrationNumbers: RegistrationNumbers;
lotNumber: VerifiedTextField;
npk: VerifiedTextField;
weight: VerifiedQuantityList;
density: VerifiedQuantityList;
volume: VerifiedQuantityList;
weight: VerifiedQuantities;
density: VerifiedQuantities;
volume: VerifiedQuantities;
};

export const DEFAULT_BASE_INFORMATION: BaseInformation = {
Expand Down

0 comments on commit 60379ad

Please sign in to comment.