Merge pull request #27 from mgechev/component-class-suffix

add component/directive rule with update README

Author: mgechev

README.md

@@ -40,7 +40,9 @@ Below you can find a recommended configuration which is based on the [Angular 2
   "call-forward-ref" :true,
   "life-cycle-hook": true,
   "pipe-transform-interface": true,
-  "pipe-naming": [true, "kebab-case","sg"]
+  "pipe-naming": [true, "kebab-case","sg"],
+  "component-class-suffix":true,
+  "directive-class-suffix":true
 }
 ```
 
@@ -69,7 +71,7 @@ Below you can find a recommended configuration which is based on the [Angular 2
 - [ ] Proper naming of modules (kebab-case followed by module type followed by extension for regular modules, module name plus extension name for facades).
 - [ ] Verify if used directive is declared in the current component or any parent component.
 - [ ] Verify that property or method used in the template exists in the current context.
-- [ ] Proper naming of directives and components (name plus `(Directive|Component)` suffix).
+- [x] Proper naming of directives and components (name plus `(Directive|Component)` suffix).
 - [ ] Locate component templates in the same directory.
 - [ ] Locate tests in the same directory (rise optional warning when no test file is found).
 - [ ] Rise warning on complex logic inside of the templates.

src/componentClassSuffixRule.ts

@@ -0,0 +1,35 @@
+import * as Lint from 'tslint/lib/lint';
+import * as ts from 'typescript';
+import {sprintf} from 'sprintf-js';
+import SyntaxKind = require('./util/syntaxKind');
+import {Ng2Walker} from "./util/ng2Walker";
+
+export class Rule extends Lint.Rules.AbstractRule {
+
+    public apply(sourceFile:ts.SourceFile):Lint.RuleFailure[] {
+        return this.applyWithWalker(
+            new ClassMetadataWalker(sourceFile,
+                this.getOptions()));
+    }
+
+    static FAILURE:string = "The name of the class %s should end with the suffix Component";
+
+    static validate(className:string):boolean {
+        return /.*Component$/.test(className);
+    }
+}
+
+export class ClassMetadataWalker extends Ng2Walker {
+
+    visitNg2Component(controller:ts.ClassDeclaration, decorator:ts.Decorator) {
+        let name = controller.name;
+        let className:string = name.text;
+        if (!Rule.validate(className)) {
+            this.addFailure(
+                this.createFailure(
+                    name.getStart(),
+                    name.getWidth(),
+                    sprintf.apply(this, [Rule.FAILURE, className])));
+        }
+    }
+}

src/directiveClassSuffixRule.ts

@@ -0,0 +1,36 @@
+import * as Lint from 'tslint/lib/lint';
+import * as ts from 'typescript';
+import {sprintf} from 'sprintf-js';
+import SyntaxKind = require('./util/syntaxKind');
+import {Ng2Walker} from "./util/ng2Walker";
+
+export class Rule extends Lint.Rules.AbstractRule {
+
+    public apply(sourceFile:ts.SourceFile):Lint.RuleFailure[] {
+        return this.applyWithWalker(
+            new ClassMetadataWalker(sourceFile,
+                this.getOptions()));
+    }
+
+    static FAILURE:string = "The name of the class %s should end with the suffix Directive";
+
+    static validate(className:string):boolean {
+        return /.*Directive/.test(className);
+    }
+}
+
+export class ClassMetadataWalker extends Ng2Walker {
+
+    visitNg2Directive(controller:ts.ClassDeclaration, decorator:ts.Decorator) {
+        let name = controller.name;
+        let className:string = name.text;
+        if (!Rule.validate(className)) {
+            this.addFailure(
+                this.createFailure(
+                    name.getStart(),
+                    name.getWidth(),
+                    sprintf.apply(this, [Rule.FAILURE, className])));
+        }
+    }
+
+}

test/componentClassSuffixRule.spec.ts

@@ -0,0 +1,69 @@
+import {assertFailure, assertSuccess} from './testHelper';
+
+describe('component-class-suffix', () => {
+    describe('invalid component class suffix', () => {
+        it('should fail when component class is with the wrong suffix', () => {
+              let source = `
+              @Component({
+                selector: 'sg-foo-bar'
+              })
+              class Test {}`;
+            assertFailure('component-class-suffix', source, {
+                message: 'The name of the class Test should end with the suffix Component',
+                startPosition: {
+                    line: 4,
+                    character: 20
+                },
+                endPosition: {
+                    line: 4,
+                    character: 24
+                }
+            });
+        });
+    });
+    describe('valid component class name', () => {
+        it('should succeed when the component class name ends with Component', () => {
+            let source = `
+            @Component({
+                selector: 'sg-foo-bar'
+            })
+            class TestComponent {}`;
+            assertSuccess('component-class-suffix', source);
+        });
+    });
+    describe('valid directive class', () => {
+        it('should succeed when is used @Directive decorator', () => {
+            let source = `
+            @Directive({
+                selector: '[myHighlight]'
+            })
+            class TestDirective {}`;
+            assertSuccess('component-class-suffix', source);
+        });
+    });
+    describe('valid pipe class', () => {
+        it('should succeed when is used @Pipe decorator', () => {
+            let source = `
+            @Pipe({
+                selector: 'sg-test-pipe'
+            })
+            class TestPipe {}`;
+            assertSuccess('component-class-suffix', source);
+        });
+    });
+    describe('valid service class', () => {
+        it('should succeed when is used @Injectable decorator', () => {
+            let source = `
+            @Injectable()
+            class TestService {}`;
+            assertSuccess('component-class-suffix', source);
+        });
+    });
+    describe('valid empty class', () => {
+        it('should succeed when the class is empty', () => {
+            let source = `
+            class TestEmpty {}`;
+            assertSuccess('component-class-suffix', source);
+        });
+    });
+});

test/directiveClassSuffix.spec.ts

@@ -0,0 +1,69 @@
+import {assertFailure, assertSuccess} from './testHelper';
+
+describe('directive-class-suffix', () => {
+    describe('invalid directive class suffix', () => {
+        it('should fail when directive class is with the wrong suffix', () => {
+            let source = `
+              @Directive({
+                selector: 'sgBarFoo'
+              })
+              class Test {}`;
+            assertFailure('directive-class-suffix', source, {
+                message: 'The name of the class Test should end with the suffix Directive',
+                startPosition: {
+                    line: 4,
+                    character: 20
+                },
+                endPosition: {
+                    line: 4,
+                    character: 24
+                }
+            });
+        });
+    });
+    describe('valid directive class name', () => {
+        it('should succeed when the directive class name ends with Directive', () => {
+            let source = `
+            @Directive({
+                selector: 'sgBarFoo'
+            })
+            class TestDirective {}`;
+            assertSuccess('directive-class-suffix', source);
+        });
+    });
+    describe('valid directive class', () => {
+        it('should succeed when is used @Component decorator', () => {
+            let source = `
+            @Component({
+                selector: 'sg-foo-bar'
+            })
+            class TestComponent {}`;
+            assertSuccess('directive-class-suffix', source);
+        });
+    });
+    describe('valid pipe class', () => {
+        it('should succeed when is used @Pipe decorator', () => {
+            let source = `
+            @Pipe({
+                selector: 'sg-test-pipe'
+            })
+            class TestPipe {}`;
+            assertSuccess('directive-class-suffix', source);
+        });
+    });
+    describe('valid service class', () => {
+        it('should succeed when is used @Injectable decorator', () => {
+            let source = `
+            @Injectable()
+            class TestService {}`;
+            assertSuccess('directive-class-suffix', source);
+        });
+    });
+    describe('valid empty class', () => {
+        it('should succeed when the class is empty', () => {
+            let source = `
+            class TestEmpty {}`;
+            assertSuccess('directive-class-suffix', source);
+        });
+    });
+});