Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';
import { <% if(changeDetection !== 'OnPush') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';

@Component({<% if(!skipSelector) {%>
selector: '<%= selector %>',<%}%><% if(standalone) {%>
Expand All @@ -16,7 +16,7 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%
}
<% } %>`,<% } else if (style !== 'none') { %>
styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>',<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'Default') { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'OnPush') { %>
changeDetection: ChangeDetectionStrategy.<%= changeDetection %>,<% } %>
})
export <% if(exportDefault) {%>default <%}%>class <%= classifiedName %> {
Expand Down
31 changes: 21 additions & 10 deletions packages/schematics/angular/component/index_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('Component Schematic', () => {
inlineStyle: false,
inlineTemplate: false,
displayBlock: false,
changeDetection: ChangeDetection.Eager,
changeDetection: ChangeDetection.OnPush,
style: Style.Css,
type: 'Component',
skipTests: false,
Expand Down Expand Up @@ -64,12 +64,23 @@ describe('Component Schematic', () => {
expect(tsContent).toContain('compileComponents()');
});

it('should set change detection to OnPush', async () => {
const options = { ...defaultOptions, changeDetection: 'OnPush' };
it('should not set change detection when default is OnPush', async () => {
const options = { ...defaultOptions };

const tree = await schematicRunner.runSchematic('component', options, appTree);
const tsContent = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
expect(tsContent).not.toMatch(/import.*ChangeDetectionStrategy/);
expect(tsContent).not.toMatch(/changeDetection:/);
expect(tsContent).not.toMatch(/ChangeDetectionStrategy/);
});

it('should set changeDetection to Eager when requested', async () => {
const options = { ...defaultOptions, changeDetection: 'Eager' };

const tree = await schematicRunner.runSchematic('component', options, appTree);
const tsContent = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
expect(tsContent).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/);
expect(tsContent).toMatch(/import .*ChangeDetectionStrategy/);
expect(tsContent).toContain('changeDetection: ChangeDetectionStrategy.Eager,');
});

it('should not set view encapsulation', async () => {
Expand Down Expand Up @@ -348,27 +359,27 @@ describe('Component Schematic', () => {
expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.spec.ts');
});

it('should respect templateUrl when style=none and changeDetection=OnPush', async () => {
const options = { ...defaultOptions, style: Style.None, changeDetection: 'OnPush' };
it('should respect templateUrl when style=none and changeDetection=Eager', async () => {
const options = { ...defaultOptions, style: Style.None, changeDetection: 'Eager' };
const tree = await schematicRunner.runSchematic('component', options, appTree);
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
expect(content).not.toMatch(/styleUrls: /);
expect(content).toMatch(/templateUrl: '.\/foo.component.html',\n/);
expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/);
expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.Eager/);
});

it('should respect inlineTemplate when style=none and changeDetection=OnPush', async () => {
it('should respect inlineTemplate when style=none and changeDetection=Eager', async () => {
const options = {
...defaultOptions,
style: Style.None,
changeDetection: 'OnPush',
changeDetection: 'Eager',
inlineTemplate: true,
};
const tree = await schematicRunner.runSchematic('component', options, appTree);
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
expect(content).not.toMatch(/styleUrls: /);
expect(content).toMatch(/template: `(\n(.|)*){3}\n\s*`,\n/);
expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/);
expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.Eager,/);
});

it('should create a standalone component', async () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/schematics/angular/component/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"description": "Configures the change detection strategy for the component.",
"enum": ["Eager", "OnPush"],
"type": "string",
"default": "Eager",
"default": "OnPush",
"alias": "c"
},
"prefix": {
Expand Down
Loading