refactor(hooks): replace useRouteChange with useOnRouteChange hook

* handle both event start and event complete
* clean the effect
* add tests

1 files changed, 69 insertions, 0 deletions

diff --git a/src/utils/hooks/use-on-route-change/use-on-route-change.test.tsx b/src/utils/hooks/use-on-route-change/use-on-route-change.test.tsx
new file mode 100644
index 0000000..afcad0a
--- /dev/null
+++ b/src/utils/hooks/use-on-route-change/use-on-route-change.test.tsx
@@ -0,0 +1,69 @@
+import { describe, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import Link from 'next/link';
+import nextRouterMock from 'next-router-mock';
+import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
+import {
+  type OnRouteChangeHandler,
+  useOnRouteChange,
+  type OnRouteChangeStep,
+} from './use-on-route-change';
+
+type TestComponentProps = {
+  callback: OnRouteChangeHandler;
+  href: string;
+  step?: OnRouteChangeStep;
+};
+
+const TestComponent = ({ callback, href, step }: TestComponentProps) => {
+  useOnRouteChange(callback, step);
+
+  return (
+    <MemoryRouterProvider>
+      <Link href={href}>New page</Link>
+    </MemoryRouterProvider>
+  );
+};
+
+describe('useOnRouteChange', () => {
+  it('trigger a callback when the route change event starts', async () => {
+    const cb = jest.fn();
+    const user = userEvent.setup();
+    const newPage = '/new-page';
+
+    nextRouterMock.push('/initial-page');
+
+    render(<TestComponent callback={cb} href={newPage} />);
+
+    expect(cb).not.toHaveBeenCalled();
+
+    await user.click(rtlScreen.getByRole('link'));
+
+    expect(nextRouterMock).toMatchObject({
+      asPath: newPage,
+      pathname: newPage,
+    });
+    expect(cb).toHaveBeenCalled();
+  });
+
+  it('can trigger a callback when the route change event is complete', async () => {
+    const cb = jest.fn();
+    const user = userEvent.setup();
+    const newPage = '/new-page';
+
+    nextRouterMock.push('/initial-page');
+
+    render(<TestComponent callback={cb} href={newPage} step="end" />);
+
+    expect(cb).not.toHaveBeenCalled();
+
+    await user.click(rtlScreen.getByRole('link'));
+
+    expect(nextRouterMock).toMatchObject({
+      asPath: newPage,
+      pathname: newPage,
+    });
+    expect(cb).toHaveBeenCalled();
+  });
+});