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

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

* docs(readme): update readme with completed rule

README.md

@@ -198,11 +198,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#fab">FAB</a>
     </th>
     <td></td>
-    <td>:white_large_square:</td>
+    <td>:white_check_mark:</td>
     <td>
       <code>ion-fab-button-is-now-an-element</code>
     </td>
-    <td></td>
+    <td>
+      <a href="https://github.com/dwieeb">@dwieeb</a>
+    </td>
   </tr>
   <tr>
     <td></td>

src/ionFabButtonIsNowAnElementRule.ts

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

test/ionFabButtonIsNowAnElement.spec.ts

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