test(schematics): update tests for v49 as per the new data model

Author: mistrykaran91

projects/element-ng/schematics/migrations/data/migration-test-data.ts

@@ -8,7 +8,9 @@ import {
   ComponentNamesInstruction,
   ElementMigrationData,
   ElementSelectorInstruction,
+  InputNamesInstruction,
   OutputNamesInstruction,
+  PatternReplacementInstruction,
   SymbolRemovalInstruction
 } from './index.js';
 
@@ -86,6 +88,22 @@ const COMPONENT_NAMES_MIGRATION: ComponentNamesInstruction[] = [
   {
     module: /@(siemens|simpl)\/dashboards-ng/,
     symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
+  },
+  {
+    module: /@(siemens|simpl)\/element-ng(\/toast-notification)?/,
+    symbolRenamings: [{ replace: 'ToastStateName', replaceWith: 'StatusType' }],
+    toModule: '@siemens/element-ng/common'
+  },
+  {
+    module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
+    symbolRenamings: [
+      { replace: 'SiUnauthorizedPageComponent', replaceWith: 'SiInfoPageComponent' }
+    ],
+    toModule: '@siemens/element-ng/info-page'
+  },
+  {
+    module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
+    symbolRenamings: [{ replace: 'Criterion', replaceWith: 'CriterionValue' }]
   }
 ];
 
@@ -103,7 +121,16 @@ const ELEMENT_SELECTORS_MIGRATION: ElementSelectorInstruction[] = [
   // next to current
   { replace: 'si-icon-next', replaceWith: 'si-icon' },
   { replace: 'si-tabset-next', replaceWith: 'si-tabset' },
-  { replace: 'si-tab-next', replaceWith: 'si-tab' }
+  { replace: 'si-tab-next', replaceWith: 'si-tab' },
+  // v48 to v49
+  {
+    replace: 'si-unauthorized-page',
+    replaceWith: 'si-info-page',
+    defaultAttributes: [
+      { name: 'icon', value: 'element-warning-filled' },
+      { name: 'iconColor', value: 'status-warning' }
+    ]
+  }
 ];
 
 const SYMBOL_REMOVALS_MIGRATION: SymbolRemovalInstruction[] = [
@@ -169,6 +196,93 @@ const OUTPUT_NAMES_MIGRATION: OutputNamesInstruction[] = [
   }
 ];
 
+const INPUT_NAMES_MIGRATION: InputNamesInstruction[] = [
+  // v48 to v49
+  {
+    module: /@(siemens|simpl)\/element-ng/,
+    elementSelector: 'si-filtered-search',
+    apiMappings: [{ replace: 'readonly', replaceWith: 'disabled' }]
+  },
+  {
+    module: /@(siemens|simpl)\/charts-ng/,
+    elementSelector: 'si-chart-gauge',
+    apiMappings: [
+      { replace: 'numberOfDecimals', replaceWith: ['minNumberOfDecimals', 'maxNumberOfDecimals'] }
+    ]
+  },
+  {
+    module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
+    elementSelector: 'si-unauthorized-page',
+    apiMappings: [
+      { replace: 'heading', replaceWith: 'titleText' },
+      { replace: 'subHeading', replaceWith: 'copyText' },
+      { replace: 'description', replaceWith: 'instructions' }
+    ]
+  }
+];
+
+const PATTERN_REPLACEMENTS_MIGRATION: PatternReplacementInstruction[] = [
+  {
+    module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
+    requiresSymbols: ['Criterion', 'CriterionValue', 'CriterionDefinition'],
+    patterns: [
+      // Union types: CriterionValue | Criterion → CriterionValue
+      { pattern: /\bCriterionValue\s*\|\s*Criterion\b/g, replacement: 'CriterionValue' },
+      { pattern: /\bCriterion\s*\|\s*CriterionValue\b/g, replacement: 'CriterionValue' },
+      // Array union types: Criterion[] | CriterionDefinition[] → CriterionDefinition[]
+      {
+        pattern: /\bCriterion\[\]\s*\|\s*CriterionDefinition\[\]/g,
+        replacement: 'CriterionDefinition[]'
+      },
+      {
+        pattern: /\bCriterionDefinition\[\]\s*\|\s*Criterion\[\]/g,
+        replacement: 'CriterionDefinition[]'
+      },
+      // Intersection types: CriterionValue & Criterion → CriterionValue
+      { pattern: /\bCriterionValue\s*&\s*Criterion\b/g, replacement: 'CriterionValue' },
+      { pattern: /\bCriterion\s*&\s*CriterionValue\b/g, replacement: 'CriterionValue' },
+      // Array intersection types: Criterion[] & CriterionDefinition[] → CriterionDefinition[]
+      {
+        pattern: /\bCriterion\[\]\s*&\s*CriterionDefinition\[\]/g,
+        replacement: 'CriterionDefinition[]'
+      },
+      {
+        pattern: /\bCriterionDefinition\[\]\s*&\s*Criterion\[\]/g,
+        replacement: 'CriterionDefinition[]'
+      }
+    ]
+  },
+  {
+    module: /@(siemens|simpl)\/element-ng(\/resize-observer)?/,
+    requiresSymbols: ['SiResponsiveContainerDirective'],
+    patterns: [
+      { pattern: /\.isXs\b/g, replacement: '.xs()' },
+      { pattern: /\.isSm\b/g, replacement: '.sm()' },
+      { pattern: /\.isMd\b/g, replacement: '.md()' },
+      { pattern: /\.isLg\b/g, replacement: '.lg()' },
+      { pattern: /\.isXl\b/g, replacement: '.xl()' },
+      { pattern: /\.isXxl\b/g, replacement: '.xxl()' }
+    ]
+  },
+  // v48 to v49 - Modal initialState → inputValues
+  // Only matches initialState within .show() calls
+  {
+    module: /@(siemens|simpl)\/element-ng(\/modal)?/,
+    requiresSymbols: ['SiModalService'],
+    patterns: [
+      // Matches: .show(Component, { initialState: ... })
+      // Pattern breakdown:
+      //   $1 = '.show(Component, { ' up to the word boundary before initialState
+      //   $2 = 'initialState' (the property name we're replacing)
+      //   $3 = ':' (the colon after the property)
+      {
+        pattern: /(\bshow\([^)]*,\s*\{[^}]*\b)(initialState)(\s*:)/gs,
+        replacement: '$1inputValues$3'
+      }
+    ]
+  }
+];
+
 /**
  * Stable migration data for testing.
  * This data is frozen and used for testing to ensure test stability.
@@ -179,5 +293,7 @@ export const getElementMigrationTestData = (): ElementMigrationData => ({
   componentNameChanges: COMPONENT_NAMES_MIGRATION,
   elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
   symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
-  outputNameChanges: OUTPUT_NAMES_MIGRATION
+  outputNameChanges: OUTPUT_NAMES_MIGRATION,
+  inputNameChanges: INPUT_NAMES_MIGRATION,
+  patternReplacementsChanges: PATTERN_REPLACEMENTS_MIGRATION
 });

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

@@ -146,4 +146,32 @@ describe('to legacy migration', () => {
   it('should remove the deprecated api from module based accordion', async () => {
     await checkTemplateMigration(['module-based.accordion-inline-template.ts']);
   });
+
+  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 unauthorized page component in inline templates', async () => {
+    await checkTemplateMigration(['unauthorized-page-inline.ts']);
+  });
+
+  it('should migrate modal initialState to inputValues', async () => {
+    await checkTemplateMigration(['modal-initial-state.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/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.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.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' }
+      }
+    });
+  }
+}