chore: fix migration self-closing tags (#7005)

taiga-family · Mar 15, 2024 · e46eb74 · e46eb74
1 parent 2b8156b
commit e46eb74
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-badge.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-badge.ts
@@ -97,15 +97,18 @@ function migrateBadgeValue({
     templateOffset: number;
 }): void {
     const attrValue = valueAttr?.value;
-    const insertTo = sourceCodeLocation?.endTag.startOffset;
+    const insertTo = sourceCodeLocation?.startTag.endOffset;
+    const selfClosing = !sourceCodeLocation?.endTag;
 
     if (!attrValue || !insertTo) {
         return;
     }
 
     recorder.insertRight(
         insertTo + templateOffset,
-        valueAttr.name === 'value' ? attrValue : `{{ ${attrValue} }}`,
+        valueAttr.name === 'value'
+            ? attrValue
+            : `{{ ${attrValue} }}${selfClosing ? '</tui-badge>' : ''}`,
     );
 
     const attrOffset = sourceCodeLocation?.attrs?.[valueAttr.name];
@@ -115,6 +118,10 @@ function migrateBadgeValue({
 
         recorder.remove(templateOffset + startOffset - 1, endOffset - startOffset + 1);
     }
+
+    if (selfClosing) {
+        recorder.remove(sourceCodeLocation.startTag.endOffset - 2, 1);
+    }
 }
 
 function addTodo(

diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/toggles/common.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/toggles/common.ts
@@ -51,6 +51,11 @@ export function removeClosingTag(
     templateOffset: number,
 ): void {
     const {endTag} = sourceCodeLocation;
+
+    if (!endTag) {
+        return;
+    }
+
     const {startOffset, endOffset} = endTag;
 
     const from = templateOffset + startOffset;
@@ -60,9 +65,13 @@ export function removeClosingTag(
 }
 
 export function closeStartTag(
-    {startTag}: ElementLocation,
+    {startTag, endTag}: ElementLocation,
     recorder: UpdateRecorder,
     templateOffset: number,
 ): void {
+    if (!endTag) {
+        return;
+    }
+
     recorder.insertRight(templateOffset + startTag.endOffset - 1, '/');
 }
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-badge.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-badge.spec.ts
@@ -36,6 +36,11 @@ export class TestComponent {
 }`;
 
 const TEMPLATE_BEFORE = `
+<tui-badge
+    status="primary"
+    [value]="value"
+    [hoverable]="true"
+/>
 <tui-badge
     status="primary"
     [value]="value"
@@ -60,12 +65,17 @@ const TEMPLATE_AFTER = `
    ${''}
     ${''}
 >{{ value }}</tui-badge>
+<tui-badge
+    appearance="primary"
+   ${''}
+    ${''}
+>{{ value }}</tui-badge>
 <tui-badge
     appearance="success"
    ${''}
-iconLeft="tuiIconHelpCircle">
+iconLeft="tuiIconHelpCircle">Taiga
     ${''}
-Taiga</tui-badge>
+</tui-badge>
 <!-- Taiga migration TODO: use "<tui-icon>" with "tuiBadge" directive for icon-only badges instead -->
 <tui-badge
     appearance="success"

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-toggle.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-toggle.spec.ts
@@ -45,6 +45,10 @@ const TEMPLATE_BEFORE = `
     [showIcons]="true"
     [singleColor]="true"
 ></tui-toggle>
+<tui-toggle
+    formControlName="test"
+    class="toggle"
+/>
 `;
 
 const TEMPLATE_AFTER = `
@@ -62,6 +66,12 @@ const TEMPLATE_AFTER = `
     [showIcons]="true"
     ${''}
 />
+<input
+    tuiToggle
+    type="checkbox"
+    formControlName="test"
+    class="toggle"
+/>
 `;
 
 describe('ng-update', () => {