test(schematics): add v49 migration tests

Author: mistrykaran91

projects/element-ng/schematics/migrations/element-migration/element-migration.spec.ts

@@ -131,3 +131,91 @@ describe('to legacy migration', () => {
     await checkTemplateMigration(['module-based.accordion-inline-template.ts']);
   });
 });
+
+describe('v48 to v49 migration', () => {
+  let runner: SchematicTestRunner;
+  let appTree: Tree;
+  const name = 'migrate-v48-to-v49';
+  const migrationCollectionPath = buildRelativeFromFile('../../migration.json');
+
+  beforeEach(async () => {
+    runner = new SchematicTestRunner(name, migrationCollectionPath);
+    appTree = await createTestApp(runner, { style: 'scss' });
+  });
+
+  const checkTemplateMigration = async (
+    fileNames: string[],
+    basePath = `/projects/app/src/components/test/`
+  ): Promise<void> => {
+    addTestFiles(
+      appTree,
+      Object.fromEntries(
+        fileNames.map(fileName => [
+          path.join(basePath, fileName),
+          readFileSync(buildRelativeFromFile(path.join('files', fileName)), 'utf8')
+        ])
+      )
+    );
+
+    addTestFiles(appTree, {
+      '/package.json': `{
+         "dependencies": {
+          "@siemens/element-ng": "48.0.0",
+          "@siemens/maps-ng": "48.0.0",
+          "@siemens/dashboards-ng": "48.0.0",
+          "@siemens/charts-ng": "48.0.0"
+        }
+        }`
+    });
+
+    const tree = await runner.runSchematic('migration-v49', { path: 'projects/app/src' }, appTree);
+    for (const fileName of fileNames) {
+      const expected = readFileSync(
+        buildRelativeFromFile(path.join('files', 'expected.' + fileName)),
+        'utf8'
+      );
+      const actual = tree.readContent(path.join(basePath, fileName));
+      expect(actual).toEqual(expected);
+    }
+  };
+
+  it('should migrate ToastStateName to StatusType', async () => {
+    await checkTemplateMigration(['toast-state-name.ts']);
+  });
+
+  it('should migrate filtered search readonly attribute in inline templates', async () => {
+    await checkTemplateMigration(['filtered-search-inline-readonly.ts']);
+  });
+
+  it('should migrate Criterion types to CriterionValue and CriterionDefinition', async () => {
+    await checkTemplateMigration(['filtered-search-criterion-types.ts']);
+  });
+
+  it('should migrate select dropdownClose output in inline templates', async () => {
+    await checkTemplateMigration(['select-dropdown-inline.ts']);
+  });
+
+  it('should migrate unauthorized page component in inline templates', async () => {
+    await checkTemplateMigration(['unauthorized-page-inline.ts']);
+  });
+
+  it('should migrate CONFIG_TOKEN to SI_DASHBOARD_CONFIGURATION in inline usage', async () => {
+    await checkTemplateMigration(['dashboard-config-inline.ts']);
+  });
+
+  it('should migrate modal initialState to inputValues', async () => {
+    await checkTemplateMigration(['modal-initial-state.ts']);
+  });
+
+  it('should remove onResize method calls and output from si-map', async () => {
+    await checkTemplateMigration(['map-onresize.ts']);
+  });
+
+  it('should split numberOfDecimals into minNumberOfDecimals and maxNumberOfDecimals', async () => {
+    await checkTemplateMigration(['chart-gauge-decimals.ts']);
+  });
+
+  it('should migrate resize observer properties to signal calls', async () => {
+    await checkTemplateMigration(['resize-observer.ts']);
+  });
+});

projects/element-ng/schematics/migrations/element-migration/files/chart-gauge-decimals.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { SiChartGaugeComponent } from '@siemens/charts-ng/gauge';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  template: `
+    <si-chart-gauge
+      [value]="75"
+      [numberOfDecimals]="2"
+      [min]="0"
+      [max]="100"
+    ></si-chart-gauge>
+
+    <si-chart-gauge [numberOfDecimals]="0"></si-chart-gauge>
+
+    <si-chart-gauge
+      [value]="gaugeValue"
+      [numberOfDecimals]="decimals"
+    ></si-chart-gauge>
+  `,
+  imports: [SiChartGaugeComponent]
+})
+export class DashboardComponent {
+  gaugeValue = 85;
+  decimals = 1;
+}

projects/element-ng/schematics/migrations/element-migration/files/dashboard-config-inline.ts

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { CONFIG_TOKEN } from '@siemens/dashboards-ng';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  template: `<div>Dashboard</div>`
+})
+export class DashboardComponent {
+  private config = inject(CONFIG_TOKEN);
+
+  loadConfig() {
+    const token = CONFIG_TOKEN;
+    return { provide: CONFIG_TOKEN, useValue: this.config };
+  }
+}
+
+// Inline provider
+export const DASHBOARD_PROVIDERS = [
+  { provide: CONFIG_TOKEN, useValue: { mode: 'production' } }
+];

projects/element-ng/schematics/migrations/element-migration/files/expected.chart-gauge-decimals.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { SiChartGaugeComponent } from '@siemens/charts-ng/gauge';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  template: `
+    <si-chart-gauge
+      [value]="75"
+      [minNumberOfDecimals]="2" [maxNumberOfDecimals]="2"
+      [min]="0"
+      [max]="100"
+    ></si-chart-gauge>
+
+    <si-chart-gauge [minNumberOfDecimals]="0" [maxNumberOfDecimals]="0"></si-chart-gauge>
+
+    <si-chart-gauge
+      [value]="gaugeValue"
+      [minNumberOfDecimals]="decimals" [maxNumberOfDecimals]="decimals"
+    ></si-chart-gauge>
+  `,
+  imports: [SiChartGaugeComponent]
+})
+export class DashboardComponent {
+  gaugeValue = 85;
+  decimals = 1;
+}

projects/element-ng/schematics/migrations/element-migration/files/expected.dashboard-config-inline.ts

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { SI_DASHBOARD_CONFIGURATION } from '@siemens/dashboards-ng';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  template: `<div>Dashboard</div>`
+})
+export class DashboardComponent {
+  private config = inject(SI_DASHBOARD_CONFIGURATION);
+
+  loadConfig() {
+    const token = SI_DASHBOARD_CONFIGURATION;
+    return { provide: SI_DASHBOARD_CONFIGURATION, useValue: this.config };
+  }
+}
+
+// Inline provider
+export const DASHBOARD_PROVIDERS = [
+  { provide: SI_DASHBOARD_CONFIGURATION, useValue: { mode: 'production' } }
+];

projects/element-ng/schematics/migrations/element-migration/files/expected.filtered-search-criterion-types.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { Component, input } from '@angular/core';
+import { Observable } from 'rxjs';
+import {
+  CriterionValue,
+  CriterionDefinition,
+  SearchCriteria,
+  SiFilteredSearchModule
+} from '@siemens/element-ng/filtered-search';
+
+@Component({
+  selector: 'app-criterion-types-test',
+  template: `
+    <si-filtered-search
+      [criteria]="criteria()"
+      [lazyCriterionProvider]="lazyCriterionProvider()"
+      (search)="onSearch($event)">
+    </si-filtered-search>
+  `,
+  imports: [SiFilteredSearchModule],
+  standalone: true
+})
+export class CriterionTypesTestComponent {
+  // Test input with CriterionDefinition[]
+  criteria = input<CriterionDefinition[]>([]);
+
+  // Test input with function returning Observable<CriterionDefinition[]>
+  lazyCriterionProvider = input<
+    (typed: string, searchCriteria?: SearchCriteria) => Observable<CriterionDefinition[]>
+  >();
+
+  // Test method parameter and variable declaration
+  onSearch(searchCriteria: SearchCriteria): void {
+    const criterionValues: CriterionValue[] = searchCriteria.criteria;
+    console.log(criterionValues);
+  }
+
+  // Test method return type
+  getCriteria(): CriterionDefinition[] {
+    return [];
+  }
+
+  // Test with arrays
+  processCriteria(items: CriterionValue[]): void {
+    const filtered: CriterionValue[] = items.filter(c => c.id !== '');
+  }
+
+  // Test in generic type
+  handleData(data: Array<CriterionValue>): CriterionValue[] {
+    return data;
+  }
+}

projects/element-ng/schematics/migrations/element-migration/files/expected.filtered-search-inline-readonly.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { Component } from '@angular/core';
+import { SiFilteredSearchModule } from '@siemens/element-ng/filtered-search';
+
+@Component({
+  selector: 'app-inline-readonly-test',
+  template: `
+    <div>
+      <si-filtered-search [disabled]="true"></si-filtered-search>
+      <si-filtered-search [disabled]="editMode === false" [criteria]="criteria"></si-filtered-search>
+      <si-filtered-search
+        [disabled]="isDisabled"
+        [placeholder]="'Enter search criteria'"
+        (search)="onSearch($event)">
+      </si-filtered-search>
+    </div>
+  `,
+  imports: [SiFilteredSearchModule],
+  standalone: true
+})
+export class InlineReadonlyTestComponent {
+  editMode = false;
+  isDisabled = true;
+  criteria = [];
+
+  onSearch(event: any): void {
+    console.log(event);
+  }
+}

projects/element-ng/schematics/migrations/element-migration/files/expected.map-onresize.ts

@@ -0,0 +1,30 @@
+import { Component, ViewChild } from '@angular/core';
+import { SiMapComponent } from '@siemens/maps-ng';
+
+@Component({
+  selector: 'app-map',
+  standalone: true,
+  template: `
+    <si-map
+      #map
+      [center]="center"
+      [zoom]="12"
+      
+    >
+    </si-map>
+    <button (click)="triggerResize()">Resize</button>
+  `
+})
+export class MapComponent {
+  @ViewChild('map') mapComponent!: SiMapComponent;
+  center = { lat: 40.7128, lng: -74.0060 };
+
+  triggerResize() {
+    // This method call should be removed as it has no effect
+    this.mapComponent.onResize();
+  }
+
+  handleResize() {
+    console.log('Map resized');
+  }
+}

projects/element-ng/schematics/migrations/element-migration/files/expected.modal-initial-state.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { SiModalService } from '@siemens/element-ng/modal';
+import { MyModalComponent } from './my-modal.component';
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  template: `<button (click)="openModal()">Open</button>`
+})
+export class TestComponent {
+  constructor(private modalService: SiModalService) {}
+
+  openModal() {
+    this.modalService.show(MyModalComponent, {
+      inputValues: { title: 'Hello', data: { id: 1 } }
+    });
+  }
+
+  openModalWithOptions() {
+    const modalRef = this.modalService.show(MyModalComponent, {
+      inputValues: {
+        title: 'Edit Item',
+        item: { name: 'Test', value: 100 }
+      },
+      keyboard: false
+    });
+    return modalRef;
+  }
+
+  openModalInline() {
+    return this.modalService.show(MyModalComponent, { inputValues: { mode: 'create' } });
+  }
+
+  openModalMultiline() {
+    this.modalService.show(MyModalComponent, {
+      inputValues: {
+        user: { name: 'John', email: 'john@example.com' },
+        permissions: ['read', 'write'],
+        config: { theme: 'dark' }
+      }
+    });
+  }
+}

projects/element-ng/schematics/migrations/element-migration/files/expected.resize-observer.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
+
+@Component({
+  selector: 'app-test',
+  template: '<div></div>'
+})
+export class TestComponent {
+  checkSize(directive: SiResponsiveContainerDirective): void {
+    // Property access patterns
+    if (directive.xs()) {
+      console.log('Extra small');
+    }
+
+    const small = directive.sm();
+    const medium = directive.md();
+
+    // In expressions
+    const result = directive.lg() ? 'large' : 'not large';
+
+    // Chained access
+    const xl = this.getDirective().xl();
+
+    // Multiple on same line
+    if (directive.xs() || directive.sm() || directive.md()) {
+      console.log('Small to medium');
+    }
+
+    // In template literal
+    const msg = `Size is ${directive.xxl() ? 'XXL' : 'smaller'}`;
+
+    // In logical expressions
+    const responsive = directive.sm() && directive.md();
+  }
+
+  getDirective(): SiResponsiveContainerDirective {
+    return null as any;
+  }
+}