fix(i-data): componentStatus updating after component destroying

CHANGELOG.md

@@ -11,6 +11,12 @@ Changelog
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v4.0.0-beta.?? (2024-10-??)
+
+#### :bug: Bug Fix
+
+* Fixed an issue with updating the `componentStatus` after destroying the component `components/super/i-data`
+
 ## v4.0.0-beta.142 (2024-10-04)
 
 #### :bug: Bug Fix

src/components/super/i-data/CHANGELOG.md

@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v4.0.0-beta.?? (2024-10-??)
+
+#### :bug: Bug Fix
+
+* Fixed an issue with updating the `componentStatus` after destroying the component
+
 ## v4.0.0-beta.30 (2023-10-11)
 
 #### :bug: Bug Fix

src/components/super/i-data/i-data.ts

@@ -80,7 +80,7 @@ export default abstract class iData extends iDataHandlers {
 			join: 'replace'
 		};
 
-		const callSuper = () => super.initLoad(() => this.db, opts);
+		const callSuper = $a.proxy(() => super.initLoad(() => this.db, opts));
 
 		try {
 			if (opts.emitStartEvent !== false) {

src/components/super/i-data/test/unit/main.ts

@@ -0,0 +1,39 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import test from 'tests/config/unit/test';
+import { Component, RequestInterceptor } from 'tests/helpers';
+
+test.describe('<i-data> component', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('should not update the `componentStatus` if the component was destroyed during the loading', async ({page}) => {
+		const interceptor = new RequestInterceptor(page, /api/);
+		await interceptor
+			.response(200, {root: true}, {delay: 100})
+			.start();
+
+		const target = await Component.createComponent(page, 'b-dummy', {
+			attrs: {
+				dataProvider: 'Provider'
+			}
+		});
+
+		const mockStatusChange = await target.evaluateHandle(() => jestMock.mock());
+
+		await target.evaluate((ctx, mockStatusChange) => {
+			ctx.on('onComponentStatusChange', mockStatusChange);
+
+			ctx.unsafe.$destroy();
+		}, mockStatusChange);
+
+		test.expect(await mockStatusChange.evaluate((fn) => fn.mock.calls)).toEqual([['destroyed', 'loading']]);
+	});
+});