src/utils/providers/motion-provider/motion-provider.test.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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}`
    );
  });
});