refactor(hooks,provider): move reduce motion setter

Since the local storage key is not meant to change between the
components, it should be set directly inside the app file. So
both the local storage and the data attribute should be handle
in a provider.
I also added a custom document because we need a script to
retrieve the stored value in local storage earlier to avoid
flashing on hydration.

1 files changed, 66 insertions, 0 deletions

diff --git a/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx b/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
new file mode 100644
index 0000000..6423c4c
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
@@ -0,0 +1,66 @@
+import { act, renderHook } from '@testing-library/react';
+import type { FC, ReactNode } from 'react';
+import { MotionProvider, type MotionProviderProps } from '../../providers';
+import { useReducedMotion } from './use-reduced-motion';
+
+const createWrapper = (
+  Wrapper: FC<MotionProviderProps>,
+  config: MotionProviderProps
+) =>
+  function CreatedWrapper({ children }: { children: ReactNode }) {
+    return <Wrapper {...config}>{children}</Wrapper>;
+  };
+
+describe('useReducedMotion', () => {
+  it('should return the default value without provider and prevent update', () => {
+    const { result } = renderHook(() => useReducedMotion());
+
+    expect(result.current.isReduced).toBe(false);
+
+    act(() => result.current.setIsReduced(true));
+
+    expect(result.current.isReduced).toBe(false);
+
+    act(() => result.current.toggleReducedMotion());
+
+    expect(result.current.isReduced).toBe(false);
+  });
+
+  it('can update the value', () => {
+    const defaultValue = true;
+
+    const { result } = renderHook(() => useReducedMotion(), {
+      wrapper: createWrapper(MotionProvider, {
+        attribute: 'aperiam',
+        hasReducedMotion: defaultValue,
+        storageKey: 'voluptate',
+      }),
+    });
+
+    expect(result.current.isReduced).toBe(defaultValue);
+
+    const newValue = false;
+
+    act(() => result.current.setIsReduced(newValue));
+
+    expect(result.current.isReduced).toBe(newValue);
+  });
+
+  it('can toggle the value', () => {
+    const defaultValue = false;
+
+    const { result } = renderHook(() => useReducedMotion(), {
+      wrapper: createWrapper(MotionProvider, {
+        attribute: 'aperiam',
+        hasReducedMotion: defaultValue,
+        storageKey: 'voluptate',
+      }),
+    });
+
+    expect(result.current.isReduced).toBe(defaultValue);
+
+    act(() => result.current.toggleReducedMotion());
+
+    expect(result.current.isReduced).toBe(!defaultValue);
+  });
+});