fix: try to improve withViewModel HOC, block render view if VM is not mounted

Author: js2me

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

@@ -3,10 +3,11 @@ import { observer } from 'mobx-react-lite';
 import { PropsWithChildren, ReactNode, useState } from 'react';
 import { describe, expect, test, vi } from 'vitest';
 
-import { ViewModelStore, ViewModelStoreImpl, ViewModelsProvider } from '..';
+import { ViewModelStore, ViewModelsProvider } from '..';
 import { createCounter } from '../utils';
 import { EmptyObject } from '../utils/types';
 import { ViewModelMock } from '../view-model/view-model.impl.test';
+import { ViewModelStoreMock } from '../view-model/view-model.store.impl.test';
 
 import { ViewModelProps, withViewModel } from './with-view-model';
 
@@ -223,14 +224,16 @@ describe('withViewModel', () => {
     expect(vm?.payload).toEqual({ counter: 3 });
   });
 
-  test('access to parent view model x3', async ({ task }) => {
+  test('access to parent view model x3', async ({ task, expect }) => {
     class VM1 extends ViewModelMock {
       vm1Value = 'foo';
     }
     const Component1 = withViewModel(VM1)(({
       children,
       model,
     }: PropsWithChildren & ViewModelProps<VM1>) => {
+      expect(model.isMounted).toBeTruthy();
+      expect(model.spies.mount).toBeCalledTimes(1);
       return <div data-testid={`vm-${model.vm1Value}`}>{children}</div>;
     });
 
@@ -241,6 +244,8 @@ describe('withViewModel', () => {
       children,
       model,
     }: PropsWithChildren & ViewModelProps<VM2>) => {
+      expect(model.isMounted).toBeTruthy();
+      expect(model.spies.mount).toBeCalledTimes(1);
       return (
         <div
           data-testid={`vm-${model.vm2Value}-${model.parentViewModel.vm1Value}`}
@@ -257,6 +262,8 @@ describe('withViewModel', () => {
       children,
       model,
     }: PropsWithChildren & ViewModelProps<VM3>) => {
+      expect(model.isMounted).toBeTruthy();
+      expect(model.spies.mount).toBeCalledTimes(1);
       return (
         <div
           data-testid={`vm-${model.vm3Value}-${model.parentViewModel.vm2Value}`}
@@ -292,7 +299,7 @@ describe('withViewModel', () => {
         );
       });
       const Component = withViewModel(VM, { generateId: () => '1' })(View);
-      const vmStore = new ViewModelStoreImpl();
+      const vmStore = new ViewModelStoreMock();
 
       const Wrapper = ({ children }: { children?: ReactNode }) => {
         return (
@@ -328,7 +335,7 @@ describe('withViewModel', () => {
         );
       });
       const Component = withViewModel(VM, { generateId: () => '1' })(View);
-      const vmStore = new ViewModelStoreImpl();
+      const vmStore = new ViewModelStoreMock();
 
       const Wrapper = ({ children }: { children?: ReactNode }) => {
         return (
@@ -343,10 +350,15 @@ describe('withViewModel', () => {
       );
 
       expect(viewModels).toBeDefined();
+      expect(vmStore.spies.get).toHaveBeenCalledTimes(0);
+      expect(vmStore._instanceAttachedCount.size).toBe(1);
+      expect(vmStore._unmountingViews.size).toBe(0);
+      expect(vmStore.mountedViewsCount).toBe(1);
+      expect(vmStore._mountingViews.size).toBe(0);
     });
 
     test('access to parent view model x3', async ({ task }) => {
-      const vmStore = new ViewModelStoreImpl();
+      const vmStore = new ViewModelStoreMock();
 
       const Wrapper = ({ children }: { children?: ReactNode }) => {
         return (
@@ -412,6 +424,11 @@ describe('withViewModel', () => {
       expect(container.firstChild).toMatchFileSnapshot(
         `../../tests/snapshots/hoc/with-view-model/view-model-store/${task.name}.html`,
       );
+      expect(vmStore.spies.get).toHaveBeenCalledTimes(0);
+      expect(vmStore._instanceAttachedCount.size).toBe(3);
+      expect(vmStore._unmountingViews.size).toBe(0);
+      expect(vmStore.mountedViewsCount).toBe(3);
+      expect(vmStore._mountingViews.size).toBe(0);
     });
   });
 });

src/hoc/with-view-model.tsx

@@ -137,17 +137,17 @@ export function withViewModel(
           new Model(configCreate);
 
         instances.set(id, instance);
-      }
-
-      const instance: ViewModel = instances.get(id)!;
 
-      useEffect(() => {
         if (viewModels) {
           viewModels.attach(instance);
         } else {
           instance.mount();
         }
+      }
+
+      const instance: ViewModel = instances.get(id)!;
 
+      useEffect(() => {
         return () => {
           if (viewModels) {
             viewModels.detach(id);
@@ -166,7 +166,10 @@ export function withViewModel(
 
       config?.reactHooks?.(allProps);
 
-      if ((!viewModels || viewModels.isAbleToRenderView(id)) && instance) {
+      if (
+        (!viewModels || viewModels.isAbleToRenderView(id)) &&
+        instance.isMounted
+      ) {
         return (
           <ActiveViewModelContext.Provider value={instance}>
             <Component {...(componentProps as any)} model={instance} />

src/hooks/use-view-model.test.tsx

@@ -2,9 +2,10 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 import { ReactNode, useState } from 'react';
 import { beforeEach, describe, expect, test } from 'vitest';
 
-import { ViewModelStore, ViewModelStoreImpl, ViewModelsProvider } from '..';
+import { ViewModelStore, ViewModelsProvider } from '..';
 import { withViewModel } from '../hoc';
 import { ViewModelMock } from '../view-model/view-model.impl.test';
+import { ViewModelStoreMock } from '../view-model/view-model.store.impl.test';
 
 import { useViewModel } from './use-view-model';
 
@@ -118,7 +119,7 @@ describe('withViewModel', () => {
         });
 
       test(`renders (${depth} depth)`, async () => {
-        const vmStore = new ViewModelStoreImpl();
+        const vmStore = new ViewModelStoreMock();
 
         const WrappedDepthComponent = () => {
           const reversed = [...depthsComponents].reverse();
@@ -220,7 +221,7 @@ describe('withViewModel', () => {
     test('container renders VM with fixed id and some child with dynamic id', async ({
       task,
     }) => {
-      const vmStore = new ViewModelStoreImpl();
+      const vmStore = new ViewModelStoreMock();
 
       class LayoutVM extends ViewModelMock {}
 
@@ -257,7 +258,7 @@ describe('withViewModel', () => {
     test('container remounts VM with fixed id and some child with dynamic id', async ({
       task,
     }) => {
-      const vmStore = new ViewModelStoreImpl();
+      const vmStore = new ViewModelStoreMock();
 
       class LayoutVM extends ViewModelMock {}
 

src/view-model/view-model.impl.test.ts

@@ -22,22 +22,23 @@ export class ViewModelMock<
     super({
       ...params,
       id: params?.id ?? '1',
-      payload: params?.payload ?? ({} as any),
+      payload: params?.payload as Payload,
     });
   }
 
   didMount(): void {
+    super.didMount();
     this.spies.didMount();
   }
 
   mount(): void {
-    super.mount();
     this.spies.mount();
+    super.mount();
   }
 
   unmount(): void {
-    super.unmount();
     this.spies.unmount();
+    super.unmount();
   }
 
   payloadChanged(payload: any): void {
@@ -46,6 +47,7 @@ export class ViewModelMock<
 
   didUnmount(): void {
     this.spies.didUnmount();
+    super.didUnmount();
   }
 }
 

src/view-model/view-model.store.impl.test.ts

@@ -6,25 +6,50 @@ import { AbstractViewModelParams } from './abstract-view-model.types';
 import { ViewModel } from './view-model';
 import { ViewModelMock } from './view-model.impl.test';
 import { ViewModelStore } from './view-model.store';
-import { ViewModelGenerateIdConfig } from './view-model.store.types';
+import {
+  ViewModelGenerateIdConfig,
+  ViewModelLookup,
+} from './view-model.store.types';
 import { AnyViewModel } from './view-model.types';
 
 import { ViewModelStoreImpl } from '.';
 
 export class ViewModelStoreMock extends ViewModelStoreImpl {
   spies = {
     generateViewModelId: vi.fn(),
+    get: vi.fn(),
   };
 
+  get _viewModels() {
+    return this.viewModels;
+  }
+  get _linkedComponentVMClasses() {
+    return this.linkedComponentVMClasses;
+  }
+  get _viewModelIdsByClasses() {
+    return this.viewModelIdsByClasses;
+  }
   get _instanceAttachedCount() {
     return this.instanceAttachedCount;
   }
+  get _mountingViews() {
+    return this.mountingViews;
+  }
+  get _unmountingViews() {
+    return this.unmountingViews;
+  }
 
   generateViewModelId<VM extends ViewModel>(
     config: ViewModelGenerateIdConfig<VM>,
   ): string {
     const result = super.generateViewModelId(config);
-    this.spies.generateViewModelId(result, config);
+    this.spies.generateViewModelId.mockReturnValue(result)(config);
+    return result;
+  }
+
+  get<T extends AnyViewModel>(vmLookup: Maybe<ViewModelLookup<T>>): T | null {
+    const result = super.get<T>(vmLookup);
+    this.spies.get.mockReturnValue(result)(vmLookup);
     return result;
   }
 }