/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {runInEachFileSystem} from '../../src/ngtsc/file_system/testing'; import {loadStandardTestFiles} from '../helpers/src/mock_file_loading'; import {NgtscTestEnvironment} from './env'; const testFiles = loadStandardTestFiles(); runInEachFileSystem(() => { describe('ngtsc incremental compilation', () => { let env !: NgtscTestEnvironment; beforeEach(() => { env = NgtscTestEnvironment.setup(testFiles); env.enableMultipleCompilations(); env.tsconfig(); }); it('should not crash if CLI does not provide getModifiedResourceFiles()', () => { env.write('component1.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp', templateUrl: './component1.template.html'}) export class Cmp1 {} `); env.write('component1.template.html', 'cmp1'); env.driveMain(); // Simulate a change to `component1.html` env.flushWrittenFileTracking(); env.invalidateCachedFile('component1.html'); env.simulateLegacyCLICompilerHost(); env.driveMain(); }); it('should skip unchanged services', () => { env.write('service.ts', ` import {Injectable} from '@angular/core'; @Injectable() export class Service {} `); env.write('test.ts', ` import {Component} from '@angular/core'; import {Service} from './service'; @Component({selector: 'cmp', template: 'cmp'}) export class Cmp { constructor(service: Service) {} } `); env.driveMain(); env.flushWrittenFileTracking(); // Pretend a change was made to test.ts. env.invalidateCachedFile('test.ts'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); // The changed file should be recompiled, but not the service. expect(written).toContain('/test.js'); expect(written).not.toContain('/service.js'); }); it('should rebuild components that have changed', () => { env.write('component1.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp', template: 'cmp'}) export class Cmp1 {} `); env.write('component2.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp2', template: 'cmp'}) export class Cmp2 {} `); env.driveMain(); // Pretend a change was made to Cmp1 env.flushWrittenFileTracking(); env.invalidateCachedFile('component1.ts'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); expect(written).toContain('/component1.js'); expect(written).not.toContain('/component2.js'); }); it('should rebuild components whose templates have changed', () => { env.write('component1.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp', templateUrl: './component1.template.html'}) export class Cmp1 {} `); env.write('component1.template.html', 'cmp1'); env.write('component2.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp2', templateUrl: './component2.template.html'}) export class Cmp2 {} `); env.write('component2.template.html', 'cmp2'); env.driveMain(); // Make a change to Cmp1 template env.flushWrittenFileTracking(); env.write('component1.template.html', 'changed'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); expect(written).toContain('/component1.js'); expect(written).not.toContain('/component2.js'); }); it('should rebuild components whose partial-evaluation dependencies have changed', () => { env.write('component1.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp', template: 'cmp'}) export class Cmp1 {} `); env.write('component2.ts', ` import {Component} from '@angular/core'; import {SELECTOR} from './constants'; @Component({selector: SELECTOR, template: 'cmp'}) export class Cmp2 {} `); env.write('constants.ts', ` export const SELECTOR = 'cmp'; `); env.driveMain(); // Pretend a change was made to SELECTOR env.flushWrittenFileTracking(); env.invalidateCachedFile('constants.ts'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); expect(written).toContain('/constants.js'); expect(written).not.toContain('/component1.js'); expect(written).toContain('/component2.js'); }); it('should rebuild components whose imported dependencies have changed', () => { setupFooBarProgram(env); // Pretend a change was made to BarDir. env.invalidateCachedFile('bar_directive.ts'); env.driveMain(); let written = env.getFilesWrittenSinceLastFlush(); expect(written).toContain('/bar_directive.js'); expect(written).toContain('/bar_component.js'); expect(written).toContain('/bar_module.js'); expect(written).toContain('/foo_component.js'); expect(written).not.toContain('/foo_pipe.js'); expect(written).not.toContain('/foo_module.js'); }); // https://github.com/angular/angular/issues/32416 it('should rebuild full NgModule scope when a dependency of a declaration has changed', () => { env.write('component1.ts', ` import {Component} from '@angular/core'; import {SELECTOR} from './dep'; @Component({selector: SELECTOR, template: 'cmp'}) export class Cmp1 {} `); env.write('component2.ts', ` import {Component} from '@angular/core'; @Component({selector: 'cmp2', template: 'cmp2'}) export class Cmp2 {} `); env.write('dep.ts', ` export const SELECTOR = 'cmp'; `); env.write('directive.ts', ` import {Directive} from '@angular/core'; @Directive({selector: 'dir'}) export class Dir {} `); env.write('pipe.ts', ` import {Pipe} from '@angular/core'; @Pipe({name: 'myPipe'}) export class MyPipe {} `); env.write('module.ts', ` import {NgModule} from '@angular/core'; import {Cmp1} from './component1'; import {Cmp2} from './component2'; import {Dir} from './directive'; import {MyPipe} from './pipe'; @NgModule({declarations: [Cmp1, Cmp2, Dir, MyPipe]}) export class Mod {} `); env.driveMain(); // Pretend a change was made to 'dep'. Since this may affect the NgModule scope, like it does // here if the selector is updated, all components in the module scope need to be recompiled. env.flushWrittenFileTracking(); env.invalidateCachedFile('dep.ts'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); expect(written).not.toContain('/directive.js'); expect(written).not.toContain('/pipe.js'); expect(written).toContain('/component1.js'); expect(written).toContain('/component2.js'); expect(written).toContain('/dep.js'); expect(written).toContain('/module.js'); }); it('should rebuild components where their NgModule declared dependencies have changed', () => { setupFooBarProgram(env); // Pretend a change was made to FooPipe. env.invalidateCachedFile('foo_pipe.ts'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); expect(written).not.toContain('/bar_directive.js'); expect(written).not.toContain('/bar_component.js'); expect(written).not.toContain('/bar_module.js'); expect(written).toContain('/foo_component.js'); expect(written).toContain('/foo_pipe.js'); expect(written).toContain('/foo_module.js'); }); it('should rebuild components where their NgModule has changed', () => { setupFooBarProgram(env); // Pretend a change was made to FooPipe. env.invalidateCachedFile('foo_module.ts'); env.driveMain(); const written = env.getFilesWrittenSinceLastFlush(); expect(written).not.toContain('/bar_directive.js'); expect(written).not.toContain('/bar_component.js'); expect(written).not.toContain('/bar_module.js'); expect(written).toContain('/foo_component.js'); expect(written).toContain('/foo_pipe.js'); expect(written).toContain('/foo_module.js'); }); it('should rebuild only a Component (but with the correct CompilationScope) and its module if its template has changed', () => { setupFooBarProgram(env); // Make a change to the template of BarComponent. env.write('bar_component.html', '