From 44467ed1ceebdc34d6232e53e0658b527c6d6d42 Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter.makowski@canonical.com>
Date: Tue, 19 Mar 2024 15:55:34 +0100
Subject: [PATCH] fix: reserve range error state (#5357)

---
 .../ReservedRangeForm.test.tsx                | 26 ++++++++++++++++++-
 .../ReservedRangeForm/ReservedRangeForm.tsx   |  4 +--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx b/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx
index 269098a942..17df62fd5b 100644
--- a/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx
+++ b/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.test.tsx
@@ -14,7 +14,13 @@ import {
   ipRange as ipRangeFactory,
   ipRangeState as ipRangeStateFactory,
 } from "@/testing/factories";
-import { userEvent, render, screen, waitFor } from "@/testing/utils";
+import {
+  userEvent,
+  render,
+  screen,
+  waitFor,
+  renderWithBrowserRouter,
+} from "@/testing/utils";
 
 const mockStore = configureStore();
 
@@ -246,4 +252,22 @@ describe("ReservedRangeForm", () => {
       screen.queryByRole("textbox", { name: Labels.Comment })
     ).not.toBeInTheDocument();
   });
+
+  it("displays an error when start and end IP addresses are not provided", async () => {
+    renderWithBrowserRouter(<ReservedRangeForm setActiveForm={vi.fn()} />, {
+      state,
+      route: "/machines",
+    });
+    await userEvent.click(
+      screen.getByRole("textbox", { name: Labels.StartIp })
+    );
+    await userEvent.click(screen.getByRole("textbox", { name: Labels.EndIp }));
+    await userEvent.click(screen.getByRole("button", { name: "Reserve" }));
+    expect(
+      await screen.findByLabelText(Labels.StartIp)
+    ).toHaveAccessibleErrorMessage(/Start IP is required/);
+    expect(
+      await screen.findByLabelText(Labels.EndIp)
+    ).toHaveAccessibleErrorMessage(/End IP is required/);
+  });
 });
diff --git a/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx b/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx
index e2a054a188..a438aa1e83 100644
--- a/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx
+++ b/src/app/subnets/components/ReservedRangeForm/ReservedRangeForm.tsx
@@ -41,8 +41,8 @@ export enum Labels {
 
 const Schema = Yup.object().shape({
   comment: Yup.string(),
-  end_ip: Yup.string().required("Start IP is required"),
-  start_ip: Yup.string().required("End IP is required"),
+  start_ip: Yup.string().required("Start IP is required"),
+  end_ip: Yup.string().required("End IP is required"),
 });
 
 const ReservedRangeForm = ({