@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/utils/table.utils.spec.ts

@@ -0,0 +1,47 @@
+import { sortByOrder } from './table.utils';
+import { TableColumn } from '../components/table/table.model';
+
+describe('sortByOrder', () => {
+  it('should return columns sorted by order when there are columns with order', () => {
+    const columns = [
+      { name: 'Column 1', order: 2 },
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 3' },
+    ] as unknown as TableColumn<any>[];
+
+    const sortedColumns = sortByOrder(columns);
+
+    expect(sortedColumns).toEqual([
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 1', order: 2 },
+      { name: 'Column 3'},
+    ]);
+  });
+
+  it('should return columns unchanged when there are no columns with order', () => {
+    const columns = [
+      { name: 'Column 1'},
+      { name: 'Column 2'},
+    ] as unknown as TableColumn<any>[];
+
+    const sortedColumns = sortByOrder(columns);
+
+    expect(sortedColumns).toEqual(columns);
+  });
+
+  it('should return columns with null order at the end', () => {
+    const columns = [
+      { name: 'Column 1'},
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 3'},
+    ] as unknown as TableColumn<any>[];
+
+    const sortedColumns = sortByOrder(columns);
+
+    expect(sortedColumns).toEqual([
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 1'},
+      { name: 'Column 3'},
+    ]);
+  });
+});

package/projects/tgo-canopy-ui/utils/table.utils.ts

@@ -0,0 +1,22 @@
+import { TableColumn } from '../components/table/table.model';
+
+/**
+ * Sorting table columns by order value if set.
+ * The rest columns keep the same ordering and displayed after the sorted ones.
+ */
+export const sortByOrder = <T>(columns: TableColumn<T>[]): TableColumn<T>[] => {
+  const withOrderColumns = columns.filter((v) => v.order);
+  const withoutOrderColumns = columns.filter((v) => !v.order)
+
+  if (withOrderColumns.length) {
+    const sortedColumns = Array(columns.length);
+    withOrderColumns.forEach(column => sortedColumns[column.order! - 1] = column);
+    withoutOrderColumns.forEach(column => {
+      const emptyIndex = sortedColumns.findIndex(v => !v);
+      sortedColumns[emptyIndex] = column;
+    });
+    return sortedColumns;
+  }
+
+  return columns;
+};

package/projects/tgo-canopy-ui/utils/transform-theme.ts

@@ -0,0 +1,9 @@
+export const transformTheme = (theme: string) => {
+  if (theme === 'Rebrand - Light BG') {
+    return 'light';
+  } else if (theme === 'Rebrand - Dark BG') {
+    return 'dark';
+  } else {
+    return 'classic';
+  }
+};

package/projects/tgo-canopy-ui/utils/transform.theme.spec.ts

@@ -0,0 +1,16 @@
+import { transformTheme } from "./transform-theme";
+
+test('should transform "Rebrand - Light BG" to "light"', () => {
+  const result = transformTheme('Rebrand - Light BG');
+  expect(result).toBe('light');
+});
+
+test('should transform "Rebrand - Dark BG" to "dark"', () => {
+  const result = transformTheme('Rebrand - Dark BG');
+  expect(result).toBe('dark');
+});
+
+test('should transform other themes to "classic"', () => {
+  const result = transformTheme('Some other theme');
+  expect(result).toBe('classic');
+});

package/projects/tgo-canopy-ui/utils/validators.utils.spec.ts

@@ -0,0 +1,16 @@
+import { FormControl } from '@angular/forms';
+import { ValidatorsUtil } from "./validators.utils";
+
+describe('ValidatorsUtil', () => {
+  it('should validate a password successfully', () => {
+    const passwordControl = new FormControl('ValidPassword123#$');
+
+    const validators = ValidatorsUtil.validatePassword();
+
+    // @ts-ignore
+    for (const validator of validators) {
+      const validationResult = validator(passwordControl);
+      expect(validationResult).toBeNull();
+    }
+  });
+});

package/projects/tgo-canopy-ui/utils/validators.utils.ts

@@ -0,0 +1,9 @@
+import { ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+const PASSWORD_REGEX = /^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,\-./:;<=>?@!^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/;
+
+export class ValidatorsUtil {
+  public static validatePassword(): ValidationErrors | ValidatorFn[] {
+    return [Validators.required, Validators.minLength(12), Validators.pattern(PASSWORD_REGEX)];
+  }
+}

package/setupJest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/transloco.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rootTranslationsPath: 'projects/tgo-canopy-ui/assets/i18n/',
+  langs: ['en', 'es', 'nl', 'fr', 'de', 'it-it', 'ja-jp', 'pt-br', 'da-dk', 'nb-no', 'pl-pl', 'sv-se'],
+  keysManager: {},
+};

package/tsconfig.json

@@ -0,0 +1,46 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "strictPropertyInitialization": false,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "es2020",
+    "lib": ["es2020", "dom"],
+    "useDefineForClassFields": false,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@testgorilla/tgo-ui": [
+        "./dist/tgo-ui"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "exclude": [
+    "./projects/tgo-canopy-ui/test.ts",
+    "./projects/tgo-canopy-ui/**/*.spec.ts"
+  ],
+  "include": [
+    "./projects/tgo-canopy-ui/**/*"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jest"],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true
+  },
+  "files": ["projects/tgo-canopy-ui/test.ts",
+    "projects/tgo-canopy-ui/polyfills.ts"
+  ],
+  "include": ["projects/**/*.spec.ts",
+    "projects/tgo-canopy-ui/**/*.d.ts"
+  ]
+}

package/tsconfig.ui.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": ["node"],
+    "lib": [
+      "dom",
+      "es2018"
+    ],
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "projects/tgo-canopy-ui/test.ts",
+    "projects/tgo-canopy-ui/**/*.spec.ts",
+    "projects/tgo-canopy-ui/**/*.stories.*",
+    "projects/tgo-canopy-ui/mocked-assets/**/*"
+  ],
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.ui.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.ui.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/visual-tests/component-page-objects/avatar-component.ts

@@ -0,0 +1,30 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class AvatarComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public name: string = '',
+        public size: string = '',
+        public imageUrl: string = '',
+        public tooltipText: string = '',
+        public allowEdit: boolean = false
+    ) {
+        super(page, 'ui-avatar', 'avatar');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.name) params.append('name', this.name);
+        if (this.size) params.append('size', this.size);
+        if (this.imageUrl) params.append('imageUrl', this.imageUrl);
+        if (this.tooltipText) params.append('tooltipText', this.tooltipText);
+        params.append('allowEdit', String(this.allowEdit));
+
+        const queryString = params.toString();
+        const url = `${this.baseUrl}/${this.componentName}?${queryString}`;
+        console.log(`Component URL: ${url}`);
+        await this.page.goto(url);
+    }
+}

package/visual-tests/component-page-objects/base-component.ts

@@ -0,0 +1,44 @@
+import { Page, Locator } from 'playwright';
+import { baseUrl } from '../runConfig';
+
+export class BaseComponent {
+    protected page: Page;
+    protected componentSelector: string;
+    protected element: Locator;
+    protected baseUrl: string;
+    protected componentName: string;
+
+    constructor(
+        page: Page,
+        selector: string,
+        componentName: string,
+        baseUrlOverride: string = baseUrl
+    ) {
+        this.page = page;
+        this.componentSelector = selector;
+        this.componentName = componentName;
+        this.element = this.page.locator(selector);
+        this.baseUrl = baseUrlOverride;
+    }
+
+    async isVisible(): Promise<boolean> {
+        return this.element.isVisible();
+    }
+
+    async click(): Promise<void> {
+        await this.element.click();
+    }
+
+    async getText(): Promise<string> {
+        const text = await this.element.textContent();
+        return text ?? '';
+    }
+
+    async takeSnapshot(): Promise<void> {
+        try {
+            await this.element.screenshot({ path: `snapshots/${this.componentSelector}.png` });
+        } catch (error) {
+            console.error(`Failed to take snapshot: ${error}`);
+        }
+    }
+}

package/visual-tests/component-tests/avatar.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+import { AvatarComponent } from '../component-page-objects/avatar-component';
+
+
+test.describe('Avatar Component Visual Tests', () => {
+  
+    test('should display the avatar correctly', async ({page}) => {
+        const avatar = new AvatarComponent(
+            page,
+            'John Doe'
+        );
+
+        await avatar.goTo();
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
+
+    test('should allow edit for the avatar', async ({page}) => {
+        const avatar = new AvatarComponent(
+            page,
+            'John Doe',
+            'large',
+            '',
+            '',
+            true
+        );
+
+        await avatar.goTo();
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
+});

package/visual-tests/playwright.config.ts

@@ -0,0 +1,45 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: 'ng serve',
+    url: 'http://localhost:4200/',
+    timeout: 300 * 1000,
+    reuseExistingServer: true
+  },
+  testDir: './component-tests',
+  timeout: 30000,
+  expect: {
+    timeout: 5000,
+  },
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 4 : 1,
+  reporter: [
+    ['junit', { outputFile: 'test-results/results.xml' }],
+    ['json', { outputFile: 'test-results/results.json' }],
+    ['html', { outputFolder: 'test-results/html-report', open: 'never' }],
+    ['list'],
+  ],
+  use: {
+    actionTimeout: 10000,
+    navigationTimeout: 10000,
+    viewport: { width: 1366, height: 768 },
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    launchOptions: {
+      slowMo: 500,
+    },
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ]
+};
+
+export default config;

package/visual-tests/runConfig.ts

@@ -0,0 +1 @@
+export const baseUrl = 'http://localhost:4200'

package/components/accordion/accordion.component.d.ts

@@ -1,76 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { AccordionVariant } from './accordion.model';
-import { IconName } from '../icon/icon.model';
-import * as i0 from "@angular/core";
-export declare class AccordionComponent {
-    private readonly defaultAppTheme;
-    /**
-     * The label displayed for the accordion.
-     * @type {string}
-     * @required
-     * @memberof AccordionComponent
-     */
-    label: string;
-    /**
-     * Determines whether the accordion is initially open.
-     * @type {boolean}
-     * @default false
-     * @memberof AccordionComponent
-     */
-    open: boolean;
-    /**
-     * Disables the accordion if set to true.
-     * @type {boolean}
-     * @default false
-     * @memberof AccordionComponent
-     */
-    disabled: boolean;
-    /**
-     * Indicates whether to show a premium icon.
-     * @type {boolean}
-     * @default false
-     * @memberof AccordionComponent
-     */
-    showPremiumIcon: boolean;
-    /**
-     * The tooltip text for the premium icon.
-     * @type {string}
-     * @default ''
-     * @memberof AccordionComponent
-     */
-    premiumTooltipText: string;
-    /**
-     *
-     * Defines the application theme where accordion is used
-     *
-     * @type {ApplicationTheme}
-     * @memberof AccordionComponent
-     */
-    applicationTheme: ApplicationTheme;
-    /**
-     *
-     * Changed premium icon on this icon
-     *
-     * @type {IconName}
-     * @memberof AccordionComponent
-     */
-    labelIcon: IconName;
-    /**
-     *
-     * Select accordion variant. Don`t work on Classic theme
-     *
-     * @type {AccordionVariant}
-     * @memberof AccordionComponent
-     */
-    variant: AccordionVariant;
-    closed: EventEmitter<void>;
-    opened: EventEmitter<void>;
-    constructor(defaultAppTheme: ApplicationTheme);
-    protected toggle(open: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ui-accordion", never, { "label": { "alias": "label"; "required": true; }; "open": { "alias": "open"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showPremiumIcon": { "alias": "showPremiumIcon"; "required": false; }; "premiumTooltipText": { "alias": "premiumTooltipText"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "labelIcon": { "alias": "labelIcon"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[subHeader]", "[actions]", "*"], false, never>;
-    static ngAcceptInputType_open: unknown;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_showPremiumIcon: unknown;
-}

package/components/accordion/accordion.component.module.d.ts

@@ -1,12 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./accordion.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../icon/icon.component.module";
-import * as i4 from "../button/button.component.module";
-import * as i5 from "@angular/material/tooltip";
-import * as i6 from "@angular/material/expansion";
-export declare class AccordionComponentModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AccordionComponentModule, [typeof i1.AccordionComponent], [typeof i2.CommonModule, typeof i3.IconComponentModule, typeof i4.ButtonComponentModule, typeof i5.MatTooltipModule, typeof i6.MatExpansionModule], [typeof i1.AccordionComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AccordionComponentModule>;
-}

package/components/alert-banner/alert-banner.component.d.ts

@@ -1,89 +0,0 @@
-import { OnInit } from '@angular/core';
-import { IconName } from '../../components/icon/icon.model';
-import { AlertBarType, AlertVariant } from '../../utils/alert-bar.model';
-import { LinkTargetType } from './alert-banner.model';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import * as i0 from "@angular/core";
-export declare class AlertBannerComponent implements OnInit {
-    private readonly defaultAppTheme;
-    private domSanitizer;
-    constructor(defaultAppTheme: ApplicationTheme, domSanitizer: DomSanitizer);
-    /**
-     * Alert Banner type
-     *
-     * @type {AlertBarType}
-     * @memberof AlertBannerComponent
-     */
-    alertType: AlertBarType;
-    /**
-     * Alert Banner variant
-     *
-     * @type {AlertVariant}
-     * @memberof AlertBannerComponent
-     */
-    alertVariant: AlertVariant;
-    /**
-     * Alert banner message
-     *
-     * @memberof AlertBannerComponent
-     */
-    set message(msg: string);
-    /**
-     * Include dismmiss button
-     *
-     * @memberof AlertBannerComponent
-     */
-    includeDismissButton: boolean;
-    /**
-     * Include shadow or not
-     *
-     * @memberof AlertBannerComponent
-     */
-    shadow: boolean;
-    /**
-     * Link text that will appended at the end of message
-     *
-     * @memberof AlertBannerComponent
-     */
-    linkText?: string | undefined;
-    /**
-     * Link url
-     *
-     * @memberof AlertBannerComponent
-     */
-    linkUrl?: string;
-    /**
-     * Link target
-     *
-     * @type {@type {LinkTargetType}}
-     * @memberof AlertBannerComponent
-     */
-    linkTarget?: LinkTargetType;
-    /**
-     *
-     * Defines the application theme
-     *
-     * @type {ApplicationTheme}
-     * @memberof AlertBannerComponent
-     */
-    applicationTheme: ApplicationTheme;
-    /**
-     * Sets the full width
-     *
-     * @type {boolean}
-     * @memberof AlertBannerComponent
-     */
-    isFullWidth: boolean | undefined;
-    iconName: IconName;
-    visible: boolean;
-    fullWidth: boolean;
-    fixed: boolean;
-    position: string;
-    cssClass: string;
-    _message: SafeHtml;
-    ngOnInit(): void;
-    dismissClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AlertBannerComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlertBannerComponent, "ui-alert-banner", never, { "alertType": { "alias": "alertType"; "required": false; }; "alertVariant": { "alias": "alertVariant"; "required": false; }; "message": { "alias": "message"; "required": false; }; "includeDismissButton": { "alias": "includeDismissButton"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "linkText": { "alias": "linkText"; "required": false; }; "linkUrl": { "alias": "linkUrl"; "required": false; }; "linkTarget": { "alias": "linkTarget"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "isFullWidth": { "alias": "isFullWidth"; "required": false; }; }, {}, never, never, false, never>;
-}

package/components/alert-banner/alert-banner.component.module.d.ts

@@ -1,10 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./alert-banner.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../button/button.component.module";
-import * as i4 from "../icon/icon.component.module";
-export declare class AlertBannerComponentModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AlertBannerComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AlertBannerComponentModule, [typeof i1.AlertBannerComponent], [typeof i2.CommonModule, typeof i3.ButtonComponentModule, typeof i4.IconComponentModule], [typeof i1.AlertBannerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AlertBannerComponentModule>;
-}