🐛 fix: stencil version 4.22.3 event listener fixes

.changeset/small-yaks-train.md

@@ -1,5 +1,5 @@
 ---
-'@baloise/ds-core': patch
+'@baloise/ds-core': minor
 ---
 
-**core**: update stencil to 4.22.2
+**core**: update `stencil` to 4.22.3 for performance reasons

.changeset/thick-years-invent.md

@@ -1,8 +1,6 @@
 ---
-"@baloise/ds-testing": major
-"@baloise/ds-core": major
-"docs": major
-"e2e": major
+'@baloise/ds-testing': major
+'@baloise/ds-core': major
 ---
 
-Removed deprecated component bal-datepicker for performance reasons
+Removed deprecated component `bal-datepicker` for performance reasons

e2e/cypress/component/bal-dropdown.cy.ts

@@ -40,7 +40,7 @@ describe('bal-dropdown', () => {
 
       cy.getByPlaceholder('Pick a color').click()
       cy.getByRole('option', { name: 'Red' }).click()
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vRed')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Red')
     })
@@ -57,9 +57,9 @@ describe('bal-dropdown', () => {
       cy.getByPlaceholder('Pick a color').click()
       cy.getByRole('option', { name: 'Red' }).click()
       cy.getByRole('option', { name: 'Purple' }).click()
-      cy.get('@balChange').should('have.callCount', 4)
+      cy.get('@balChange').should('have.callCount', 2)
       cy.get('@balChange').shouldHaveEventDetail(['vRed'], 0)
-      cy.get('@balChange').shouldHaveEventDetail(['vRed', 'vPurple'], 2)
+      cy.get('@balChange').shouldHaveEventDetail(['vRed', 'vPurple'], 1)
       cy.getByPlaceholder('Pick a color').should('have.value', ['Red', 'Purple'])
     })
 
@@ -107,7 +107,7 @@ describe('bal-dropdown', () => {
 
       cy.getByPlaceholder('Pick a color').click()
       cy.getByRole('option', { name: 'Red' }).click()
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vRed')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Red')
     })
@@ -125,9 +125,9 @@ describe('bal-dropdown', () => {
       cy.getByPlaceholder('Pick a color').click()
       cy.getByRole('option', { name: 'Red' }).click()
       cy.getByRole('option', { name: 'Purple' }).click()
-      cy.get('@balChange').should('have.callCount', 4)
+      cy.get('@balChange').should('have.callCount', 2)
       cy.get('@balChange').shouldHaveEventDetail(['vRed'])
-      cy.get('@balChange').shouldHaveEventDetail(['vRed', 'vPurple'], 2)
+      cy.get('@balChange').shouldHaveEventDetail(['vRed', 'vPurple'], 1)
       cy.getByPlaceholder('Pick a color').should('have.value', ['Red', 'Purple'])
     })
 
@@ -182,7 +182,7 @@ describe('bal-dropdown', () => {
       cy.getByPlaceholder('Pick a color').should('have.value', 'Red').click()
       cy.getByRole('option', { name: 'Red' }).click()
 
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vRed')
     })
 
@@ -266,7 +266,7 @@ describe('bal-dropdown', () => {
 
       cy.getByPlaceholder('Pick a color').click().type('{downArrow}').type('{enter}')
 
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vRed')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Red')
     })
@@ -290,9 +290,9 @@ describe('bal-dropdown', () => {
         .type('{upArrow}')
         .type('{enter}')
 
-      cy.get('@balChange').should('have.callCount', 4)
+      cy.get('@balChange').should('have.callCount', 2)
       cy.get('@balChange').shouldHaveEventDetail(['vYellow'])
-      cy.get('@balChange').shouldHaveEventDetail(['vPurple', 'vYellow'], 2)
+      cy.get('@balChange').shouldHaveEventDetail(['vPurple', 'vYellow'], 1)
       cy.getByPlaceholder('Pick a color').should('have.value', ['Purple', 'Yellow'])
     })
 
@@ -307,7 +307,7 @@ describe('bal-dropdown', () => {
 
       cy.getByPlaceholder('Pick a color').click().type('{Y}').wait(200).type('{enter}')
 
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vYellow')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Yellow')
     })
@@ -323,7 +323,7 @@ describe('bal-dropdown', () => {
 
       cy.getByPlaceholder('Pick a color').focus().type('{Y}').wait(200).blur()
 
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vYellow')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Yellow')
     })
@@ -390,7 +390,7 @@ describe('bal-dropdown', () => {
 
       cy.get('.bal-dropdown__root__content').contains('Banana')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Banana')
-      cy.get('@balChange').should('have.callCount', 2)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vBanana')
     })
   })
@@ -415,7 +415,7 @@ describe('bal-dropdown', () => {
 
       cy.getByLabelText('Color').click()
       cy.getByRole('option', { name: 'Green' }).click()
-      cy.get('@balChange').should('have.callCount', 4)
+      cy.get('@balChange').should('have.callCount', 1)
       cy.get('@balChange').shouldHaveEventDetail('vGreen')
       cy.getByPlaceholder('Pick a color').should('have.value', 'Green')
     })

e2e/cypress/component/bal-option-list.cy.ts

@@ -1,24 +1,43 @@
 import { Components } from '../support/utils'
 
 describe('bal-option-list', () => {
-  it('should select an option and emit an event', () => {
-    const onBalOptionChangeSpy = cy.spy().as('balOptionChange')
-    cy.mount<Components.BalOptionList>(
-      `<bal-option-list>
+  let onBalOptionChangeSpy: Cypress.Agent<sinon.SinonSpy>
+
+  let events = {
+    onBalOptionChangeSpy: onBalOptionChangeSpy,
+  }
+
+  const template = `<bal-option-list>
       <bal-option value="vGreen" label="Green">Green</bal-option>
       <bal-option value="vRed" label="Red">Red</bal-option>
       <bal-option value="vYellow" label="Yellow">Yellow</bal-option>
       <bal-option value="vPurple" label="Purple">Purple</bal-option>
-    </bal-option-list>`,
-      {
-        events: {
-          balOptionChange: onBalOptionChangeSpy,
-        },
+    </bal-option-list>`
+
+  beforeEach(() => {
+    onBalOptionChangeSpy = cy.spy().as('balOptionChange')
+    events = {
+      onBalOptionChangeSpy: onBalOptionChangeSpy,
+    }
+
+    cy.mount<Components.BalOptionList>(template, {
+      events: {
+        balOptionChange: onBalOptionChangeSpy,
       },
-    )
+    })
+  })
 
+  it('should select an option and emit an event', () => {
     cy.getByRole('option', { name: 'Red' }).click()
     cy.get('@balOptionChange').should('have.been.calledOnce')
     cy.get('@balOptionChange').shouldHaveEventDetail({ label: 'Red', value: 'vRed', selected: true })
   })
+
+  it('should select two option and emit two event', () => {
+    cy.getByRole('option', { name: 'Red' }).click()
+    cy.getByRole('option', { name: 'Yellow' }).click()
+    cy.get('@balOptionChange').should('have.been.calledTwice')
+    cy.get('@balOptionChange').shouldHaveEventDetail({ label: 'Red', value: 'vRed', selected: true })
+    cy.get('@balOptionChange').shouldHaveEventDetail({ label: 'Yellow', value: 'vYellow', selected: true }, 1)
+  })
 })

e2e/cypress/component/bal-select.cy.ts

@@ -66,7 +66,7 @@ describe('bal-select', () => {
     cy.get('bal-select').type('{downArrow}').type('{enter}')
 
     cy.get('@balChange').should('have.been.calledOnce')
-    cy.get('@balChange').shouldHaveEventDetail('v1996')
+    cy.get('@balChange').shouldHaveEventDetail('v1995')
   })
 
   it('should not fire a click event, because the select is disabled', () => {
@@ -108,7 +108,7 @@ describe('bal-select', () => {
     cy.get('bal-select').type('{downArrow}').type('{enter}').blur({ force: true })
 
     cy.get('@balChange').should('have.been.calledOnce')
-    cy.get('@balChange').shouldHaveEventDetail('v1996')
+    cy.get('@balChange').shouldHaveEventDetail('v1995')
     cy.get('@balBlur').should('have.been.calledOnce')
   })
 
@@ -133,8 +133,8 @@ describe('bal-select', () => {
     cy.get('bal-select').type('{downArrow}').type('{enter}')
     cy.get('bal-select').type('{downArrow}').type('{enter}')
 
-    cy.get('@balChange').should('have.been.callCount', 4)
-    cy.get('@balChange').shouldHaveEventDetail(['v1996'], 0)
+    cy.get('@balChange').should('have.been.callCount', 2)
+    cy.get('@balChange').shouldHaveEventDetail(['v1995'], 0)
   })
 
   it('multiple should fire a balBlur when leaving the control (multiple)', () => {
@@ -173,9 +173,9 @@ describe('bal-select', () => {
     cy.get('bal-select').type('{downArrow}').type('{enter}')
     cy.get('bal-select').type('{downArrow}').type('{enter}')
 
-    cy.get('@balChange').should('have.been.callCount', 4)
-    cy.get('@balChange').shouldHaveEventDetail(['v1996'], 0)
-    // cy.get('@balChange').shouldHaveEventDetail(['v1996', 'v1998'], 2)
+    cy.get('@balChange').should('have.been.callCount', 2)
+    cy.get('@balChange').shouldHaveEventDetail(['v1995'], 0)
+    cy.get('@balChange').shouldHaveEventDetail(['v1995', 'v1996'], 1)
   })
 
   it('should fire balInput and balChange event after value change (typeahead + multiple)', () => {
@@ -212,8 +212,8 @@ describe('bal-select', () => {
     cy.get('bal-select').find('.bal-select__control__input').type('{1}').type('{9}').type('{9}')
     cy.get('bal-select').type('{downArrow}').type('{enter}')
 
-    cy.get('@balChange').should('have.been.callCount', 2)
-    cy.get('@balChange').shouldHaveEventDetail(['v1996'])
+    cy.get('@balChange').should('have.been.callCount', 1)
+    cy.get('@balChange').shouldHaveEventDetail(['v1995'])
   })
 
   it('should fire a balBlur when leaving the control (typeahead + remote)', () => {

e2e/cypress/support/mount.ts

@@ -1,12 +1,19 @@
-import { getContainerEl, setupHooks } from '@cypress/mount-utils'
+import { getContainerEl, ROOT_SELECTOR, setupHooks } from '@cypress/mount-utils'
 import { BalConfig, initialize } from '../../generated/components'
 import { defineAllComponents } from '../../generated/components/all'
 import * as balIcons from '../../generated/icons'
 
-function cleanup() {
-  const elements = Array.from(document.getElementsByTagName('bal-app'))
-  elements.forEach(el => el.remove())
-}
+Cypress.on('run:start', () => {
+  // Consider doing a check to ensure your adapter only runs in Component Testing mode.
+  if (Cypress.testingType !== 'component') {
+    return
+  }
+
+  Cypress.on('test:before:run', () => {
+    // Do some cleanup from previous test - for example, clear the DOM.
+    getContainerEl().innerHTML = ''
+  })
+})
 
 export type MountOptions<TComponent, TEventMap = any> = {
   config?: BalConfig
@@ -19,11 +26,8 @@ export function mount<TComponent, TEventMap = any>(
   template: string,
   options: MountOptions<TComponent, TEventMap> = {},
 ) {
-  const root = getContainerEl()
-
-  if (root.hasChildNodes()) {
-    cleanup()
-  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const root = document.querySelector(ROOT_SELECTOR)!
 
   initialize({
     animated: false,
@@ -34,6 +38,7 @@ export function mount<TComponent, TEventMap = any>(
     },
     ...(options.config && {}),
   })
+
   defineAllComponents()
 
   const appEl = document.createElement('bal-app')
@@ -46,6 +51,8 @@ export function mount<TComponent, TEventMap = any>(
     templateEl = nestedComponentEl
   }
 
+  templateEl.id = 'component'
+
   if (templateEl && options && options.props) {
     if (templateEl) {
       for (const [prop, value] of Object.entries(options.props)) {
@@ -60,7 +67,7 @@ export function mount<TComponent, TEventMap = any>(
   return (
     cy
       .waitForDesignSystem()
-      .wrap(templateEl, { log: false })
+      .wrap(document.querySelector('#component'), { log: false })
       .waitForComponents({ log: false })
       // set all props to the new created web component
       .then(componentEl => {
@@ -92,7 +99,6 @@ export function mount<TComponent, TEventMap = any>(
           }
         }
       })
-      // set event listeners
       .then(componentEl => {
         Cypress.log({
           name: 'mount',
@@ -109,4 +115,4 @@ export function mount<TComponent, TEventMap = any>(
   )
 }
 
-setupHooks(cleanup)
+setupHooks()

libs/output-target-angular/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@stencil/core": "~4.22.2",
+    "@stencil/core": "4.22.3",
     "tslib": "~2.3.0"
   },
   "type": "commonjs",

libs/output-target-angular/src/lib/generate-value-accessors.ts

@@ -81,7 +81,7 @@ function copyResources(config: Config, resourcesFilesToCopy: string[], directory
   const copyTasks = resourcesFilesToCopy.map(rf => {
     return {
       src: join(__dirname, '../../../resources/control-value-accessors/', rf),
-      dest: join(directory),
+      dest: join(directory, rf),
       keepDirStructure: false,
       warn: false,
       ignore: [],

libs/output-target-angular/src/lib/output-angular.ts

@@ -48,15 +48,15 @@ async function copyResources(config: Config, outputTarget: OutputTargetAngular)
   if (!config.sys || !config.sys.copy || !config.sys.glob) {
     throw new Error('stencil is not properly initialized at this step. Notify the developer')
   }
-  const srcDirectory = join(__dirname, '../../../', 'angular-component-lib')
-  const destDirectory = join(dirname(outputTarget.directivesProxyFile), 'angular-component-lib')
+  const srcDirectory = join(__dirname, '../../../angular-component-lib/utils.ts')
+  const destDirectory = join(dirname(outputTarget.directivesProxyFile), 'angular-component-lib/utils.ts')
 
   return config.sys.copy(
     [
       {
         src: srcDirectory,
         dest: destDirectory,
-        keepDirStructure: true,
+        keepDirStructure: false,
         warn: false,
         ignore: [],
       },

libs/output-target-react/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "tslib": "~2.3.0",
-    "@stencil/core": "~4.22.2"
+    "@stencil/core": "4.22.3"
   },
   "peerDependencies": {
     "react": "~18.2.0",

libs/output-target-react/src/lib/output-react.ts

@@ -160,7 +160,7 @@ async function copyResources(config: Config, outputTarget: OutputTargetReact): P
       {
         src: srcDirectory,
         dest: destDirectory,
-        keepDirStructure: true,
+        keepDirStructure: false,
         warn: false,
         ignore: [],
       },

libs/output-target-vue/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "tslib": "~2.3.0",
-    "@stencil/core": "~4.22.2"
+    "@stencil/core": "4.22.3"
   },
   "type": "commonjs",
   "main": "./dist/src/index.js",

libs/output-target-vue/src/lib/output-vue.ts

@@ -107,7 +107,7 @@ async function copyResources(config: Config, outputTarget: OutputTargetVue) {
       {
         src: srcDirectory,
         dest: destDirectory,
-        keepDirStructure: true,
+        keepDirStructure: false,
         warn: false,
         ignore: [],
       },

libs/output-target-web/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "tslib": "~2.3.0",
-    "@stencil/core": "~4.22.2",
+    "@stencil/core": "4.22.3",
     "fs-extra": "11.2.0",
     "replace-in-file": "~7.1.0"
   },