From 73705c6035b9ac5d3d24f47215adb6ca22008fea Mon Sep 17 00:00:00 2001
From: Dion <qdraw@users.noreply.github.com>
Date: Thu, 17 Oct 2024 08:53:27 +0200
Subject: [PATCH 1/3] refactor update btn

---
 .../internal/update-button-active.tsx         |  51 +++++++++
 .../internal/update-button-disabled.tsx       |  23 ++++
 .../modal-geo/internal/update-button.spec.tsx |  57 +++++-----
 .../modal-geo/internal/update-button.tsx      | 105 ++++++++----------
 .../organisms/modal-geo/modal-geo.spec.tsx    |  24 ++--
 .../organisms/modal-geo/modal-geo.tsx         |  22 ++--
 6 files changed, 179 insertions(+), 103 deletions(-)
 create mode 100644 starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.tsx
 create mode 100644 starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.tsx

diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.tsx
new file mode 100644
index 0000000000..41f024bcfd
--- /dev/null
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.tsx
@@ -0,0 +1,51 @@
+import { IGeoLocationModel } from "../../../../interfaces/IGeoLocationModel";
+import localization from "../../../../localization/localization.json";
+import { Language } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateGeoLocation } from "./update-geo-location";
+
+interface IUpdateButtonActiveProps {
+  parentDirectory: string;
+  handleExit: (result: IGeoLocationModel | null) => void;
+  selectedSubPath: string;
+  latitude?: number;
+  longitude?: number;
+  location: ILatLong;
+  language: Language;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  propsCollections: boolean | undefined;
+}
+
+export const UpdateButtonActive: React.FunctionComponent<IUpdateButtonActiveProps> = ({
+  handleExit,
+  parentDirectory,
+  latitude,
+  longitude,
+  language,
+  ...props
+}) => {
+  return (
+    <button
+      onClick={async () => {
+        const model = await UpdateGeoLocation(
+          parentDirectory,
+          props.selectedSubPath,
+          props.location,
+          props.setError,
+          props.setIsLoading,
+          props.propsCollections
+        );
+        if (model) {
+          handleExit(model);
+        }
+      }}
+      data-test="update-geo-location"
+      className="btn btn--default"
+    >
+      {!latitude && !longitude
+        ? language.key(localization.MessageAddLocation)
+        : language.key(localization.MessageUpdateLocation)}
+    </button>
+  );
+};
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.tsx
new file mode 100644
index 0000000000..582298bbf3
--- /dev/null
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.tsx
@@ -0,0 +1,23 @@
+import localization from "../../../../localization/localization.json";
+import { Language } from "../../../../shared/language";
+
+interface IUpdateButtonActiveProps {
+  latitude?: number;
+  longitude?: number;
+  language: Language;
+}
+
+export const UpdateButtonDisabled: React.FunctionComponent<IUpdateButtonActiveProps> = ({
+  latitude,
+  longitude,
+  language
+}) => {
+  return (
+    <button className="btn btn--default" disabled={true}>
+      {/* disabled */}
+      {!latitude && !longitude
+        ? language.key(localization.MessageAddLocation)
+        : language.key(localization.MessageUpdateLocation)}
+    </button>
+  );
+};
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx
index 04c332727a..4b7563689b 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx
@@ -15,8 +15,6 @@ describe("UpdateButton", () => {
   const setIsLoading = jest.fn();
   const propsCollections = true;
   const handleExit = jest.fn();
-  const latitude = 0;
-  const longitude = 0;
   const language = new Language(SupportedLanguages.en);
 
   beforeEach(() => {
@@ -25,15 +23,18 @@ describe("UpdateButton", () => {
 
   it("calls UpdateGeoLocation when clicked and updates location", async () => {
     (UpdateGeoLocation as jest.Mock).mockResolvedValueOnce({} as any);
+
     const { getByTestId } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(true, handleExit, latitude, longitude, language)
+      <UpdateButton
+        handleExit={handleExit}
+        isLocationUpdated={true}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
     );
     const button = getByTestId("update-geo-location");
     fireEvent.click(button);
@@ -43,14 +44,16 @@ describe("UpdateButton", () => {
 
   it("disables button when location is not updated", () => {
     const { getByText } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(false, handleExit, latitude, longitude, language)
+      <UpdateButton
+        handleExit={handleExit}
+        isLocationUpdated={false}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
     );
     const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
     expect(button.disabled).toBe(true);
@@ -58,14 +61,16 @@ describe("UpdateButton", () => {
 
   it("enables button when location is updated", () => {
     const { getByText } = render(
-      new UpdateButton(
-        parentDirectory,
-        selectedSubPath,
-        location,
-        setError,
-        setIsLoading,
-        propsCollections
-      ).updateButton(true, handleExit, latitude, longitude, language)
+      <UpdateButton
+        handleExit={handleExit}
+        isLocationUpdated={true}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
     );
     const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
 
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx
index 0d2b967c25..a11654cb17 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx
@@ -1,68 +1,53 @@
+import React from "react";
+import useGlobalSettings from "../../../../hooks/use-global-settings";
 import { IGeoLocationModel } from "../../../../interfaces/IGeoLocationModel";
-import localization from "../../../../localization/localization.json";
 import { Language } from "../../../../shared/language";
 import { ILatLong } from "../modal-geo";
-import { UpdateGeoLocation } from "./update-geo-location";
+import { UpdateButtonActive } from "./update-button-active";
+import { UpdateButtonDisabled } from "./update-button-disabled";
 
-export class UpdateButton {
+interface UpdateButtonProps {
   parentDirectory: string;
   selectedSubPath: string;
   location: ILatLong;
-  setError: any;
-  setIsLoading: any;
-  propsCollections: boolean | undefined;
-
-  constructor(
-    parentDirectory: string,
-    selectedSubPath: string,
-    location: ILatLong,
-    setError: React.Dispatch<React.SetStateAction<boolean>>,
-    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-    propsCollections?: boolean | undefined
-  ) {
-    this.parentDirectory = parentDirectory;
-    this.selectedSubPath = selectedSubPath;
-    this.location = location;
-    this.setError = setError;
-    this.setIsLoading = setIsLoading;
-    this.propsCollections = propsCollections;
-  }
-  updateButton(
-    isLocationUpdated: boolean,
-    handleExit: (result: IGeoLocationModel | null) => void,
-    latitude: number | undefined,
-    longitude: number | undefined,
-    language: Language
-  ): React.JSX.Element {
-    return isLocationUpdated ? (
-      <button
-        onClick={async () => {
-          const model = await UpdateGeoLocation(
-            this.parentDirectory,
-            this.selectedSubPath,
-            this.location,
-            this.setError,
-            this.setIsLoading,
-            this.propsCollections
-          );
-          if (model) {
-            handleExit(model);
-          }
-        }}
-        data-test="update-geo-location"
-        className="btn btn--default"
-      >
-        {!latitude && !longitude
-          ? language.key(localization.MessageAddLocation)
-          : language.key(localization.MessageUpdateLocation)}
-      </button>
-    ) : (
-      <button className="btn btn--default" disabled={true}>
-        {/* disabled */}
-        {!latitude && !longitude
-          ? language.key(localization.MessageAddLocation)
-          : language.key(localization.MessageUpdateLocation)}
-      </button>
-    );
-  }
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  propsCollections?: boolean;
+  isLocationUpdated: boolean;
+  handleExit: (result: IGeoLocationModel | null) => void;
 }
+
+export const UpdateButton: React.FC<UpdateButtonProps> = ({
+  parentDirectory,
+  selectedSubPath,
+  location,
+  setError,
+  setIsLoading,
+  propsCollections,
+  isLocationUpdated,
+  handleExit
+}) => {
+  const settings = useGlobalSettings();
+  const language = new Language(settings.language);
+
+  return isLocationUpdated ? (
+    <UpdateButtonActive
+      parentDirectory={parentDirectory}
+      selectedSubPath={selectedSubPath}
+      location={location}
+      handleExit={handleExit}
+      latitude={location.latitude}
+      longitude={location.longitude}
+      language={language}
+      setIsLoading={setIsLoading}
+      setError={setError}
+      propsCollections={propsCollections}
+    />
+  ) : (
+    <UpdateButtonDisabled
+      language={language}
+      latitude={location.latitude}
+      longitude={location.longitude}
+    />
+  );
+};
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx
index 83fed3bc11..2036351a0d 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx
@@ -2,14 +2,14 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import L, { LatLng } from "leaflet";
 import * as Modal from "../../atoms/modal/modal";
-import ModalGeo, { ILatLong } from "./modal-geo";
 import { AddDefaultClickSetMarker } from "./internal/add-default-click-set-marker";
 import * as AddDefaultMarker from "./internal/add-default-marker";
 import { GetZoom } from "./internal/get-zoom";
 import { OnDrag } from "./internal/on-drag";
 import { RealtimeMapUpdate } from "./internal/realtime-map-update";
-import { UpdateButton } from "./internal/update-button";
+import * as UpdateButton from "./internal/update-button";
 import * as updateGeoLocation from "./internal/update-geo-location";
+import ModalGeo, { ILatLong } from "./modal-geo";
 
 describe("ModalGeo", () => {
   beforeEach(() => {
@@ -194,7 +194,7 @@ describe("ModalGeo", () => {
 
     it("check if form is disabled it hides the button", async () => {
       const updateButtonSpy = jest
-        .spyOn(UpdateButton.prototype, "updateButton")
+        .spyOn(UpdateButton, "UpdateButton")
         .mockImplementationOnce(() => {
           return <div>test</div>;
         });
@@ -219,7 +219,7 @@ describe("ModalGeo", () => {
 
     it("check if form is enabled it shows the button", () => {
       const updateButtonSpy = jest
-        .spyOn(UpdateButton.prototype, "updateButton")
+        .spyOn(UpdateButton, "UpdateButton")
         .mockImplementationOnce(() => {
           return <div>test</div>;
         });
@@ -239,9 +239,19 @@ describe("ModalGeo", () => {
 
       expect(updateButtonSpy).toHaveBeenCalledTimes(2);
 
-      expect(updateButtonSpy).toHaveBeenLastCalledWith(false, expect.any(Function), 51, 3, {
-        selectedLanguage: "en"
-      });
+      expect(updateButtonSpy).toHaveBeenLastCalledWith(
+        {
+          handleExit: expect.any(Function),
+          isLocationUpdated: false,
+          location: { latitude: 51, longitude: 3 },
+          parentDirectory: "/",
+          propsCollections: undefined,
+          selectedSubPath: "/test.jpg",
+          setError: expect.any(Function),
+          setIsLoading: expect.any(Function)
+        },
+        {}
+      );
 
       modal.unmount();
     });
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx
index 180ab8f2ed..f564f9b670 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx
@@ -121,16 +121,18 @@ const ModalGeo: React.FunctionComponent<IModalMoveFileProps> = ({
           >
             {language.key(localization.MessageCancel)}
           </button>
-          {isFormEnabled
-            ? new UpdateButton(
-                parentDirectory,
-                selectedSubPath,
-                location,
-                setError,
-                setIsLoading,
-                props.collections
-              ).updateButton(isLocationUpdated, props.handleExit, latitude, longitude, language)
-            : null}
+          {isFormEnabled ? (
+            <UpdateButton
+              handleExit={props.handleExit}
+              isLocationUpdated={isLocationUpdated}
+              parentDirectory={parentDirectory}
+              location={location}
+              selectedSubPath={selectedSubPath}
+              setError={setError}
+              setIsLoading={setIsLoading}
+              propsCollections={props.collections}
+            />
+          ) : null}
           <div className="lat-long">
             <b>Latitude:</b>{" "}
             <FormControl

From d5ab8a6b85db6d6a52be0528a8c0124f1544445c Mon Sep 17 00:00:00 2001
From: Dion <qdraw@users.noreply.github.com>
Date: Thu, 17 Oct 2024 09:02:33 +0200
Subject: [PATCH 2/3] rename method

---
 ...ate-button.spec.tsx => update-button-wrapper.spec.tsx} | 8 ++++----
 .../{update-button.tsx => update-button-wrapper.tsx}      | 4 ++--
 .../src/components/organisms/modal-geo/modal-geo.spec.tsx | 6 +++---
 .../src/components/organisms/modal-geo/modal-geo.tsx      | 4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)
 rename starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/{update-button.spec.tsx => update-button-wrapper.spec.tsx} (94%)
 rename starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/{update-button.tsx => update-button-wrapper.tsx} (92%)

diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx
similarity index 94%
rename from starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx
rename to starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx
index 4b7563689b..881d059c1f 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.spec.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, waitFor } from "@testing-library/react";
 import localization from "../../../../localization/localization.json";
 import { Language, SupportedLanguages } from "../../../../shared/language";
 import { ILatLong } from "../modal-geo";
-import { UpdateButton } from "./update-button";
+import { UpdateButtonWrapper } from "./update-button-wrapper";
 import { UpdateGeoLocation } from "./update-geo-location";
 
 jest.mock("./update-geo-location");
@@ -25,7 +25,7 @@ describe("UpdateButton", () => {
     (UpdateGeoLocation as jest.Mock).mockResolvedValueOnce({} as any);
 
     const { getByTestId } = render(
-      <UpdateButton
+      <UpdateButtonWrapper
         handleExit={handleExit}
         isLocationUpdated={true}
         parentDirectory={parentDirectory}
@@ -44,7 +44,7 @@ describe("UpdateButton", () => {
 
   it("disables button when location is not updated", () => {
     const { getByText } = render(
-      <UpdateButton
+      <UpdateButtonWrapper
         handleExit={handleExit}
         isLocationUpdated={false}
         parentDirectory={parentDirectory}
@@ -61,7 +61,7 @@ describe("UpdateButton", () => {
 
   it("enables button when location is updated", () => {
     const { getByText } = render(
-      <UpdateButton
+      <UpdateButtonWrapper
         handleExit={handleExit}
         isLocationUpdated={true}
         parentDirectory={parentDirectory}
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.tsx
similarity index 92%
rename from starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx
rename to starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.tsx
index a11654cb17..a1f3d5ee1e 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.tsx
@@ -6,7 +6,7 @@ import { ILatLong } from "../modal-geo";
 import { UpdateButtonActive } from "./update-button-active";
 import { UpdateButtonDisabled } from "./update-button-disabled";
 
-interface UpdateButtonProps {
+interface IUpdateButtonWrapperProps {
   parentDirectory: string;
   selectedSubPath: string;
   location: ILatLong;
@@ -17,7 +17,7 @@ interface UpdateButtonProps {
   handleExit: (result: IGeoLocationModel | null) => void;
 }
 
-export const UpdateButton: React.FC<UpdateButtonProps> = ({
+export const UpdateButtonWrapper: React.FC<IUpdateButtonWrapperProps> = ({
   parentDirectory,
   selectedSubPath,
   location,
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx
index 2036351a0d..8379c16124 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.spec.tsx
@@ -7,7 +7,7 @@ import * as AddDefaultMarker from "./internal/add-default-marker";
 import { GetZoom } from "./internal/get-zoom";
 import { OnDrag } from "./internal/on-drag";
 import { RealtimeMapUpdate } from "./internal/realtime-map-update";
-import * as UpdateButton from "./internal/update-button";
+import * as UpdateButtonWrapper from "./internal/update-button-wrapper";
 import * as updateGeoLocation from "./internal/update-geo-location";
 import ModalGeo, { ILatLong } from "./modal-geo";
 
@@ -194,7 +194,7 @@ describe("ModalGeo", () => {
 
     it("check if form is disabled it hides the button", async () => {
       const updateButtonSpy = jest
-        .spyOn(UpdateButton, "UpdateButton")
+        .spyOn(UpdateButtonWrapper, "UpdateButtonWrapper")
         .mockImplementationOnce(() => {
           return <div>test</div>;
         });
@@ -219,7 +219,7 @@ describe("ModalGeo", () => {
 
     it("check if form is enabled it shows the button", () => {
       const updateButtonSpy = jest
-        .spyOn(UpdateButton, "UpdateButton")
+        .spyOn(UpdateButtonWrapper, "UpdateButtonWrapper")
         .mockImplementationOnce(() => {
           return <div>test</div>;
         });
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx
index f564f9b670..01ee124e68 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/modal-geo.tsx
@@ -9,7 +9,7 @@ import Modal from "../../atoms/modal/modal";
 import Preloader from "../../atoms/preloader/preloader";
 import { LatLongRound } from "./internal/lat-long-round";
 import { RealtimeMapUpdate } from "./internal/realtime-map-update";
-import { UpdateButton } from "./internal/update-button";
+import { UpdateButtonWrapper } from "./internal/update-button-wrapper";
 import { UpdateMap } from "./internal/update-map";
 
 interface IModalMoveFileProps {
@@ -122,7 +122,7 @@ const ModalGeo: React.FunctionComponent<IModalMoveFileProps> = ({
             {language.key(localization.MessageCancel)}
           </button>
           {isFormEnabled ? (
-            <UpdateButton
+            <UpdateButtonWrapper
               handleExit={props.handleExit}
               isLocationUpdated={isLocationUpdated}
               parentDirectory={parentDirectory}

From b651369ab9848313adca4cec46d28723188835ac Mon Sep 17 00:00:00 2001
From: Dion <qdraw@users.noreply.github.com>
Date: Thu, 17 Oct 2024 09:05:31 +0200
Subject: [PATCH 3/3] update btn add extra tests

---
 .../internal/update-button-active.spec.tsx    | 63 +++++++++++++++++++
 .../internal/update-button-disabled.spec.tsx  | 22 +++++++
 .../internal/update-button-wrapper.spec.tsx   |  8 +--
 3 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.spec.tsx
 create mode 100644 starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.spec.tsx

diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.spec.tsx
new file mode 100644
index 0000000000..2d1559fd88
--- /dev/null
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-active.spec.tsx
@@ -0,0 +1,63 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import localization from "../../../../localization/localization.json";
+import { Language, SupportedLanguages } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateButtonActive } from "./update-button-active";
+import { UpdateButtonWrapper } from "./update-button-wrapper";
+import { UpdateGeoLocation } from "./update-geo-location";
+
+jest.mock("./update-geo-location");
+
+describe("UpdateButtonActive", () => {
+  const parentDirectory = "parentDirectory";
+  const selectedSubPath = "selectedSubPath";
+  const location: ILatLong = { latitude: 0, longitude: 0 };
+  const setError = jest.fn();
+  const setIsLoading = jest.fn();
+  const propsCollections = true;
+  const handleExit = jest.fn();
+  const language = new Language(SupportedLanguages.en);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("[UpdateButtonActive] calls UpdateGeoLocation when clicked and updates location", async () => {
+    (UpdateGeoLocation as jest.Mock).mockResolvedValueOnce({} as any);
+
+    const { getByTestId } = render(
+      <UpdateButtonActive
+        handleExit={handleExit}
+        parentDirectory={parentDirectory}
+        location={location}
+        language={language}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
+    );
+    const button = getByTestId("update-geo-location");
+    fireEvent.click(button);
+    await waitFor(() => expect(UpdateGeoLocation).toHaveBeenCalledTimes(1));
+    expect(handleExit).toHaveBeenCalledTimes(1);
+  });
+
+  it("[UpdateButtonActive] enables button when location is updated", () => {
+    const { getByText } = render(
+      <UpdateButtonWrapper
+        handleExit={handleExit}
+        isLocationUpdated={true}
+        parentDirectory={parentDirectory}
+        location={location}
+        selectedSubPath={selectedSubPath}
+        setError={setError}
+        setIsLoading={setIsLoading}
+        propsCollections={propsCollections}
+      />
+    );
+    const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
+
+    expect(button.disabled).toBe(false);
+  });
+});
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.spec.tsx
new file mode 100644
index 0000000000..acff9be609
--- /dev/null
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-disabled.spec.tsx
@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import localization from "../../../../localization/localization.json";
+import { Language, SupportedLanguages } from "../../../../shared/language";
+import { ILatLong } from "../modal-geo";
+import { UpdateButtonDisabled } from "./update-button-disabled";
+
+describe("UpdateButtonActive", () => {
+  const location: ILatLong = { latitude: 0, longitude: 0 };
+  const language = new Language(SupportedLanguages.en);
+
+  it("[disabledBtn] disables button when location is not updated", () => {
+    const { getByText } = render(
+      <UpdateButtonDisabled
+        language={language}
+        latitude={location.latitude}
+        longitude={location.longitude}
+      />
+    );
+    const button = getByText(language.key(localization.MessageAddLocation)) as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+  });
+});
diff --git a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx
index 881d059c1f..9cb7b7f594 100644
--- a/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/modal-geo/internal/update-button-wrapper.spec.tsx
@@ -7,7 +7,7 @@ import { UpdateGeoLocation } from "./update-geo-location";
 
 jest.mock("./update-geo-location");
 
-describe("UpdateButton", () => {
+describe("UpdateButtonWrapper", () => {
   const parentDirectory = "parentDirectory";
   const selectedSubPath = "selectedSubPath";
   const location: ILatLong = { latitude: 0, longitude: 0 };
@@ -21,7 +21,7 @@ describe("UpdateButton", () => {
     jest.clearAllMocks();
   });
 
-  it("calls UpdateGeoLocation when clicked and updates location", async () => {
+  it("[wrapper] calls UpdateGeoLocation when clicked and updates location", async () => {
     (UpdateGeoLocation as jest.Mock).mockResolvedValueOnce({} as any);
 
     const { getByTestId } = render(
@@ -42,7 +42,7 @@ describe("UpdateButton", () => {
     expect(handleExit).toHaveBeenCalledTimes(1);
   });
 
-  it("disables button when location is not updated", () => {
+  it("[wrapper] disables button when location is not updated", () => {
     const { getByText } = render(
       <UpdateButtonWrapper
         handleExit={handleExit}
@@ -59,7 +59,7 @@ describe("UpdateButton", () => {
     expect(button.disabled).toBe(true);
   });
 
-  it("enables button when location is updated", () => {
+  it("[wrapper] enables button when location is updated", () => {
     const { getByText } = render(
       <UpdateButtonWrapper
         handleExit={handleExit}