chore: add model to angular test

apps/angular/cypress/e2e/bal-modal.spec.cy.ts

@@ -0,0 +1,13 @@
+describe('bal-modal', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByTestId('result-modal').invoke('text').invoke('trim').should('equal', '')
+    cy.getByRole('button', { name: 'Open Modal' }).click()
+    cy.waitForBrowser()
+    cy.getByRole('button', { name: 'Okay' }).click()
+    cy.getByTestId('result-modal').contains('"firstName": "Peter"')
+    cy.getByTestId('result-modal').contains('"lastName": "Parker"')
+  })
+})

apps/angular/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'
-import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
+import { BalModalService, BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
 import { InputComponent } from './form-components/input.component'
 import { TextareaComponent } from './form-components/textarea.component'
 import { NumberInputComponent } from './form-components/number-input.component'
@@ -17,6 +17,7 @@ import { RadioComponent } from './form-components/radio.component'
 import { RadioButtonsComponent } from './form-components/radio-buttons.component'
 import { DateComponent } from './form-components/date.component'
 import { InputDateComponent } from './form-components/input-date.component'
+import { ModalComponent } from './modal.component'
 
 export interface UpdateControl {
   name: string
@@ -75,12 +76,17 @@ export interface UpdateControl {
           </div>
 
           <pre data-test="result">{{ myForm.value | json }}</pre>
+          <pre data-test="result-modal">{{ modalData | json }}</pre>
         </form>
+        <bal-button (click)="openModal()">Open Modal</bal-button>
       </main>
     </bal-app>
   `,
 })
 export class AppComponent {
+  modalData!: any
+  modal!: HTMLBalModalElement
+
   myForm = new FormGroup({
     input: new FormControl('Init Value', [Validators.required]),
     textarea: new FormControl('Init Value', [Validators.required]),
@@ -101,6 +107,8 @@ export class AppComponent {
     radioButtons: new FormControl('Kiwi', [Validators.required]),
   })
 
+  constructor(private modalService: BalModalService) {}
+
   updateValue(option: UpdateControl) {
     const control = this.myForm.get(option.name)
     if (control) {
@@ -111,4 +119,26 @@ export class AppComponent {
   onSubmit() {
     console.warn(this.myForm.value)
   }
+
+  async openModal() {
+    this.modal = await this.modalService.create({
+      component: ModalComponent,
+      componentProps: {
+        firstName: 'Peter',
+        lastName: 'Parker',
+      },
+    })
+    await this.modal.present()
+
+    // Collect the data from the modal through the dismiss event
+    const { data } = await this.modal.onWillDismiss()
+    this.modalData = data
+
+    // React onDidDismiss
+    await this.modal.onDidDismiss()
+  }
+
+  closeModal() {
+    this.modal.dismiss()
+  }
 }

apps/angular/src/app/modal.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { BalModalService, BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
+
+@Component({
+  selector: 'app-modal',
+  standalone: true,
+  imports: [CommonModule, BaloiseDesignSystemModule],
+  template: `
+    <bal-modal-header>Modal Title</bal-modal-header>
+    <bal-modal-body>
+      <p>{{ firstName }}</p>
+      <p>{{ lastName }}</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </p>
+      <bal-button-group position="right" class="mt-medium">
+        <bal-button color="link" (click)="closeModal()">Cancel</bal-button>
+        <bal-button color="primary" (click)="closeModal()">Okay</bal-button>
+      </bal-button-group>
+    </bal-modal-body>
+  `,
+})
+export class ModalComponent {
+  @Input() firstName!: string
+  @Input() lastName!: string
+
+  constructor(private modalService: BalModalService) {}
+
+  closeModal() {
+    this.modalService.dismiss({
+      firstName: this.firstName,
+      lastName: this.lastName,
+      dismissed: true,
+    })
+  }
+}

packages/testing/src/commands/custom/component.command.ts

@@ -1,5 +1,52 @@
 import { areComponentsReady, log, waitAfterFramePaint, waitAfterIdleCallback, wrapOptions } from '../helpers'
 
+Cypress.Commands.add(
+  'waitForBrowser',
+  {
+    prevSubject: 'optional',
+  },
+  (subject, options?: Partial<Cypress.Loggable>) => {
+    log('waitForBrowser', '', subject, options)
+    const o = wrapOptions(options)
+    return cy
+      .wrap(subject, o)
+      .then(() => waitAfterFramePaint())
+      .then(() => waitAfterIdleCallback())
+      .wait(300, o) // animation timeout
+      .wrap(subject, o) as any
+  },
+)
+
+Cypress.Commands.add(
+  'waitAfterIdleCallback',
+  {
+    prevSubject: 'optional',
+  },
+  (subject, options?: Partial<Cypress.Loggable>) => {
+    log('waitAfterIdleCallback', '', subject, options)
+    const o = wrapOptions(options)
+    return cy
+      .wrap(subject, o)
+      .then(() => waitAfterIdleCallback())
+      .wrap(subject, o) as any
+  },
+)
+
+Cypress.Commands.add(
+  'waitAfterFramePaint',
+  {
+    prevSubject: 'optional',
+  },
+  (subject, options?: Partial<Cypress.Loggable>) => {
+    log('waitAfterFramePaint', '', subject, options)
+    const o = wrapOptions(options)
+    return cy
+      .wrap(subject, o)
+      .then(() => waitAfterFramePaint())
+      .wrap(subject, o) as any
+  },
+)
+
 Cypress.Commands.add(
   'waitForComponents',
   {

packages/testing/src/commands/custom/component.types.ts

@@ -26,5 +26,17 @@ declare namespace Cypress {
      * Waits until the Design System is fully loaded and rendered
      */
     waitForDesignSystem(): Chainable<JQuery>
+    /**
+     * Waits until the browser goes into idle mode
+     */
+    waitAfterIdleCallback(): Chainable<JQuery>
+    /**
+     * Waits until the browser finished rendering
+     */
+    waitAfterFramePaint(): Chainable<JQuery>
+    /**
+     * Waits until the browser finished rendering
+     */
+    waitForBrowser(): Chainable<JQuery>
   }
 }