feat(rules): add ion-item-is-now-an-element rule (#10)

* feat(rules): add ion-item-is-now-an-element rule

* docs(readme): check off ion-item-is-now-an-element rule

README.md

@@ -148,8 +148,8 @@ We are looking for contributors to help build these rules out! We have not relea
 </tr>
 <tr>
     <th rowspan="4"><a href="https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#item">Item</a></th>
-    <td>:black_square_button: <code>ion-item-is-now-an-element</code></td>
-    <td></td>
+    <td>:white_check_mark: <code>ion-item-is-now-an-element</code></td>
+    <td><a href="https://github.com/dwieeb">@dwieeb</a></td>
 </tr>
 <tr>
     <td>:black_square_button: <code>ion-item-ion-label-is-now-required</code></td>

src/ionItemIsNowAnElementRule.ts

@@ -0,0 +1,36 @@
+import { NgWalker } from 'codelyzer/angular/ngWalker';
+import * as Lint from 'tslint';
+import { IOptions } from 'tslint';
+import * as ts from 'typescript';
+
+import { createDirectiveToElementTemplateVisitorClass, generateDescription } from './helpers/directiveToElement';
+
+export const ruleName = 'ion-item-is-now-an-element';
+const directive = 'ion-item';
+
+const IonItemIsNowAnElementTemplateVisitor = createDirectiveToElementTemplateVisitorClass(directive);
+
+export class Rule extends Lint.Rules.AbstractRule {
+  public static metadata: Lint.IRuleMetadata = {
+    ruleName: ruleName,
+    type: 'functionality',
+    description: generateDescription(directive),
+    options: null,
+    optionsDescription: 'Not configurable.',
+    typescriptOnly: false,
+    hasFix: true
+  };
+
+  constructor(options: IOptions) {
+    options.ruleSeverity = 'error';
+    super(options);
+  }
+
+  public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
+    return this.applyWithWalker(
+      new NgWalker(sourceFile, this.getOptions(), {
+        templateVisitorCtrl: IonItemIsNowAnElementTemplateVisitor
+      })
+    );
+  }
+}

test/ionItemIsNowAnElement.spec.ts

@@ -0,0 +1,71 @@
+import { ruleName } from '../src/ionItemIsNowAnElementRule';
+import { assertAnnotated, assertSuccess } from './testHelper';
+
+describe(ruleName, () => {
+  describe('success', () => {
+    it('should work with proper style', () => {
+      let source = `
+      @Component({
+        template: \`<ion-item><ion-item>\`
+      })
+      class Bar{}
+        `;
+      assertSuccess(ruleName, source);
+    });
+  });
+
+  describe('failure', () => {
+    it('should fail when ion-item attribute is used on button', () => {
+      let source = `
+      @Component({
+        template: \`
+          <button ion-item></button>\`
+                  ~~~~~~~~
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'ion-item is now an Element instead of an Angular Directive.',
+        source
+      });
+    });
+
+    it('should fail when ion-item attribute is used on anchor', () => {
+      let source = `
+      @Component({
+        template: \`
+          <a ion-item (click)="doSomething()"></a>\`
+             ~~~~~~~~
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'ion-item is now an Element instead of an Angular Directive.',
+        source
+      });
+    });
+
+    it('should fail when ion-item attribute is used with multiline', () => {
+      let source = `
+      @Component({
+        template: \`
+          <a
+            ion-item
+            ~~~~~~~~
+            (click)="doSomething()">Click Me</a>\`
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'ion-item is now an Element instead of an Angular Directive.',
+        source
+      });
+    });
+  });
+});