fix(@schematics/angular): kebab case prefix causes lint errors in new…

… directives `Component` selectors are always kekabed while `Directive` selectors are always camelized. This updates the lint rules to convert the prefix to the appropiate case Fixes #13796
angular · Mar 4, 2019 · 29f993a · 29f993a
1 parent 94df137
commit 29f993a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/packages/schematics/angular/application/files/lint/__tsLintRoot__/tslint.json.template b/packages/schematics/angular/application/files/lint/__tsLintRoot__/tslint.json.template
@@ -1,17 +1,17 @@
 {
-    "extends": "<%= relativePathToWorkspaceRoot %>/tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "<%= prefix %>",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "<%= prefix %>",
-            "kebab-case"
-        ]
-    }
+  "extends": "<%= relativePathToWorkspaceRoot %>/tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "<%= utils.camelize(prefix) %>",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "<%= utils.dasherize(prefix) %>",
+      "kebab-case"
+    ]
+  }
 }
diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
@@ -148,6 +148,15 @@ describe('Application Schematic', () => {
     expect(content.rules['component-selector'][2]).toMatch('app');
   });
 
+  it('should set the right prefix in the tslint file when provided is kebabed', () => {
+    const options: ApplicationOptions = { ...defaultOptions, prefix: 'foo-bar' };
+    const tree = schematicRunner.runSchematic('application', options, workspaceTree);
+    const path = '/projects/foo/tslint.json';
+    const content = JSON.parse(tree.readContent(path));
+    expect(content.rules['directive-selector'][2]).toMatch('fooBar');
+    expect(content.rules['component-selector'][2]).toMatch('foo-bar');
+  });
+
   it('should set the right coverage folder in the karma.json file', () => {
     const tree = schematicRunner.runSchematic('application', defaultOptions, workspaceTree);
     const karmaConf = getFileContent(tree, '/projects/foo/karma.conf.js');

diff --git a/packages/schematics/angular/library/files/tslint.json.template b/packages/schematics/angular/library/files/tslint.json.template
@@ -4,13 +4,13 @@
     "directive-selector": [
       true,
       "attribute",
-      "<%= prefix %>",
+      "<%= camelize(prefix) %>",
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "<%= prefix %>",
+      "<%= dasherize(prefix) %>",
       "kebab-case"
     ]
   }

diff --git a/packages/schematics/angular/library/index_spec.ts b/packages/schematics/angular/library/index_spec.ts
@@ -123,6 +123,15 @@ describe('Library Schematic', () => {
     expect(workspace.projects.foo.prefix).toEqual('pre');
   });
 
+  it('should set the right prefix in the tslint file when provided is kebabed', () => {
+    const options: GenerateLibrarySchema = { ...defaultOptions, prefix: 'foo-bar' };
+    const tree = schematicRunner.runSchematic('library', options, workspaceTree);
+    const path = '/projects/foo/tslint.json';
+    const content = JSON.parse(tree.readContent(path));
+    expect(content.rules['directive-selector'][2]).toMatch('fooBar');
+    expect(content.rules['component-selector'][2]).toMatch('foo-bar');
+  });
+
   it('should handle a pascalCasedName', () => {
     const options = {...defaultOptions, name: 'pascalCasedName'};
     const tree = schematicRunner.runSchematic('library', options, workspaceTree);