refactor(migrations): improve button and card action migrations (#14215)

Author: simeonoff

projects/igniteui-angular/migrations/migration-collection.json

@@ -176,6 +176,11 @@
             "version": "17.2.0",
             "description": "Updates Ignite UI for Angular from v17.1.x to v17.2.0",
             "factory": "./update-17_2_0"
+        },
+        "migration-36": {
+            "version": "17.2.2",
+            "description": "Updates Ignite UI for Angular from v17.2.0 to v17.2.2",
+            "factory": "./update-17_2_2"
         }
     }
 }

projects/igniteui-angular/migrations/update-17_2_0/changes/inputs.json

@@ -18,38 +18,6 @@
                 "type": "component"
             }
         },
-        {
-            "name": "color",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
-        {
-            "name": "background",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
-        {
-            "name": "igxButtonColor",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
-        {
-            "name": "igxButtonBackground",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
         {
             "name": "type",
             "remove": true,
@@ -58,14 +26,6 @@
                 "type": "component"
             }
         },
-        {
-            "name": "reverse",
-            "remove": true,
-            "owner": {
-                "selector": "igx-card",
-                "type": "component"
-            }
-        },
         {
             "name": "leftButtonColor",
             "remove": true,

projects/igniteui-angular/migrations/update-17_2_2/changes/inputs.json

@@ -0,0 +1,29 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "igxButtonColor",
+            "replaceWith": "style.--foreground",
+            "owner": {
+                "selector": "igxButton",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "igxButtonBackground",
+            "replaceWith": "style.--background",
+            "owner": {
+                "selector": "igxButton",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "reverse",
+            "remove": true,
+            "owner": {
+                "selector": "igx-card-actions",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-17_2_2/index.spec.ts

@@ -0,0 +1,84 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '17.2.2';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    const configJson = {
+        projects: {
+            testProj: {
+                root: '/',
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-36';
+
+    it('should replace button property `igxButtonColor` with `style.--foreground`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <button igxButton [igxButtonColor]="red"></button>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <button igxButton [style.--foreground]="red"></button>
+        `
+        );
+    });
+
+    it('should replace button property `igxButtonBackground` with `style.--background`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <button igxButton [igxButtonBackground]="red"></button>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <button igxButton [style.--background]="red"></button>
+        `
+        );
+    });
+
+    it('should remove igx-card-actions property `reverse`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-card>
+            <igx-card-actions [reverse]="true"></igx-card-actions>
+        </igx-card>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-card>
+            <igx-card-actions></igx-card-actions>
+        </igx-card>
+        `
+        );
+    });
+});

projects/igniteui-angular/migrations/update-17_2_2/index.ts

@@ -0,0 +1,12 @@
+import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
+import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
+
+const version = "17.2.2";
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(
+        `Applying migration for Ignite UI for Angular to version ${version}`,
+    );
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};