test: add tests for with-view-model HOC

Author: js2me

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
       'error',
       { ignore: Object.keys(packageJson.peerDependencies) },
     ],
+    'unicorn/prevent-abbreviations': 'off'
   },
   overrides: [
     {

src/hoc/with-view-model.test.tsx

@@ -1,39 +1,87 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, } from '@testing-library/react';
+import { observer } from 'mobx-react-lite';
+import { ReactNode } from 'react';
 import { describe, expect, test } from 'vitest';
 
-import { ViewModelsContext } from '../contexts';
+import { ViewModelsProvider } from '..';
 import { TestViewModelStoreImpl } from '../view-model/abstract-view-model.store.test';
 import { TestViewModelImpl } from '../view-model/view-model.impl.test';
 
 import { ViewModelProps, withViewModel } from './with-view-model';
+import { createCounter } from '../utils';
+
+const createIdGenerator = (prefix?: string) => {
+  const counter = createCounter();
+  return () => (prefix || '') + counter().toString()
+}
 
 describe('withViewModel', () => {
   test('renders', () => {
     class VM extends TestViewModelImpl { }
     const View = ({ model }: ViewModelProps<VM>) => {
       return <div>{`hello ${model.id}`}</div>;
     };
-    const Component = withViewModel(VM)(View);
+    const Component = withViewModel(VM, { generateId: createIdGenerator() })(View);
 
     render(<Component />);
-    expect(screen.getByText('hello VM_0_00000')).toBeDefined();
+    expect(screen.getByText('hello VM_0')).toBeDefined();
+  });
+
+  test('renders nesting', () => {
+    class VM1 extends TestViewModelImpl { }
+    const View1 = ({
+      children,
+    }: ViewModelProps<VM1> & { children?: ReactNode }) => {
+      return (
+        <div data-testid="parent-container">
+          <div>parent</div>
+          <div>{children}</div>
+        </div>
+      );
+    };
+    const Component1 = withViewModel(VM1, { generateId: createIdGenerator() })(View1);
+
+    const Component2 = withViewModel(class VM2 extends TestViewModelImpl { }, { generateId: createIdGenerator() })(
+      () => {
+        return <div>child</div>;
+      },
+
+    );
+
+    render(
+      <Component1>
+        <Component2 />
+      </Component1>,
+    );
+    expect(screen.getByTestId('parent-container')).toBe(`<div
+  data-testid="parent-container"
+>
+  <div>
+    parent
+  </div>
+  <div>
+    <div>
+      child
+    </div>
+  </div>
+</div>`);
   });
 
   test('renders twice', async () => {
     class VM extends TestViewModelImpl { }
     const View = ({ model }: ViewModelProps<VM>) => {
       return <div>{`hello ${model.id}`}</div>;
     };
-    const Component = withViewModel(VM)(View);
+    const Component = withViewModel(VM, { generateId: createIdGenerator() })(View);
 
     render(
       <>
         <Component />
         <Component />
       </>,
     );
-    expect(screen.getByText('hello VM_1_00000')).toBeDefined();
-    expect(screen.getByText('hello VM_1_00001')).toBeDefined();
+    expect(screen.getByText('hello VM_0')).toBeDefined();
+    expect(screen.getByText('hello VM_1')).toBeDefined();
   });
 
   test('renders with fixed id', () => {
@@ -63,32 +111,32 @@ describe('withViewModel', () => {
     expect(await screen.findAllByText('hello my-test')).toHaveLength(2);
   });
 
-  test('renders with view model store', () => {
+  test('renders with view model store', async () => {
     class VM extends TestViewModelImpl { }
-    const View = ({ model }: ViewModelProps<VM>) => {
-      return <div>{`hello ${model.id}`}</div>;
-    };
+    const View = observer(({ model }: ViewModelProps<VM>) => {
+      return (
+        <div>
+          <div>{`hello my friend. Model has id ? ${!!model.id}`}</div>
+        </div>
+      );
+    });
     const Component = withViewModel(VM)(View);
     const vmStore = new TestViewModelStoreImpl();
 
-    render(
-      <div>
-        2
-        <Component />
-        1
-      </div>,
-      {
-        wrapper: ({ children }) => {
-          return (
-            <ViewModelsContext.Provider value={vmStore}>
-              {children}
-            </ViewModelsContext.Provider>
-          );
-        },
-      },
+    const Wrapper = ({ children }: { children?: ReactNode }) => {
+      return (
+        <ViewModelsProvider value={vmStore}>{children}</ViewModelsProvider>
+      );
+    };
+
+    await act(async () =>
+      render(<Component />, {
+        wrapper: Wrapper,
+      }),
     );
 
-    screen.debug();
-    expect(screen.getByText('hello VM_0_00000')).toBeDefined();
+    expect(
+      screen.getByText('hello my friend. Model has id ? true'),
+    ).toBeDefined();
   });
 });

src/hoc/with-view-model.tsx

@@ -28,11 +28,22 @@ export type ViewModelHocConfig<VM extends AnyViewModel> = {
    * Уникальный идентификатор вьюшки
    */
   id?: Maybe<string>;
+
+  /**
+   * Функция генератор идентификатор для вью модели
+   */
+  generateId?: (ctx: AnyObject) => string;
+
+  /**
+   * Компонент, который будет отрисован в случае если инциализация вью модели происходит слишком долго
+   */
   fallback?: ComponentType;
+
   /**
    * Доп. данные, которые могут быть полезны при создании VM
    */
   ctx?: AnyObject;
+
   /**
    * Функция, в которой можно вызывать доп. реакт хуки в результирующем компоненте
    */
@@ -68,9 +79,10 @@ export function withViewModel(
   Model: Class<any>,
   config?: ViewModelHocConfig<any>,
 ) {
-  const context: AnyObject = config?.ctx ?? {};
+  const ctx: AnyObject = config?.ctx ?? {};
 
-  context.VM = Model;
+  ctx.VM = Model;
+  ctx.generateId = config?.generateId;
 
   return (Component: ComponentType<any>) => {
     const instances = new Map<string, AnyViewModel>();
@@ -89,15 +101,15 @@ export function withViewModel(
       if (!idRef.current) {
         idRef.current =
           viewModels?.generateViewModelId({
-            ctx: context,
-            id: config?.id,
+            ctx: ctx,
+            id: config?.id,    
             VM: Model,
             parentViewModelId,
             fallback: config?.fallback,
             instances,
           }) ??
           config?.id ??
-          generateVMId(context);
+          generateVMId(ctx);
       }
 
       const id = idRef.current;
@@ -112,7 +124,7 @@ export function withViewModel(
             (parentViewModelId && instances.get(parentViewModelId)) || null,
           fallback: config?.fallback,
           instances,
-          ctx: context,
+          ctx: ctx,
         };
 
         const instance =

src/utils/counter.ts

@@ -0,0 +1,6 @@
+export const createCounter = () => {
+  let counter = 0;
+  return () => counter++;
+};
+
+export const internalCounter = createCounter();

src/utils/create-vm-id-generator.ts

@@ -1,4 +1,4 @@
-import { internalCounter, createCounter } from './id';
+import { internalCounter, createCounter } from './counter';
 import { AnyObject } from './types';
 
 declare const process: { env: { NODE_ENV?: string } };

src/utils/id.ts

@@ -1,2 +1,2 @@
-export * from './id';
+export * from './counter';
 export * from './create-vm-id-generator';