@kirbydesign/designsystem 0.0.0

package/src/lib/components/modal/modal-wrapper/modal-wrapper.testbuilder.ts

@@ -0,0 +1,155 @@
+import { Component, Inject } from '@angular/core';
+import { Spectator, SpectatorFactory } from '@ngneat/spectator';
+
+import { ModalConfig } from './config/modal-config';
+import { COMPONENT_PROPS } from './config/modal-config.helper';
+import { ModalWrapperComponent } from './modal-wrapper.component';
+
+export class ModalWrapperTestBuilder {
+  private config: ModalConfig = {
+    component: null,
+    flavor: null,
+  };
+
+  constructor(private readonly createComponent: SpectatorFactory<ModalWrapperComponent>) {}
+
+  title(title: string) {
+    this.config['componentProps'] = { ...this.config?.componentProps, title };
+    return this;
+  }
+
+  collapsibleTitle(value: boolean) {
+    this.config['collapseTitle'] = value;
+    return this;
+  }
+
+  flavor(flavor: ModalConfig['flavor']) {
+    this.config.flavor = flavor;
+    return this;
+  }
+
+  interactWithBackground(interactWithBackground: boolean = true) {
+    this.config.interactWithBackground = interactWithBackground;
+    return this;
+  }
+
+  withStaticFooter() {
+    this.config.component = StaticFooterEmbeddedComponent;
+    return this;
+  }
+
+  withDynamicFooter() {
+    this.config.component = DynamicFooterEmbeddedComponent;
+    return this;
+  }
+
+  withEmbeddedInputComponent() {
+    this.config.component = InputEmbeddedComponent;
+    return this;
+  }
+
+  withStaticPageProgress() {
+    this.config.component = StaticPageProgressEmbeddedComponent;
+    return this;
+  }
+
+  withDynamicPageProgress() {
+    this.config.component = DynamicPageProgressEmbeddedComponent;
+    return this;
+  }
+
+  component(component: any) {
+    this.config.component = component;
+    return this;
+  }
+
+  build() {
+    const spectator: Spectator<ModalWrapperComponent> = this.createComponent({
+      props: {
+        config: this.config,
+      },
+      detectChanges: false,
+    });
+    spyOn(spectator.component['ionContent'], 'getScrollElement').and.returnValue(
+      Promise.resolve(document.createElement('DIV'))
+    );
+
+    // TODO: Figure out how to mock ResizeObserverService methods - at this point it's too late as ModalWrapper calls .observe in it's constructor
+    // const resizeObserverService = spectator.inject(ResizeObserverService);
+    // spyOn(resizeObserverService, 'observe');
+    // spyOn(resizeObserverService, 'unobserve');
+
+    const ionModalWrapper = document.createElement('div');
+    const ionModal = document.createElement('div');
+    ionModal['dismiss'] = jasmine.createSpy('dissmissSpy').and.resolveTo(true);
+    spyOn(spectator.element, 'closest')
+      .withArgs('.modal-wrapper')
+      .and.returnValue(ionModalWrapper)
+      .withArgs('ion-modal')
+      .and.returnValue(ionModal);
+
+    spectator.detectChanges();
+
+    return spectator;
+  }
+}
+
+@Component({
+  template: `
+    <div>Some test content</div>
+
+    <kirby-modal-footer>
+      <button kirby-button>Test</button>
+    </kirby-modal-footer>
+  `,
+})
+export class StaticFooterEmbeddedComponent {}
+
+@Component({
+  template: `
+    <div>DynamicFooterEmbeddedComponent - Some test content</div>
+
+    <kirby-modal-footer *ngIf="showFooter" [class.enabled]="isEnabled">
+      <button kirby-button>Test</button>
+    </kirby-modal-footer>
+  `,
+})
+export class DynamicFooterEmbeddedComponent {
+  showFooter = false;
+  isEnabled = false;
+}
+
+@Component({
+  template: `
+    <h2>Embedded Input</h2>
+
+    <input />
+
+    <textarea></textarea>
+
+    <button>Test Button</button>
+  `,
+})
+export class InputEmbeddedComponent {}
+
+@Component({
+  template: ` <kirby-page-progress> </kirby-page-progress> `,
+})
+export class StaticPageProgressEmbeddedComponent {}
+
+@Component({
+  template: ` <kirby-page-progress *ngIf="showPageProgress"> </kirby-page-progress> `,
+})
+export class DynamicPageProgressEmbeddedComponent {
+  showPageProgress = false;
+}
+
+@Component({
+  template: ` <kirby-page-title>{{ _title }}</kirby-page-title> `,
+})
+export class TitleEmbeddedComponent {
+  _title: string;
+  constructor(@Inject(COMPONENT_PROPS) { title }: any) {
+    this._title = title;
+  }
+}

package/src/lib/components/modal/services/action-sheet.helper.spec.ts

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { ModalController as IonicModalController } from '@ionic/angular';
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
+
+import { TestHelper } from '../../../testing/test-helper';
+
+import { ActionSheetHelper } from './action-sheet.helper';
+import { Overlay } from './modal.interfaces';
+
+@Component({
+  template: ` <h2>Dummy Component</h2> `,
+})
+class EmbeddedDummyComponent {}
+
+describe('ActionSheetHelper', () => {
+  let spectator: SpectatorService<ActionSheetHelper>;
+  let actionSheetHelper: ActionSheetHelper;
+  const backdropOpacity = '0.4';
+
+  const createService = createServiceFactory({
+    service: ActionSheetHelper,
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  beforeEach(() => {
+    spectator = createService();
+    actionSheetHelper = spectator.service;
+  });
+
+  describe('showActionSheet', () => {
+    let overlay: Overlay;
+    let ionModal: HTMLIonModalElement;
+    let backdrop: HTMLIonBackdropElement;
+    let ionModalController: IonicModalController;
+
+    beforeEach(async () => {
+      ionModalController = spectator.inject(IonicModalController);
+      overlay = await actionSheetHelper.showActionSheet({ items: [{ text: 'Option 1', id: '1' }] });
+      ionModal = await ionModalController.getTop();
+      expect(ionModal).toBeTruthy();
+      backdrop = ionModal.querySelector('ion-backdrop');
+      expect(backdrop).toBeTruthy();
+    });
+
+    afterEach(async () => {
+      await overlay.dismiss();
+    });
+
+    it('action-sheet should have correct backdrop style', () => {
+      const modalShadow = ionModal.querySelector<HTMLElement>(':scope > .modal-shadow');
+      expect(modalShadow).toHaveComputedStyle({ display: 'none' });
+      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+    });
+
+    it('modal wrapper should not have max width or height', () => {
+      const modalWrapper = ionModal.querySelector(':scope > .modal-wrapper');
+      expect(modalWrapper).toHaveComputedStyle({ 'max-width': 'none', 'max-height': 'none' });
+    });
+
+    it('backdrop click should dismiss action-sheet', async () => {
+      let modalDidDismiss = false;
+      ionModal.onDidDismiss().then((_) => (modalDidDismiss = true));
+      backdrop.dispatchEvent(new MouseEvent('click'));
+      await new Promise<void>((resolve) => setTimeout(resolve, 15));
+      expect(modalDidDismiss).toBeTrue();
+    });
+
+    it('action-sheet should have correct backdrop style when opened on top of a modal', async () => {
+      await overlay.dismiss();
+      const ionModalElement = await ionModalController.create({
+        component: EmbeddedDummyComponent,
+      });
+      await ionModalElement.present();
+      const modalIonModal = await ionModalController.getTop();
+      expect(modalIonModal).toBeTruthy();
+
+      overlay = await actionSheetHelper.showActionSheet({ items: [] });
+
+      ionModal = await ionModalController.getTop();
+      expect(ionModal).toBeTruthy();
+      backdrop = ionModal.querySelector('ion-backdrop');
+      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+      await ionModalElement.dismiss();
+    });
+  });
+});

package/src/lib/components/modal/services/action-sheet.helper.ts

@@ -0,0 +1,47 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { Subscription } from 'rxjs';
+
+import { ActionSheetComponent } from '../action-sheet/action-sheet.component';
+import { ActionSheetConfig } from '../action-sheet/config/action-sheet-config';
+import { ActionSheetItem } from '../action-sheet/config/action-sheet-item';
+
+import { Overlay } from './modal.interfaces';
+
+@Injectable()
+export class ActionSheetHelper {
+  constructor(private ionicModalController: ModalController) {}
+
+  public async showActionSheet(config: ActionSheetConfig): Promise<Overlay> {
+    const cancel = new EventEmitter();
+    const itemSelect = new EventEmitter<ActionSheetItem>();
+
+    const ionModal = await this.ionicModalController.create({
+      component: ActionSheetComponent,
+      cssClass: ['kirby-overlay', 'kirby-action-sheet'],
+      componentProps: {
+        ...config,
+        cancel: cancel,
+        itemSelect: itemSelect,
+      },
+      backdropDismiss: true,
+    });
+
+    const cancelSubscription: Subscription = cancel.subscribe(() => ionModal.dismiss());
+    const itemSelectSubscription: Subscription = itemSelect.subscribe((item) =>
+      ionModal.dismiss(item)
+    );
+    const onDidDismiss = ionModal.onDidDismiss();
+    onDidDismiss.then((_) => {
+      cancelSubscription.unsubscribe();
+      itemSelectSubscription.unsubscribe();
+    });
+
+    await ionModal.present();
+    return {
+      dismiss: ionModal.dismiss.bind(ionModal),
+      onWillDismiss: ionModal.onWillDismiss(),
+      onDidDismiss: ionModal.onDidDismiss(),
+    };
+  }
+}

package/src/lib/components/modal/services/alert.helper.spec.ts

@@ -0,0 +1,89 @@
+import { Component } from '@angular/core';
+import { ModalController as IonicModalController } from '@ionic/angular';
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { TestHelper } from '../../../testing/test-helper';
+import { WindowRef } from '../../../types/window-ref';
+
+import { AlertHelper } from './alert.helper';
+import { Overlay } from './modal.interfaces';
+
+@Component({
+  template: ` <h2>Dummy Component</h2> `,
+})
+class EmbeddedDummyComponent {}
+
+describe('AlertHelper', () => {
+  let spectator: SpectatorService<AlertHelper>;
+  let alertHelper: AlertHelper;
+  const backdropOpacity = '0.4';
+
+  const createService = createServiceFactory({
+    service: AlertHelper,
+    imports: [TestHelper.ionicModuleForTest],
+    providers: [
+      {
+        provide: WindowRef,
+        useValue: <WindowRef>{ nativeWindow: window },
+      },
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createService();
+    alertHelper = spectator.service;
+  });
+
+  describe('showAlert', () => {
+    let overlay: Overlay;
+    let ionModal: HTMLIonModalElement;
+    let backdrop: HTMLIonBackdropElement;
+    let ionModalController: IonicModalController;
+
+    beforeEach(async () => {
+      ionModalController = spectator.inject(IonicModalController);
+      overlay = await alertHelper.showAlert({ title: 'Alert' });
+      ionModal = await ionModalController.getTop();
+      expect(ionModal).toBeTruthy();
+      backdrop = ionModal.querySelector('ion-backdrop');
+      expect(backdrop).toBeTruthy();
+    });
+
+    afterEach(async () => {
+      await overlay.dismiss();
+    });
+
+    it('alert should have correct backdrop style', () => {
+      const modalShadow = ionModal.querySelector<HTMLElement>(':scope > .modal-shadow');
+      expect(modalShadow).toHaveComputedStyle({ display: 'none' });
+      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+    });
+
+    it('modal wrapper should have correct max width', () => {
+      const modalWrapper = ionModal.querySelector(':scope > .modal-wrapper');
+      expect(modalWrapper).toHaveComputedStyle({
+        'max-width': DesignTokenHelper.compactModalMaxWidth(),
+      });
+    });
+
+    it('alert should have correct backdrop style when opened on top of a modal', async () => {
+      await overlay.dismiss();
+      const ionModalElement = await ionModalController.create({
+        component: EmbeddedDummyComponent,
+      });
+      await ionModalElement.present();
+      const modalIonModal = await ionModalController.getTop();
+      expect(modalIonModal).toBeTruthy();
+
+      overlay = await alertHelper.showAlert({ title: 'Alert on top of modal' });
+
+      ionModal = await ionModalController.getTop();
+      expect(ionModal).toBeTruthy();
+      backdrop = ionModal.querySelector('ion-backdrop');
+      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+      await ionModalElement.dismiss();
+    });
+  });
+});

package/src/lib/components/modal/services/alert.helper.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+import { AlertComponent } from '../alert/alert.component';
+import { AlertConfig } from '../alert/config/alert-config';
+
+import { Overlay } from './modal.interfaces';
+
+@Injectable()
+export class AlertHelper {
+  constructor(private ionicModalController: ModalController) {}
+
+  public async showAlert(config: AlertConfig): Promise<Overlay> {
+    const ionModal = await this.ionicModalController.create({
+      component: AlertComponent,
+      componentProps: this.getComponentProps(config),
+      cssClass: ['kirby-overlay', 'kirby-alert'],
+      mode: 'ios',
+      backdropDismiss: false,
+    });
+
+    await ionModal.present();
+    return {
+      dismiss: ionModal.dismiss.bind(ionModal),
+      onWillDismiss: ionModal.onWillDismiss(),
+      onDidDismiss: ionModal.onDidDismiss(),
+    };
+  }
+
+  private getComponentProps(config: AlertConfig) {
+    return {
+      ...config,
+      okBtn: this.getOkBtn(config),
+      cancelBtn: config.cancelBtn,
+      okBtnIsDestructive: this.getOkBtnIsDestructive(config),
+      iconName: config.icon && config.icon.name,
+      iconThemeColor: config.icon && config.icon.themeColor,
+    };
+  }
+
+  private getOkBtn(config: AlertConfig) {
+    let text: string;
+
+    if (config.okBtn) {
+      if (typeof config.okBtn === 'string') {
+        text = config.okBtn;
+      } else {
+        text = config.okBtn.text;
+      }
+    }
+    return text;
+  }
+
+  getOkBtnIsDestructive(config) {
+    return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
+  }
+}