src/shared/hoc/withProvider/index.js

@@ -0,0 +1 @@
+export { default as withProvider } from './ui/withProvider.ui';

src/shared/hoc/withProvider/ui/withProvider.spec.jsx

@@ -0,0 +1,99 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import React, { useContext, useMemo, useState } from 'react';
+
+import { withProvider } from 'shared/hoc/withProvider/index';
+
+describe('Test withProvider', () => {
+  const renderCounter = () => {
+    const TestContext = React.createContext({});
+
+    const TestProvider = (props) => {
+      const { children } = props;
+
+      const [testState, setTestState] = useState(100);
+
+      const contextValue = useMemo(() => ({
+        testState,
+        setTestState,
+      }), [testState]);
+
+      return (
+        <TestContext.Provider value={contextValue}>
+          {children}
+        </TestContext.Provider>
+      );
+    };
+
+    TestProvider.propTypes = {
+      children: PropTypes.node.isRequired,
+    };
+
+    const Counter = () => {
+      const {
+        testState,
+        setTestState,
+      } = useContext(TestContext);
+
+      return (
+        <>
+          <button
+            data-testid="minus-btn"
+            type="button"
+            onClick={() => {
+              setTestState((prev) => prev - 1);
+            }}
+          >
+            -
+          </button>
+
+          <span data-testid="counter">
+            {testState}
+          </span>
+
+          <button
+            data-testid="plus-btn"
+            type="button"
+            onClick={() => {
+              setTestState((prev) => prev + 1);
+            }}
+          >
+            +
+          </button>
+        </>
+
+      );
+    };
+
+    const CounterWithTestProvider = withProvider(TestProvider)(Counter);
+
+    render(<CounterWithTestProvider />);
+  };
+
+  test('initial state', () => {
+    renderCounter();
+
+    const counterElem = screen.getByTestId('counter');
+    expect(counterElem).toHaveTextContent(100);
+  });
+
+  test('change state - increment', () => {
+    renderCounter();
+
+    const plusBtn = screen.getByTestId('plus-btn');
+    fireEvent.click(plusBtn);
+
+    const counterElem = screen.getByTestId('counter');
+    expect(counterElem).toHaveTextContent(101);
+  });
+
+  test('change state - decrement', () => {
+    renderCounter();
+
+    const minusBtn = screen.getByTestId('minus-btn');
+    fireEvent.click(minusBtn);
+
+    const counterElem = screen.getByTestId('counter');
+    expect(counterElem).toHaveTextContent(99);
+  });
+});

src/shared/hoc/withProvider/ui/withProvider.ui.jsx

@@ -0,0 +1,9 @@
+// todo fix eslint
+// eslint-disable-next-line react/function-component-definition
+const withProvider = (Provider) => (Component) => (...params) => (
+  <Provider>
+    <Component {...params} />
+  </Provider>
+);
+
+export default withProvider;