feat(angular/modal-service): add property to pass data into context (#…

…206)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

.github/workflows/build.yml

@@ -74,13 +74,14 @@ jobs:
 
   test:
     runs-on: ubuntu-latest
-    needs: [install]
+    needs: [build]
     container:
       image: node:18.12.1
       env:
         DEBIAN_FRONTEND: noninteractive
     steps:
       - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/build-cache
       - uses: ./.github/workflows/actions/test
 
   lint:

package.json

@@ -35,7 +35,7 @@
     "sonarqube": "sonar-scanner",
     "visual-regression-ci": "npx playwright install chromium && yarn workspace @siemens/ix run test:e2e",
     "visual-regression": "docker run --rm --network host -v $(pwd):/work/ -w /work mcr.microsoft.com/playwright:v1.24.0-focal /bin/bash -c \"CI=TRUE npm run visual-regression-ci\"",
-    "test": "yarn workspace @siemens/ix run test",
+    "test": "turbo run test",
     "prepare": "husky install"
   },
   "dependencies": {

packages/aggrid/package.json

@@ -26,8 +26,6 @@
   "scripts": {
     "build": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate"
   },
   "dependencies": {

packages/angular-test-app/package.json

@@ -5,8 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build --preserve-symlinks -c production",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "watch": "ng build --watch --configuration development"
   },
   "private": true,
   "dependencies": {

packages/angular-test-app/src/preview-examples/modal.ts

@@ -13,14 +13,7 @@ import { ModalService } from '@siemens/ix-angular';
 @Component({
   selector: 'app-modal',
   template: `
-    <div>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet.
-    </div>
-    <ix-button (click)="test()">Show Modal</ix-button>
+    <ix-button (click)="test()">Show modal</ix-button>
 
     <ng-template #customModal let-modal>
       <div>
@@ -34,7 +27,7 @@ import { ModalService } from '@siemens/ix-angular';
             (click)="modal.dismiss('dismiss')"
           ></ix-icon-button>
         </div>
-        <div class="modal-body">Message text lorem ipsum</div>
+        <div class="modal-body">Message text lorem ipsum: {{ modal.data }}</div>
         <div class="modal-footer">
           <ix-button
             outline
@@ -61,6 +54,7 @@ export class Modal {
     const instance = await this.modalService.open({
       content: this.customModalRef,
       title: '',
+      data: 'Some data',
     });
 
     instance.onClose.on((a) => {

packages/angular/jest.config.js

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: 'jest-preset-angular',
+  roots: ['<rootDir>/src'],
+  testMatch: [
+    '**/__tests__/**/*.+(ts|tsx|js)',
+    '**/?(*.)+(spec|test).+(ts|tsx|js)',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  moduleNameMapper: {
+    '^@fs/(.*)$': '<rootDir>/src/lib/$1',
+  },
+};

packages/angular/package.json

@@ -11,7 +11,8 @@
   "description": "Siemens iX for Angular",
   "scripts": {
     "build": "ng-packagr -c tsconfig.json",
-    "fix-packagejson": ""
+    "fix-packagejson": "",
+    "test": "jest"
   },
   "license": "MIT",
   "dependencies": {
@@ -26,9 +27,14 @@
     "@angular/compiler": "v13-lts",
     "@angular/compiler-cli": "v13-lts",
     "@angular/core": "v13-lts",
+    "@jest/globals": "^29.3.1",
     "@siemens/ix": "~1.1.1",
+    "@types/jest": "^29.2.3",
     "fs-extra": "^10.1.0",
+    "jest": "^29.3.1",
+    "jest-preset-angular": "^12.2.3",
     "ng-packagr": "^14.2.0",
+    "ts-jest": "^29.0.3",
     "typescript": "4.6.4"
   }
 }

packages/angular/setup-jest.ts

@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import 'jest-preset-angular/setup-jest';

packages/angular/src/modal/modal.config.ts

@@ -8,7 +8,9 @@
  */
 
 import { TemplateRef } from '@angular/core';
+import { ModalConfig as IxModalConfig } from '@siemens/ix';
 
-export type ModalConfig = {
+export type ModalConfig<TDATA = any> = Omit<IxModalConfig, 'content'> & {
   content: TemplateRef<any>;
+  data?: TDATA;
 };

packages/angular/src/modal/modal.service.spec.ts

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@jest/globals';
+import { ModalService } from './modal.service';
+
+jest.mock('@siemens/ix', () => ({
+  modal: jest.fn(() =>
+    Promise.resolve({
+      onClose: {
+        once: jest.fn(),
+      },
+      onDismiss: {
+        once: jest.fn(),
+      },
+    })
+  ),
+}));
+
+test('test', () => {
+  const createEmbeddedViewMock = jest.fn((_: { $implicit: any }) => ({
+    rootNodes: [{}],
+    detectChanges: jest.fn(),
+  }));
+  const modalService = new ModalService();
+  modalService.open({
+    content: {
+      createEmbeddedView: createEmbeddedViewMock,
+    } as any,
+    title: '',
+    data: {
+      sample: 'test',
+    },
+  });
+
+  expect(createEmbeddedViewMock).toHaveBeenCalledWith({
+    $implicit: {
+      close: expect.any(Function),
+      data: { sample: 'test' },
+      dismiss: expect.any(Function),
+    },
+  });
+});

packages/angular/src/modal/modal.service.ts

@@ -8,12 +8,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import {
-  closeModal,
-  dismissModal,
-  modal,
-  ModalConfig as IxModalConfig,
-} from '@siemens/ix';
+import { closeModal, dismissModal, modal } from '@siemens/ix';
 import { ModalConfig } from './modal.config';
 
 @Injectable({
@@ -22,13 +17,15 @@ import { ModalConfig } from './modal.config';
 export class ModalService {
   constructor() {}
 
-  async open(config: Omit<IxModalConfig, 'content'> & ModalConfig) {
+  async open<TDATA = any>(config: ModalConfig) {
     const context: {
       close: ((result: any) => void) | null;
       dismiss: ((result?: any) => void) | null;
+      data?: TDATA;
     } = {
       close: null,
       dismiss: null,
+      data: config.data,
     };
     const embeddedView = config.content.createEmbeddedView({
       $implicit: context,

packages/angular/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "module": "CommonJs",
+    "types": ["jest"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

packages/documentation/docs/controls/modal.md

@@ -7,7 +7,8 @@ import SourceAngularModal from './../auto-generated/previews/angular/modal.md'
 
 # Modal
 
-## Usage
+How to open a modal depends on the framework in use. Note that you will not instantiate `ix-modal` on your own.
+Select the appropriate tab below for the respective usage information.
 
 <Preview name="modal" height="35rem">
   <TabItem value="javascript">
@@ -17,6 +18,11 @@ import SourceAngularModal from './../auto-generated/previews/angular/modal.md'
     <SourceReactModal />
   </TabItem>
   <TabItem value="angular">
-    <SourceAngularModal />
+
+`@siemens/ix-angular` provides an injectable service that allows you to open modal dialogs based on a `ng-template` reference.
+If you want to pass arbitrary data to the modal use the `data`-property. In order to access that inside the modal template use `let-modal` as seen in this example:
+
+  <SourceAngularModal />
+
   </TabItem>
 </Preview>

packages/html-test-app/src/preview-examples/modal.html

@@ -7,18 +7,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Buttons example</title>
+    <title>Modal example</title>
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <div>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet.
-    </div>
-    <ix-button>Show Modal</ix-button>
+    <ix-button>Show modal</ix-button>
 
     <template id="custom-modal">
       <div>

turbo.json

@@ -12,6 +12,9 @@
       ],
       "outputMode": "new-only"
     },
+    "test": {
+      "cache": false
+    },
     "start": {
       "cache": false
     },