feat(arch): move && simplify component Tabs

packages-new/components/tabs/src/components/osds-tab-bar-item/interfaces/events.ts

@@ -1,5 +1,5 @@
 import type { EventEmitter } from '@stencil/core';
-import { OsdsTabBarItem } from '../osds-tab-bar-item';
+import type { OsdsTabBarItem } from '../osds-tab-bar-item';
 
 interface OdsTabItemSelectEventDetail {
   panel: string;

packages-new/components/tabs/src/components/osds-tab-bar-item/osds-tab-bar-item.spec.ts

@@ -44,7 +44,6 @@ describe('spec:OsdsTabBarItem', () => {
     controller = (OdsTabBarItemController as unknown as jest.SpyInstance<OdsTabBarItemController, unknown[]>).mock.instances[ 0 ];
   }
 
-
   beforeEach(() => {
     const loggerMocked = new OdsLogger('myLoggerMocked');
     loggerSpyReferences = OdsInitializeLoggerSpy({

packages-new/components/tabs/src/components/osds-tab-panel/osds-tab-panel.spec.ts

@@ -1,29 +1,3 @@
-// /* eslint-disable no-console */
-// jest.mock('@ovhcloud/ods-core/src/components/tabs/ods-tab-panel/ods-tab-panel-controller'); // keep jest.mock before any import
-
-// import {
-//   OdsClearLoggerSpy,
-//   OdsCreateAttributes,
-//   OdsInitializeLoggerSpy,
-//   OdsLoggerSpyReferences,
-//   OdsStringAttributes2Str,
-//   odsTabPanelBaseAttributes,
-//   odsUnitTestAttribute,
-// } from '@ovhcloud/ods-testing';
-// import { getAttributeContextOptions } from '@ovhcloud/ods-stencil/libraries/stencil-testing';
-// import { OsdsTabsPanel } from './osds-tab-panel';
-// import {
-//   OdsComponentAttributes2StringAttributes,
-//   OdsLogger,
-//   OdsTabPanel,
-//   OdsTabPanelAttributes,
-//   OdsTabPanelController,
-//   odsTabPanelDefaultAttributes,
-// } from '@ovhcloud/ods-core';
-// import { newSpecPage, SpecPage } from '@stencil/core/testing';
-
-jest.mock('./core/controller'); // keep jest.mock before any
-
 import type { SpecPage } from '@stencil/core/testing';
 import type { OdsTabPanelAttribute } from './interfaces/attributes';
 import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing';

packages-new/components/tabs/src/components/osds-tabs/constants/default-attributes.ts

@@ -3,8 +3,8 @@ import { ODS_TABS_SIZE } from './tabs-size';
 
 const DEFAULT_ATTRIBUTE: OdsTabsAttribute = Object.freeze({
   contrasted: false,
-  size: ODS_TABS_SIZE.md,
   panel: '',
+  size: ODS_TABS_SIZE.md,
 });
 
 export {

packages-new/components/tabs/src/components/osds-tabs/constants/tabs-size.ts

@@ -1,10 +1,10 @@
 enum ODS_TABS_SIZE {
-    md = 'md'
-  }
+  md = 'md'
+}
 
-  const ODS_TABS_SIZES = Object.freeze(Object.values(ODS_TABS_SIZE));
+const ODS_TABS_SIZES = Object.freeze(Object.values(ODS_TABS_SIZE));
 
-  export {
-    ODS_TABS_SIZE,
-    ODS_TABS_SIZES,
-  };
+export {
+  ODS_TABS_SIZE,
+  ODS_TABS_SIZES,
+};

packages-new/components/tabs/src/components/osds-tabs/core/controller.spec.ts

@@ -10,18 +10,23 @@ import { OsdsTabsPanel } from '../../osds-tab-panel/osds-tab-panel';
 import { DEFAULT_ATTRIBUTE } from '../constants/default-attributes';
 
 class OdsTabsMock extends OsdsTabs {
-    constructor(attribute: Partial<OsdsTabs>) {
-        super();
-        Object.assign(this, attribute)
-    }
-    controller: OdsTabsController = jest.fn() as unknown as OdsTabsController;
-    beforeInit = jest.fn();
+  constructor(attribute: Partial<OsdsTabs>) {
+      super();
+      Object.assign(this, attribute)
+  }
+  controller: OdsTabsController = jest.fn() as unknown as OdsTabsController;
+  beforeInit = jest.fn();
+  emitChanged = jest.fn();
 }
 
 describe('spec:ods-tabs-controller', () => {
   const baseAttribute = { contrasted: DEFAULT_ATTRIBUTE.contrasted, panel: DEFAULT_ATTRIBUTE.panel, size: DEFAULT_ATTRIBUTE.size };
   let controller: OdsTabsController;
   let component: OsdsTabs;
+
+  let spyOnChangeActivePanel: jest.SpyInstance<void, jest.ArgsType<OdsTabsController['changeActivePanel']>>;
+  let spyOnEmitChanged: jest.SpyInstance<void, jest.ArgsType<OsdsTabs['emitChanged']>>;
+  let spyOnOnContrastedPropChange: jest.SpyInstance<void, jest.ArgsType<OsdsTabs['onContrastedPropChange']>>;
   let loggerSpyReferences: OdsLoggerSpyReferences;
   let item1: OsdsTabBarItem & HTMLElement;
   let item2: OsdsTabBarItem & HTMLElement;
@@ -31,13 +36,17 @@ describe('spec:ods-tabs-controller', () => {
 
   Ods.instance().logging(false);
 
-  function setup(componentToCreate: OsdsTabs) {
-    controller = new OdsTabsController(componentToCreate);
+  function setup(attributes: Partial<OsdsTabs> = {}) {
+    component = new OdsTabsMock(attributes);
+    controller = component.controller = new OdsTabsController(component);
+
+    Object.defineProperty(component, 'el', {
+      value: document.createElement('osds-tabs') as HTMLStencilElement,
+      writable: true
+    });
   }
 
   beforeEach(() => {
-    component = new OdsTabsMock(baseAttribute);
-
     const loggerMocked = new OdsLogger('myLoggerMocked');
     loggerSpyReferences = OdsInitializeLoggerSpy({
       loggerMocked: loggerMocked as never,
@@ -48,21 +57,21 @@ describe('spec:ods-tabs-controller', () => {
     item1.panel = '1';
     item2 = document.createElement('osds-tab-bar-item') as OsdsTabBarItem & HTMLElement;
     item2.panel = '2';
+
     panel1 = document.createElement('osds-tabs-panel') as OsdsTabsPanel & HTMLElement;
     panel1.name = '1';
     panel2 = document.createElement('osds-tabs-panel') as OsdsTabsPanel & HTMLElement;
     panel2.name = '2';
-    tabBar = document.createElement('osds-tab-bar') as OsdsTabBarItem & HTMLElement;
 
-    component.el = document.createElement('osds-tabs') as HTMLStencilElement;
+    tabBar = document.createElement('osds-tab-bar') as OsdsTabBarItem & HTMLElement;
 
     tabBar.appendChild(item1);
     tabBar.appendChild(item2);
   });
 
   afterEach(() => {
-    OdsClearLoggerSpy(loggerSpyReferences);
     jest.clearAllMocks();
+    OdsClearLoggerSpy(loggerSpyReferences);
   });
 
   function mockGetTabItems(items: Array<OsdsTabBarItem & HTMLElement>) {
@@ -74,56 +83,69 @@ describe('spec:ods-tabs-controller', () => {
   }
 
   it('should initialize', () => {
-    setup(component);
+    setup({});
     expect(controller).toBeTruthy();
   });
 
   describe('methods', () => {
 
     describe('beforeInit', () => {
-      beforeEach(() => {
-        component.panel = '2';
-        component.contrasted = true;
-        setup(component);
-        jest.spyOn(controller, 'changeActivePanel').mockImplementation(() => undefined);
-        controller.beforeInit();
-      })
       it('should call changeActivePanel', () => {
-        expect(controller.changeActivePanel).toHaveBeenCalledWith(component.panel);
+        setup({ panel: '2', contrasted: true });
+        spyOnChangeActivePanel = jest.spyOn(controller, 'changeActivePanel');
+        controller.beforeInit();
+
+        expect(spyOnChangeActivePanel).toHaveBeenCalledTimes(1);
+        expect(spyOnChangeActivePanel).toHaveBeenCalledWith(component.panel);
       });
+
       it('should call onContrastedPropChange', () => {
-        expect(component.onContrastedPropChange).toHaveBeenCalledWith(component.contrasted);
+        setup({ panel: '2', contrasted: true });
+        spyOnOnContrastedPropChange = jest.spyOn(component, 'onContrastedPropChange');
+        controller.beforeInit();
+
+        expect(spyOnOnContrastedPropChange).toHaveBeenCalledTimes(1);
+        expect(spyOnOnContrastedPropChange).toHaveBeenCalledWith(component.contrasted);
       });
     });
 
     describe('getTabItems', () => {
       it('should retrieve items inside tab bar', () => {
+        setup({ panel: '2', contrasted: true });
+
         component.el.appendChild(tabBar);
-        setup(component);
-        const items = controller.getTabItems('ods-tab-bar-item');
+
+        const items = controller.getTabItems('osds-tab-bar-item');
         expect(items).toEqual([item1, item2]);
       });
     });
 
     describe('getTabPanels', () => {
       it('should retrieve panels tabs', () => {
+        setup({ panel: '2', contrasted: true });
+
         component.el.appendChild(panel1);
         component.el.appendChild(panel2);
-        setup(component);
-        const items = controller.getTabPanels('ods-tab-panel');
+
+        const items = controller.getTabPanels('osds-tabs-panel');
         expect(items).toEqual([panel1, panel2]);
       });
     });
 
     describe('changeActivePanel', () => {
       beforeEach(() => {
+        setup({ panel: '', contrasted: true });
+
+        spyOnEmitChanged = jest.spyOn(component, 'emitChanged');
+
         component.el.appendChild(tabBar);
         component.el.appendChild(panel1);
         component.el.appendChild(panel2);
+
         mockGetTabItems([item1, item2]);
         mockGetTabPanels([panel1, panel2]);
-        setup(component);
       });
+
       describe('panel unset', () => {
         beforeEach(() => {
           controller.changeActivePanel('');
@@ -140,7 +162,7 @@ describe('spec:ods-tabs-controller', () => {
           expect(component.panel).toEqual('1');
         });
         it('should emit event', () => {
-          expect(component.emitChanged).toHaveBeenCalledWith();
+          expect(spyOnEmitChanged).toHaveBeenCalledWith();
         });
       });
 
@@ -160,7 +182,7 @@ describe('spec:ods-tabs-controller', () => {
           expect(component.panel).toEqual('2');
         });
         it('should emit event', () => {
-          expect(component.emitChanged).toHaveBeenCalledWith();
+          expect(spyOnEmitChanged).toHaveBeenCalledWith();
         });
       });
 
@@ -171,7 +193,7 @@ describe('spec:ods-tabs-controller', () => {
           item2.active = true;
           panel2.active = true;
           controller.changeActivePanel('2');
-          expect(component.emitChanged).not.toHaveBeenCalled();
+          expect(spyOnEmitChanged).not.toHaveBeenCalledWith();
         });
       });
 

packages-new/components/tabs/src/components/osds-tabs/core/controller.ts

@@ -2,11 +2,6 @@ import type { OsdsTabs } from '../osds-tabs';
 import { OsdsTabBarItem } from '../../osds-tab-bar-item/osds-tab-bar-item';
 import { OsdsTabsPanel } from '../../osds-tab-panel/osds-tab-panel';
 
-
-// import type { OdsTextAreaValidityState } from '@ovhcloud/ods-common-core';
-// import type { OsdsTextArea } from '../osds-textarea';
-// import { OdsFormControl, OdsLogger, OdsTextAreaGetValidityState } from '@ovhcloud/ods-common-core';
-
 /**
  * common controller logic for text component used by the different implementations.
  * it contains all the glue between framework implementation and the third party service.
@@ -23,10 +18,6 @@ class OdsTabsController {
     this.component.onContrastedPropChange(this.component.contrasted);
   }
 
-  afterInit() {
-    // nothing for now
-  }
-
   changeActivePanel(panel: string) {
     const items = this.component.getTabItems();
     // if not item found, select the first one

packages-new/components/tabs/src/components/osds-tabs/interfaces/attributes.ts

@@ -5,14 +5,14 @@ interface OdsTabsAttribute {
      * The tab is contrasted
      */
   contrasted: boolean;
-  /**
-   * Tabs size
-   */
-  size: ODS_TABS_SIZE;
   /**
    * Tabs active panel
    */
   panel: string;
+  /**
+   * Tabs size
+   */
+  size: ODS_TABS_SIZE;
 }
 
 export {

packages-new/components/tabs/src/components/osds-tabs/osds-tabs.spec.ts

@@ -13,7 +13,7 @@ import { OsdsTabs } from './osds-tabs';
 import { OsdsTabBarItem } from '../osds-tab-bar-item/osds-tab-bar-item';
 import { OdsTabItemSelectEventDetail } from '../osds-tab-bar-item/interfaces/events';
 
-describe('spec:OsdsTabs', () => {
+describe('spec:osds-tabs', () => {
   const baseAttribute = { contrasted: DEFAULT_ATTRIBUTE.contrasted, panel: DEFAULT_ATTRIBUTE.panel, size: DEFAULT_ATTRIBUTE.size };
   let page: SpecPage;
   let shadowRoot: ShadowRoot | null | undefined;
@@ -62,12 +62,12 @@ describe('spec:OsdsTabs', () => {
   });
 
   it('should render', async () => {
-    await setup({});
-    expect(shadowRoot).toBeTruthy();
+    await setup();
+    expect(page.root?.shadowRoot).toBeTruthy();
     expect(instance).toBeTruthy();
   });
 
-  it('should have his controller', async () => {
+  it('should have its controller', async () => {
     await setup({});
     expect(controller).toBeTruthy();
   });
@@ -83,13 +83,6 @@ describe('spec:OsdsTabs', () => {
     });
   });
 
-  it('afterInit called', async () => {
-    const component = new OsdsTabs();
-    jest.spyOn(component, 'afterInit');
-    component.componentDidLoad();
-    expect(component.afterInit).toHaveBeenCalledTimes(1);
-  });
-
   /**
    * @see OdsTabsAttributes
    */

packages-new/components/tabs/src/components/osds-tabs/osds-tabs.tsx

@@ -88,14 +88,6 @@ export class OsdsTabs implements OdsTabsAttribute, OdsTabsEvent {
     this.controller.propagateContrastedToItems(contrasted);
   }
 
-  afterInit() {
-    this.controller.afterInit();
-  }
-
-  componentDidLoad() {
-    this.afterInit();
-  }
-
   beforeInit() {
     this.controller.beforeInit();
   }

packages/tools/storybook/stories/components/tabs/tabs/tabs.web-components.stories.ts

@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import { extractArgTypes, extractStoryParams, getTagAttributes } from '../../../../core/componentHTMLUtils';
 import { defineCustomElements } from '@ovhcloud/ods-component-tabs/loader';
 import { DEFAULT_ATTRIBUTE } from '@ovhcloud/ods-component-tabs/src/components/osds-tabs/constants/default-attributes';
-import { ODS_TABS_SIZES } from '@ovhcloud/ods-component-tabs/src/components/osds-tabs/constants/tabs-size';
+import { ODS_TABS_SIZES } from '@ovhcloud/ods-component-tabs';
 // @ts-ignore
 import changelog from '@ovhcloud/ods-component-tabs/CHANGELOG.md';
 // @ts-ignore