From b8c206f6bd10f6901ea18742e0d9ac75a5ad37a9 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Tue, 31 Oct 2023 03:20:24 +0200
Subject: [PATCH] added unit tests

---
 README.md                   |  2 +-
 tests/useLink.test.ts       | 32 +++++++++++++++++
 tests/useTitle.test.ts      | 23 +++++++++++++
 tests/useWindowSize.test.ts | 69 +++++++++++++++++++++++++++++++++++++
 4 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 tests/useLink.test.ts
 create mode 100644 tests/useTitle.test.ts
 create mode 100644 tests/useWindowSize.test.ts

diff --git a/README.md b/README.md
index e4a8f6d..1f94bb4 100644
--- a/README.md
+++ b/README.md
@@ -24,4 +24,4 @@ import { useWindowSize, useLink, useTitle } from "@flare/react-hooks";
 
 **1.0.0** - This version includes the initial version of react-hooks package.  
 **1.0.1** - Small changes related to appearance (domain and readme updates).  
-**1.1.0** - The project has been migrated to Typescript.
+**1.1.0** - The project was migrated to TypeScript, and unit testing using Jest was added to it.
diff --git a/tests/useLink.test.ts b/tests/useLink.test.ts
new file mode 100644
index 0000000..88d8af5
--- /dev/null
+++ b/tests/useLink.test.ts
@@ -0,0 +1,32 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { useLink } from "../src";
+
+describe("useLink", () => {
+  it("should create a link element in the document head", () => {
+    const href = "https://example.com";
+    const rel = "stylesheet";
+
+    renderHook(() => useLink(href, rel));
+
+    const linkElement = document.querySelector(`link[href="${href}"][rel="${rel}"]`);
+
+    expect(linkElement).not.toBeNull();
+  });
+
+  it("should remove the link element from the document head when unmounted", () => {
+    const href = "https://example.com";
+    const rel = "stylesheet";
+
+    const { unmount } = renderHook(() => useLink(href, rel));
+
+    const linkElement = document.querySelector(`link[href="${href}"][rel="${rel}"]`);
+    expect(linkElement).not.toBeNull();
+
+    act(() => {
+      unmount();
+    });
+
+    const removedLinkElement = document.querySelector(`link[href="${href}"][rel="${rel}"]`);
+    expect(removedLinkElement).toBeNull();
+  });
+});
diff --git a/tests/useTitle.test.ts b/tests/useTitle.test.ts
new file mode 100644
index 0000000..d3cfd9c
--- /dev/null
+++ b/tests/useTitle.test.ts
@@ -0,0 +1,23 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { useTitle } from "../src";
+
+describe("useTitle", () => {
+  it("should set the document title", () => {
+    const title = "New Page Title";
+    renderHook(() => useTitle(title));
+    expect(document.title).toBe(title);
+  });
+
+  it("should reset the document title when unmounted", () => {
+    const title = "New Page Title";
+    const { unmount } = renderHook(() => useTitle(title));
+    expect(document.title).toBe(title);
+
+    act(() => {
+      unmount();
+    });
+
+    // The document title should now be reset to its previous value
+    expect(document.title).not.toBe(title);
+  });
+});
diff --git a/tests/useWindowSize.test.ts b/tests/useWindowSize.test.ts
new file mode 100644
index 0000000..1ca9a38
--- /dev/null
+++ b/tests/useWindowSize.test.ts
@@ -0,0 +1,69 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import { waitFor } from "@testing-library/dom";
+import { useWindowSize } from "../src";
+
+describe("useWindowSize", () => {
+  it("should update the window size on window resize", async () => {
+    const { result } = renderHook(() => useWindowSize());
+
+    const newWidth = 800;
+    const newHeight = 600;
+
+    act(() => {
+      // Simulate a window resize event
+      window.innerWidth = newWidth;
+      window.innerHeight = newHeight;
+
+      // Trigger the event manually
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.windowSize.width).toBe(newWidth);
+      expect(result.current.windowSize.height).toBe(newHeight);
+    });
+  });
+
+  it("should correctly identify the screen size", async () => {
+    const { result } = renderHook(() => useWindowSize());
+
+    // Simulate a window size of a mobile device
+    act(() => {
+      window.innerWidth = 500;
+      window.innerHeight = 800;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.isMobile).toBe(true);
+      expect(result.current.isTablet).toBe(false);
+      expect(result.current.isDesktop).toBe(false);
+    });
+
+    // Simulate a window size of a tablet device
+    act(() => {
+      window.innerWidth = 900;
+      window.innerHeight = 1200;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.isMobile).toBe(false);
+      expect(result.current.isTablet).toBe(true);
+      expect(result.current.isDesktop).toBe(false);
+    });
+
+    // Simulate a window size of a desktop device
+    act(() => {
+      window.innerWidth = 1200;
+      window.innerHeight = 1600;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.isMobile).toBe(false);
+      expect(result.current.isTablet).toBe(false);
+      expect(result.current.isDesktop).toBe(true);
+    });
+  });
+});