Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: add useAnimationLoop hook #129

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
100 changes: 99 additions & 1 deletion src/hooks/useAnimationLoop/useAnimationLoop.test.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { renderHook } from '@testing-library/react';
import { jest } from '@jest/globals';
import { renderHook, waitFor } from '@testing-library/react';
import { useAnimationLoop } from './useAnimationLoop.js';

describe('useAnimationLoop', () => {
leroykorterink marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -7,4 +8,101 @@ describe('useAnimationLoop', () => {
initialProps: undefined,
});
});

it('should not execute the callback function when enabled is not passed', async () => {
const spy = jest.fn();
renderHook(
({ callback }) => {
useAnimationLoop(callback);
},
{
initialProps: {
callback: () => {
spy();
},
},
},
);

waitFor(() => {
expect(spy).toBeCalledTimes(0);
});
leroykorterink marked this conversation as resolved.
Show resolved Hide resolved
});

it('should execute the callback function when useAnimationLoop is enabled', async () => {
const spy = jest.fn();
renderHook(
({ callback, enabled }) => {
useAnimationLoop(callback, enabled);
},
{
initialProps: {
callback: () => {
spy();
},
enabled: true,
},
},
);

expect(spy).toBeCalledTimes(0);
waitFor(() => {
expect(spy).toBeCalled();
});
});

it('should execute another callback function when it is passed to useAnimationLoop and not execute previously passed callback function', async () => {
const spyFirstRender = jest.fn();
const spySecondRender = jest.fn();
const { rerender } = renderHook(
({ callback, enabled }) => {
useAnimationLoop(callback, enabled);
},
{
initialProps: {
callback: () => {
spyFirstRender();
},
leroykorterink marked this conversation as resolved.
Show resolved Hide resolved
enabled: true,
},
},
);

waitFor(() => {
expect(spyFirstRender).toBeCalled();
expect(spySecondRender).toBeCalledTimes(0);
});

rerender({ callback: spySecondRender, enabled: true });
waitFor(() => {
expect(spySecondRender).toBeCalled();
expect(spyFirstRender).toBeCalledTimes(0);
leroykorterink marked this conversation as resolved.
Show resolved Hide resolved
});
});

it('should execute the callback function when useAnimationLoop is enabled on the first render and should not execute the callback function when useAnimationLoop is disabled on the second render', async () => {
const spy = jest.fn();
const { rerender } = renderHook(
({ callback, enabled }) => {
useAnimationLoop(callback, enabled);
},
{
initialProps: {
callback: () => {
spy();
},
enabled: true,
},
},
);

waitFor(() => {
expect(spy).toBeCalled();
});

rerender({ callback: spy, enabled: false });
waitFor(() => {
expect(spy).toBeCalledTimes(0);
leroykorterink marked this conversation as resolved.
Show resolved Hide resolved
});
});
});