From 091dd6d590ecce19d5afe72d8a77d537d57b391a Mon Sep 17 00:00:00 2001 From: Alexandre Esteves Date: Thu, 10 Aug 2023 10:55:29 +0200 Subject: [PATCH] fix(checkbox): export & dependencies --- .../src/e2e/osds-set-property-function.ts | 43 +++++++++++++++++++ .../common/stencil/src/e2e/public-api.ts | 1 + packages-new/common/stencil/src/index.ts | 1 + .../components/checkbox/jest.config.ts | 5 --- .../components/checkbox/jest.setup.ts | 17 -------- packages-new/components/checkbox/package.json | 2 +- .../constants/default-attributes.ts | 2 +- .../osds-checkbox/interfaces/events.ts | 6 --- .../osds-checkbox/osds-checkbox.e2e.ts | 6 +-- .../osds-checkbox/osds-checkbox.spec.ts | 4 -- .../osds-checkbox/osds-checkbox.tsx | 11 +---- .../components/osds-checkbox/public-api.ts | 6 +-- .../components/checkbox/src/index.html | 3 -- 13 files changed, 55 insertions(+), 52 deletions(-) create mode 100644 packages-new/common/stencil/src/e2e/osds-set-property-function.ts create mode 100644 packages-new/common/stencil/src/e2e/public-api.ts delete mode 100644 packages-new/components/checkbox/jest.setup.ts diff --git a/packages-new/common/stencil/src/e2e/osds-set-property-function.ts b/packages-new/common/stencil/src/e2e/osds-set-property-function.ts new file mode 100644 index 0000000000..a408aaa81c --- /dev/null +++ b/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 = odsPickMethods, + T extends keyof K = keyof K>(page: E2EPage, selector: string, property: T, fct: K[T]): Promise { + 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, +}; \ No newline at end of file diff --git a/packages-new/common/stencil/src/e2e/public-api.ts b/packages-new/common/stencil/src/e2e/public-api.ts new file mode 100644 index 0000000000..4126b12c58 --- /dev/null +++ b/packages-new/common/stencil/src/e2e/public-api.ts @@ -0,0 +1 @@ +export * from './osds-set-property-function'; \ No newline at end of file diff --git a/packages-new/common/stencil/src/index.ts b/packages-new/common/stencil/src/index.ts index c481c8a02a..5e1a3a6658 100644 --- a/packages-new/common/stencil/src/index.ts +++ b/packages-new/common/stencil/src/index.ts @@ -1 +1,2 @@ export * from './config/stencil-config'; +export * from './e2e/public-api'; \ No newline at end of file diff --git a/packages-new/components/checkbox/jest.config.ts b/packages-new/components/checkbox/jest.config.ts index 844eab7331..ac0af9289a 100644 --- a/packages-new/components/checkbox/jest.config.ts +++ b/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; diff --git a/packages-new/components/checkbox/jest.setup.ts b/packages-new/components/checkbox/jest.setup.ts deleted file mode 100644 index cdbd6e6c9a..0000000000 --- a/packages-new/components/checkbox/jest.setup.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * setup jest file executed for each test and in the test environment - * @see https://jestjs.io/fr/docs/configuration#setupfiles-array - */ - -// set a mocked configured config for ODS -// config can be changed on the fly later in tests - -const setupConfig: any = { config: { logging: { active: false } } }; -/** - * mock the window for jest testing. - * very useful with stencil in order to manage the MockedWindow of stencil. - * warning: when using `window` with stencil e2e test, each time window is called, a new MockedWindow is created. - * it can lead to misunderstanding, so it is recommended to use this in every e2e tests. - * @param setupConfig- - window's ods config - */ - diff --git a/packages-new/components/checkbox/package.json b/packages-new/components/checkbox/package.json index 483e06ea6d..556cf99773 100644 --- a/packages-new/components/checkbox/package.json +++ b/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" } } diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts b/packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts index 505966b6ac..a0a037911b 100644 --- a/packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts +++ b/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, diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts index c41c1df733..7e5a4ecd74 100644 --- a/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts +++ b/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; /** * the checked state changed - * @see OdsCheckboxBehavior.emitChecked */ odsCheckedChange: EventEmitter; /** * Event triggered on checkbox focus - * @see OdsCheckboxBehavior.onFocus - * @see OdsCheckboxBehavior.emitFocus */ odsFocus: EventEmitter; /** * the checked state is being changed - * @see OdsCheckboxBehavior.emitUpdating */ odsUpdatingChange: EventEmitter; } diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts index d730859573..34d1b05bf7 100644 --- a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts +++ b/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, html?: string, htmlOutside?: string, nativeAttributes?: Partial, onPage?: ({ page }: { page: E2EPage }) => void } = {}) { - const baseAttribute = { ariaLabel: '', checked: false, disabled: false, hasFocus: false, updating: false, value: '' }; const stringAttributes = odsComponentAttributes2StringAttributes({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE); const nativeStringAttributes = odsComponentAttributes2StringAttributes>(nativeAttributes, {}); diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts index 04981ee69f..bdd74792b3 100644 --- a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts +++ b/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).mock.instances[ 0 ]; } afterEach(() => { diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx index c1a60a101a..b6dede5502 100644 --- a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx +++ b/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 ); } -} - -export { - OsdsCheckbox, } \ No newline at end of file diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts b/packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts index 60e4ba5568..13b4ed6d2e 100644 --- a/packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts +++ b/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, diff --git a/packages-new/components/checkbox/src/index.html b/packages-new/components/checkbox/src/index.html index 9f7e0c78de..9b27551ea6 100644 --- a/packages-new/components/checkbox/src/index.html +++ b/packages-new/components/checkbox/src/index.html @@ -65,9 +65,6 @@