@sima-land/isomorph 10.1.0 → 11.0.0-alpha.0

package/src/utils/browser/analytics/__test__/data-layer.test.ts

@@ -0,0 +1,50 @@
+import { dataLayerPush } from '../data-layer';
+
+describe('dataLayerPush', () => {
+  beforeAll(() => {
+    (window as any).dataLayer = {
+      checkContext: () => 123,
+
+      push: jest.fn(function (this: any, data) {
+        // имитируем реальную работу window.dataLayer.push: в процессе удаляет data.n
+        delete data.n;
+
+        // имитируем реальную работу window.dataLayer.push: в процессе вызывает другие методы с this
+        this.checkContext();
+      }),
+    };
+  });
+
+  afterAll(() => {
+    delete (window as any).dataLayer;
+  });
+
+  it('should handle window.dataLayer.push mutates object argument', () => {
+    const testData = {
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    };
+
+    expect((window as any).dataLayer.push).toBeCalledTimes(0);
+
+    dataLayerPush(testData);
+
+    expect((window as any).dataLayer.push).toBeCalledTimes(1);
+    expect((window as any).dataLayer.push.mock.calls[0][0]).toEqual({
+      prop1: 1,
+      prop2: 2,
+    });
+    expect(testData).toEqual({
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    });
+  });
+
+  it('should handle window.dataLayer.push absence', () => {
+    delete (window as any).dataLayer;
+
+    expect(() => dataLayerPush({ n: 'test-123' })).not.toThrow();
+  });
+});

package/src/utils/browser/analytics/__test__/oko.test.tsx

@@ -0,0 +1,143 @@
+import React, { createElement } from 'react';
+import { render } from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { okoPush, useOkoPush } from '../oko';
+
+describe('useOkoPush', () => {
+  const TestComponent = ({ prop }: any) => {
+    const fn = useOkoPush({
+      n: 'test-event',
+      prop,
+    });
+
+    return createElement('div', { 'data-testid': 'test-block', onClick: fn });
+  };
+
+  beforeAll(() => {
+    (window as any).oko = {
+      push: jest.fn(),
+    };
+  });
+
+  afterAll(() => {
+    delete (window as any).oko;
+  });
+
+  it('should call', () => {
+    const container = document.createElement('div');
+
+    document.body.append(container);
+
+    render(<TestComponent prop={123} />, container);
+
+    expect((window as any).oko.push).toHaveBeenCalledTimes(0);
+
+    act(() => {
+      Simulate.click(container.querySelector('[data-testid="test-block"]') as HTMLElement);
+    });
+
+    expect((window as any).oko.push).toHaveBeenCalledTimes(1);
+    expect((window as any).oko.push).toHaveBeenCalledWith({
+      n: 'test-event',
+      prop: 123,
+    });
+  });
+
+  it('should throw error', async () => {
+    const container = document.createElement('div');
+
+    document.body.append(container);
+
+    render(<TestComponent prop={1} />, container);
+
+    const renderWithError = () => {
+      render(<TestComponent prop={2} />, container);
+    };
+
+    expect(renderWithError).toThrow(
+      Error(
+        [
+          'useAnalytics: Данные для аналитики изменились.',
+          'Если необходимо использовать динамические данные, вынесите логику из React-компонента.',
+        ].join('\n'),
+      ),
+    );
+  });
+
+  it('should do not throw for complex object structure', () => {
+    const ComplexTest = () => {
+      const fn = useOkoPush({
+        n: 'custom',
+        category: 'balance_goods',
+        custom_str: ['minus'],
+      });
+
+      return <div data-testid='test-block' onClick={fn} />;
+    };
+
+    const container = document.createElement('div');
+
+    document.body.append(container);
+
+    act(() => {
+      render(<ComplexTest />, container);
+    });
+
+    const secondRender = () => {
+      act(() => {
+        render(<ComplexTest />, container);
+      });
+    };
+
+    expect(secondRender).not.toThrow();
+  });
+});
+
+describe('okoPush', () => {
+  beforeAll(() => {
+    (window as any).oko = {
+      checkContext: () => 123,
+
+      push: jest.fn(function (this: any, data) {
+        // имитируем реальную работу window.oko.push: в процессе удаляет data.n
+        delete data.n;
+
+        // имитируем реальную работу window.oko.push: в процессе вызывает другие методы с this
+        this.checkContext();
+      }),
+    };
+  });
+
+  afterAll(() => {
+    delete (window as any).oko;
+  });
+
+  it('should handle window.oko.push mutates object argument', () => {
+    const testData = {
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    };
+
+    expect((window as any).oko.push).toBeCalledTimes(0);
+
+    okoPush(testData);
+
+    expect((window as any).oko.push).toBeCalledTimes(1);
+    expect((window as any).oko.push.mock.calls[0][0]).toEqual({
+      prop1: 1,
+      prop2: 2,
+    });
+    expect(testData).toEqual({
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    });
+  });
+
+  it('should handle window.oko.push absence', () => {
+    delete (window as any).oko;
+
+    expect(() => okoPush({ n: 'test-123' })).not.toThrow();
+  });
+});

package/src/{browser → utils/browser}/analytics/oko.ts

@@ -32,10 +32,12 @@ export const useOkoPush = (data: OkoEvent) => {
   }
 
   if (!isEqual(data, dataRef.current)) {
-    throw Error([
-      'useAnalytics: Данные для аналитики изменились.',
-      'Если необходимо использовать динамические данные, вынесите логику из React-компонента.',
-    ].join('\n'));
+    throw Error(
+      [
+        'useAnalytics: Данные для аналитики изменились.',
+        'Если необходимо использовать динамические данные, вынесите логику из React-компонента.',
+      ].join('\n'),
+    );
   }
 
   return fnRef.current;

package/src/utils/browser/storage/index.ts

@@ -0,0 +1,75 @@
+/* eslint-disable require-jsdoc, jsdoc/require-jsdoc */
+
+export interface StorageUtils
+  extends Pick<Storage, 'clear' | 'getItem' | 'key' | 'removeItem' | 'setItem' | 'length'> {
+  isAvailable: () => boolean;
+}
+
+export function createStorageUtils(getStorage: () => Storage): StorageUtils {
+  function isAvailable(): boolean {
+    try {
+      const testKey = `local_storage_test_key::${Date.now()}`;
+
+      getStorage().setItem(testKey, testKey);
+      getStorage().removeItem(testKey);
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  function clear(): void {
+    if (isAvailable()) {
+      getStorage().clear();
+    }
+  }
+
+  function getItem(name: string): string | null {
+    if (isAvailable()) {
+      return getStorage().getItem(name);
+    }
+
+    return null;
+  }
+
+  function key(index: number): string | null {
+    if (isAvailable()) {
+      return getStorage().key(index);
+    }
+    return null;
+  }
+
+  function removeItem(name: string): void {
+    if (isAvailable()) {
+      getStorage().removeItem(name);
+    }
+  }
+
+  function setItem(name: string, value: string): void {
+    if (isAvailable()) {
+      getStorage().setItem(name, value);
+    }
+  }
+
+  function length(): number {
+    if (isAvailable()) {
+      return getStorage().length;
+    }
+
+    return 0;
+  }
+
+  return {
+    isAvailable,
+
+    clear,
+    getItem,
+    key,
+    removeItem,
+    setItem,
+    get length() {
+      return length();
+    },
+  };
+}

package/src/utils/number.ts

@@ -0,0 +1,8 @@
+/**
+ * Переводит наносекунды в миллисекунды.
+ * @param nanoseconds Наносекунды.
+ * @return Миллисекунды.
+ */
+export function toMilliseconds(nanoseconds: bigint): number {
+  return Number(nanoseconds / 1000000n);
+}

package/src/utils/react/error-handlers/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorBoundary should call captureException 1`] = `<div />`;
+
+exports[`ErrorBoundary should render children component 1`] = `
+<div>
+  <div>
+    Normal component
+  </div>
+</div>
+`;
+
+exports[`ErrorBoundary should render fallback component 1`] = `
+<div>
+  <div>
+    Fallback
+  </div>
+</div>
+`;
+
+exports[`SafeSuspense should render with props 1`] = `
+<div>
+  <div>
+    Normal component
+  </div>
+</div>
+`;

package/src/utils/react/error-handlers/__test__/index.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ErrorBoundary, SafeSuspense } from '..';
+
+describe('ErrorBoundary', () => {
+  const error = new Error('Test error');
+
+  const FailedComponent = () => {
+    throw error;
+  };
+
+  it('should render children component', () => {
+    const { container } = render(
+      <ErrorBoundary fallback={null}>
+        <div>Normal component</div>
+      </ErrorBoundary>,
+    );
+
+    expect(container.textContent).toContain('Normal component');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render fallback component', () => {
+    const { container } = render(
+      <ErrorBoundary fallback={<div>Fallback</div>}>
+        <>
+          <div>Normal component</div>
+          <FailedComponent />
+        </>
+      </ErrorBoundary>,
+    );
+
+    expect(container.textContent).toContain('Fallback');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should call captureException', () => {
+    const handlerException = jest.fn();
+
+    const { container } = render(
+      <ErrorBoundary fallback={null} onError={handlerException}>
+        <>
+          <div>Normal component</div>
+          <FailedComponent />
+        </>
+      </ErrorBoundary>,
+    );
+
+    expect(handlerException).toBeCalledWith(error, { componentStack: expect.any(String) });
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('SafeSuspense', () => {
+  it('should render with props', () => {
+    const { container } = render(
+      <SafeSuspense fallback={<div>Fallback</div>} onError={jest.fn()}>
+        <div>Normal component</div>
+      </SafeSuspense>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/utils/react/error-handlers/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+export interface Props {
+  /** Дочерний компонент. */
+  children: NonNullable<React.ReactNode> | null;
+
+  /** Запасной элемент, если возникла ошибка. */
+  fallback: NonNullable<React.ReactNode> | null;
+
+  /** Функция для логирования ошибки. */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+/**
+ * Обработчик ошибок в React-компонентах.
+ */
+export class ErrorBoundary extends React.Component<Props, { hasError: boolean }> {
+  /**
+   * @param props Свойства.
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { hasError: false };
+  }
+
+  /** @inheritdoc */
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  /** @inheritdoc */
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const { onError } = this.props;
+
+    onError?.(error, errorInfo);
+  }
+
+  /**
+   * Рендер.
+   * @return Дочерний элемент либо запасное значение.
+   */
+  render() {
+    const { children, fallback } = this.props;
+
+    return this.state.hasError ? fallback : children;
+  }
+}
+
+/**
+ * Обертка над Suspense c перехватом ошибок.
+ * @todo Возможно этот компонент не нужен...
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export const SafeSuspense = ({ children, fallback, onError }: Props) => (
+  <React.Suspense fallback={fallback}>
+    <ErrorBoundary fallback={fallback} onError={onError}>
+      {children}
+    </ErrorBoundary>
+  </React.Suspense>
+);

package/src/utils/redux/__test__/remote-data.test.ts

@@ -0,0 +1,50 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { createRemoteDataReducers, RemoteDataState, STATUS } from '../remote-data';
+
+interface TestState extends RemoteDataState<number, string> {
+  foo: 'bar';
+}
+
+describe('createGenericSlice', () => {
+  const initialState: TestState = {
+    data: 0,
+    error: '',
+    status: STATUS.initial,
+    foo: 'bar',
+  };
+
+  const { reducer, actions } = createSlice({
+    name: 'user',
+    initialState,
+    reducers: createRemoteDataReducers<TestState>(),
+  });
+
+  it('should handle request action', () => {
+    const actual = reducer(initialState, actions.request());
+
+    expect(actual).toEqual({
+      ...initialState,
+      status: STATUS.fetching,
+    });
+  });
+
+  it('should handle success action', () => {
+    const actual = reducer(initialState, actions.success(234));
+
+    expect(actual).toEqual({
+      ...initialState,
+      data: 234,
+      status: STATUS.success,
+    });
+  });
+
+  it('should handle failure action', () => {
+    const actual = reducer(initialState, actions.failure('error message here'));
+
+    expect(actual).toEqual({
+      ...initialState,
+      error: 'error message here',
+      status: STATUS.failure,
+    });
+  });
+});

package/src/utils/redux/remote-data.ts

@@ -0,0 +1,34 @@
+import type { PayloadAction, Draft } from '@reduxjs/toolkit';
+
+export type Status = 'initial' | 'fetching' | 'success' | 'failure';
+
+export interface RemoteDataState<TData, TError> {
+  data: TData;
+  error: TError;
+  status: Status;
+}
+
+export const STATUS: Record<Status, Status> = {
+  initial: 'initial',
+  fetching: 'fetching',
+  success: 'success',
+  failure: 'failure',
+};
+
+/**
+ * Возвращает набор обработчиков для работы с удаленными данными.
+ * @return Набор.
+ */
+export const createRemoteDataReducers = <S extends RemoteDataState<any, any>>() => ({
+  request: (state: Draft<S>) => {
+    state.status = STATUS.fetching;
+  },
+  success: (state: Draft<S>, action: PayloadAction<S['data']>) => {
+    state.data = action.payload;
+    state.status = STATUS.success;
+  },
+  failure: (state: Draft<S>, action: PayloadAction<S['error']>) => {
+    state.error = action.payload;
+    state.status = STATUS.failure;
+  },
+});

package/src/utils/redux-saga/__test__/take-chain.test.ts

@@ -0,0 +1,141 @@
+import { delay, fork, put, race, take } from 'redux-saga/effects';
+import { generateTakeChain, putDelayed, takeChain } from '../take-chain';
+
+const SettlementTypes = {
+  UPDATE: 'settlement',
+  REMOVE: 'settlement',
+};
+
+describe('takeChain', () => {
+  beforeEach(() => {
+    jest.spyOn(Date, 'now').mockImplementation(() => 123);
+  });
+
+  const testTypes = [SettlementTypes.UPDATE, SettlementTypes.REMOVE];
+  const timeout = 100;
+  const testTask = jest.fn();
+  const deps: [string, number] = ['John', 23];
+
+  it('generateTakeChain few actions', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: SettlementTypes.REMOVE.toString() }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+    expect(
+      gen.next({
+        action: { type: SettlementTypes.UPDATE.toString() },
+        canceled: { type: 'BREAK_123' },
+      }).value,
+    ).toEqual(
+      fork(testTask, ...deps, [
+        { type: SettlementTypes.REMOVE.toString() },
+        { type: SettlementTypes.UPDATE.toString() },
+      ]),
+    );
+    expect(gen.next()).toBeTruthy();
+  });
+
+  it('generateTakeChain one action', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: 'settlement/REMOVE' }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+    expect(
+      gen.next({
+        action: undefined,
+        canceled: { type: 'BREAK_123' },
+      }).value,
+    ).toEqual(fork(testTask, ...deps, [{ type: 'settlement/REMOVE' }]));
+    expect(gen.next()).toBeTruthy();
+  });
+
+  it('generateTakeChain without canceled', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: 'settlement/REMOVE' }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+    expect(
+      gen.next({
+        action: undefined,
+        canceled: undefined,
+      }).value,
+    ).toBeTruthy();
+  });
+
+  it('generateTakeChain when puts all actions and have not canceled', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: SettlementTypes.REMOVE.toString() }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+
+    expect(
+      gen.next({
+        action: { type: SettlementTypes.UPDATE.toString() },
+        canceled: undefined,
+      }).value,
+    ).toEqual(
+      fork(testTask, ...deps, [
+        { type: SettlementTypes.REMOVE.toString() },
+        { type: SettlementTypes.UPDATE.toString() },
+      ]),
+    );
+    expect(gen.next()).toBeTruthy();
+  });
+
+  it('should fork generateTakeChain', () => {
+    const fakeTakeChain = takeChain(timeout, testTypes, testTask, ...deps);
+
+    expect(fakeTakeChain).toEqual(fork(generateTakeChain, timeout, testTypes, testTask, deps));
+  });
+});
+
+describe('putDelayed', () => {
+  it('should works properly', () => {
+    const gen = putDelayed(10, { type: 'test' });
+
+    expect(gen.next().value).toEqual(delay(10));
+    expect(gen.next().value).toEqual(put({ type: 'test' }));
+
+    expect(gen.next()).toBeTruthy();
+  });
+});