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, 50 insertions, 0 deletions

diff --git a/src/utils/providers/motion-provider/motion-provider.test.tsx b/src/utils/providers/motion-provider/motion-provider.test.tsx
new file mode 100644
index 0000000..3a02e6f
--- /dev/null
+++ b/src/utils/providers/motion-provider/motion-provider.test.tsx
@@ -0,0 +1,50 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { type FC, useContext } from 'react';
+import { MotionContext, MotionProvider } from './motion-provider';
+
+const bodyPrefix = 'Motion is reduced:';
+
+const ComponentTest: FC = () => {
+  const { isReduced } = useContext(MotionContext);
+
+  return (
+    <div>
+      {bodyPrefix} {`${isReduced}`}
+    </div>
+  );
+};
+
+describe('MotionProvider', () => {
+  it('uses the default value when the provider is not used', () => {
+    const defaultValue = false;
+
+    render(<ComponentTest />);
+
+    expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
+      `${bodyPrefix} ${defaultValue}`
+    );
+  });
+
+  it('provides the given value to its children and set a matching attribute', () => {
+    const attribute = 'eius';
+    const isReduced = true;
+
+    const { baseElement } = render(
+      <MotionProvider
+        attribute={attribute}
+        storageKey="aperiam"
+        hasReducedMotion={isReduced}
+      >
+        <ComponentTest />
+      </MotionProvider>
+    );
+
+    expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
+      `${bodyPrefix} ${isReduced}`
+    );
+    expect(baseElement.parentElement?.getAttribute(`data-${attribute}`)).toBe(
+      `${isReduced}`
+    );
+  });
+});