76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import { renderHook, act } from '@testing-library/react-hooks';
|
|
|
|
import { useDimensions } from '../useDimensions';
|
|
|
|
let listener: ((rect: any) => void) | undefined = undefined;
|
|
|
|
(window as any).ResizeObserver = class ResizeObserver {
|
|
constructor(ls) {
|
|
listener = ls;
|
|
}
|
|
|
|
observe() {}
|
|
disconnect() {}
|
|
};
|
|
|
|
describe('useDimensions()', () => {
|
|
it('defaults to 0', () => {
|
|
const { result } = renderHook(() => useDimensions());
|
|
|
|
act(() => {
|
|
const div = document.createElement('div');
|
|
(result.current[0] as any)(div);
|
|
});
|
|
|
|
expect(result.current[1]).toMatchObject({
|
|
width: 0,
|
|
height: 0,
|
|
});
|
|
});
|
|
|
|
it('measures the dimensions of a DOM element', () => {
|
|
const { result } = renderHook(() => useDimensions());
|
|
|
|
act(() => {
|
|
const div = document.createElement('div');
|
|
(result.current[0] as any)(div);
|
|
});
|
|
|
|
act(() => {
|
|
listener!([
|
|
{
|
|
contentRect: {
|
|
width: 200,
|
|
height: 200,
|
|
},
|
|
},
|
|
]);
|
|
});
|
|
|
|
expect(result.current[1]).toMatchObject({
|
|
width: 200,
|
|
height: 200,
|
|
});
|
|
});
|
|
|
|
it('disconnects on unmount', () => {
|
|
const disconnect = jest.fn();
|
|
(window as any).ResizeObserver = class ResizeObserver {
|
|
observe() {}
|
|
disconnect() {
|
|
disconnect();
|
|
}
|
|
};
|
|
|
|
const { result, unmount } = renderHook(() => useDimensions());
|
|
|
|
act(() => {
|
|
const div = document.createElement('div');
|
|
(result.current[0] as any)(div);
|
|
});
|
|
|
|
expect(disconnect).toHaveBeenCalledTimes(0);
|
|
unmount();
|
|
expect(disconnect).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|