@databiosphere/findable-ui 10.2.0 → 12.0.0

package/src/hooks/useWindowResize.ts

@@ -26,7 +26,7 @@ export const useWindowResize = (timeout = 200): WindowSize => {
     };
     // Add resize event listener.
     window.addEventListener("resize", onResize);
-    return () => {
+    return (): void => {
       // Remove resize event listener.
       window.removeEventListener("resize", onResize);
       // Clear timeout.

package/src/theme/common/palette.ts

@@ -4,107 +4,107 @@ import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
 /**
  * Palette "Alert"
  */
-enum ALERT {
-  LIGHT = "#FED3D1",
-  LIGHTEST = "#FFF4F4",
-  MAIN = "#B42318",
-}
+const ALERT = {
+  LIGHT: "#FED3D1",
+  LIGHTEST: "#FFF4F4",
+  MAIN: "#B42318",
+};
 
 /**
  * Palette "Background"
  */
-enum BACKGROUND {
-  DEFAULT = "#F6F6F7",
-}
+const BACKGROUND = {
+  DEFAULT: "#F6F6F7",
+};
 
 /**
  * Palette "Info"
  */
-enum INFO {
-  CONTRAST_TEXT = "#00729C",
-  LIGHT = "#97D6EA",
-  LIGHTEST = "#F2FAFC",
-  MAIN = "#00729C",
-}
+const INFO = {
+  CONTRAST_TEXT: "#00729C",
+  LIGHT: "#97D6EA",
+  LIGHTEST: "#F2FAFC",
+  MAIN: "#00729C",
+};
 
 /**
  * Palette "Ink"
  */
-enum INK {
-  LIGHT = "#637381",
-  MAIN = "#212B36",
-}
+const INK = {
+  LIGHT: "#637381",
+  MAIN: "#212B36",
+};
 
 /**
  * Palette "Primary"
  */
-enum PRIMARY {
-  DARK = "#005EA9",
-  LIGHTEST = "#E6EFF6",
-  MAIN = "#1C7CC7",
-}
+const PRIMARY = {
+  DARK: "#005EA9",
+  LIGHTEST: "#E6EFF6",
+  MAIN: "#1C7CC7",
+};
 
 /**
  * Palette "Smoke"
  */
-enum SMOKE {
-  DARK = "#C4CDD5",
-  LIGHT = "#F6F6F7",
-  LIGHTEST = "#FAFBFB",
-  MAIN = "#E1E3E5",
-}
+const SMOKE = {
+  DARK: "#C4CDD5",
+  LIGHT: "#F6F6F7",
+  LIGHTEST: "#FAFBFB",
+  MAIN: "#E1E3E5",
+};
 
 /**
  * Palette "Success"
  */
-enum SUCCESS {
-  LIGHT = "#AEE9D1",
-  LIGHTEST = "#F1F8F5",
-  MAIN = "#287555",
-}
+const SUCCESS = {
+  LIGHT: "#AEE9D1",
+  LIGHTEST: "#F1F8F5",
+  MAIN: "#287555",
+};
 
 /**
  * Palette "Text"
  */
-enum TEXT {
-  PRIMARY = "#212B36",
-}
+const TEXT = {
+  PRIMARY: "#212B36",
+};
 
 /**
  * Palette "Warning"
  */
-enum WARNING {
-  CONTRAST_TEXT = "#B54708",
-  LIGHT = "#FFD79D",
-  LIGHTEST = "#FFFAEB",
-  MAIN = "#B54708",
-}
+const WARNING = {
+  CONTRAST_TEXT: "#B54708",
+  LIGHT: "#FFD79D",
+  LIGHTEST: "#FFFAEB",
+  MAIN: "#B54708",
+};
 
 /**
  * Default "Black"
  */
-enum BLACK {
-  DEFAULT = "#000000",
-}
+const BLACK = {
+  DEFAULT: "#000000",
+};
 
 /**
  * Default "White"
  */
-enum WHITE {
-  DEFAULT = "#ffffff",
-}
+const WHITE = {
+  DEFAULT: "#ffffff",
+};
 
 /**
  * Color alpha
  */
-enum ALPHA {
-  A04 = "0a",
-  A08 = "14",
-  A32 = "52",
-  A60 = "99",
-  A64 = "a3",
-  A80 = "cc",
-}
+const ALPHA = {
+  A04: "0a",
+  A08: "14",
+  A32: "52",
+  A60: "99",
+  A64: "a3",
+  A80: "cc",
+};
 
 /**
  * Color constants

package/src/utils/tests.ts

@@ -0,0 +1,19 @@
+import { screen } from "@testing-library/react";
+
+/**
+ * Returns anchor element by id.
+ * @param id - ID.
+ * @returns anchor element.
+ */
+export function getAnchorEl(id: string): HTMLAnchorElement {
+  return screen.getByTestId(id) as HTMLAnchorElement;
+}
+
+/**
+ * Returns button element by id.
+ * @param id - ID.
+ * @returns HTML button element.
+ */
+export function getButtonById(id: string): HTMLButtonElement {
+  return screen.getByTestId(id);
+}

package/tests/azulFileDownload.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { AzulFileDownload } from "../src/components/Index/components/AzulFileDownload/azulFileDownload";
+import {
+  AZUL_FILE_DOWNLOAD_TEST_ID,
+  AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID,
+  AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID,
+} from "../src/components/Index/components/AzulFileDownload/common/constants";
+import { useFileLocation } from "../src/hooks/useFileLocation";
+import { getAnchorEl, getButtonById } from "../src/utils/tests";
+
+jest.mock("../src/hooks/useFileLocation");
+
+describe("AzulFileDownload", () => {
+  const FILE_URL = "https://example.com/storage/file";
+  const MOCK_RUN = jest.fn();
+  const URL = "https://example.com/repository/file";
+  beforeEach(() => {
+    (useFileLocation as jest.Mock).mockReturnValue({
+      fileUrl: undefined,
+      isLoading: false,
+      run: MOCK_RUN,
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  describe("download button", () => {
+    test("should render the download button", () => {
+      render(<AzulFileDownload url={URL} />);
+      const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
+      expect(buttonEl).not.toBeNull();
+    });
+    test("should disable the download button if URL is undefined", () => {
+      render(<AzulFileDownload />);
+      const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
+      expect(buttonEl.disabled).toBe(true);
+    });
+    test("should enable the download button if a URL is provided", () => {
+      render(<AzulFileDownload url={URL} />);
+      const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
+      expect(buttonEl.disabled).toBe(false);
+    });
+  });
+  describe("download functionality", () => {
+    test("should call the run function when the button is clicked", () => {
+      render(<AzulFileDownload url={URL} />);
+      const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
+      fireEvent.click(buttonEl);
+      expect(MOCK_RUN).toHaveBeenCalled();
+    });
+    test("should show loading icon when downloading is in progress", async () => {
+      (useFileLocation as jest.Mock).mockReturnValue({
+        fileUrl: undefined,
+        isLoading: false,
+        run: MOCK_RUN,
+      });
+      render(<AzulFileDownload url={URL} />);
+      const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
+      fireEvent.click(buttonEl);
+      await waitFor(() => {
+        const pendingEl = getButtonById(
+          AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID
+        );
+        expect(pendingEl).not.toBeNull();
+      });
+      expect(
+        screen.queryByTestId(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID)
+      ).toBeNull();
+    });
+    test("should initiate download when fileUrl is available", () => {
+      (useFileLocation as jest.Mock).mockReturnValue({
+        fileUrl: FILE_URL,
+        isLoading: false,
+        run: MOCK_RUN,
+      });
+      render(<AzulFileDownload url={URL} />);
+      const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
+      const anchorEl = getAnchorEl(AZUL_FILE_DOWNLOAD_TEST_ID);
+      fireEvent.click(buttonEl);
+      expect(anchorEl.download).not.toBeNull();
+      expect(anchorEl.href).toBe(FILE_URL);
+      expect(screen.queryByTestId(AZUL_FILE_DOWNLOAD_TEST_ID)).not.toBeNull();
+    });
+  });
+});

package/tests/useFileLocation.test.ts

@@ -0,0 +1,32 @@
+import { buildFetchFileUrl } from "../src/hooks/useFileLocation";
+
+const URL_INVALID = "invalidUrl";
+const URL_WITH_FETCH_PREPEND = "https://example.com/fetch/repository/file";
+const URL_WITHOUT_FETCH_PREPEND = "https://example.com/repository/file";
+
+jest.mock("../src/hooks/useRequestFileLocation");
+
+describe("useFileLocation", () => {
+  describe("build file URL", () => {
+    describe("buildFetchFileUrl", () => {
+      test("url is undefined", () => {
+        expect(buildFetchFileUrl()).toBeUndefined();
+      });
+      test("url is invalid", () => {
+        expect(() => buildFetchFileUrl(URL_INVALID)).toThrowError(
+          `Invalid file URL: ${URL_INVALID}`
+        );
+      });
+      test("url with 'fetch' prepended in path", () => {
+        expect(buildFetchFileUrl(URL_WITH_FETCH_PREPEND)).toEqual(
+          URL_WITH_FETCH_PREPEND
+        );
+      });
+      test("url without 'fetch' prepended in path", () => {
+        expect(buildFetchFileUrl(URL_WITHOUT_FETCH_PREPEND)).toEqual(
+          URL_WITH_FETCH_PREPEND
+        );
+      });
+    });
+  });
+});

package/tsconfig.json

@@ -15,7 +15,10 @@
     "baseUrl": "./src",
     "rootDir": "./src",
     "outDir": "lib",
-    "declaration": true
+    "declaration": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "types/*.d.ts"],
   "exclude": ["node_modules"]