fix(checkbox): export & dependencies

packages-new/common/stencil/src/e2e/osds-set-property-function.ts

@@ -0,0 +1,43 @@
+import type { E2EPage } from '@stencil/core/testing';
+import type { odsPickMethods } from '@ovhcloud/ods-common-core';
+import type { SerializableOrJSHandle } from 'puppeteer';
+
+/**
+ * set a property on a component that is a function.
+ * it will manage the scope and declare your function as global in order to access it into
+ * the context of the page evaluation.
+ *
+ * passing through a page eval may be work better than :
+ * ```
+ * // here this does not work - must use page.$eval
+ * el.setProperty('save', myCbk);
+ * ```
+ *
+ * @see https://github.com/puppeteer/puppeteer/issues/982
+ * @param page - stencil page context of test
+ * @param selector - A selector to query the component to test
+ * @param property - name of the property to set
+ * @param fct - function to set as value of the property
+ */
+async function osdsSetPropertyFunction<Attributes,
+  K extends odsPickMethods<Attributes> = odsPickMethods<Attributes>,
+  T extends keyof K = keyof K>(page: E2EPage, selector: string, property: T, fct: K[T]): Promise<void> {
+  function cbk() {
+    return fct;
+  }
+
+  await page.exposeFunction("cbk", cbk);
+  const props = { property };
+  await page.$eval(selector,
+    (elm: Element, properties) => {
+      const property = (properties as typeof props).property;
+      const el = elm as unknown as K;
+      el[ property ] = cbk();
+    },
+    props as SerializableOrJSHandle
+  );
+}
+
+export {
+    osdsSetPropertyFunction,
+};

packages-new/common/stencil/src/e2e/public-api.ts

@@ -0,0 +1 @@
+export * from './osds-set-property-function'; 

packages-new/common/stencil/src/index.ts

@@ -1 +1,2 @@
 export * from './config/stencil-config';
+export * from './e2e/public-api';

packages-new/components/checkbox/jest.config.ts

@@ -14,10 +14,5 @@ const config: Config.InitialOptions = {
    * @see https://jestjs.io/fr/docs/configuration#globalsetup-string
    */
   globalSetup: "./jest.global.ts",
-  /**
-   * setup jest files executed for each test and in the test environment
-   * @see https://jestjs.io/fr/docs/configuration#setupfiles-array
-   */
-  setupFiles: ["./jest.setup.ts"]
 };
 export default config;

packages-new/components/checkbox/package.json

@@ -37,11 +37,11 @@
   "dependencies": {
     "@ovhcloud/ods-common-core": "^15.0.1",
     "@ovhcloud/ods-common-stencil": "^15.0.1",
-    "@ovhcloud/ods-component-tile": "^15.0.1",
     "@ovhcloud/ods-theming": "^15.0.1"
   },
   "devDependencies": {
     "@ovhcloud/ods-common-testing": "^15.0.1",
+    "@ovhcloud/ods-component-tile": "^15.0.1",
     "@ovhcloud/ods-stencil-dev": "^15.0.1"
   }
 }

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

@@ -6,8 +6,8 @@ const DEFAULT_ATTRIBUTE: OdsCheckboxAttribute = Object.freeze({
   ariaLabelledby: undefined,
   beforeSave: undefined,
   checked: false,
-  hasFocus: false,
   disabled: false,
+  hasFocus: false,
   label: undefined,
   name: '',
   save: undefined,

packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts

@@ -18,24 +18,18 @@ interface OdsCheckboxFocusChangeEventDetail extends OdsFocusChangeEventDetail {
 interface OdsCheckboxEvent {
   /**
    * Event triggered on checkbox blur
-   * @see OdsCheckboxBehavior.onBlur
-   * @see OdsCheckboxBehavior.emitBlur
    */
   odsBlur: EventEmitter<OdsCheckboxFocusChangeEventDetail>;
   /**
    * the checked state changed
-   * @see OdsCheckboxBehavior.emitChecked
    */
   odsCheckedChange: EventEmitter<OdsCheckboxCheckedChangeEventDetail>;
   /**
    * Event triggered on checkbox focus
-   * @see OdsCheckboxBehavior.onFocus
-   * @see OdsCheckboxBehavior.emitFocus
    */
   odsFocus: EventEmitter<OdsCheckboxFocusChangeEventDetail>;
   /**
    * the checked state is being changed
-   * @see OdsCheckboxBehavior.emitUpdating
    */
   odsUpdatingChange: EventEmitter<OdsCheckboxUpdatingChangeEventDetail>;
 }

packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts

@@ -10,9 +10,9 @@ import type { OsdsCheckbox } from './osds-checkbox';
 import { newE2EPage } from '@stencil/core/testing';
 import { OdsLogger } from '@ovhcloud/ods-common-core';
 import { odsComponentAttributes2StringAttributes, odsGetSimulatedPromise, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
-import { osdsSetPropertyFunction } from '@ovhcloud/ods-stencil/libraries/stencil-testing';
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
-
+import { osdsSetPropertyFunction } from '@ovhcloud/ods-common-stencil';
+
 describe('e2e:osds-checkbox', () => {
   let page: E2EPage;
   let el: E2EElement;
@@ -25,6 +25,7 @@ describe('e2e:osds-checkbox', () => {
   let activeElementId: string | undefined;
   const logger = new OdsLogger('e2e:osds-checkbox');
   const spyEvent = async (eventName: keyof OdsCheckboxEvent) => await el.spyOnEvent(eventName);
+  const baseAttribute = { ariaLabel: '', checked: false, disabled: false, hasFocus: false, updating: false, value: '' };
 
   async function setup({
                          attributes = {},
@@ -33,7 +34,6 @@ describe('e2e:osds-checkbox', () => {
                          htmlOutside = '',
                          onPage,
                        }: { attributes?: Partial<OdsCheckboxAttribute>, html?: string, htmlOutside?: string, nativeAttributes?: Partial<HTMLElement>, onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
-    const baseAttribute = { ariaLabel: '', checked: false, disabled: false, hasFocus: false, updating: false, value: '' };
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsCheckboxAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
     const nativeStringAttributes = odsComponentAttributes2StringAttributes<Partial<HTMLElement>>(nativeAttributes, {});
 

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

@@ -1,5 +1,3 @@
-// jest.mock('@ovhcloud/ods-core/src/components/checkbox/ods-checkbox-controller'); // keep jest.mock before any import
-
 import type { OdsCheckboxAttribute } from './interfaces/attributes';
 import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';
@@ -47,8 +45,6 @@ describe('spec:osds-checkbox', () => {
 
     // note: assigned slot not yet available in HtmlMockedElement of stencil : https://github.com/ionic-team/stencil/issues/2830
     mainSlot = shadowRoot?.querySelector('slot:not([name])');
-
-    // controller = (OdsCheckboxController as unknown as jest.SpyInstance<OdsCheckboxController, unknown[]>).mock.instances[ 0 ];
   }
 
   afterEach(() => {

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

@@ -8,10 +8,7 @@ import type {
 import type { OdsCheckboxAttribute, OdsCheckboxAttributeCbk } from './interfaces/attributes';
 import type { OdsCheckboxMethod } from './interfaces/methods';
 import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
-import {
-  OdsCheckboxable,
-  OdsLogger,
-} from '@ovhcloud/ods-common-core';
+import { OdsCheckboxable, OdsLogger} from '@ovhcloud/ods-common-core';
 import { OdsCheckboxController } from './core/ods-checkbox-controller';
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
@@ -20,7 +17,7 @@ import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
   styleUrl: 'osds-checkbox.scss',
   shadow: true,
 })
-class OsdsCheckbox implements OdsCheckboxMethod, OdsCheckboxEvent, OdsCheckboxAttribute {
+export class OsdsCheckbox implements OdsCheckboxMethod, OdsCheckboxEvent, OdsCheckboxAttribute {
   private static checkboxIds = 0;
   /** @see OdsComponent.controller */
   controller = new OdsCheckboxController(this);
@@ -190,8 +187,4 @@ class OsdsCheckbox implements OdsCheckboxMethod, OdsCheckboxEvent, OdsCheckboxAt
       </Host>
     );
   }
-}
-
-export { 
-  OsdsCheckbox,
 }

packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts

@@ -1,7 +1,7 @@
 export { OsdsCheckbox } from './osds-checkbox';
-export { OdsCheckboxAttribute } from './interfaces/attributes';
-export { OdsCheckboxMethod } from './interfaces/methods';
-export { 
+export type { OdsCheckboxAttribute } from './interfaces/attributes';
+export type { OdsCheckboxMethod } from './interfaces/methods';
+export type { 
     OdsCheckboxEvent, 
     OdsCheckboxFocusChangeEventDetail,
     OdsCheckboxUpdatingChangeEventDetail,

packages-new/components/checkbox/src/index.html

@@ -65,9 +65,6 @@
 </osds-checkbox>
 
 <script type="module">
-  import { defineCustomElements } from '/tile/loader/index.js';
-
-  defineCustomElements();
   const checkboxA = document.getElementById('checkbox-a');
   const checkboxAInfo = document.getElementById('checkbox-a-info');
   if (checkboxA && checkboxAInfo) {