@testgorilla/tgo-ui 2.30.13 → 2.31.1

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

@@ -0,0 +1,26 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class TooltipComponent extends BaseComponent {
+  constructor(
+    page: Page,
+    public position: string = 'top',
+    public message: string = '',
+    public applicationTheme: string = 'light'
+  ) {
+    super(page, 'ui-tooltip', 'tooltip');
+  }
+
+  async goTo(): Promise<void> {
+    const params = new URLSearchParams();
+
+    if (this.position) params.append('position', this.position);
+    if (this.message) params.append('message', this.message);
+    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-tests/alert-banner.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+import { AlertBannerComponent } from "../component-page-objects/alert-banner-component";
+
+
+test.describe('Alert Banner Component Visual Tests', () => {
+
+  test('should display the Alert Banner correctly', async ({page}) => {
+    const alert = new AlertBannerComponent(
+      page,
+      'info',
+      '',
+      'This is a alert banner info type'
+    );
+
+    await alert.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display the Alert Callout correctly', async ({page}) => {
+    const alert = new AlertBannerComponent(
+      page,
+      'info',
+      'callout',
+      'This is a alert callout info type'
+    );
+
+    await alert.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display the Alert Banner with dismiss button', async ({page}) => {
+    const alert = new AlertBannerComponent(
+      page,
+      'warning',
+      '',
+      'This is a alert banner no close button',
+      false
+    );
+
+    await alert.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display the Alert Banner with link', async ({page}) => {
+    const alert = new AlertBannerComponent(
+      page,
+      'error',
+      '',
+      'This is a alert banner with link',
+      false,
+      false,
+      'Link',
+      'https://ui.testgorilla.com/'
+    );
+
+    await alert.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+});

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

@@ -0,0 +1,91 @@
+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();
+    });
+
+  test('should display the avatar image', async ({page}) => {
+    const avatar = new AvatarComponent(
+      page,
+      '',
+      'large',
+      '/assets/Avatar.png',
+    );
+
+    await avatar.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+
+  test('should display small avatar ', async ({page}) => {
+    const avatar = new AvatarComponent(
+      page,
+      'John Doe',
+      'small',
+    );
+
+    await avatar.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display medium avatar ', async ({page}) => {
+    const avatar = new AvatarComponent(
+      page,
+      'John Doe',
+      'medium',
+    );
+
+    await avatar.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+
+  test('should display large avatar ', async ({page}) => {
+    const avatar = new AvatarComponent(
+      page,
+      'John Doe',
+      'large',
+    );
+
+    await avatar.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should emit edit click event', async ({ page }) => {
+    const avatar = new AvatarComponent(page, 'John Doe', 'large', '', '', true);
+    await avatar.goTo();
+    await page.getByRole('button').click();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+import { BadgeComponent } from '../component-page-objects/badge-component';
+
+test.describe('Badge Component Visual Tests', () => {
+    test('should display the badge correctly', async ({page}) => {
+        const badge = new BadgeComponent(
+            page,
+            'Testing Text'
+        );
+
+        await badge.goTo();
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
+
+  test('should display secondary badge ', async ({page}) => {
+    const badge = new BadgeComponent(
+      page,
+      'Testing Text',
+      '',
+      '',
+      'secondary',
+    );
+
+    await badge.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display notification badge ', async ({page}) => {
+    const badge = new BadgeComponent(
+      page,
+      'Testing Text',
+      '',
+      '',
+      'notification',
+      4
+    );
+
+    await badge.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display the badge with icon', async ({page}) => {
+    const badge = new BadgeComponent(
+      page,
+      'Testing Text',
+      'Test',
+    );
+
+    await badge.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,371 @@
+import { test, expect } from '@playwright/test';
+import { ButtonComponent } from "../component-page-objects/button-component";
+
+test.describe('Button Component Visual Tests', () => {
+    test('should display the Button correctly', async ({page}) => {
+        const buttonComponent = new ButtonComponent(
+            page,
+            '',
+          '',
+          'Button'
+        );
+
+        await buttonComponent.goTo();
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
+
+  test('should emit edit click event', async ({ page }) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button'
+    );
+
+    await buttonComponent.goTo();
+    await page.getByRole('button').click();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display the Button link', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'link',
+      'Button'
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display disabled Button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button',
+      '',
+      false,
+      '',
+      true
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display Button icon left', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button',
+      'left',
+      false,
+      'Test',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+
+  test('should display Button icon right', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button',
+      'right',
+      false,
+      'Test',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+
+  test('should display only Button icon', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      '',
+      '',
+      true,
+      'Test',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display Button full width', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      true
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display Button menu trigger', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'menuTrigger',
+      'Button',
+      '',
+      true,
+      'Test',
+      false,
+      false,
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display Button menu cell', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'menuCell',
+      'Button',
+      '',
+      true,
+      'Test',
+      false,
+      false,
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display premium Button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      true,
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display disabled scale', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      '',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      false,
+      '',
+      '',
+      '',
+      '',
+      true
+    );
+
+    await buttonComponent.goTo();
+    await page.getByRole('button').click();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display secondary button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'secondary',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      false,
+      '',
+      '',
+      '',
+      '',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display ghost button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'ghost',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      false,
+      '',
+      '',
+      '',
+      '',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display destructive button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'destructive',
+      'Button',
+      '',
+      false,
+      'Test',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      false,
+      '',
+      '',
+      '',
+      '',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+  test('should display tertiary button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'tertiary',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      false,
+      '',
+      '',
+      '',
+      '',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+
+
+  test('should display text button', async ({page}) => {
+    const buttonComponent = new ButtonComponent(
+      page,
+      '',
+      'text',
+      'Button',
+      '',
+      false,
+      '',
+      false,
+      false,
+      false,
+      '',
+      '',
+      '',
+      '',
+      false,
+      '',
+      '',
+      '',
+      '',
+      false
+    );
+
+    await buttonComponent.goTo();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchSnapshot();
+  });
+});