Merge pull request #49 from razroo/ZETA-6886-add-property-to-html-codmod

ZETA-6886: add property to html tag
razroo · Oct 7, 2023 · 8bce877 · 8bce877
2 parents 00d0499 + 35b7d31
commit 8bce877
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 5 deletions.
diff --git a/src/rz/angular/add-property-to-html-tag/add-property-to-html-tag.spec.ts b/src/rz/angular/add-property-to-html-tag/add-property-to-html-tag.spec.ts
@@ -0,0 +1,35 @@
+import { morphCode } from "../../morph";
+import { EditHtmlFile } from "../interfaces/edit-html.interface";
+
+describe('addPropertyToHtmlTag', () => {
+  it('should add a property to an html tag', () => {
+    const fileToBeAddedTo = `<div>
+<devgen-eureka-seven-global-header> </devgen-eureka-seven-global-header>
+</div>`;
+    const codeBlock = {
+      '(sideNavToggle)': 'sideNavToggle()'
+    };
+
+    const insertIntoHtmlTag: EditHtmlFile = {
+       nodeType: 'addPropertyToHtmlTag',
+       codeBlock: codeBlock,
+       tagNameToInsertInto: 'devgen-eureka-seven-global-header'
+    };
+
+    const editInput = {
+      fileType: 'html',
+      fileToBeAddedTo: fileToBeAddedTo,
+      edits: [
+        insertIntoHtmlTag
+      ]
+    };
+
+    const result = morphCode(editInput);
+    const expected = `<div>
+  <devgen-eureka-seven-global-header (sideNavToggle)="sideNavToggle()">
+  </devgen-eureka-seven-global-header>
+</div>
+`;
+    expect(result).toEqual(expected);
+  });
+});
diff --git a/src/rz/angular/add-property-to-html-tag/add-property-to-html-tag.ts b/src/rz/angular/add-property-to-html-tag/add-property-to-html-tag.ts
@@ -0,0 +1,20 @@
+
+import visit from 'unist-util-visit';
+import { createUnifiedTree } from '../morph-angular-html';
+import { EditHtmlFile } from '../interfaces/edit-html.interface';
+
+// will insert code into an html block
+export function addPropertyToHtmlTag(editFile: EditHtmlFile, fileToBeModified: any): any {
+  visit(fileToBeModified, { type: 'element', tagName: editFile.tagNameToInsertInto }, (node: any, index) => {
+    // Check if the tag is the one you want to modify
+    if (node.tagName === editFile.tagNameToInsertInto) {
+      node.properties = {
+        ...(node.properties || {}),
+        ...editFile.codeBlock
+      };
+    }
+  });
+
+  return fileToBeModified;
+}
+
diff --git a/src/rz/angular/insert-into-html-tag/insert-into-html-tag.ts b/src/rz/angular/insert-into-html-tag/insert-into-html-tag.ts
@@ -3,7 +3,6 @@ import visit from 'unist-util-visit';
 import { createUnifiedTree } from '../morph-angular-html';
 import { EditHtmlFile } from '../interfaces/edit-html.interface';
 
-
 // will insert code into an html block
 export function insertIntoHtmlTag(editFile: EditHtmlFile, fileToBeModified: any): any {
   const codeToAddTree = createUnifiedTree(editFile.codeBlock as string);

diff --git a/src/rz/angular/interfaces/edit-html.interface.ts b/src/rz/angular/interfaces/edit-html.interface.ts
@@ -5,9 +5,9 @@ export interface EditHtmlInput {
 }
 
 export interface EditHtmlFile {
-  nodeType: 'editHtmlTag' | 'addSiblingHtml' | 'insertIntoHtmlTag' | 
-  'deleteHtmlElement' | 'prependHtml' | 'appendHtml';
-  codeBlock: string | any[];
+  nodeType: 'editHtmlTag' | 'addSiblingHtml' | 'insertIntoHtmlTag' | 'addPropertyToHtmlTag'
+  | 'deleteHtmlElement' | 'prependHtml' | 'appendHtml';
+  codeBlock: string | any[] | any;
   tagNameToInsert?: string;
   tagNameToInsertInto?: string;
   tagNameToModify?: string;

diff --git a/src/rz/angular/morph-angular-html.ts b/src/rz/angular/morph-angular-html.ts
@@ -10,6 +10,7 @@ import * as parserHtml from 'prettier/parser-html';
 import { deleteHtmlElement } from '../html/delete-html-element/delete-html-element';
 import { prependHtml } from '../html/prepend-html/prepend-html';
 import { appendHtml } from '../html/append-html/append-html';
+import { addPropertyToHtmlTag } from './add-property-to-html-tag/add-property-to-html-tag';
 
 function convertToAngularHtmlAndPrettify(tree: any) {
   const transformedTreeInHtml = toHtml(tree)
@@ -44,6 +45,9 @@ export function morphHtml(editHtmlInput: EditHtmlInput): string {
       case 'insertIntoHtmlTag':   
         fileToBeAddedToTree = insertIntoHtmlTag(edit, fileToBeAddedToTree);
         break;
+      case 'addPropertyToHtmlTag':   
+        fileToBeAddedToTree = addPropertyToHtmlTag(edit, fileToBeAddedToTree);
+        break;
     case 'deleteHtmlElement':   
         fileToBeAddedToTree = deleteHtmlElement(edit, fileToBeAddedToTree);
         break;

diff --git a/src/rz/params/html-params/html-params.ts b/src/rz/params/html-params/html-params.ts
@@ -59,6 +59,24 @@ export function getHtmlParameters(optionName: string): any {
               codeExample: 'mat-toolbar'
             }
           ]
+        };
+      case 'addPropertyToHtmlTag':
+        return {
+          nodeType: 'addPropertyToHtmlTag',
+          inputs: [
+            {
+              name: 'codeBlock',
+              inputType: 'code',
+              description: 'Code that will be inserted into html as property.',
+              codeExample: `{'(sideNavToggle)': 'sideNavToggle()'}`
+            },
+            {
+              name: 'tagNameToInsertInto',
+              inputType: 'text',
+              description: 'Tag name of html we will be inserting properties into.',
+              codeExample: 'global-header'
+            }
+          ]
         }
       case 'deleteHtmlElement':
         return {
@@ -114,6 +132,6 @@ export function getHtmlParameters(optionName: string): any {
   }
 
   export function getHtmlOptions(): string[] {
-    return ['editHtmlTag', 'addSiblingHtml', 'insertIntoHtmlTag', 'deleteHtmlElement', 'prependHtml', 
+    return ['editHtmlTag', 'addSiblingHtml', 'insertIntoHtmlTag', 'addPropertyToHtmlTag', 'deleteHtmlElement', 'prependHtml', 
     'appendHtml'];
   }