@testgorilla/tgo-ui 2.30.13 → 2.31.1

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/alert-banner-component.ts

@@ -0,0 +1,44 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class AlertBannerComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public alertType: string = 'success',
+    public alertVariant: string = 'banner',
+    public message: string = '',
+    public includeDismissButton: boolean = true,
+    public shadow: boolean = false,
+    public linkText: string = '',
+    public linkUrl: string = '',
+    public linkTarget: string = '_blank',
+    public applicationTheme: string = 'light',
+    public isFullWidth: boolean = false,
+    public closeButtonTooltip: string = '',
+    public language: string = 'en', // Assuming 'en' is the default language
+  ) {
+    super(page, 'ui-alert-banner', 'alert-banner');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.alertType) params.append('alertType', this.alertType);
+    if (this.alertVariant) params.append('alertVariant', this.alertVariant);
+    if (this.message) params.append('message', this.message);
+    if (this.includeDismissButton !== undefined) params.append('includeDismissButton', this.includeDismissButton.toString());
+    if (this.shadow !== undefined) params.append('shadow', this.shadow.toString());
+    if (this.linkText) params.append('linkText', this.linkText);
+    if (this.linkUrl) params.append('linkUrl', this.linkUrl);
+    if (this.linkTarget) params.append('linkTarget', this.linkTarget);
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+    if (this.isFullWidth !== undefined) params.append('isFullWidth', this.isFullWidth.toString());
+    if (this.closeButtonTooltip) params.append('closeButtonTooltip', this.closeButtonTooltip);
+    if (this.language) params.append('language', this.language);
+
+    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/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/badge-component.ts

@@ -0,0 +1,33 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class BadgeComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public label: string = '',
+        public icon: string = '',
+        public color: string = '',
+        public variant: string = '',
+        public notificationsAmount: number = 0,
+        public applicationTheme: string = '',
+        public rebrandColor: string = ''
+    ) {
+        super(page, 'ui-badge', 'badge');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.label) params.append('label', this.label);
+        if (this.icon) params.append('icon', this.icon);
+        if (this.variant) params.append('variant', this.variant);
+        if (this.notificationsAmount) params.append('notificationsAmount', this.notificationsAmount.toString());
+        if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+        if (this.rebrandColor) params.append('rebrandColor', this.rebrandColor);
+
+        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-page-objects/button-component.ts

@@ -0,0 +1,58 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class ButtonComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public size: string = '',
+    public variant: string = '',
+    public label: string = '',
+    public iconPosition: string = '',
+    public justIcon: boolean = false,
+    public iconName: string = '',
+    public disabled: boolean = false,
+    public loading: boolean = false,
+    public fullWidth: boolean = false,
+    public url: string = '',
+    public urlTarget: string = '',
+    public value: string = '',
+    public tooltip: string = '',
+    public isPremium: boolean = false,
+    public type: string = '',
+    public companyColor: string | null = '',
+    public buttonBadgeConfig: string = '',
+    public applicationTheme: string = '',
+    public disabledScaleOnClick: boolean = false,
+  ) {
+    super(page, 'ui-button', 'button');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.size) params.append('size', this.size);
+    if (this.variant) params.append('variant', this.variant);
+    if (this.label) params.append('label', this.label);
+    if (this.iconPosition) params.append('iconPosition', this.iconPosition);
+    if (this.justIcon) params.append('justIcon', this.justIcon.toString());
+    if (this.iconName) params.append('iconName', this.iconName);
+    if (this.disabled) params.append('disabled', this.disabled.toString());
+    if (this.loading) params.append('loading', this.loading.toString());
+    if (this.fullWidth) params.append('fullWidth', this.fullWidth.toString());
+    if (this.url) params.append('url', this.url);
+    if (this.urlTarget) params.append('urlTarget', this.urlTarget);
+    if (this.value) params.append('value', this.value);
+    if (this.tooltip) params.append('tooltip', this.tooltip);
+    if (this.isPremium) params.append('isPremium', this.isPremium.toString());
+    if (this.type) params.append('type', this.type);
+    if (this.companyColor) params.append('companyColor', this.companyColor);
+    if (this.buttonBadgeConfig) params.append('buttonBadgeConfig', this.buttonBadgeConfig);
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+    if (this.disabledScaleOnClick) params.append('disabledScaleOnClick', this.disabledScaleOnClick.toString());
+
+    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/card-component.ts

@@ -0,0 +1,28 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class CardComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public size: string = 'medium',
+    public variant: string = 'default',
+    public applicationTheme: string = 'light',
+    public errors: string[] = [],
+  ) {
+    super(page, 'ui-card', 'card');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.size) params.append('size', this.size);
+    if (this.variant) params.append('variant', this.variant);
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+    if (this.errors.length > 0) params.append('errors', this.errors.join(','));
+
+    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/checkbox-component.ts

@@ -0,0 +1,38 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class CheckboxComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public label: string = '',
+        public name: string = '',
+        public companyColor: string | null = '',
+        public checked: boolean = false,
+        public multiple: boolean = false,
+        public applicationTheme: string = 'light',
+        public indeterminate: boolean = false,
+        public disabled: boolean = false,
+        public hasError: boolean = false
+    ) {
+        super(page, 'ui-checkbox', 'checkbox');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.label) params.append('label', this.label);
+        if (this.name) params.append('name', this.name);
+        if (this.companyColor) params.append('companyColor', this.companyColor);
+        if (this.checked) params.append('checked', this.checked.toString());
+        if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+        if (this.multiple) params.append('multiple', this.multiple.toString());
+        if (this.disabled) params.append('disabled', this.disabled.toString());
+        if (this.indeterminate) params.append('indeterminate', this.indeterminate.toString());
+        if (this.hasError) params.append('hasError', this.hasError.toString());
+
+        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/field-component.ts

@@ -0,0 +1,68 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class FieldComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public label: string = '',
+    public fieldName: string = '',
+    public placeholder: string = '',
+    public id: string = '',
+    public value: string = '',
+    public errors: string[] = [],
+    public disabled: boolean = false,
+    public required: boolean = false,
+    public hintMessage: string = '',
+    public type: string = 'text',
+    public updateOnBlur: boolean = false,
+    public allowOnlyDigits: boolean = false,
+    public showBottomContent: boolean = true,
+    public applicationTheme: string = 'light',
+    public ariaLabel: string = '',
+    public ariaRequired: boolean = false,
+    public loading: boolean = false,
+    public isValid: boolean = false,
+    public maxCharacters: number = 255,
+    public trimOnBlur: boolean = false,
+    public trimOnSubmit: boolean = false,
+    public maxRows: number = 0,
+    public hideBuiltInErrors: boolean = false,
+    public hideLabelInErrors: boolean = false,
+  ) {
+    super(page, 'ui-field', 'field');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.label) params.append('label', this.label);
+    if (this.fieldName) params.append('fieldName', this.fieldName);
+    if (this.placeholder) params.append('placeholder', this.placeholder);
+    if (this.id) params.append('id', this.id);
+    if (this.value) params.append('value', this.value);
+    if (this.errors.length > 0) params.append('errors', this.errors.join(','));
+    if (this.disabled) params.append('disabled', this.disabled.toString());
+    if (this.required) params.append('required', this.required.toString());
+    if (this.hintMessage) params.append('hintMessage', this.hintMessage);
+    if (this.type) params.append('type', this.type);
+    if (this.updateOnBlur) params.append('updateOnBlur', this.updateOnBlur.toString());
+    if (this.allowOnlyDigits) params.append('allowOnlyDigits', this.allowOnlyDigits.toString());
+    if (this.showBottomContent) params.append('showBottomContent', this.showBottomContent.toString());
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+    if (this.ariaLabel) params.append('ariaLabel', this.ariaLabel);
+    if (this.ariaRequired) params.append('ariaRequired', this.ariaRequired.toString());
+    if (this.loading) params.append('loading', this.loading.toString());
+    if (this.isValid) params.append('isValid', this.isValid.toString());
+    if (this.maxCharacters) params.append('maxCharacters', this.maxCharacters.toString());
+    if (this.trimOnBlur) params.append('trimOnBlur', this.trimOnBlur.toString());
+    if (this.trimOnSubmit) params.append('trimOnSubmit', this.trimOnSubmit.toString());
+    if (this.maxRows) params.append('maxRows', this.maxRows.toString());
+    if (this.hideBuiltInErrors) params.append('hideBuiltInErrors', this.hideBuiltInErrors.toString());
+    if (this.hideLabelInErrors) params.append('hideLabelInErrors', this.hideLabelInErrors.toString());
+
+    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/icon-component.ts

@@ -0,0 +1,32 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class IconComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public name: string = '',
+        public color: string = '',
+        public size: string = '',
+        public filled: boolean = false,
+        public applicationTheme: string = '',
+        public cssClass: string = '',
+    ) {
+        super(page, 'ui-icon', 'icon');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.name) params.append('name', this.name);
+        if (this.color) params.append('color', this.color);
+        if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+        if (this.filled) params.append('filled', this.filled.toString());
+        if (this.size) params.append('size', this.size);
+        if (this.cssClass) params.append('cssClass', this.cssClass);
+
+        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/logo-component.ts

@@ -0,0 +1,28 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class LogoComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public label: string = '',
+    public width: string = '',
+    public type: string = '',
+    public applicationTheme: string = '',
+  ) {
+    super(page, 'ui-logo', 'logo');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.label) params.append('label', this.label);
+    if (this.width) params.append('width', this.width);
+    if (this.type) params.append('type', this.type);
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+
+    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/radio-button-component.ts

@@ -0,0 +1,44 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class RadioComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public disabled: boolean = false,
+    public selected: boolean = false,
+    public allowUnselect: boolean = false,
+    public companyColor: string = '#46A997',
+    public name: string = '',
+    public label: string = '',
+    public multiple: boolean = false,
+    public value: any = null,
+    public applicationTheme: string = 'light',
+    public ariaLabel: string = '',
+    public ariaRequired: boolean = false,
+    public hasError: boolean = false,
+  ) {
+    super(page, 'ui-radio-button', 'radio');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.disabled !== undefined) params.append('disabled', this.disabled.toString());
+    if (this.selected !== undefined) params.append('selected', this.selected.toString());
+    if (this.allowUnselect !== undefined) params.append('allowUnselect', this.allowUnselect.toString());
+    if (this.companyColor) params.append('companyColor', this.companyColor);
+    if (this.name) params.append('name', this.name);
+    if (this.label) params.append('label', this.label);
+    if (this.multiple !== undefined) params.append('multiple', this.multiple.toString());
+    if (this.value !== null) params.append('value', this.value.toString());
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+    if (this.ariaLabel) params.append('ariaLabel', this.ariaLabel);
+    if (this.ariaRequired !== undefined) params.append('ariaRequired', this.ariaRequired.toString());
+    if (this.hasError !== undefined) params.append('hasError', this.hasError.toString());
+
+    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/snackbar-component.ts

@@ -0,0 +1,43 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class SnackbarComponent extends BaseComponent {
+
+  constructor(
+    page: Page,
+    public snackbarType = '',
+    public variant: string = '',
+    public message = '',
+    public fixed = true,
+    public html: string = '',
+    public seconds = 5,
+    public includeDismissButton = true,
+    public linkText: string = '',
+    public linkUrl: string = '',
+    public linkTarget: string = '',
+    public applicationTheme = '',
+  ) {
+    super(page, 'ui-snackbar', 'snackbar');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.snackbarType) params.append('snackbarType', this.snackbarType);
+    if (this.message) params.append('message', this.message);
+    if (this.html) params.append('html', this.html);
+    if (this.seconds) params.append('seconds', this.seconds.toString());
+    if (this.includeDismissButton) params.append('includeDismissButton', this.includeDismissButton.toString());
+    if (this.fixed) params.append('fixed', this.fixed.toString());
+    if (this.linkText) params.append('linkText', this.linkText);
+    if (this.linkUrl) params.append('linkUrl', this.linkUrl);
+    if (this.linkTarget) params.append('linkTarget', this.linkTarget);
+    if (this.variant) params.append('variant', this.variant);
+    if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+
+    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/spinner-component.ts

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