@dr.pogodin/react-utils 1.38.1 → 1.39.0

package/build/types-code/index.d.ts

@@ -2,7 +2,6 @@ import 'styles/global.scss';
 import type ServerT from './server';
 declare const server: (typeof ServerT) | null;
 declare const client: any;
-export { default as api } from 'axios';
 export { type AsyncCollectionLoaderT, type AsyncDataEnvelopeT, type AsyncDataLoaderT, type ForceT, type UseAsyncDataOptionsT, type UseAsyncDataResT, type UseGlobalStateResT, type ValueOrInitializerT, getGlobalState, GlobalStateProvider, newAsyncDataEnvelope, useAsyncCollection, useAsyncData, useGlobalState, withGlobalStateType, } from '@dr.pogodin/react-global-state';
 export * from './shared/components';
 export { type Listener, type Theme, config, Barrier, Emitter, isomorphy, getSsrContext, Semaphore, splitComponent, themed, ThemeProvider, time, webpack, withRetries, } from './shared/utils';

package/build/types-code/shared/components/Input/index.d.ts

@@ -2,6 +2,7 @@ import { type Theme } from '@dr.pogodin/react-themes';
 type ThemeKeyT = 'container' | 'input' | 'label';
 declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     label?: React.ReactNode;
+    testId?: string;
     theme: Theme<ThemeKeyT>;
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/types-code/shared/utils/jest/index.d.ts

@@ -1,3 +1,4 @@
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { type ReactNode, act } from 'react';
 import { type RenderResult } from '@testing-library/react';
 /**
@@ -25,6 +26,8 @@ export declare function unmockClientSide(): void;
  * @return {string}
  */
 export declare function getMockUuid(seed?: number): string;
+export type AxiosRequestHandlerT = (config: AxiosRequestConfig) => Partial<AxiosResponse> | null | undefined;
+export declare function mockAxios(handlers: AxiosRequestHandlerT[]): any;
 /**
  * Advances mock timers, and mock date by the specified time.
  * @param {number} time Time step [ms].

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.38.1",
+  "version": "1.39.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -30,14 +30,14 @@
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
-    "qs": "^6.12.2",
+    "qs": "^6.12.3",
     "raf": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.24.1",
     "request-ip": "^3.3.0",
-    "rimraf": "^5.0.8",
+    "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
@@ -113,7 +113,7 @@
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.7",
     "sass-loader": "^14.2.1",
     "sitemap": "^8.0.0",
     "stylelint": "^16.6.1",
@@ -123,7 +123,7 @@
     "tstyche": "^2.0.0",
     "typed-scss-modules": "^8.0.1",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^7.15.0",
+    "typescript-eslint": "^7.16.0",
     "webpack": "^5.92.1",
     "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",

package/src/index.ts

@@ -8,8 +8,6 @@ const server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) |
 
 const client = server ? undefined : require('./client').default;
 
-export { default as api } from 'axios';
-
 export {
   type AsyncCollectionLoaderT,
   type AsyncDataEnvelopeT,

package/src/shared/components/Input/index.tsx

@@ -11,6 +11,7 @@ type ThemeKeyT =
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
+  testId?: string;
   theme: Theme<ThemeKeyT>;
 };
 
@@ -26,6 +27,7 @@ type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
 const Input = forwardRef<HTMLInputElement, PropsT>((
   {
     label,
+    testId,
     theme,
     ...rest
   }: PropsT,
@@ -35,6 +37,7 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
     { label === undefined ? null : <div className={theme.label}>{label}</div> }
     <input
       className={theme.input}
+      data-testid={testId}
       ref={ref}
       {...rest} // eslint-disable-line react/jsx-props-no-spreading
     />

package/src/shared/components/Throbber/theme.scss

@@ -1,3 +1,8 @@
+@keyframes bouncing {
+  from { top: -0.3em; }
+  to { top: 0.3em; }
+}
+
 *,
 .context,
 .ad.hoc {
@@ -6,11 +11,6 @@
   }
 
   &.circle {
-    @keyframes bouncing {
-      from { top: -0.3em; }
-      to { top: 0.3em; }
-    }
-
     animation: bouncing 0.4s ease-in infinite alternate;
     background: black;
     border-radius: 0.3em;

package/src/shared/utils/jest/index.tsx

@@ -1,6 +1,12 @@
 /* global jest, document */
 /* eslint-disable import/no-extraneous-dependencies */
 
+import type {
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios';
+
 import mockdate from 'mockdate';
 import { type ReactNode, act } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
@@ -53,6 +59,43 @@ export function getMockUuid(seed = 0) {
   return `${x.slice(0, 8)}-${x.slice(8, 12)}-${x.slice(12, 16)}-${x.slice(16, 20)}-${x.slice(20)}`;
 }
 
+export type AxiosRequestHandlerT =
+  (config: AxiosRequestConfig) => Partial<AxiosResponse> | null | undefined;
+
+export function mockAxios(handlers: AxiosRequestHandlerT[]) {
+  const axios = jest.requireActual('axios');
+
+  axios.defaults.adapter = async (config: AxiosRequestConfig): Promise<AxiosResponse> => {
+    for (let i = 0; i < handlers.length; ++i) {
+      const res = handlers[i]?.(config);
+      if (res) {
+        return {
+          config: config as InternalAxiosRequestConfig,
+          data: null,
+          headers: {},
+          status: 200,
+          statusText: 'OK',
+          ...res,
+        };
+      }
+    }
+
+    // Fallback to the regular network request.
+    const res = await axios({ ...config, adapter: ['xhr', 'http', 'fetch'] });
+
+    console.warn(
+      'Network request has not been mocked for a test.\n\nConfig:\n',
+      config,
+      '\n\nResult:\n',
+      JSON.stringify(res, null, 2),
+    );
+
+    return res;
+  };
+
+  return axios;
+}
+
 /**
  * Advances mock timers, and mock date by the specified time.
  * @param {number} time Time step [ms].