added unit tests
parent
da0a363429
commit
b8c206f6bd
|
@ -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.0** - This version includes the initial version of react-hooks package.
|
||||||
**1.0.1** - Small changes related to appearance (domain and readme updates).
|
**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.
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue