V4: New component-object, new test APIs, tests to b-virtual-scroll-new

CHANGELOG.md

@@ -11,6 +11,24 @@ Changelog
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v4.0.0-beta.56 (2024-02-09)
+
+#### :rocket: New Feature
+
+* New test APIs:
+  * Request interceptor `tests/helpers/network/interceptor`;
+  * ComponentObject `tests/helpers/component-object`;
+  * Spy and mock `tests/helpers/mock`;
+  * Component.createComponentInDummy `tests/helpers/component`.
+
+#### :bug: Bug Fix
+
+* Fixed the problem that the `lifecycleDone` event could fire before `renderDone` `components/base/b-virtual-scroll-new`
+
+#### :house:  Internal
+
+* Added tests for `b-virtual-scroll-new` `components/base/b-virtual-scroll-new`
+
 ## v4.0.0-beta.55 (2024-02-08)
 
 #### :boom: Breaking Change

build/webpack/resolve/alias.js

@@ -21,6 +21,14 @@ const
  */
 const aliases = {
 	'@super': resolve.rootDependencies[0],
+
+	// This is required for using jest-mock,
+	// otherwise jest-mock pulls various Node.js modules into the browser environment.
+	'graceful-fs': false,
+	path: false,
+	picomatch: false,
+	url: false,
+
 	...$C(pzlr.dependencies).to({}).reduce((map, el, i) => {
 		const
 			asset = resolve.depMap[el].config.assets;

components-lock.json

@@ -1,5 +1,5 @@
 {
-  "hash": "865280bfec97ef8005ed118094d96b33afcfece456c2a8b26c419ca2093656e6",
+  "hash": "098211bcc31aa8c403e2f0f126046ef09ad2fb212477edeb5a60735ae3e661f0",
   "data": {
     "%data": "%data:Map",
     "%data:Map": [
@@ -2261,8 +2261,9 @@
               "b-remote-provider",
               "b-list",
               "b-tree",
-              "b-virtual-scroll",
               "b-window",
+              "b-virtual-scroll",
+              "b-virtual-scroll-new",
               "b-bottom-slide",
               "b-slider",
               "b-sidebar",
@@ -2303,8 +2304,9 @@
             "b-remote-provider",
             "b-list",
             "b-tree",
-            "b-virtual-scroll",
             "b-window",
+            "b-virtual-scroll",
+            "b-virtual-scroll-new",
             "b-bottom-slide",
             "b-slider",
             "b-sidebar",

index.d.ts

@@ -148,7 +148,32 @@ declare var
 	 * Requires a module by the specified path.
 	 * This function should only be used when writing tests.
 	 */
-	importModule: (path: string) => any;
+	importModule: (path: string) => any,
+
+	/**
+	 * Jest mock API for test environment.
+	 */
+	jestMock: {
+		/**
+		 * Wrapper for jest `spyOn` function.
+		 * @see https://jestjs.io/docs/mock-functions
+		 */
+		spy: import('jest-mock').ModuleMocker['spyOn'];
+
+		/**
+		 * Wrapper for jest `fn` function.
+		 * @see https://jestjs.io/docs/mock-functions
+		 */
+		mock: import('jest-mock').ModuleMocker['fn'];
+	};
+
+/**
+ * The results returned by a mock or spy function from `jestMock`.
+ */
+interface JestMockResult<VAL = any> {
+	type: 'throw' | 'return';
+	value: VAL;
+}
 
 interface TouchGesturesCreateOptions {
 	/**

package.json

@@ -88,6 +88,7 @@
     "cssnano": "5.0.17",
     "del": "6.0.0",
     "delay": "5.0.0",
+    "doctoc": "2.2.1",
     "extract-loader": "5.1.0",
     "fast-glob": "3.2.12",
     "favicons": "7.1.0",

src/components/base/b-virtual-scroll-new/b-virtual-scroll-new.ts

@@ -401,8 +401,11 @@ export default class bVirtualScrollNew extends iVirtualScrollHandlers implements
 			});
 		});
 
+		this.componentInternalState.setIsDomInsertInProgress(true);
+
 		this.async.requestAnimationFrame(() => {
 			this.$refs.container.appendChild(fragment);
+			this.componentInternalState.setIsDomInsertInProgress(false);
 
 			this.onDomInsertDone();
 			this.onRenderDone();

src/components/base/b-virtual-scroll-new/const.ts

@@ -137,6 +137,16 @@ export const componentEvents = <const>{
 	...componentObserverLocalEvents
 };
 
+/**
+ * Internal component events (emitted in localEmitter)
+ */
+export const componentLocalEvents = <const>{
+	/**
+	 * The rendering cycle of components has completed (the path from renderStart to renderDone has been traversed)
+	 */
+	renderCycleDone: 'renderCycleDone'
+};
+
 /**
  * Reasons for rejecting a render operation.
  */

src/components/base/b-virtual-scroll-new/handlers.ts

@@ -6,16 +6,20 @@
  * https://github.com/V4Fire/Client/blob/master/LICENSE
  */
 
+import symbolGenerator from 'core/symbol';
+
 import iVirtualScrollProps from 'components/base/b-virtual-scroll-new/props';
 
 import type bVirtualScrollNew from 'components/base/b-virtual-scroll-new/b-virtual-scroll-new';
 import type { MountedChild } from 'components/base/b-virtual-scroll-new/interface';
 
-import { bVirtualScrollNewAsyncGroup, componentEvents } from 'components/base/b-virtual-scroll-new/const';
+import { bVirtualScrollNewAsyncGroup, componentEvents, componentLocalEvents } from 'components/base/b-virtual-scroll-new/const';
 import { isAsyncReplaceError } from 'components/base/b-virtual-scroll-new/modules/helpers';
 
 import iData, { component } from 'components/super/i-data/i-data';
 
+const $$ = symbolGenerator();
+
 /**
  * A class that provides an API to handle events emitted by the {@link bVirtualScrollNew} component.
  * This class is designed to work in conjunction with {@link bVirtualScrollNew}.
@@ -89,6 +93,7 @@ export abstract class iVirtualScrollHandlers extends iVirtualScrollProps {
 	 */
 	protected onRenderDone(this: bVirtualScrollNew): void {
 		this.componentEmitter.emit(componentEvents.renderDone);
+		this.localEmitter.emit(componentLocalEvents.renderCycleDone);
 	}
 
 	/**
@@ -97,15 +102,29 @@ export abstract class iVirtualScrollHandlers extends iVirtualScrollProps {
 	 */
 	protected onLifecycleDone(this: bVirtualScrollNew): void {
 		const
-			state = this.getVirtualScrollState();
+			state = this.getVirtualScrollState(),
+			isDomInsertInProgress = this.componentInternalState.getIsDomInsertInProgress();
 
 		if (state.isLifecycleDone) {
 			return;
 		}
 
-		this.slotsStateController.doneState();
-		this.componentInternalState.setIsLifecycleDone(true);
-		this.componentEmitter.emit(componentEvents.lifecycleDone);
+		const handler = () => {
+			this.slotsStateController.doneState();
+			this.componentInternalState.setIsLifecycleDone(true);
+			this.componentEmitter.emit(componentEvents.lifecycleDone);
+		};
+
+		if (isDomInsertInProgress) {
+			this.localEmitter.once(componentLocalEvents.renderCycleDone, handler, {
+				group: bVirtualScrollNewAsyncGroup,
+				label: $$.waitUntilRenderDone
+			});
+
+			return;
+		}
+
+		return handler();
 	}
 
 	/**

src/components/base/b-virtual-scroll-new/interface/component.ts

@@ -132,6 +132,11 @@ export interface PrivateComponentState {
 	 * Pointer to the index of the data element that was last rendered.
 	 */
 	dataOffset: number;
+
+	/**
+	 * If true, it means that the process of inserting components into the DOM tree is currently in progress.
+	 */
+	isDomInsertInProgress: boolean;
 }
 
 /**

src/components/base/b-virtual-scroll-new/modules/state/helpers.ts

@@ -40,6 +40,7 @@ export function createInitialState(): VirtualScrollState {
  */
 export function createPrivateInitialState(): PrivateComponentState {
 	return {
-		dataOffset: 0
+		dataOffset: 0,
+		isDomInsertInProgress: false
 	};
 }

src/components/base/b-virtual-scroll-new/modules/state/index.ts

@@ -127,6 +127,14 @@ export class ComponentInternalState extends Friend {
 		this.state.isInitialRender = value;
 	}
 
+	/**
+	 * Sets the flag indicating that the process of inserting components into the DOM tree is currently in progress
+	 * @param value
+	 */
+	setIsDomInsertInProgress(value: boolean): void {
+		this.privateState.isDomInsertInProgress = value;
+	}
+
 	/**
 	 * Sets the flag indicating if requests are stopped and the component won't make any more requests
 	 * until the lifecycle is refreshed.
@@ -190,6 +198,14 @@ export class ComponentInternalState extends Friend {
 		return this.privateState.dataOffset;
 	}
 
+	/**
+	 * Returns the value of the flag indicating whether the process
+	 * of inserting components into the DOM tree is currently in progress
+	 */
+	getIsDomInsertInProgress(): boolean {
+		return this.privateState.isDomInsertInProgress;
+	}
+
 	/**
 	 * Updates the cursor indicating the last index of the last rendered data element
 	 */