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

README.md

@@ -489,11 +489,13 @@ We are looking for contributors to help build these rules out! See [`CONTRIBUTIN
       <a href="https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#text--typography">Text / Typography</a>
     </th>
     <td></td>
-    <td>:white_large_square:</td>
+    <td>:white_check_mark:</td>
     <td>
       <code>ion-text-is-now-an-element</code>
     </td>
-    <td></td>
+    <td>
+      <a href="https://github.com/dwieeb">@dwieeb</a>
+    </td>
   </tr>
   <tr>
     <th>

src/helpers/directiveToElement.ts

@@ -15,8 +15,6 @@ export function createDirectiveToElementTemplateVisitorClass(directive: string,
 
       if (foundAttr) {
         const start = foundAttr.sourceSpan.start.offset;
-        const absolutePosition = this.getSourcePosition(start - 1);
-
         this.addFailureAt(start, directive.length, generateDescription(directive, resultantElement));
       }
 

src/ionTextIsNowAnElementRule.ts

@@ -0,0 +1,6 @@
+import { createDirectiveToElementRuleClass } from './helpers/directiveToElement';
+
+const directive = 'ion-text';
+
+export const ruleName = 'ion-text-is-now-an-element';
+export const Rule = createDirectiveToElementRuleClass(ruleName, directive);

test/ionTextIsNowAnElement.spec.ts

@@ -0,0 +1,93 @@
+import { ruleName } from '../src/ionTextIsNowAnElementRule';
+import { assertAnnotated, assertMultipleAnnotated, assertSuccess } from './testHelper';
+
+describe(ruleName, () => {
+  describe('success', () => {
+    it('should work with proper style', () => {
+      let source = `
+      @Component({
+        template: \`
+          <ion-text color="secondary">
+            <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+          </ion-text>
+
+          <ion-text color="primary">
+            <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+          </ion-text>
+
+          <ion-text color="light">
+            <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+          </ion-text>
+
+          <p>
+            I saw a werewolf with a Chinese menu in his hand.
+            Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
+            He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+            Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
+          </p>
+        \`
+      })
+      class Bar{}
+        `;
+      assertSuccess(ruleName, source);
+    });
+  });
+
+  describe('failure', () => {
+    it('should fail when ion-text attribute is used on h1', () => {
+      let source = `
+      @Component({
+        template: \`
+          <h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
+              ~~~~~~~~
+        \`
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'ion-text is now an ion-text element instead of an Angular directive.',
+        source
+      });
+    });
+
+    it('should fail when ion-text attribute is used on other elements', () => {
+      let source = `
+      @Component({
+        template: \`
+          <p>
+            I saw a werewolf with a Chinese menu in his hand.
+            Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
+                                     ~~~~~~~~
+            He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
+                  ^^^^^^^^
+            Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
+                           11111111
+          </p>
+        \`
+      })
+      class Bar{}
+          `;
+
+      assertMultipleAnnotated({
+        ruleName,
+        source,
+        failures: [
+          {
+            char: '~',
+            msg: 'ion-text is now an ion-text element instead of an Angular directive.'
+          },
+          {
+            char: '^',
+            msg: 'ion-text is now an ion-text element instead of an Angular directive.'
+          },
+          {
+            char: '1',
+            msg: 'ion-text is now an ion-text element instead of an Angular directive.'
+          }
+        ]
+      });
+    });
+  });
+});