@taiga-ui/cdk 3.44.0 → 3.44.1-canary.b6b867c

package/schematics/ng-add/tests/schematic-ng-add.spec.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../utils/create-angular-json");
+const versions_1 = require("../constants/versions");
+const collectionPath = path_1.join(__dirname, `../../collection.json`);
+describe(`ng-add`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+        create_angular_json_1.createAngularJson();
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should add main modules in package.json`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const options = {
+            addSanitizer: false,
+            addGlobalStyles: false,
+            addDialogsModule: false,
+            addAlertModule: false,
+            addons: [],
+            project: ``,
+            'skip-logs': process.env[`TUI_CI`] === `true`,
+        };
+        const tree = yield runner.runSchematicAsync(`ng-add`, options, host).toPromise();
+        expect(tree.readContent(`package.json`)).toEqual(`{
+  "dependencies": {
+    "@angular/core": "~13.0.0",
+    "@taiga-ui/cdk": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/core": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/icons": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/kit": "${versions_1.TAIGA_VERSION}"
+  }
+}`);
+    }));
+    it(`should add additional modules in package.json`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const options = {
+            addSanitizer: true,
+            addGlobalStyles: false,
+            addDialogsModule: false,
+            addAlertModule: false,
+            addons: [`addon-doc`, `addon-mobile`],
+            project: ``,
+            'skip-logs': process.env[`TUI_CI`] === `true`,
+        };
+        const tree = yield runner.runSchematicAsync(`ng-add`, options, host).toPromise();
+        expect(tree.readContent(`package.json`)).toEqual(`{
+  "devDependencies": {
+    "@types/dompurify": "${versions_1.DOMPURIFY_TYPES_VERSION}"
+  },
+  "dependencies": {
+    "@angular/cdk": "^13.0.0",
+    "@angular/core": "~13.0.0",
+    "@taiga-ui/addon-doc": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/addon-mobile": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/cdk": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/core": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/icons": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/kit": "${versions_1.TAIGA_VERSION}",
+    "@tinkoff/ng-dompurify": "${versions_1.NG_DOMPURIFY_VERSION}",
+    "dompurify": "${versions_1.DOMPURIFY_VERSION}"
+  }
+}`);
+    }));
+    it(`should add additional modules in package.json and global styles`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const options = {
+            addSanitizer: true,
+            addGlobalStyles: true,
+            addDialogsModule: false,
+            addAlertModule: false,
+            addons: [`addon-doc`, `addon-mobile`],
+            project: ``,
+            'skip-logs': process.env[`TUI_CI`] === `true`,
+        };
+        const tree = yield runner.runSchematicAsync(`ng-add`, options, host).toPromise();
+        expect(tree.readContent(`package.json`)).toEqual(`{
+  "devDependencies": {
+    "@types/dompurify": "${versions_1.DOMPURIFY_TYPES_VERSION}"
+  },
+  "dependencies": {
+    "@angular/cdk": "^13.0.0",
+    "@angular/core": "~13.0.0",
+    "@taiga-ui/addon-doc": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/addon-mobile": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/cdk": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/core": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/icons": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/kit": "${versions_1.TAIGA_VERSION}",
+    "@taiga-ui/styles": "${versions_1.TAIGA_VERSION}",
+    "@tinkoff/ng-dompurify": "${versions_1.NG_DOMPURIFY_VERSION}",
+    "dompurify": "${versions_1.DOMPURIFY_VERSION}"
+  }
+}`);
+    }));
+    it(`should add assets and styles in angular.json`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`ng-add-setup-project`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`angular.json`)).toEqual(`
+{
+  "version": 1,
+  "defaultProject": "demo",
+  "projects": {
+    "demo": {
+        "architect": {
+          "build": {
+            "options": {
+              "main": "test/main.ts",
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
+            ]
+            }
+          }
+        }
+    }
+  }
+}`);
+    }));
+    it(`should add styles without duplicates, taiga styles first`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        create_angular_json_1.createAngularJson({ stylesExist: true });
+        ng_morph_1.saveActiveProject();
+        const tree = yield runner
+            .runSchematicAsync(`ng-add-setup-project`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`angular.json`)).toEqual(`
+{
+  "version": 1,
+  "defaultProject": "demo",
+  "projects": {
+    "demo": {
+        "architect": {
+          "build": {
+            "options": {
+              "main": "test/main.ts",
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
+              "some.style"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
+            ]
+                }
+          }
+        }
+    }
+  }
+}`);
+    }));
+    it(`should add global styles`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        create_angular_json_1.createAngularJson({ stylesExist: true });
+        ng_morph_1.saveActiveProject();
+        const tree = yield runner
+            .runSchematicAsync(`ng-add-setup-project`, { addGlobalStyles: true }, host)
+            .toPromise();
+        expect(tree.readContent(`angular.json`)).toEqual(`
+{
+  "version": 1,
+  "defaultProject": "demo",
+  "projects": {
+    "demo": {
+        "architect": {
+          "build": {
+            "options": {
+              "main": "test/main.ts",
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
+              "node_modules/@taiga-ui/styles/taiga-ui-global.less",
+              "some.style"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
+            ]
+                }
+          }
+        }
+    }
+  }
+}`);
+    }));
+    it(`Should add Taiga-ui modules and providers to main module`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const options = {
+            addSanitizer: true,
+            addGlobalStyles: false,
+            addDialogsModule: true,
+            addAlertModule: true,
+            addons: [],
+            project: ``,
+            'skip-logs': process.env[`TUI_CI`] === `true`,
+        };
+        const tree = yield runner
+            .runSchematicAsync(`ng-add-setup-project`, options, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/app.module.ts`)).toEqual(`import { NgDompurifySanitizer } from "@tinkoff/ng-dompurify";
+import { TuiRootModule, TuiDialogModule, TuiAlertModule, TUI_SANITIZER } from "@taiga-ui/core";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+
+@NgModule({declarations: [AppComponent],
+        imports: [BrowserAnimationsModule, TuiRootModule, TuiDialogModule, TuiAlertModule],
+        providers: [{provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}]
+    })
+export class AppModule {}
+`);
+    }));
+    it(`Should wrap main template with tui-root`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`ng-add-setup-project`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/app.template.html`)).toEqual(`<tui-root>
+<app></app>
+</tui-root>`);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/main.ts`, `import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+  import {AppModule} from './app/app.module';
+  import {environment} from './environments/environment';
+
+  if (environment.production) {
+    enableProdMode();
+  }
+
+  platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch(err => console.log(err));
+  `);
+    ng_morph_1.createSourceFile(`test/app/app.module.ts`, `import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+
+@NgModule({declarations: [AppComponent]})
+export class AppModule {}
+`);
+    ng_morph_1.createSourceFile(`test/app/app.component.ts`, `import {Component} from '@angular/core';
+import {AppComponent} from './app.component';
+
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {}`);
+    ng_morph_1.createSourceFile(`test/app/app.template.html`, `<app></app>`);
+}

package/schematics/ng-update/v3/tests/schematic-date-time.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-date-time.spec.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const BEFORE = `import {Component} from '@angular/core';
+import {TuiDay, TuiMonth, TuiDayRange} from '@taiga-ui/cdk';
+
+const day = new TuiDay(0, 0, 10).formattedDay;
+
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {
+    some = new TuiDay();
+    formatted = new TuiDay().formattedDay;
+
+    range = new TuiDayRange(this.some, this.some);
+    formattedRange = this.range.formattedDayRange;
+    normalized = TuiDayRange.normalizeParse(a, b, c);
+
+    other: TuiDay = getTuiDay();
+    value: TuiMonth | null = null;
+
+    show(): void {
+       const kek = this.some;
+       kek.formattedDay;
+       this.some.formattedDay;
+
+       this.other.formattedDay;
+
+       this.other.getDayFromMonthRowCol(1, 2, 3);
+
+       return this.value.formattedMonth;
+    }
+
+    dummyFn1() {
+        const {value, var1} = this;
+
+        return value.notDeprecatedProperty;
+    }
+
+    dummyFn2() {
+        const {value, var2} = this;
+    }
+}`;
+const AFTER = `import {Component} from '@angular/core';
+import {TuiDay, TuiMonth, TuiDayRange} from '@taiga-ui/cdk';
+
+const day = new TuiDay(0, 0, 10).getFormattedDay("DMY", ".");
+
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {
+    some = new TuiDay();
+    formatted = new TuiDay().getFormattedDay("DMY", ".");
+
+    range = new TuiDayRange(this.some, this.some);
+    formattedRange = this.range.getFormattedDayRange("DMY", ".");
+    normalized = TuiDayRange.normalizeParse(a, "DMY");
+
+    other: TuiDay = getTuiDay();
+    value: TuiMonth | null = null;
+
+    show(): void {
+       const kek = this.some;
+       kek.getFormattedDay("DMY", ".");
+       this.some.getFormattedDay("DMY", ".");
+
+       this.other.getFormattedDay("DMY", ".");
+
+// TODO: (Taiga UI migration) getDayFromMonthRowCol has been removed in 3.0. If you need this utils check out this pipe https://github.com/taiga-family/taiga-ui/tree/main/projects/core/pipes/calendar-sheet
+       this.other.getDayFromMonthRowCol(1, 2, 3);
+
+// TODO: (Taiga UI migration) formattedMonth has been removed in 3.0. Please use TUI_MONTH_FORMATTER from @taiga-ui/kit
+       return this.value.formattedMonth;
+    }
+
+    dummyFn1() {
+        const {value, var1} = this;
+
+        return value.notDeprecatedProperty;
+    }
+
+    dummyFn2() {
+        const {value, var2} = this;
+    }
+}`;
+describe(`ng-update`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`date-time migrations`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/app.component.ts`)).toEqual(AFTER);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/app.component.ts`, BEFORE);
+    ng_morph_1.createSourceFile(`test/app/mock.ts`, `export class TuiDay {}`);
+    ng_morph_1.createSourceFile(`test/app/app.template.html`, `<app></app>`);
+    create_angular_json_1.createAngularJson();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3/tests/schematic-migrate-hints.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-migrate-hints.spec.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const COMPONENT_WITH_TEMPLATE_URL = `
+@Component({templateUrl: './test.template.html'})
+export class TestComponent {}
+`;
+const TEMPLATE_BEFORE = `
+<button
+    tuiButton
+    tuiHintDirection="bottom-middle"
+    tuiHintMode="onDark"
+    tuiPointerHint="Wow! How exciting!"
+></button>
+
+<button
+    tuiButton
+    type="button"
+    [tuiManualHint]="template"
+    [tuiManualHintShow]="hintShown"
+    (click)="toggleHint()"
+>
+    Hint
+</button>
+
+<tui-bar-chart
+    class="chart"
+    [value]="value"
+    [hintContent]="hint"
+    [hintMode]="appearance"
+></tui-bar-chart>
+
+<tui-tooltip
+      describeId="example3"
+      mode="onDark"
+      content="some tooltip content"
+></tui-tooltip>
+`;
+const TEMPLATE_AFTER = `
+<button
+    tuiButton
+    tuiHintDirection="bottom"
+    tuiHintAppearance="onDark"
+    tuiHintPointer tuiHint="Wow! How exciting!"
+></button>
+
+<button
+    tuiButton
+    type="button"
+    [tuiHint]="template"
+    [tuiHintManual]="hintShown"
+    (click)="toggleHint()"
+>
+    Hint
+</button>
+
+<tui-bar-chart
+    class="chart"
+    [value]="value"
+    [tuiHintContent]="hint"
+    [tuiHintAppearance]="appearance"
+></tui-bar-chart>
+
+<tui-tooltip
+      describeId="example3"
+      appearance="onDark"
+      content="some tooltip content"
+></tui-tooltip>
+`;
+describe(`ng-update`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should migrate polymorpheus`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/test.template.html`)).toEqual(TEMPLATE_AFTER);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/test.component.ts`, COMPONENT_WITH_TEMPLATE_URL);
+    ng_morph_1.createSourceFile(`test/app/test.template.html`, TEMPLATE_BEFORE);
+    create_angular_json_1.createAngularJson();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3/tests/schematic-migrate-polymorpheus.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-migrate-polymorpheus.spec.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const COMPONENT_WITH_TEMPLATE_URL = `
+@Component({templateUrl: './test.template.html'})
+export class TestComponent {}
+`;
+const TEMPLATE_BEFORE = `
+<div
+    polymorpheus-outlet
+    [content]="content"
+    [context]="myContext"
+></div>
+
+<div
+    polymorpheus-outlet
+    [content]="content"
+    [context]="context"
+>
+    <ng-template let-hapicaCamelCase>
+        <div>{{ hapicaCamelCase }}</div>
+    </ng-template>
+</div>
+
+<div
+    *ngIf="icon"
+    polymorpheus-outlet
+    class="t-icon-outlet"
+    [content]="icon"
+>
+    <ng-template let-icon>
+        <tui-svg
+            automation-id="tui-input-card-grouped__icon"
+            class="t-card"
+            [src]="icon"
+        ></tui-svg>
+    </ng-template>
+</div>
+`;
+const TEMPLATE_AFTER = `
+<div
+    ${``}
+    ${``}
+    ${``}
+>
+<ng-container *polymorpheusOutlet="content as text; context: myContext">
+    {{ text }}
+</ng-container></div>
+
+<div
+    ${``}
+    ${``}
+    ${``}
+>
+    <ng-container *polymorpheusOutlet="content as hapicaCamelCase; context: context" >
+        <div>{{ hapicaCamelCase }}</div>
+    </ng-container>
+</div>
+
+<div
+    *ngIf="icon"
+    ${``}
+    class="t-icon-outlet"
+    ${``}
+>
+    <ng-container *polymorpheusOutlet="icon as icon" >
+        <tui-svg
+            automation-id="tui-input-card-grouped__icon"
+            class="t-card"
+            [src]="icon"
+        ></tui-svg>
+    </ng-container>
+</div>
+`;
+describe(`ng-update`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should migrate polymorpheus`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/test.template.html`)).toEqual(TEMPLATE_AFTER);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/test.component.ts`, COMPONENT_WITH_TEMPLATE_URL);
+    ng_morph_1.createSourceFile(`test/app/test.template.html`, TEMPLATE_BEFORE);
+    create_angular_json_1.createAngularJson();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3/tests/schematic-migrate-progress.spec.d.ts

@@ -0,0 +1 @@
+export {};