refactor(schematics): add test cases for cdk ng-update (#13517)

Author: devversion

src/cdk/schematics/BUILD.bazel

@@ -16,14 +16,20 @@ filegroup(
 ts_library(
   name = "schematics",
   module_name = "@angular/cdk/schematics",
-  srcs = glob(["**/*.ts"], exclude=["**/files/**/*.ts", "**/*.spec.ts"]),
+  srcs = glob(["**/*.ts"], exclude=[
+    "**/files/**/*.ts",
+    "**/*.spec.ts",
+    "ng-update/test-cases/**/*",
+  ]),
   tsconfig = ":tsconfig.json",
   deps = [
     "@npm//@schematics/angular",
     "@npm//@angular-devkit/schematics",
-     # TODO(devversion): Only include jasmine for test sources (See: tsconfig types).
+    # TODO(devversion): Only include jasmine for test sources (See: tsconfig types).
     "@npm//@types/jasmine",
     "@npm//@types/node",
+    # TODO(devversion): Similarly to "jasmine", we need to extract these into testing only.
+    "@npm//fs-extra",
     "@npm//glob",
     "@npm//parse5",
     "@npm//rxjs",
@@ -45,7 +51,7 @@ npm_package(
 jasmine_node_test(
   name = "unit_tests",
   srcs = [":schematics_test_sources"],
-  data = [":schematics_assets"],
+  data = [":schematics_assets", ":schematics_test_cases"],
 )
 
 ts_library(
@@ -64,3 +70,12 @@ ts_library(
   tsconfig = ":tsconfig.json",
   testonly = True,
 )
+
+filegroup(
+  name = "schematics_test_cases",
+  srcs = glob([
+    "ng-update/test-cases/**/*_input.ts",
+    "ng-update/test-cases/**/*_expected_output.ts"
+  ]),
+  testonly = True,
+)

src/cdk/schematics/ng-update/test-cases/index.spec.ts

@@ -0,0 +1,2 @@
+/** Path to the schematic collection that includes the migrations. */
+export const migrationCollection = require.resolve('../../migration.json');

src/cdk/schematics/ng-update/test-cases/misc/method-call-checks.spec.ts

@@ -0,0 +1,16 @@
+import {migrationCollection} from '../index.spec';
+import {runTestCases} from '../../../testing';
+
+describe('v6 method call checks', () => {
+
+  it('should properly report invalid method calls', async () => {
+    const {logOutput} = await runTestCases('migration-v6', migrationCollection, {
+      'method-call-checks': require.resolve('./method-call-checks_input.ts')
+    });
+
+    expect(logOutput)
+      .toMatch(/\[15,.*Found call to "FocusMonitor\.monitor".*renderer.*has been removed/);
+    expect(logOutput)
+      .toMatch(/\[16,.*Found call to "FocusMonitor\.monitor".*renderer.*has been removed/);
+  });
+});

src/lib/schematics/ng-update/test-cases/misc/method-call-checks_input.ts renamed to src/cdk/schematics/ng-update/test-cases/misc/method-call-checks_input.ts

@@ -15,4 +15,4 @@ class A implements AfterViewInit {
     this.focusMonitor.monitor(this.elementRef.nativeElement, this.renderer, true);
     this.self.a.monitor(this.elementRef.nativeElement, this.renderer, true);
   }
-}
+}

src/cdk/schematics/ng-update/test-cases/v6-test-cases.spec.ts

@@ -0,0 +1,43 @@
+import {join} from 'path';
+import {readFileContent, runTestCases} from '../../testing';
+import {migrationCollection} from './index.spec';
+
+describe('v6 upgrade test cases', () => {
+
+  /**
+   * Name of test cases that will be used to verify that update schematics properly update
+   * a developers application.
+   */
+  const testCases = [
+    'v6/attribute-selectors',
+    'v6/class-names',
+    'v6/input-names',
+    'v6/property-names',
+  ];
+
+  let testCasesOutputPath: string;
+
+  beforeAll(async () => {
+    const testCaseInputs = testCases.reduce((inputs, testCaseName) => {
+      inputs[testCaseName] = require.resolve(`./${testCaseName}_input.ts`);
+      return inputs;
+    }, {} as {[name: string]: string});
+
+    const {tempPath} = await runTestCases('migration-v6', migrationCollection, testCaseInputs);
+
+    testCasesOutputPath = join(tempPath, 'projects/cdk-testing/src/test-cases/');
+  });
+
+  // Iterates through every test case directory and generates a jasmine test block that will
+  // verify that the update schematics properly updated the test input to the expected output.
+  testCases.forEach(testCaseName => {
+    const expectedOutputPath = require.resolve(`./${testCaseName}_expected_output.ts`);
+
+    it(`should apply update schematics to test case: ${testCaseName}`, () => {
+      expect(readFileContent(join(testCasesOutputPath, `${testCaseName}.ts`)))
+        .toBe(readFileContent(expectedOutputPath));
+    });
+  });
+});
+
+

src/cdk/schematics/ng-update/test-cases/v6/attribute-selectors_expected_output.ts

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+
+const a = By.css('[cdkPortalOutlet]');
+const b = By.css('[cdkPortalOutlet]');
+
+// These should not change because we only update string literals that are
+// inside of a call expression.
+const c = 'cdkPortalHost';
+const d = 'portalHost';
+
+@Component({
+  template: `
+    <div cdkPortalOutlet="E"></div>
+    <div [cdkPortalOutlet]="myPortal"></div>
+  `,
+  styles: [
+    '[cdkPortalOutlet] {background: red}',
+    'div[cdkPortalOutlet] {color: blue}'
+  ]
+})
+class E {}
+
+@Component({
+  template: `
+    <div cdkPortalOutlet="F"></div>
+    <div [cdkPortalOutlet]="myPortal"></div>
+  `,
+  styles: [
+    '[cdkPortalOutlet] {background: red}',
+    'div[cdkPortalOutlet] {color: blue}'
+  ]
+})
+class F {}

src/cdk/schematics/ng-update/test-cases/v6/attribute-selectors_input.ts

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+
+const a = By.css('[cdkPortalHost]');
+const b = By.css('[portalHost]');
+
+// These should not change because we only update string literals that are
+// inside of a call expression.
+const c = 'cdkPortalHost';
+const d = 'portalHost';
+
+@Component({
+  template: `
+    <div cdkPortalHost="E"></div>
+    <div [cdkPortalHost]="myPortal"></div>
+  `,
+  styles: [
+    '[cdkPortalHost] {background: red}',
+    'div[cdkPortalHost] {color: blue}'
+  ]
+})
+class E {}
+
+@Component({
+  template: `
+    <div portalHost="F"></div>
+    <div [portalHost]="myPortal"></div>
+  `,
+  styles: [
+    '[portalHost] {background: red}',
+    'div[portalHost] {color: blue}'
+  ]
+})
+class F {}

src/cdk/schematics/ng-update/test-cases/v6/class-names_expected_output.ts

@@ -0,0 +1,8 @@
+import {CdkConnectedOverlay, CdkOverlayOrigin} from '@angular/cdk/overlay';
+import {CdkObserveContent} from '@angular/cdk/observers';
+import {CdkTrapFocus} from '@angular/cdk/a11y';
+
+const a = new CdkConnectedOverlay();
+const b = new CdkOverlayOrigin();
+const c = new CdkObserveContent();
+const d = new CdkTrapFocus();

src/cdk/schematics/ng-update/test-cases/v6/class-names_input.ts

@@ -0,0 +1,8 @@
+import {ConnectedOverlayDirective, OverlayOrigin} from '@angular/cdk/overlay';
+import {ObserveContent} from '@angular/cdk/observers';
+import {FocusTrapDirective} from '@angular/cdk/a11y';
+
+const a = new ConnectedOverlayDirective();
+const b = new OverlayOrigin();
+const c = new ObserveContent();
+const d = new FocusTrapDirective();

src/cdk/schematics/ng-update/test-cases/v6/input-names_expected_output.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+
+@Component({
+  template: `
+    <ng-template cdkConnectedOverlay
+                 [cdkConnectedOverlayOrigin]="myOrigin"
+                 [cdkConnectedOverlayPositions]="myPositions"
+                 [cdkConnectedOverlayOffsetX]="myOffsetX"
+                 [cdkConnectedOverlayOffsetY]="myOffsetY"
+                 [cdkConnectedOverlayWidth]="myWidth"
+                 [cdkConnectedOverlayHeight]="myHeight"
+                 [cdkConnectedOverlayMinWidth]="myMinWidth"
+                 [cdkConnectedOverlayMinHeight]="myMinHeight"
+                 [cdkConnectedOverlayBackdropClass]="myBackdropClass"
+                 [cdkConnectedOverlayScrollStrategy]="myScrollStrategy"
+                 [cdkConnectedOverlayOpen]="isOpen"
+                 [cdkConnectedOverlayHasBackdrop]="hasBackdrop">
+    </ng-template>
+  `
+})
+class A {}

src/cdk/schematics/ng-update/test-cases/v6/input-names_input.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+
+@Component({
+  template: `
+    <ng-template cdkConnectedOverlay
+                 [origin]="myOrigin"
+                 [positions]="myPositions"
+                 [offsetX]="myOffsetX"
+                 [offsetY]="myOffsetY"
+                 [width]="myWidth"
+                 [height]="myHeight"
+                 [minWidth]="myMinWidth"
+                 [minHeight]="myMinHeight"
+                 [backdropClass]="myBackdropClass"
+                 [scrollStrategy]="myScrollStrategy"
+                 [open]="isOpen"
+                 [hasBackdrop]="hasBackdrop">
+    </ng-template>
+  `
+})
+class A {}

src/cdk/schematics/ng-update/test-cases/v6/property-names_expected_output.ts

@@ -0,0 +1,64 @@
+class CdkConnectedOverlay {
+  _deprecatedOrigin: any;
+  _deprecatedPositions: any;
+  _deprecatedOffsetX: any;
+  _deprecatedOffsetY: any;
+  _deprecatedWidth: any;
+  _deprecatedHeight: any;
+  _deprecatedMinWidth: any;
+  _deprecatedMinHeight: any;
+  _deprecatedBackdropClass: any;
+  _deprecatedScrollStrategy: any;
+  _deprecatedOpen: any;
+  _deprecatedHasBackdrop: any;
+}
+
+class CdkPortalOutlet {
+  _deprecatedPortal: any;
+  _deprecatedPortalHost: any;
+}
+
+class A {
+  self = {me: this};
+
+  constructor(private a: CdkConnectedOverlay) {}
+
+  onAngularClick() {
+    this.a.origin = '1';
+    this.a.positions = '2';
+    this.a.offsetX = '3';
+    this.a.offsetY = '4';
+    this.a.height = '5';
+
+    console.log(this.a.width || 10);
+    console.log(this.a.minWidth || this.a.minHeight);
+
+    this.self.me.a.backdropClass = ['a', 'b', 'c'];
+
+    const x = ({test: true} || this.a);
+
+    if (this.isConnectedOverlay(x)) {
+      x.scrollStrategy = 'myScrollStrategy';
+      x.open = false;
+      x.hasBackdrop = true;
+    }
+  }
+
+  isConnectedOverlay(val: any): val is CdkConnectedOverlay {
+    return val instanceof CdkConnectedOverlay;
+  }
+}
+
+class B {
+  self = {me: this};
+
+  constructor(protected a: CdkPortalOutlet) {}
+
+  onClick() {
+    this.a.portal = this.a.portal = 'myNewPortal';
+
+    if (this.self.me.a) {
+      console.log(this.a.portal || this.self.me.a.portal);
+    }
+  }
+}

src/cdk/schematics/ng-update/test-cases/v6/property-names_input.ts

@@ -0,0 +1,64 @@
+class CdkConnectedOverlay {
+  _deprecatedOrigin: any;
+  _deprecatedPositions: any;
+  _deprecatedOffsetX: any;
+  _deprecatedOffsetY: any;
+  _deprecatedWidth: any;
+  _deprecatedHeight: any;
+  _deprecatedMinWidth: any;
+  _deprecatedMinHeight: any;
+  _deprecatedBackdropClass: any;
+  _deprecatedScrollStrategy: any;
+  _deprecatedOpen: any;
+  _deprecatedHasBackdrop: any;
+}
+
+class CdkPortalOutlet {
+  _deprecatedPortal: any;
+  _deprecatedPortalHost: any;
+}
+
+class A {
+  self = {me: this};
+
+  constructor(private a: CdkConnectedOverlay) {}
+
+  onAngularClick() {
+    this.a._deprecatedOrigin = '1';
+    this.a._deprecatedPositions = '2';
+    this.a._deprecatedOffsetX = '3';
+    this.a._deprecatedOffsetY = '4';
+    this.a._deprecatedHeight = '5';
+
+    console.log(this.a._deprecatedWidth || 10);
+    console.log(this.a._deprecatedMinWidth || this.a._deprecatedMinHeight);
+
+    this.self.me.a._deprecatedBackdropClass = ['a', 'b', 'c'];
+
+    const x = ({test: true} || this.a);
+
+    if (this.isConnectedOverlay(x)) {
+      x._deprecatedScrollStrategy = 'myScrollStrategy';
+      x._deprecatedOpen = false;
+      x._deprecatedHasBackdrop = true;
+    }
+  }
+
+  isConnectedOverlay(val: any): val is CdkConnectedOverlay {
+    return val instanceof CdkConnectedOverlay;
+  }
+}
+
+class B {
+  self = {me: this};
+
+  constructor(protected a: CdkPortalOutlet) {}
+
+  onClick() {
+    this.a._deprecatedPortal = this.a._deprecatedPortalHost = 'myNewPortal';
+
+    if (this.self.me.a) {
+      console.log(this.a._deprecatedPortalHost || this.self.me.a._deprecatedPortal);
+    }
+  }
+}