feat(rules): add ion-item-options-attribute-values-renamed rule

ionic-team · Jul 6, 2018 · d3306e8 · d3306e8
1 parent fe94a1f
commit d3306e8
Show file tree

Hide file tree

Showing 3 changed files with 234 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -318,13 +318,13 @@ We are looking for contributors to help build these rules out! See [`CONTRIBUTIN
     <th>
       <a href="https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#item-options">Item Options</a>
     </th>
-    <td></td>
-    <td>:white_large_square:</td>
+    <td>:wrench:</td>
+    <td>:white_check_mark:</td>
     <td>
-      <code>ion-item-options-attributes-renamed</code>
+      <code>ion-item-options-attribute-values-renamed</code>
     </td>
     <td>
-      <a href="https://github.com/mhartington">@mhartington</a>
+      <a href="https://github.com/dwieeb">@dwieeb</a>
     </td>
   </tr>
   <tr>

diff --git a/src/ionItemOptionsAttributeValuesRenamedRule.ts b/src/ionItemOptionsAttributeValuesRenamedRule.ts
@@ -0,0 +1,31 @@
+import { NgWalker } from 'codelyzer/angular/ngWalker';
+import * as Lint from 'tslint';
+import * as ts from 'typescript';
+
+import { createAttributeValuesRenamedTemplateVisitorClass } from './helpers/attributeValuesRenamed';
+
+export const ruleName = 'ion-item-options-attribute-values-renamed';
+
+const replacementMap = new Map([['side', new Map([['left', 'start'], ['right', 'end']])]]);
+
+const TemplateVisitor = createAttributeValuesRenamedTemplateVisitorClass(['ion-item-options'], replacementMap);
+
+export class Rule extends Lint.Rules.AbstractRule {
+  public static metadata: Lint.IRuleMetadata = {
+    ruleName: ruleName,
+    type: 'functionality',
+    description: `Attribute values of ion-item-options have been renamed.`,
+    options: null,
+    optionsDescription: 'Not configurable.',
+    typescriptOnly: false,
+    hasFix: true
+  };
+
+  public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
+    return this.applyWithWalker(
+      new NgWalker(sourceFile, this.getOptions(), {
+        templateVisitorCtrl: TemplateVisitor
+      })
+    );
+  }
+}
diff --git a/test/ionItemOptionsAttributeValuesRenamed.spec.ts b/test/ionItemOptionsAttributeValuesRenamed.spec.ts
@@ -0,0 +1,199 @@
+import { expect } from 'chai';
+import { Replacement, Utils } from 'tslint';
+import { ruleName } from '../src/ionItemOptionsAttributeValuesRenamedRule';
+import { assertAnnotated, assertFailure, assertFailures, assertMultipleAnnotated, assertSuccess } from './testHelper';
+
+describe(ruleName, () => {
+  describe('success', () => {
+    it('should work with proper style', () => {
+      let source = `
+      @Component({
+        template: \`
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Item 1</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option expandable>
+                <ion-icon name="star"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        \`
+      })
+      class Bar{}
+        `;
+      assertSuccess(ruleName, source);
+    });
+  });
+
+  describe('failure', () => {
+    it('should fail when side="left" is used', () => {
+      let source = `
+      @Component({
+        template: \`
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Item 1</ion-label>
+            </ion-item>
+            <ion-item-options side="left">
+                              ~~~~~~~~~~~
+              <ion-item-option expandable>
+                <ion-icon name="star"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        \`
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'The side="left" attribute/value of ion-item-options should be written as side="start".',
+        source
+      });
+    });
+
+    it('should fail when side="right" is used', () => {
+      let source = `
+      @Component({
+        template: \`
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Item 1</ion-label>
+            </ion-item>
+            <ion-item-options side="right">
+                              ~~~~~~~~~~~~
+              <ion-item-option expandable>
+                <ion-icon name="star"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        \`
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'The side="right" attribute/value of ion-item-options should be written as side="end".',
+        source
+      });
+    });
+  });
+
+  describe('replacements', () => {
+    it('should replace side="left" with side="start"', () => {
+      let source = `
+        @Component({
+          template: \`
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 1</ion-label>
+              </ion-item>
+              <ion-item-options side="left">
+                <ion-item-option expandable>
+                  <ion-icon name="star"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+          \`
+        })
+        class Bar {}
+      `;
+
+      const fail = {
+        message: 'The side="left" attribute/value of ion-item-options should be written as side="start".',
+        startPosition: {
+          line: 7,
+          character: 32
+        },
+        endPosition: {
+          line: 7,
+          character: 43
+        }
+      };
+
+      const failures = assertFailure(ruleName, source, fail);
+      const fixes = failures.map(f => f.getFix());
+      const res = Replacement.applyAll(source, Utils.flatMap(fixes, Utils.arrayify));
+
+      let expected = `
+        @Component({
+          template: \`
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 1</ion-label>
+              </ion-item>
+              <ion-item-options side="start">
+                <ion-item-option expandable>
+                  <ion-icon name="star"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+          \`
+        })
+        class Bar {}
+      `;
+
+      expect(res).to.eq(expected);
+    });
+
+    it('should replace side="right" with side="end"', () => {
+      let source = `
+        @Component({
+          template: \`
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 1</ion-label>
+              </ion-item>
+              <ion-item-options side="right">
+                <ion-item-option expandable>
+                  <ion-icon name="star"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+          \`
+        })
+        class Bar {}
+      `;
+
+      const fail = {
+        message: 'The side="right" attribute/value of ion-item-options should be written as side="end".',
+        startPosition: {
+          line: 7,
+          character: 32
+        },
+        endPosition: {
+          line: 7,
+          character: 44
+        }
+      };
+
+      const failures = assertFailure(ruleName, source, fail);
+      const fixes = failures.map(f => f.getFix());
+      const res = Replacement.applyAll(source, Utils.flatMap(fixes, Utils.arrayify));
+
+      let expected = `
+        @Component({
+          template: \`
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 1</ion-label>
+              </ion-item>
+              <ion-item-options side="end">
+                <ion-item-option expandable>
+                  <ion-icon name="star"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+          \`
+        })
+        class Bar {}
+      `;
+
+      expect(res).to.eq(expected);
+    });
+  });
+});