@linagora/linid-im-front-corelib 0.0.3 → 0.0.5

package/src/lifecycle/skeleton.ts

@@ -24,7 +24,6 @@
  * LinID Identity Manager software.
  */
 
-import type { App } from 'vue';
 import type { ModuleHostConfig, RemoteModule } from '../types/module';
 import type { ModuleLifecycleResult } from '../types/moduleLifecycle';
 
@@ -81,10 +80,9 @@ export class BasicRemoteModule implements RemoteModule {
    *
    * Default implementation returns success.
    * Override this method to add custom setup logic.
-   * @param _app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  async onSetup(_app: App): Promise<ModuleLifecycleResult> {
+  async setup(): Promise<ModuleLifecycleResult> {
     return { success: true };
   }
 
@@ -96,13 +94,11 @@ export class BasicRemoteModule implements RemoteModule {
    *
    * Default implementation returns success.
    * Override this method to add custom configuration logic.
-   * @param _app - The Vue application instance.
-   * @param _config - Module-specific configuration from host.
+   * @param config - Module-specific configuration from host.
    * @returns Promise resolving to the lifecycle result.
    */
-  async onConfigure(
-    _app: App,
-    _config: ModuleHostConfig
+  async configure(
+    config: ModuleHostConfig /* eslint-disable-line @typescript-eslint/no-unused-vars */
   ): Promise<ModuleLifecycleResult> {
     return { success: true };
   }
@@ -115,10 +111,9 @@ export class BasicRemoteModule implements RemoteModule {
    *
    * Default implementation returns success.
    * Override this method to add custom initialization logic.
-   * @param _app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  async onInitialize(_app: App): Promise<ModuleLifecycleResult> {
+  async initialize(): Promise<ModuleLifecycleResult> {
     return { success: true };
   }
 
@@ -130,10 +125,9 @@ export class BasicRemoteModule implements RemoteModule {
    *
    * Default implementation returns success.
    * Override this method to add custom ready logic.
-   * @param _app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  async onReady(_app: App): Promise<ModuleLifecycleResult> {
+  async ready(): Promise<ModuleLifecycleResult> {
     return { success: true };
   }
 
@@ -145,10 +139,9 @@ export class BasicRemoteModule implements RemoteModule {
    *
    * Default implementation returns success.
    * Override this method to add custom post-init logic.
-   * @param _app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  async onPostInit(_app: App): Promise<ModuleLifecycleResult> {
+  async postInit(): Promise<ModuleLifecycleResult> {
     return { success: true };
   }
 }

package/src/types/moduleLifecycle.ts

@@ -24,7 +24,6 @@
  * LinID Identity Manager software.
  */
 
-import type { App } from 'vue';
 import type { ModuleHostConfig } from './module';
 
 /**
@@ -67,7 +66,7 @@ export enum ModuleLifecyclePhase {
    *
    * Use this phase for cross-module integrations and final setup.
    */
-  POST_INIT = 'post-init',
+  POST_INIT = 'postInit',
 }
 
 /**
@@ -112,52 +111,44 @@ export interface ModuleLifecycleHooks {
    *
    * Use this to prepare the module for initialization and validate
    * that all required dependencies are available.
-   * @param app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  onSetup?(app: App): Promise<ModuleLifecycleResult>;
+  setup(): Promise<ModuleLifecycleResult>;
 
   /**
    * Called to configure the module with application-specific settings.
    *
    * Use this to receive and validate the host configuration for your module.
    * This is where you should check that all required configuration is present.
-   * @param app - The Vue application instance.
    * @param config - Module-specific configuration from host (from module-<name>.json).
    * @returns Promise resolving to the lifecycle result.
    */
-  onConfigure?(
-    app: App,
-    config: ModuleHostConfig
-  ): Promise<ModuleLifecycleResult>;
+  configure(config: ModuleHostConfig): Promise<ModuleLifecycleResult>;
 
   /**
    * Called to initialize the module's core functionality.
    *
    * Use this to register Pinia stores and initialize any resources
    * your module needs to function.
-   * @param app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  onInitialize?(app: App): Promise<ModuleLifecycleResult>;
+  initialize(): Promise<ModuleLifecycleResult>;
 
   /**
    * Called when the module is ready to be used.
    *
    * Use this to perform final checks and emit ready state.
    * At this point, all other modules have completed initialization.
-   * @param app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  onReady?(app: App): Promise<ModuleLifecycleResult>;
+  ready(): Promise<ModuleLifecycleResult>;
 
   /**
    * Called after all modules have been initialized.
    *
    * Use this for cross-module integrations and final setup that requires
    * all modules to be ready.
-   * @param app - The Vue application instance.
    * @returns Promise resolving to the lifecycle result.
    */
-  onPostInit?(app: App): Promise<ModuleLifecycleResult>;
+  postInit(): Promise<ModuleLifecycleResult>;
 }

package/tests/unit/components/LinidZoneRenderer.spec.js

@@ -0,0 +1,135 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import LinidZoneRenderer from 'src/components/LinidZoneRenderer.vue';
+import * as federationService from 'src/services/federationService';
+import { useLinidZoneStore } from 'src/stores/linidZoneStore';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { nextTick, watch } from 'vue';
+
+vi.mock('src/services/federationService', () => ({
+  loadAsyncComponent: vi.fn(),
+}));
+
+describe('Test component: LinidZoneRenderer', () => {
+  let pinia;
+  let store;
+  let wrapper;
+
+  beforeEach(() => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    store = useLinidZoneStore();
+    wrapper = shallowMount(LinidZoneRenderer, {
+      props: { zone: '' },
+      global: { plugins: [pinia] },
+    });
+    vi.clearAllMocks();
+  });
+
+  describe('Test watchEffect', () => {
+    it('should initialize isLoadingComplete to false when mounted', async () => {
+      const values = [];
+      const stopWatch = watch(
+        () => wrapper.vm.isLoadingComplete,
+        (newVal) => {
+          values.push(newVal);
+        },
+        { flush: 'sync' }
+      );
+
+      await wrapper.setProps({ zone: 'zone-test' });
+
+      await flushPromises();
+      await nextTick();
+      stopWatch();
+
+      expect(values).toEqual([false, true]);
+    });
+
+    it('should set isLoadingComplete to true after initialization', async () => {
+      wrapper.setProps({ zone: 'any-zone' });
+
+      await flushPromises();
+      await nextTick();
+
+      expect(wrapper.vm.isLoadingComplete).toBe(true);
+    });
+
+    it('should not call loadAsyncComponent when the zone is not registered in store', async () => {
+      wrapper.setProps({ zone: 'unregistered-zone' });
+
+      await flushPromises();
+      await nextTick();
+
+      expect(federationService.loadAsyncComponent).not.toHaveBeenCalled();
+      expect(wrapper.vm.components).toEqual([]);
+    });
+
+    it('should not call loadAsyncComponent when the zone is registered has no entries', async () => {
+      wrapper.vm.linidZoneStore.zones['empty-zone'] = [];
+
+      wrapper.setProps({ zone: 'empty-zone' });
+
+      await flushPromises();
+      await nextTick();
+
+      expect(federationService.loadAsyncComponent).not.toHaveBeenCalled();
+      expect(wrapper.vm.components).toEqual([]);
+    });
+
+    it('should load components from store when zone is registered and has entries', async () => {
+      const MockComponentA = {
+        name: 'MockComponent',
+        template: '<div>Mock</div>',
+      };
+      const MockComponentB = {
+        name: 'MockComponent',
+        template: '<div>Mock</div>',
+      };
+      vi.mocked(federationService.loadAsyncComponent)
+        .mockReturnValueOnce(MockComponentA)
+        .mockReturnValueOnce(MockComponentB);
+
+      store.register('test-zone', {
+        plugin: 'test-plugin/MockComponentA',
+        props: { title: 'Test' },
+      });
+
+      store.register('test-zone', {
+        plugin: 'test-plugin/MockComponentB',
+        props: {},
+      });
+
+      wrapper.setProps({ zone: 'test-zone' });
+
+      await flushPromises();
+      await nextTick();
+
+      expect(federationService.loadAsyncComponent).toHaveBeenCalledTimes(2);
+      expect(federationService.loadAsyncComponent).toHaveBeenCalledWith(
+        'test-plugin/MockComponentA'
+      );
+      expect(federationService.loadAsyncComponent).toHaveBeenCalledWith(
+        'test-plugin/MockComponentB'
+      );
+
+      expect(wrapper.vm.components).toHaveLength(2);
+
+      expect(wrapper.vm.components[0].plugin).toBe(
+        'test-plugin/MockComponentA'
+      );
+      expect(wrapper.vm.components[0].props).toEqual({ title: 'Test' });
+      expect(JSON.stringify(wrapper.vm.components[0].component)).toEqual(
+        JSON.stringify(MockComponentA)
+      );
+
+      expect(wrapper.vm.components[1].plugin).toBe(
+        'test-plugin/MockComponentB'
+      );
+      expect(wrapper.vm.components[1].props).toEqual({});
+      expect(JSON.stringify(wrapper.vm.components[1].component)).toEqual(
+        JSON.stringify(MockComponentB)
+      );
+    });
+  });
+});

package/tests/unit/lifecycle/skeleton.spec.js

@@ -0,0 +1,138 @@
+import { BasicRemoteModule } from 'src/lifecycle/skeleton';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+describe('Test class: BasicRemoteModule', () => {
+  describe('Test constructor', () => {
+    it('should create a module with required parameters', () => {
+      const module = new BasicRemoteModule(
+        'test-module',
+        'Test Module',
+        '1.0.0'
+      );
+
+      expect(module.id).toBe('test-module');
+      expect(module.name).toBe('Test Module');
+      expect(module.version).toBe('1.0.0');
+      expect(module.description).toBeUndefined();
+    });
+
+    it('should create a module with description', () => {
+      const module = new BasicRemoteModule(
+        'test-module',
+        'Test Module',
+        '1.0.0',
+        'A test module for unit testing'
+      );
+
+      expect(module.id).toBe('test-module');
+      expect(module.name).toBe('Test Module');
+      expect(module.version).toBe('1.0.0');
+      expect(module.description).toBe('A test module for unit testing');
+    });
+  });
+
+  describe('Test lifecycle hooks', () => {
+    let module;
+
+    beforeEach(() => {
+      module = new BasicRemoteModule(
+        'test-module',
+        'Test Module',
+        '1.0.0',
+        'Test description'
+      );
+    });
+
+    describe('Test hook: setup', () => {
+      it('should return success by default', async () => {
+        const result = await module.setup();
+
+        expect(result).toEqual({ success: true });
+      });
+    });
+
+    describe('Test hook: configure', () => {
+      it('should return success with empty config', async () => {
+        const result = await module.configure({});
+
+        expect(result).toEqual({ success: true });
+      });
+
+      it('should return success with valid config', async () => {
+        const config = {
+          id: 'test-module',
+          remoteName: 'testModule',
+        };
+
+        const result = await module.configure(config);
+
+        expect(result).toEqual({ success: true });
+      });
+    });
+
+    describe('Test hook: initialize', () => {
+      it('should return success by default', async () => {
+        const result = await module.initialize();
+
+        expect(result).toEqual({ success: true });
+      });
+    });
+
+    describe('Test hook: ready', () => {
+      it('should return success by default', async () => {
+        const result = await module.ready();
+
+        expect(result).toEqual({ success: true });
+      });
+    });
+
+    describe('Test hook: postInit', () => {
+      it('should return success by default', async () => {
+        const result = await module.postInit();
+
+        expect(result).toEqual({ success: true });
+      });
+    });
+  });
+
+  describe('Test module extension', () => {
+    it('should allow extending the class', () => {
+      class CustomModule extends BasicRemoteModule {
+        constructor() {
+          super('custom-module', 'Custom Module', '1.0.0');
+        }
+      }
+
+      const module = new CustomModule();
+
+      expect(module).toBeInstanceOf(BasicRemoteModule);
+      expect(module.id).toBe('custom-module');
+      expect(module.name).toBe('Custom Module');
+      expect(module.version).toBe('1.0.0');
+    });
+
+    it('should allow overriding lifecycle methods', async () => {
+      class OverriddenModule extends BasicRemoteModule {
+        constructor() {
+          super('override-module', 'Override Module', '1.0.0');
+        }
+
+        async configure(config) {
+          if (!config.required) {
+            return { success: false, error: 'Missing required config' };
+          }
+          return { success: true };
+        }
+      }
+
+      const module = new OverriddenModule();
+
+      const failResult = await module.configure({});
+      expect(failResult.success).toBe(false);
+      expect(failResult.error).toBe('Missing required config');
+
+      const successResult = await module.configure({ required: true });
+      expect(successResult.success).toBe(true);
+    });
+  });
+});

package/tests/unit/services/federationService.spec.js

@@ -0,0 +1,146 @@
+import { loadRemote } from '@module-federation/enhanced/runtime';
+import { loadAsyncComponent } from 'src/services/federationService';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineAsyncComponent } from 'vue';
+
+vi.mock('@module-federation/enhanced/runtime');
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue');
+  return {
+    ...actual,
+    defineAsyncComponent: vi.fn((loader) => loader),
+  };
+});
+
+describe('Test service: federationService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Test function: loadAsyncComponent', () => {
+    it('should load a remote component successfully', async () => {
+      const testComponent = { default: 'RemoteTestComponent' };
+      const remoteModule = { './TestComponent': testComponent };
+      vi.mocked(loadRemote).mockResolvedValue(remoteModule['./TestComponent']);
+
+      const loader = loadAsyncComponent('test-plugin/TestComponent');
+      const result = await loader();
+
+      expect(loadRemote).toHaveBeenCalledTimes(1);
+      expect(loadRemote).toHaveBeenCalledWith('test-plugin/TestComponent');
+      expect(defineAsyncComponent).toHaveBeenCalled();
+      expect(result).toEqual('RemoteTestComponent');
+    });
+
+    it('should throw an error if remote component export a null default', async () => {
+      const testComponent = { default: null };
+      const remoteModule = { './TestComponent': testComponent };
+      vi.mocked(loadRemote).mockResolvedValue(remoteModule['./TestComponent']);
+
+      const loader = loadAsyncComponent('invalid-plugin/TestComponent');
+
+      await expect(loader()).rejects.toThrow(
+        'Failed to load component from invalid-plugin'
+      );
+      expect(loadRemote).toHaveBeenCalledWith('invalid-plugin/TestComponent');
+    });
+
+    it('should throw an error if remote component export an undefined default', async () => {
+      const testComponent = { default: undefined };
+      const remoteModule = { './TestComponent': testComponent };
+      vi.mocked(loadRemote).mockResolvedValue(remoteModule['./TestComponent']);
+
+      const loader = loadAsyncComponent('invalid-plugin/TestComponent');
+
+      await expect(loader()).rejects.toThrow(
+        'Failed to load component from invalid-plugin'
+      );
+      expect(loadRemote).toHaveBeenCalledWith('invalid-plugin/TestComponent');
+    });
+
+    it('should throw an error if remote component does not have a default export', async () => {
+      const testComponent = { toto: vi.fn() };
+      const remoteModule = { './TestComponent': testComponent };
+      vi.mocked(loadRemote).mockResolvedValue(remoteModule['./TestComponent']);
+
+      const loader = loadAsyncComponent('invalid-plugin/TestComponent');
+
+      await expect(loader()).rejects.toThrow(
+        'Failed to load component from invalid-plugin'
+      );
+      expect(loadRemote).toHaveBeenCalledWith('invalid-plugin/TestComponent');
+    });
+
+    it('should throw an error if module is null', async () => {
+      vi.mocked(loadRemote).mockResolvedValue(null);
+
+      const loader = loadAsyncComponent('null-plugin/TestComponent');
+
+      await expect(loader()).rejects.toThrow(
+        'Failed to load component from null-plugin'
+      );
+    });
+
+    it('should throw an error if module is undefined', async () => {
+      vi.mocked(loadRemote).mockResolvedValue(undefined);
+
+      const loader = loadAsyncComponent('undefined-plugin/TestComponent');
+
+      await expect(loader()).rejects.toThrow(
+        'Failed to load component from undefined-plugin'
+      );
+    });
+
+    it('should throw an error if loadRemote rejects', async () => {
+      const error = new Error('Network error');
+
+      vi.mocked(loadRemote).mockRejectedValue(error);
+
+      const loader = loadAsyncComponent('failing-plugin/TestComponent');
+
+      await expect(loader()).rejects.toThrow('Network error');
+      expect(loadRemote).toHaveBeenCalledWith('failing-plugin/TestComponent');
+    });
+
+    it('should handle different plugin names', async () => {
+      const plugins = ['plugin-a', 'plugin-b', 'plugin-c'];
+      const testComponentA = { default: 'RemoteTestComponentA' };
+      const remoteModuleA = { './TestComponent': testComponentA };
+      const testComponentB = { default: 'RemoteTestComponentB' };
+      const remoteModuleB = { './TestComponent': testComponentB };
+      const testComponentC = { default: 'RemoteTestComponentC' };
+      const remoteModuleC = { './TestComponent': testComponentC };
+
+      vi.mocked(loadRemote)
+        .mockResolvedValueOnce(remoteModuleA['./TestComponent'])
+        .mockResolvedValueOnce(remoteModuleB['./TestComponent'])
+        .mockResolvedValueOnce(remoteModuleC['./TestComponent']);
+
+      for (const plugin of plugins) {
+        const loader = loadAsyncComponent(`${plugin}/TestComponent`);
+        const result = await loader();
+        const lastChar = plugin.charAt(plugin.length - 1).toUpperCase();
+
+        expect(loadRemote).toHaveBeenCalledWith(`${plugin}/TestComponent`);
+        expect(result).toEqual(`RemoteTestComponent${lastChar}`);
+      }
+
+      expect(loadRemote).toHaveBeenCalledTimes(3);
+    });
+
+    it('should handle module with additional exports', async () => {
+      const testComponent = {
+        default: 'RemoteTestComponent',
+        namedExport1: 'value1',
+        namedExport2: 'value2',
+      };
+      const remoteModule = { './TestComponent': testComponent };
+      vi.mocked(loadRemote).mockResolvedValue(remoteModule['./TestComponent']);
+
+      const loader = loadAsyncComponent('multi-export-plugin');
+      const result = await loader();
+
+      expect(result).toEqual('RemoteTestComponent');
+    });
+  });
+});

package/tests/unit/stores/linidZoneStore.spec.js

@@ -0,0 +1,94 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { useLinidZoneStore } from 'src/stores/linidZoneStore';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+describe('Test store: linidZoneStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  describe('Test initial state', () => {
+    it('should initialize with empty zones', () => {
+      const store = useLinidZoneStore();
+
+      expect(store.zones).toEqual({});
+    });
+  });
+
+  describe('Test function: register', () => {
+    it('should register an entry in a new zone', () => {
+      const store = useLinidZoneStore();
+      const entry = {
+        plugin: 'test-plugin/TestComponent',
+        props: {},
+      };
+
+      store.register('list-page.sidebar', entry);
+
+      expect(store.zones['list-page.sidebar']).toBeDefined();
+      expect(store.zones['list-page.sidebar']).toHaveLength(1);
+      expect(store.zones['list-page.sidebar'][0]).toEqual(entry);
+    });
+
+    it('should register multiple entries in the same zone', () => {
+      const store = useLinidZoneStore();
+      const entry1 = {
+        plugin: 'plugin-1/Component1',
+        props: {},
+      };
+      const entry2 = {
+        plugin: 'plugin-2/Component2',
+        props: { value: 42 },
+      };
+
+      store.register('list-page.sidebar', entry1);
+      store.register('list-page.sidebar', entry2);
+
+      expect(store.zones['list-page.sidebar']).toHaveLength(2);
+      expect(store.zones['list-page.sidebar'][0]).toEqual(entry1);
+      expect(store.zones['list-page.sidebar'][1]).toEqual(entry2);
+    });
+
+    it('should register entries in different zones independently', () => {
+      const store = useLinidZoneStore();
+      const headerEntry = {
+        plugin: 'header-plugin/HeaderComponent',
+        props: {},
+      };
+      const footerEntry = {
+        plugin: 'footer-plugin/FooterComponent',
+        props: {},
+      };
+
+      store.register('list-page.header', headerEntry);
+      store.register('list-page.footer', footerEntry);
+
+      expect(store.zones['list-page.header']).toHaveLength(1);
+      expect(store.zones['list-page.footer']).toHaveLength(1);
+      expect(store.zones['list-page.header'][0]).toEqual(headerEntry);
+      expect(store.zones['list-page.footer'][0]).toEqual(footerEntry);
+    });
+
+    it('should handle entries with complex props', () => {
+      const store = useLinidZoneStore();
+      const entry = {
+        plugin: 'complex-plugin/ComplexComponent',
+        props: {
+          title: 'Test Title',
+          count: 123,
+          enabled: true,
+          config: {
+            nested: {
+              value: 'deep',
+            },
+          },
+          items: ['a', 'b', 'c'],
+        },
+      };
+
+      store.register('list-page.body', entry);
+
+      expect(store.zones['list-page.body'][0].props).toEqual(entry.props);
+    });
+  });
+});