feat(@schematics/angular): add opt in option 'displayBlock'

angular · Feb 5, 2020 · d6fa2bd · d6fa2bd
1 parent 1df5a72
commit d6fa2bd
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 2 deletions.
diff --git a/packages/angular/cli/lib/config/schema.json b/packages/angular/cli/lib/config/schema.json
@@ -86,6 +86,12 @@
               "default": "Default",
               "alias": "c"
             },
+            "displayBlock": {
+              "description": "Specifies if the style will contain `:host { display: block; }`.",
+              "type": "boolean",
+              "default": false,
+              "alias": "b"
+            },
             "entryComponent": {
               "type": "boolean",
               "default": false,

diff --git a/...files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template b/...files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template
@@ -0,0 +1,6 @@
+<% if(displayBlock){ if(style != 'sass') { %>:host {
+  display: block;
+}
+<% } else { %>\:host
+  display: block;
+<% }} %>
diff --git a/...ponent/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template b/...ponent/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template
@@ -8,7 +8,13 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
     </p>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.<%= dasherize(type) %>.html',<% } if(inlineStyle) { %>
-  styles: []<% } else { %>
+  styles: [<% if(displayBlock){ %>
+    `
+      :host {
+        display: block;
+      }
+    `<% } %>
+  ],<% } else { %>
   styleUrls: ['./<%= dasherize(name) %>.<%= dasherize(type) %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts
@@ -22,6 +22,7 @@ describe('Component Schematic', () => {
     // path: 'src/app',
     inlineStyle: false,
     inlineTemplate: false,
+    displayBlock: false,
     changeDetection: ChangeDetection.Default,
     style: Style.Css,
     type: 'Component',
@@ -248,6 +249,34 @@ describe('Component Schematic', () => {
     expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
   });
 
+  it('should respect the displayBlock option when inlineStyle is `false`', async () => {
+    const options = { ...defaultOptions, displayBlock: true };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.css');
+    expect(content).toMatch(/:host {\n  display: block;\n}\n/);
+  });
+
+  it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `scss`', async () => {
+    const options = { ...defaultOptions, displayBlock: true, style: 'scss' };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.scss');
+    expect(content).toMatch(/:host {\n  display: block;\n}\n/);
+  });
+
+  it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `sass', async () => {
+    const options = { ...defaultOptions, displayBlock: true, style: 'sass' };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.sass');
+    expect(content).toMatch(/\\:host\n  display: block;\n/);
+  });
+
+  it('should respect the displayBlock option when inlineStyle is `true`', async () => {
+    const options = { ...defaultOptions, displayBlock: true, inlineStyle: true };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(content).toMatch(/:host {\n(\s*)display: block;(\s*)}\n/);
+  });
+
   it('should respect the style option', async () => {
     const options = { ...defaultOptions, style: Style.Sass };
     const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
@@ -263,7 +292,7 @@ describe('Component Schematic', () => {
     const content = tree.readContent('/projects/bar/src/app/foo/foo.route.ts');
     const testContent = tree.readContent('/projects/bar/src/app/foo/foo.route.spec.ts');
     expect(content).toContain('export class FooRoute implements OnInit');
-    expect(testContent).toContain('describe(\'FooRoute\'');
+    expect(testContent).toContain("describe('FooRoute'");
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.css');
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.html');
   });

diff --git a/packages/schematics/angular/component/schema.json b/packages/schematics/angular/component/schema.json
@@ -27,6 +27,12 @@
       },
       "x-prompt": "What name would you like to use for the component?"
     },
+    "displayBlock": {
+      "description": "Specifies if the style will contain `:host { display: block; }`.",
+      "type": "boolean",
+      "default": false,
+      "alias": "b"
+    },
     "inlineStyle": {
       "description": "When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
       "type": "boolean",