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

src/helpers/directiveToElement.ts

@@ -11,22 +11,13 @@ export function generateDescription(directive: string, resultantElement: string)
 export function createDirectiveToElementTemplateVisitorClass(directive: string, resultantElement: string) {
   return class extends BasicTemplateAstVisitor {
     visitElement(element: ast.ElementAst, context: any): any {
-      if (element.name) {
-        const InvalidSyntaxBoxRe = new RegExp(`<\\w+[\\s\\S]+?(${directive})[\\s\\S]*?>`, 'gi');
+      const foundAttr = element.attrs.find(attr => attr.name === directive);
 
-        let error = generateDescription(directive, resultantElement);
+      if (foundAttr) {
+        const start = foundAttr.sourceSpan.start.offset;
+        const absolutePosition = this.getSourcePosition(start - 1);
 
-        const expr = element.sourceSpan.toString();
-
-        let matches;
-
-        while ((matches = InvalidSyntaxBoxRe.exec(expr)) !== null) {
-          const index = expr.indexOf(directive);
-          const start = element.sourceSpan.start.offset + index;
-          const absolutePosition = this.getSourcePosition(start - 1);
-
-          this.addFailure(this.createFailure(start, directive.length, error));
-        }
+        this.addFailure(this.createFailure(start, directive.length, generateDescription(directive, resultantElement)));
       }
 
       super.visitElement(element, context);

src/ionRadioGroupIsNowAnElementRule.ts

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

test/ionRadioGroupIsNowAnElement.spec.ts

@@ -0,0 +1,50 @@
+import { ruleName } from '../src/ionRadioGroupIsNowAnElementRule';
+import { assertAnnotated, assertSuccess } from './testHelper';
+
+describe(ruleName, () => {
+  describe('success', () => {
+    it('should work with proper style', () => {
+      let source = `
+      @Component({
+        template: \`
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-label>Apple</ion-label>
+                <ion-radio slot="start" value="apple"></ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        \`
+      })
+      class Bar{}
+        `;
+      assertSuccess(ruleName, source);
+    });
+  });
+
+  describe('failure', () => {
+    it('should fail when radio-group attribute is used on ion-list', () => {
+      let source = `
+      @Component({
+        template: \`
+          <ion-list radio-group>
+                    ~~~~~~~~~~~
+            <ion-item>
+              <ion-label>Apple</ion-label>
+              <ion-radio value="apple"></ion-radio>
+            </ion-item>
+          </ion-list>
+        \`
+      })
+      class Bar{}
+          `;
+
+      assertAnnotated({
+        ruleName,
+        message: 'radio-group is now an ion-radio-group element instead of an Angular directive.',
+        source
+      });
+    });
+  });
+});