Merge branch 'master' into nrobakova/refactor-keyboardNav-tests

nrobakova · web-flow · commit f662de2f19e9 · 2020-02-06T14:06:52.000+02:00
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -13,7 +13,10 @@
                 "ts-node/register",
                 "./node_modules/jasmine/bin/jasmine.js",
                 "./projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts"
-            ]
+            ],
+            "env": {
+                "TS_NODE_PROJECT": "projects/igniteui-angular/migrations/tsconfig.json"
+            }
         }
     ]
 }
diff --git a/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts b/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts
@@ -6,6 +6,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { ClassChanges, BindingChanges, SelectorChanges, ThemePropertyChanges, ImportsChanges } from './schema';
 import { UpdateChanges } from './UpdateChanges';
+import * as tsUtils from './tsUtils';
 
 describe('UpdateChanges', () => {
     let appTree: UnitTestTree;
@@ -226,7 +227,8 @@ describe('UpdateChanges', () => {
         });
         spyOn<any>(fs, 'readFileSync').and.callFake(() => JSON.stringify(classJson));
 
-        const fileContent = `import { igxClass } from ""; export class Test { prop: igxClass; prop2: igxClass2; }`;
+        const fileContent =
+            `import { igxClass, igxClass2 } from "igniteui-angular"; export class Test { prop: igxClass; prop2: igxClass2; }`;
         appTree.create('test.component.ts', fileContent);
 
         const update = new UnitUpdateChanges(__dirname, appTree);
@@ -236,7 +238,7 @@ describe('UpdateChanges', () => {
 
         update.applyChanges();
         expect(appTree.readContent('test.component.ts')).toEqual(
-            `import { igxReplace } from ""; export class Test { prop: igxReplace; prop2: igxSecond; }`);
+            `import { igxReplace, igxSecond } from "igniteui-angular"; export class Test { prop: igxReplace; prop2: igxSecond; }`);
 
         done();
     });
@@ -268,13 +270,13 @@ describe('UpdateChanges', () => {
 
         const fileContent =
         `import { Component, Injectable, ViewChild } from "@angular/core";` +
-        `import { IgxGridComponent } from "../../lib/grid/grid.component";` +
-        `import { IgxColumnComponent, IgxProvided, STRING_FILTERS} from "../../lib/main";\r\n` +
+        `import { IgxGridComponent } from "igniteui-angular";` +
+        `import { IgxColumnComponent, IgxProvided, STRING_FILTERS} from "igniteui-angular";\r\n` +
         `import {` +
         `    IgxCsvExporterService,` +
         `    IgxExcelExporterOptions,` +
         `    IgxExporterOptionsBase` +
-        `} from "../../lib/services/index";\r\n` +
+        `} from "igniteui-angular";\r\n` +
         `@Component({` +
         `    providers: [IgxProvided, RemoteService]` +
         `})` +
@@ -306,13 +308,13 @@ describe('UpdateChanges', () => {
         update.applyChanges();
         expect(appTree.readContent('test.component.ts')).toEqual(
             `import { Component, Injectable, ViewChild } from "@angular/core";` +
-            `import { IgxGridReplace } from "../../lib/grid/grid.component";` +
-            `import { IgxColumnReplace, IgxProvidedReplace, REPLACED_CONST} from "../../lib/main";\r\n` +
+            `import { IgxGridReplace } from "igniteui-angular";` +
+            `import { IgxColumnReplace, IgxProvidedReplace, REPLACED_CONST} from "igniteui-angular";\r\n` +
             `import {` +
             `    Injected,` +
             `    IgxNewable,` +
             `    ReturnType` +
-            `} from "../../lib/services/index";\r\n` +
+            `} from "igniteui-angular";\r\n` +
             `@Component({` +
             `    providers: [IgxProvidedReplace, RemoteService]` +
             `})` +
@@ -338,6 +340,93 @@ describe('UpdateChanges', () => {
         done();
     });
 
+    it('should correctly ignore types not from igniteui-angular', () => {
+        const classJson: ClassChanges = {
+            changes: [
+                { name: 'Name', replaceWith: 'NameName' },
+                { name: 'Another', replaceWith: 'Other' },
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'classes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath: string) => {
+            if (filePath === jsonPath) {
+                return true;
+            }
+            return false;
+        });
+        spyOn<any>(fs, 'readFileSync').and.callFake(() => JSON.stringify(classJson));
+
+        const fileContent =
+            `import { Name } from ""; import { Another } from "@space/package"; export class Test { prop: Name; prop2: Another; }`;
+        appTree.create('test.component.ts', fileContent);
+
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        expect(update.getClassChanges()).toEqual(classJson);
+
+        spyOn(tsUtils, 'getRenamePositions').and.callThrough();
+
+        update.applyChanges();
+        expect(tsUtils.getRenamePositions).toHaveBeenCalledWith('/test.component.ts', 'Name', jasmine.anything());
+        expect(tsUtils.getRenamePositions).toHaveBeenCalledWith('/test.component.ts', 'Another', jasmine.anything());
+        expect(appTree.readContent('test.component.ts')).toEqual(fileContent);
+    });
+
+    it('should correctly rename aliased imports and handle collision from other packages', () => {
+        const classJson: ClassChanges = {
+            changes: [
+                { name: 'Type', replaceWith: 'IgxType' },
+                { name: 'Size', replaceWith: 'IgxSize' },
+                { name: 'IgxService', replaceWith: 'IgxService1' },
+                { name: 'IgxDiffService', replaceWith: 'IgxNewDiffService' },
+                { name: 'Calendar', replaceWith: 'CalendarActual'}
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'classes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath: string) => {
+            if (filePath === jsonPath) {
+                return true;
+            }
+            return false;
+        });
+        spyOn<any>(fs, 'readFileSync').and.callFake(() => JSON.stringify(classJson));
+
+        const fileContent =
+`import { Size, Type as someThg } from "igniteui-angular";
+import { IgxService, IgxDiffService as eDiffService, Calendar as Calendar } from 'igniteui-angular';
+import { Type } from "@angular/core";
+export class Test {
+    prop: Type;
+    prop1: someThg;
+    prop2: Size = { prop: "Size" };
+    secondary: eDiffService;
+    cal: Calendar;
+
+    constructor (public router: Router, private _iconService: IgxService) {}
+}`;
+        appTree.create('test.component.ts', fileContent);
+
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        expect(fs.existsSync).toHaveBeenCalledWith(jsonPath);
+        expect(fs.readFileSync).toHaveBeenCalledWith(jsonPath, 'utf-8');
+        expect(update.getClassChanges()).toEqual(classJson);
+
+        update.applyChanges();
+        expect(appTree.readContent('test.component.ts')).toEqual(
+`import { IgxSize, IgxType as someThg } from "igniteui-angular";
+import { IgxService1, IgxNewDiffService as eDiffService, CalendarActual as Calendar } from 'igniteui-angular';
+import { Type } from "@angular/core";
+export class Test {
+    prop: Type;
+    prop1: someThg;
+    prop2: IgxSize = { prop: "Size" };
+    secondary: eDiffService;
+    cal: Calendar;
+
+    constructor (public router: Router, private _iconService: IgxService1) {}
+}`
+        );
+    });
+
     it('should move property value between element tags', done => {
         const inputJson: BindingChanges = {
             changes: [
diff --git a/projects/igniteui-angular/migrations/common/UpdateChanges.ts b/projects/igniteui-angular/migrations/common/UpdateChanges.ts
@@ -4,8 +4,9 @@ import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
 import * as fs from 'fs';
 import * as path from 'path';
 import { ClassChanges, BindingChanges, SelectorChange, SelectorChanges, ThemePropertyChanges, ImportsChanges } from './schema';
-import { getIdentifierPositions } from './tsUtils';
+import { getLanguageService, getRenamePositions } from './tsUtils';
 import { getProjectPaths, getWorkspace, getProjects, escapeRegExp } from './util';
+import { LanguageService } from 'typescript';
 
 // tslint:disable:arrow-parens
 export class UpdateChanges {
@@ -60,6 +61,14 @@ export class UpdateChanges {
         return this._sassFiles;
     }
 
+    private _service: LanguageService;
+    public get service(): LanguageService {
+        if (!this._service) {
+            this._service = getLanguageService(this.tsFiles, this.host);
+        }
+        return this._service;
+    }
+
     /**
      * Create a new base schematic to apply changes
      * @param rootPath Root folder for the schematic to read configs, pass __dirname
@@ -169,21 +178,17 @@ export class UpdateChanges {
 
     protected updateClasses(entryPath: string) {
         let fileContent = this.host.read(entryPath).toString();
-        let overwrite = false;
         for (const change of this.classChanges.changes) {
             if (fileContent.indexOf(change.name) !== -1) {
-                const positions = getIdentifierPositions(fileContent, change.name);
+                const positions = getRenamePositions(entryPath, change.name, this.service);
                 // loop backwards to preserve positions
                 for (let i = positions.length; i--;) {
                     const pos = positions[i];
                     fileContent = fileContent.slice(0, pos.start) + change.replaceWith + fileContent.slice(pos.end);
                 }
-                overwrite = true;
+                this.host.overwrite(entryPath, fileContent);
             }
         }
-        if (overwrite) {
-            this.host.overwrite(entryPath, fileContent);
-        }
     }
 
     protected updateBindings(entryPath: string, bindChanges: BindingChanges, type = BindingType.output) {
diff --git a/projects/igniteui-angular/migrations/common/tsUtils.ts b/projects/igniteui-angular/migrations/common/tsUtils.ts
@@ -1,5 +1,8 @@
 // tslint:disable-next-line:no-implicit-dependencies
 import * as ts from 'typescript';
+import { Tree } from '@angular-devkit/schematics';
+
+export const PACKAGE_IMPORT = 'igniteui-angular';
 
 /** Returns an source file */
 // export function getFileSource(sourceText: string): ts.SourceFile {
@@ -57,3 +60,96 @@ export function getImportModulePositions(sourceText: string, startsWith: string)
     }
     return positions;
 }
+
+/** Filters out statements to named imports (e.g. `import {x, y}`) from PACKAGE_IMPORT */
+const namedImportFilter = (statement: ts.Statement) => {
+    if (statement.kind === ts.SyntaxKind.ImportDeclaration &&
+        ((statement as ts.ImportDeclaration).moduleSpecifier as ts.StringLiteral).text === PACKAGE_IMPORT) {
+
+        const clause = (statement as ts.ImportDeclaration).importClause;
+        return clause && clause.namedBindings && clause.namedBindings.kind === ts.SyntaxKind.NamedImports;
+    }
+    return false;
+};
+
+export function getRenamePositions(sourcePath: string, name: string, service: ts.LanguageService):
+        Array<{start: number, end: number}> {
+
+    const source = service.getProgram().getSourceFile(sourcePath);
+    const positions = [];
+
+    const imports = source.statements.filter(<(a: ts.Statement) => a is ts.ImportDeclaration>namedImportFilter);
+    if (!imports.length) {
+        return positions;
+    }
+    const elements: ts.NodeArray<ts.ImportSpecifier> =
+        imports
+        .map(x => (x.importClause.namedBindings as ts.NamedImports).elements)
+        .reduce((prev, current) => prev.concat(current) as unknown as ts.NodeArray<ts.ImportSpecifier>);
+
+    for (const elem of elements) {
+        if (elem.propertyName && elem.propertyName.text === name) {
+            // alias imports `igxClass as smth` -> <propertyName> as <name>
+            // other references are only for the name portion
+            positions.push({ start: elem.propertyName.getStart(), end: elem.propertyName.getEnd() });
+            break;
+        }
+
+        if (!elem.propertyName && elem.name.text === name) {
+            const renames = service.findRenameLocations(sourcePath, elem.name.getStart(), false, false, false);
+            if (renames) {
+                const renamesPos = renames.map(x => ({ start: x.textSpan.start, end: x.textSpan.start + x.textSpan.length}) );
+                positions.push(...renamesPos);
+            }
+        }
+    }
+
+    return positions;
+}
+
+//#region Language Service
+
+/**
+ * Create a TypeScript language service
+ * @param filePaths Paths for files to include for the language service host
+ * @param host Virtual FS host
+ * @param options Typescript compiler options for the service
+ */
+export function getLanguageService(filePaths: string[], host: Tree, options: ts.CompilerOptions = {}): ts.LanguageService {
+    // https://stackoverflow.com/a/14221483
+    const fileVersions = new Map<string, number>();
+    patchHostOverwrite(host, fileVersions);
+
+    const servicesHost: ts.LanguageServiceHost = {
+        getCompilationSettings: () => options,
+        getScriptFileNames: () => filePaths,
+        getScriptVersion: fileName => {
+            // return host.actions.filter(x => x.path === fileName && x.kind !== 'c').length.toString();
+            const version = fileVersions.get(fileName) || 0;
+            return version.toString();
+        },
+        getScriptSnapshot: fileName => {
+            if (!host.exists(fileName)) {
+                return undefined;
+            }
+            return ts.ScriptSnapshot.fromString(host.read(fileName).toString());
+        },
+        getCurrentDirectory: () => process.cwd(),
+        getDefaultLibFileName: opts => ts.getDefaultLibFilePath(opts),
+        fileExists: fileName => {
+            return filePaths.indexOf(fileName) !== -1;
+        }
+    };
+    return ts.createLanguageService(servicesHost, ts.createDocumentRegistry());
+}
+
+function patchHostOverwrite(host: Tree, fileVersions: Map<string, number>) {
+    const original = host.overwrite;
+    host.overwrite = (path: string, content: Buffer | string) => {
+        const version = fileVersions.get(path) || 0;
+        fileVersions.set(path, version + 1);
+        original.call(host, path, content);
+    };
+}
+
+//#endregion
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
@@ -1526,7 +1526,7 @@ describe('IgxDropDown ', () => {
             await wait(200);
             firstItemElement = fixture.componentInstance.dropdownItems.first.element.nativeElement;
             lastItemElement = fixture.componentInstance.dropdownItems.last.element.nativeElement;
-            expect(firstItemElement.textContent.trim()).toEqual('Item 1989');
+            expect(firstItemElement.textContent.trim()).toEqual('Item 1990');
             expect(lastItemElement.textContent.trim()).toEqual('Item 2000');
         });
         it('Should properly handle keyboard navigation when virtualized', async(() => {
@@ -2215,7 +2215,7 @@ class GroupDropDownComponent {
     styles: [`
     .wrapping-div {
         overflow: hidden;
-        height: 420px;
+        height: 400px;
     }
     `]
 })
@@ -2235,8 +2235,8 @@ class VirtualizedDropDownComponent {
             id: i
         }));
     }
-    public itemsMaxHeight = 420;
-    public itemHeight = 42;
+    public itemsMaxHeight = 400;
+    public itemHeight = 40;
 }
 
 @Component({
diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
@@ -571,6 +571,14 @@ describe('Navigation Drawer', () => {
         done();
     });
 
+    it('should retain classes added in markup, fix for #6508', () => {
+        const fix = TestBed.createComponent(TestComponent);
+        fix.detectChanges();
+
+        expect(fix.componentInstance.navDrawer.element.classList.contains('markupClass')).toBeTruthy();
+        expect(fix.componentInstance.navDrawer.element.classList.contains('igx-nav-drawer')).toBeTruthy();
+    });
+
     function swipe(element, posX, posY, duration, deltaX, deltaY) {
         const swipeOptions = {
             deltaX,
@@ -610,7 +618,7 @@ describe('Navigation Drawer', () => {
 
 @Component({
     selector: 'igx-test-cmp',
-    template: '<igx-nav-drawer></igx-nav-drawer>'
+    template: '<igx-nav-drawer class="markupClass"></igx-nav-drawer>'
 })
 class TestComponent {
     @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent;
diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts
@@ -61,8 +61,12 @@ export class IgxNavigationDrawerComponent implements
     AfterContentInit,
     OnDestroy,
     OnChanges {
+
     private _isOpen = false;
-    @HostBinding('class') public cssClass = 'igx-nav-drawer';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-nav-drawer')
+    public cssClass = true;
 
     /**
      * ID of the component

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,10 @@`
`13`	`13`	`"ts-node/register",`
`14`	`14`	`"./node_modules/jasmine/bin/jasmine.js",`
`15`	`15`	`"./projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts"`
`16`		`- ]`
	`16`	`+ ],`
	`17`	`+ "env": {`
	`18`	`+ "TS_NODE_PROJECT": "projects/igniteui-angular/migrations/tsconfig.json"`
	`19`	`+ }`
`17`	`20`	`}`
`18`	`21`	`]`
`19`	`22`	`}`