Arrange Act Assert is here 💀

saleor · Feb 26, 2025 · 5ca48d7 · 5ca48d7
1 parent 4d6ff66
commit 5ca48d7
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 20 deletions.
diff --git a/src/components/MetadataHookForm/MetadataHookForm.test.tsx b/src/components/MetadataHookForm/MetadataHookForm.test.tsx
@@ -44,43 +44,48 @@ jest.mock("./useMetadataFormControls", () => ({
 
 describe("MetadataHookForm", () => {
   it("displays loading state", () => {
+    // Arrange
     render(<MetadataHookForm isLoading={true} {...mockHookFormProps} />);
 
-    // There are multiple skeletons, check if there' at least one
+    // Assert, There are multiple skeletons, check if there's at least one
     expect(screen.queryAllByTestId("skeleton")?.[0]).toBeInTheDocument();
   });
 
   it("displays metadata", async () => {
+    // Arrange
     render(<MetadataHookForm isLoading={false} {...mockHookFormProps} />);
 
-    // First button is for metadata
+    // Act, First button is for metadata
     const metadataButton = screen.getAllByTestId("expand")[0];
 
     await userEvent.click(metadataButton);
 
+    // Assert
     expect(screen.getByDisplayValue(mockData.metadata[0].value)).toBeInTheDocument();
     expect(screen.getByDisplayValue(mockData.metadata[0].key)).toBeInTheDocument();
   });
 
   it("displays private metadata when not hidden", async () => {
+    // Arrange
     render(<MetadataHookForm isLoading={false} {...mockHookFormProps} />);
 
-    expect(screen.queryByText("Private Metadata")).toBeInTheDocument();
-
-    // Second button is for privateMetadata
+    // Act, Second button is for privateMetadata
     const metadataButton = screen.getAllByTestId("expand")[1];
 
     await userEvent.click(metadataButton);
 
+    // Assert
     expect(screen.getByDisplayValue(mockData.privateMetadata[0].value)).toBeInTheDocument();
     expect(screen.getByDisplayValue(mockData.privateMetadata[0].key)).toBeInTheDocument();
   });
 
   it("doesn't display private metadata when hidden", async () => {
+    // Arrange
     render(
       <MetadataHookForm isLoading={false} hidePrivateMetadata={true} {...mockHookFormProps} />,
     );
 
+    // Assert
     expect(screen.queryByText("Private Metadata")).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/MetadataHookForm/useMetadataFormControls.test.ts b/src/components/MetadataHookForm/useMetadataFormControls.test.ts
@@ -13,6 +13,7 @@ jest.mock("react-intl", () => ({
 }));
 describe("useMetadataFormControls", () => {
   it("returns form values from hook form to be used in form", () => {
+    // Arrange
     const formMethods = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -22,6 +23,7 @@ describe("useMetadataFormControls", () => {
       }),
     );
 
+    // Act
     const { result } = renderHook(() =>
       useMetadataFormControls({
         control: formMethods.result.current.control,
@@ -30,6 +32,7 @@ describe("useMetadataFormControls", () => {
       }),
     );
 
+    // Assert
     expect(result.current.metadataFields).toEqual([
       {
         key: "key",
@@ -47,6 +50,7 @@ describe("useMetadataFormControls", () => {
   });
 
   it("handles update action for metadata and privateMetadata keys", () => {
+    // Arrange
     const formMethods = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -78,11 +82,13 @@ describe("useMetadataFormControls", () => {
       },
     };
 
+    // Act
     act(() => {
       result.current.handleMetadataChange(metadataEvent);
       result.current.handlePrivateMetadataChange(privateMetadataEvent);
     });
 
+    // Assert
     expect(formMethods.result.current.getValues("metadata.0")).toEqual({
       key: "new-key",
       value: "test-value",
@@ -94,6 +100,7 @@ describe("useMetadataFormControls", () => {
   });
 
   it("handles update action for metadata and privateMetadata values", () => {
+    // Arrange
     const formMethods = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -125,11 +132,13 @@ describe("useMetadataFormControls", () => {
       },
     };
 
+    // Act
     act(() => {
       result.current.handleMetadataChange(metadataEvent);
       result.current.handlePrivateMetadataChange(privateMetadataEvent);
     });
 
+    // Assert
     expect(formMethods.result.current.getValues("metadata.0")).toEqual({
       key: "test-key",
       value: "new-value",
@@ -141,6 +150,7 @@ describe("useMetadataFormControls", () => {
   });
 
   it("handles add action for metadata and privateMetadata", () => {
+    // Arrange
     const formMethods = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -165,11 +175,13 @@ describe("useMetadataFormControls", () => {
       },
     };
 
+    // Act
     act(() => {
       result.current.handleMetadataChange(event);
       result.current.handlePrivateMetadataChange(event);
     });
 
+    // Assert
     expect(formMethods.result.current.getValues("metadata")).toEqual([
       {
         key: "",
@@ -185,6 +197,7 @@ describe("useMetadataFormControls", () => {
   });
 
   it("handles delete action for metadata and privateMetadata", () => {
+    // Arrange
     const formMethods = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -209,16 +222,19 @@ describe("useMetadataFormControls", () => {
       },
     };
 
+    // Act
     act(() => {
       result.current.handleMetadataChange(event);
       result.current.handlePrivateMetadataChange(event);
     });
 
+    // Assert
     expect(formMethods.result.current.getValues("metadata")).toEqual([]);
     expect(formMethods.result.current.getValues("privateMetadata")).toEqual([]);
   });
 
   it("validates and rejects duplicate keys in both metadata and privateMetadata", async () => {
+    // Arrange
     const { result: reactHookForm } = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -257,6 +273,7 @@ describe("useMetadataFormControls", () => {
       },
     };
 
+    // Act
     await act(async () => {
       // Add
       metadataFormControls.current.handleMetadataChange(eventAdd);
@@ -267,6 +284,7 @@ describe("useMetadataFormControls", () => {
       metadataFormControls.current.handlePrivateMetadataChange(privateMetadataUpdate);
     });
 
+    // Assert
     expect(reactHookForm.current.formState.errors.metadata).toMatchObject({
       root: {
         type: "validate",
@@ -282,6 +300,7 @@ describe("useMetadataFormControls", () => {
   });
 
   it("validates and rejects empty keys in both metadata and privateMetadata", async () => {
+    // Arrange
     const { result: reactHookForm } = renderHook(() =>
       useForm<MetadataFormData>({
         values: {
@@ -308,12 +327,13 @@ describe("useMetadataFormControls", () => {
       },
     };
 
+    // Act
     await act(async () => {
-      // Add
       metadataFormControls.current.handleMetadataChange(eventAdd);
       metadataFormControls.current.handlePrivateMetadataChange(eventAdd);
     });
 
+    // Assert
     expect(reactHookForm.current.formState.errors.metadata).toMatchObject({
       root: {
         type: "validate",

diff --git a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.test.tsx b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.test.tsx
@@ -53,29 +53,36 @@ describe("OrderMetadataDialog", () => {
   });
 
   it("closes when user hits close icon button", () => {
+    // Arrange
     render(<OrderMetadataDialog open={true} onClose={onCloseMock} data={mockData} />);
 
+    // Act
     fireEvent.click(screen.getByTestId("close-button"));
+
+    // Assert
     expect(onCloseMock).toHaveBeenCalled();
   });
 
   it("closes when user hits close text button", () => {
+    // Arrange
     render(<OrderMetadataDialog open={true} onClose={onCloseMock} data={mockData} />);
 
+    // Act
     fireEvent.click(screen.getByTestId("back"));
+
+    // Assert
     expect(onCloseMock).toHaveBeenCalled();
   });
 
   describe("ProductVariant metadata list", () => {
     it("displays product variant metadata", async () => {
+      // Arrange
       render(<OrderMetadataDialog open={true} onClose={onCloseMock} data={mockData} />);
 
-      expect(screen.getByText("Product variant metadata")).toBeInTheDocument();
-
       const productVariantMetadata = screen.getByTestId(TEST_ID_PRODUCT_VARIANT_METADATA);
 
-      // Readonly metadata component displays all existing data
-      // expand doesn't need to be used
+      // Assert - readonly metadata component displays all existing data without expansion
+      expect(screen.getByText("Product variant metadata")).toBeInTheDocument();
       expect(within(productVariantMetadata).getByDisplayValue("variant-key")).toBeInTheDocument();
       expect(within(productVariantMetadata).getByDisplayValue("variant-value")).toBeInTheDocument();
       expect(
@@ -87,32 +94,33 @@ describe("OrderMetadataDialog", () => {
     });
 
     it("hides privateMetadata from product variant when user doesn't have MANAGE_PRODUCTS permission", () => {
+      // Arrange
       (useHasManageProductsPermission as jest.Mock).mockReturnValue(false);
-
       render(<OrderMetadataDialog open={true} onClose={onCloseMock} data={mockData} />);
 
-      // Private metadata should not be visible in the readonly section
+      // Act
       const metadataEditors = screen.getAllByTestId("metadata-editor");
       const readonlyEditor = metadataEditors[1];
 
+      // Assert
       expect(readonlyEditor).not.toHaveTextContent("variant-private-key");
       expect(readonlyEditor).not.toHaveTextContent("variant-private-value");
     });
   });
 
   describe("OrderLine metadata form", () => {
     it("displays order line metadata", async () => {
+      // Arrange
       render(<OrderMetadataDialog open={true} onClose={onCloseMock} data={mockData} />);
 
       const orderLineMetadata = screen.getByTestId(TEST_ID_ORDER_LINE_METADATA);
-      const expandButtonOrderLineMetadata = within(orderLineMetadata).getAllByTestId("expand")[0];
 
-      expect(screen.getByText("Order line metadata")).toBeInTheDocument();
+      // Act - expand metadata section
+      const expandButtonOrderLineMetadata = within(orderLineMetadata).getAllByTestId("expand")[0];
 
-      // Editable forms need to be expanded before values are shown
-      fireEvent.click(expandButtonOrderLineMetadata); // Show metadata
+      fireEvent.click(expandButtonOrderLineMetadata);
 
-      // Metadata is visible, private metadata is not
+      // Assert - check metadata values after expansion
       expect(within(orderLineMetadata).getByDisplayValue("order-line-key")).toBeInTheDocument();
       expect(within(orderLineMetadata).getByDisplayValue("order-line-value")).toBeInTheDocument();
       expect(
@@ -126,16 +134,18 @@ describe("OrderMetadataDialog", () => {
 
   describe("OrderLine privateMetadata form", () => {
     it("displays order line private metadata", () => {
+      // Arrange
       render(<OrderMetadataDialog open={true} onClose={onCloseMock} data={mockData} />);
 
       const orderLineMetadata = screen.getByTestId(TEST_ID_ORDER_LINE_METADATA);
+
+      // Act - expand private metadata section
       const expandButtonOrderLinePrivateMetadata =
         within(orderLineMetadata).getAllByTestId("expand")[1];
 
-      // Editable forms need to be expanded before values are shown
-      fireEvent.click(expandButtonOrderLinePrivateMetadata); // Show privateMetadata
+      fireEvent.click(expandButtonOrderLinePrivateMetadata);
 
-      // Private metadata is visible, metadata is not
+      // Assert - check private metadata values after expansion
       expect(
         within(orderLineMetadata).getByDisplayValue("order-line-private-key"),
       ).toBeInTheDocument();