✨ feat(testing): cypress flexible imports (#1012)

* feat(testing): split exports into seperate files

* chore: enable src folder for npm

* chore: change build strategy

* chore: add changeset

* chore: change to es5

* chore: add new command

* feat(testing): add new commands

* chore: improve docs

* chore: remove duplicate changes

* chore: update docs

.changeset/red-cobras-provide.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-testing': minor
+---
+
+testing library supports file by file import

cspell.json

@@ -25,6 +25,7 @@
     "Baloise",
     "bday",
     "bubu",
+    "myusername",
     "googlemaps",
     "gapless",
     "FAVICONS",

packages/components/cypress.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'cypress'
 import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin'
 
 export default defineConfig({
-  projectId: 'dnm1ky',
   video: false,
   screenshotOnRunFailure: true,
   screenshotsFolder: './cypress/snapshots/actual',
@@ -15,6 +14,8 @@ export default defineConfig({
     failSilently: false,
   },
 
+  includeShadowDom: true,
+
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.

packages/components/src/components/bal-close/bal-close.i18n.ts

@@ -1,10 +1,10 @@
 import { I18n } from '../../interfaces'
 
-interface I18nCloseLabel {
+interface I18nBalClose {
   close: string
 }
 
-export const i18nCloseLabel: I18n<I18nCloseLabel> = {
+export const i18nBalClose: I18n<I18nBalClose> = {
   de: {
     close: 'Schliessen',
   },

packages/components/src/components/bal-close/bal-close.tsx

@@ -3,7 +3,7 @@ import { inheritAttributes } from '../../utils/attributes'
 import { BEM } from '../../utils/bem'
 import { BalConfigObserver, BalConfigState } from '../../interfaces'
 import { BalLanguage, BalRegion, ListenToConfig, defaultConfig } from '../../utils/config'
-import { i18nCloseLabel } from './bal-close.i18n'
+import { i18nBalClose } from './bal-close.i18n'
 
 @Component({
   tag: 'bal-close',
@@ -47,7 +47,7 @@ export class Close implements ComponentInterface, BalConfigObserver {
     const blockEl = BEM.block('close')
     const buttonEl = blockEl.element('button')
     const iconEl = buttonEl.element('icon')
-    const label = i18nCloseLabel[this.language].close
+    const label = i18nBalClose[this.language].close
 
     return (
       <Host class={{ ...blockEl.class() }}>

packages/components/src/components/bal-steps/stories/testing.md

@@ -24,12 +24,13 @@ describe('Steps', () => {
 
 A list of the custom commands for this specific component.
 
-| Command                       | Description                                   | Signature                                                                                               |
-| ----------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `balStepsFindItems`           | Returns the tab items.                        | `(options?: Partial<Loggable>): Chainable<JQuery>`                                                      |
-| `balStepsFindLabel`           | Returns the label of the tab item.            | `(options?: Partial<Loggable>): Chainable<JQuery>`                                                      |
-| `balStepsShouldHaveItems`     | Assert that the tab has the given item.       | `(labels: string[], dataType?: 'label' \| 'value', options?: Partial<Loggable>): Chainable<JQuery>`     |
-| `balStepsItemShouldHaveState` | Assert that the tab item has the given state. | `(state: 'done' \| 'failed' \| 'active' \| 'disabled', options?: Partial<Loggable>): Chainable<JQuery>` |
+| Command                          | Description                                       | Signature                                                                                               |
+| -------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `balStepsFindItems`              | Returns the tab items.                            | `(options?: Partial<Loggable>): Chainable<JQuery>`                                                      |
+| `balStepsFindLabel`              | Returns the label of the tab item.                | `(options?: Partial<Loggable>): Chainable<JQuery>`                                                      |
+| `balStepsShouldHaveItems`        | Assert that the tab has the given item.           | `(labels: string[], dataType?: 'label' \| 'value', options?: Partial<Loggable>): Chainable<JQuery>`     |
+| `balStepsItemShouldHaveState`    | Assert that the tab item has the given state.     | `(state: 'done' \| 'failed' \| 'active' \| 'disabled', options?: Partial<Loggable>): Chainable<JQuery>` |
+| `balStepsItemShouldNotHaveState` | Assert that the tab item has not the given state. | `(state: 'done' \| 'failed' \| 'active' \| 'disabled', options?: Partial<Loggable>): Chainable<JQuery>` |
 
 
 ### Component Element Selectors

packages/components/src/components/form/bal-datepicker/bal-datepicker.i18n.ts

@@ -1,14 +1,14 @@
 import { I18n } from '../../../interfaces'
 
-interface I18nDate {
+interface I18nBalDatepicker {
   months: string[]
   monthsShort: string[]
   weekdays: string[]
   weekdaysShort: string[]
   weekdaysMin: string[]
 }
 
-export const i18nDate: I18n<I18nDate> = {
+export const i18nBalDatepicker: I18n<I18nBalDatepicker> = {
   de: {
     months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
     monthsShort: 'Jan._Feb._März_Apr._Mai_Juni_Juli_Aug._Sep._Okt._Nov._Dez.'.split('_'),

packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx

@@ -44,7 +44,7 @@ import {
 } from '@baloise/web-app-utils'
 import isNil from 'lodash.isnil'
 import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from '../../../utils/constants/keys.constant'
-import { i18nDate } from './bal-datepicker.i18n'
+import { i18nBalDatepicker } from './bal-datepicker.i18n'
 import {
   defaultConfig,
   BalConfigObserver,
@@ -449,7 +449,7 @@ export class Datepicker
   }
 
   get months(): { name: string; index: number }[] {
-    const monthNames = i18nDate[this.language].monthsShort
+    const monthNames = i18nBalDatepicker[this.language].monthsShort
     let months = monthNames.map((name, index) => ({ name, index }))
 
     if (this.min && this.pointerDate.year === getYear(parse(this.min) as Date)) {
@@ -466,7 +466,7 @@ export class Datepicker
   }
 
   get weekDays(): string[] {
-    const translations = [...i18nDate[this.language].weekdaysMin]
+    const translations = [...i18nBalDatepicker[this.language].weekdaysMin]
     translations.push(translations.shift() || '')
     return translations
   }

packages/components/src/components/form/bal-field/bal-field-label/bal-field-label.i18n.ts

@@ -1,10 +1,10 @@
 import { I18n } from '../../../../interfaces'
 
-interface I18nFieldLabel {
+interface I18nBalFieldLabel {
   optional: string
 }
 
-export const i18nFieldLabel: I18n<I18nFieldLabel> = {
+export const i18nBalFieldLabel: I18n<I18nBalFieldLabel> = {
   de: {
     optional: ' (optional)',
   },

packages/components/src/components/form/bal-time-input/bal-time-input.i18n.ts

@@ -1,11 +1,11 @@
 import { I18n } from '../../../interfaces'
 
-interface I18nTime {
+interface I18nBalTimeInput {
   hours: string
   minutes: string
 }
 
-export const i18nTime: I18n<I18nTime> = {
+export const i18nBalTimeInput: I18n<I18nBalTimeInput> = {
   de: {
     hours: 'hh',
     minutes: 'mm',

packages/components/src/components/form/bal-time-input/bal-time-input.tsx

@@ -37,7 +37,7 @@ import { debounceEvent, findItemLabel } from '../../../utils/helpers'
 import { inheritAttributes } from '../../../utils/attributes'
 import { ACTION_KEYS, NUMBER_KEYS, isCtrlOrCommandKey } from '../../../utils/constants/keys.constant'
 import { BEM } from '../../../utils/bem'
-import { i18nTime } from './bal-time-input.i18n'
+import { i18nBalTimeInput } from './bal-time-input.i18n'
 
 @Component({
   tag: 'bal-time-input',
@@ -281,7 +281,7 @@ export class TimeInput implements ComponentInterface, BalConfigObserver, FormInp
             disabled={this.disabled}
             readonly={this.readonly}
             required={this.required}
-            placeholder={`${i18nTime[this.language].hours}:${i18nTime[this.language].minutes}`}
+            placeholder={`${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`}
             value={value}
             onInput={ev => this.onInput(ev as InputEvent)}
             onFocus={e => this.onFocus(e)}

packages/components/src/components/typography/bal-label/bal-label.i18n.ts

@@ -1,10 +1,10 @@
 import { I18n } from '../../../interfaces'
 
-interface I18nLabel {
+interface I18nBalLabel {
   optional: string
 }
 
-export const i18nLabel: I18n<I18nLabel> = {
+export const i18nBalLabel: I18n<I18nBalLabel> = {
   de: {
     optional: ' (optional)',
   },

packages/components/src/components/typography/bal-label/bal-label.tsx

@@ -9,7 +9,7 @@ import {
   ListenToConfig,
 } from '../../../utils/config'
 import { Loggable, Logger, LogInstance } from '../../../utils/log'
-import { i18nLabel } from './bal-label.i18n'
+import { i18nBalLabel } from './bal-label.i18n'
 import { BalElementStateInfo } from '../../../utils/element-states'
 import { BalMutationObserver, ListenToMutation } from '../../../utils/mutation'
 
@@ -167,7 +167,7 @@ export class BalLabel
 
   render() {
     const block = BEM.block('label')
-    const suffix = this.required === false ? i18nLabel[this.language].optional || '' : ''
+    const suffix = this.required === false ? i18nBalLabel[this.language].optional || '' : ''
     const disabled = !!this.disabled || !!this.readonly
     const danger = !!this.invalid
     const success = !!this.valid

packages/components/src/index.ts

@@ -43,6 +43,15 @@ export * from './components/notice/bal-modal/bal-modal.type'
 export * from './components/form/bal-checkbox/bal-checkbox.type'
 export * from './components/form/bal-radio/bal-radio.type'
 
+/**
+ * i18n
+ */
+export * from './components/bal-close/bal-close.i18n'
+export * from './components/form/bal-field/bal-field-label/bal-field-label.i18n'
+export * from './components/form/bal-datepicker/bal-datepicker.i18n'
+export * from './components/form/bal-time-input/bal-time-input.i18n'
+export * from './components/typography/bal-label/bal-label.i18n'
+
 /**
  * Utils
  */