70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
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);
|
|
});
|
|
});
|
|
});
|