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

Author: devversion

src/cdk/schematics/BUILD.bazel

@@ -1,67 +1 @@
-package(default_visibility = ["//visibility:public"])
-
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
-load("@build_bazel_rules_nodejs//:defs.bzl", "npm_package", "jasmine_node_test")
-load("//:packages.bzl", "VERSION_PLACEHOLDER_REPLACEMENTS")
-
-# TODO(devversion): remove when https://github.com/bazelbuild/rules_nodejs/issues/352 is fixed
-exports_files(["#bazel_workaround.txt"])
-
-filegroup(
-  name = "schematics_assets",
-  srcs = glob(["**/files/**/*", "**/*.json"]) + ["README.md"],
-)
-
-ts_library(
-  name = "schematics",
-  module_name = "@angular/cdk/schematics",
-  srcs = glob(["**/*.ts"], exclude=["**/files/**/*.ts", "**/*.spec.ts"]),
-  tsconfig = ":tsconfig.json",
-  deps = [
-    "@npm//:@schematics/angular",
-    "@npm//:@angular-devkit/schematics",
-     # TODO(devversion): Only include jasmine for test sources.
-    "@npm//:@types/jasmine",
-    "@npm//:@types/node",
-    "@npm//:glob",
-    "@npm//:jasmine",
-    "@npm//:parse5",
-    "@npm//:rxjs",
-    "@npm//:tslint",
-    "@npm//:typescript"
-  ],
-)
-
-# This package is intended to be combined into the main @angular/cdk package as a dep.
-npm_package(
-  name = "npm_package",
-  srcs = [":schematics_assets"],
-  deps = [":schematics"],
-  replacements = VERSION_PLACEHOLDER_REPLACEMENTS,
-)
-
-### Testing rules
-
-jasmine_node_test(
-  name = "unit_tests",
-  srcs = [":schematics_test_sources"],
-  data = [":schematics_assets"],
-  deps = ["@npm//:jasmine"],
-)
-
-ts_library(
-  name = "schematics_test_sources",
-  srcs = glob(["**/*.spec.ts"], exclude = ["**/files/**/*.spec.ts"]),
-  deps = [
-    ":schematics",
-    "@npm//:@schematics/angular",
-    "@npm//:@angular-devkit/schematics",
-    "@npm//:@types/jasmine",
-    "@npm//:@types/node",
-    "@npm//:mock-fs",
-    "@npm//:tslint",
-    "@npm//:typescript",
-  ],
-  tsconfig = ":tsconfig.json",
-  testonly = True,
-)
+package(default_visibility = ["//visibility:public"])load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")load("@build_bazel_rules_nodejs//:defs.bzl", "npm_package", "jasmine_node_test")load("//:packages.bzl", "VERSION_PLACEHOLDER_REPLACEMENTS")# TODO(devversion): remove when https://github.com/bazelbuild/rules_nodejs/issues/352 is fixedexports_files(["#bazel_workaround.txt"])filegroup(  name = "schematics_assets",  srcs = glob(["**/files/**/*", "**/*.json"]) + ["README.md"],)ts_library(  name = "schematics",  module_name = "@angular/cdk/schematics",  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.    "@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//:jasmine",    "@npm//:parse5",    "@npm//:rxjs",    "@npm//:tslint",    "@npm//:typescript"  ],)# This package is intended to be combined into the main @angular/cdk package as a dep.npm_package(  name = "npm_package",  srcs = [":schematics_assets"],  deps = [":schematics"],  replacements = VERSION_PLACEHOLDER_REPLACEMENTS,)### Testing rulesjasmine_node_test(  name = "unit_tests",  srcs = [":schematics_test_sources"],  data = [":schematics_assets", ":schematics_test_cases"],  deps = ["@npm//:jasmine"],)ts_library(  name = "schematics_test_sources",  srcs = glob(["**/*.spec.ts"], exclude = ["**/files/**/*.spec.ts"]),  deps = [    ":schematics",    "@npm//:@schematics/angular",    "@npm//:@angular-devkit/schematics",    "@npm//:@types/jasmine",    "@npm//:@types/node",    "@npm//:mock-fs",    "@npm//:tslint",    "@npm//:typescript",  ],  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);
+    }
+  }
+}