@ngneers/controls-playwright 0.0.1-pre1

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ngneers/controls-playwright",
+  "version": "0.0.1-pre1",
+  "description": "Playwright testing harness with page-object helpers for @ngneers/controls components.",
+  "license": "MIT",
+  "homepage": "https://ngneers.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NGneers/controls.git",
+    "directory": "packages/playwright"
+  },
+  "keywords": [
+    "angular",
+    "playwright",
+    "testing",
+    "e2e",
+    "page-object",
+    "ngneers-controls"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "prebuild": "pnpm rimraf ./dist",
+    "build": "pnpm prebuild && tsc -p ./tsconfig.lib.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@ngneers/controls": "workspace:*",
+    "@ngneers/controls-themes": "workspace:*"
+  },
+  "devDependencies": {
+    "rimraf": "^6.1.3",
+    "typescript": "catalog:"
+  }
+}

package/src/components/accordion.ts

@@ -0,0 +1,50 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { accordionControlTemplate } from '@ngneers/controls-themes/templates/accordion';
+import { accordionPanelControlTemplate } from '@ngneers/controls-themes/templates/accordion-panel';
+
+export class NgnAccordionHarness {
+  public readonly classes = themeClasses(accordionPanelControlTemplate);
+
+  public readonly panels: Locator;
+
+  constructor(public locator: Locator) {
+    this.panels = this.locator.locator(this.classes['root']);
+  }
+
+  public getPanelByIndex(index: number): NgnAccordionPanelHarness {
+    return new NgnAccordionPanelHarness(this.panels.nth(index));
+  }
+
+  public expectPanelCount(count: number) {
+    return expect(this.panels).toHaveCount(count);
+  }
+}
+
+export class NgnAccordionPanelHarness {
+  public readonly classes = themeClasses(accordionPanelControlTemplate);
+
+  public readonly header: Locator;
+  public readonly content: Locator;
+
+  constructor(public locator: Locator) {
+    this.header = this.locator.locator(this.classes['header']);
+    this.content = this.locator.locator(this.classes['content']);
+  }
+
+  public expectHeaderText(expected: string) {
+    return expect(this.header).toHaveText(expected);
+  }
+
+  public expectExpanded(expanded = true) {
+    return expect(this.header).toHaveAttribute('aria-expanded', String(expanded));
+  }
+
+  public expectDisabled(disabled = true) {
+    return expect(this.header).toBeDisabled();
+  }
+
+  public async toggle() {
+    await this.header.click();
+  }
+}

package/src/components/avatar.ts

@@ -0,0 +1,17 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { avatarControlTemplate } from '@ngneers/controls-themes/templates/avatar';
+
+export class NgnAvatarHarness {
+  public readonly classes = themeClasses(avatarControlTemplate);
+
+  constructor(public locator: Locator) {}
+
+  public expectInitials(expected: string) {
+    return expect(this.locator.locator(this.classes.initials)).toHaveText(expected);
+  }
+
+  public expectImageSrc(expected: string) {
+    return expect(this.locator.locator(this.classes.image)).toHaveAttribute('src', expected);
+  }
+}

package/src/components/breadcrumb.ts

@@ -0,0 +1,17 @@
+import type { Locator } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { breadcrumbControlTemplate } from '@ngneers/controls-themes/templates/breadcrumb';
+import { NgnItemViewHarness } from './item-view';
+import { NgnMenuHarness } from './menu';
+
+export class NgnBreadcrumbHarness {
+  public readonly classes = themeClasses(breadcrumbControlTemplate);
+
+  public readonly itemView: NgnItemViewHarness;
+  public readonly overflowMenu: NgnMenuHarness;
+
+  constructor(public locator: Locator) {
+    this.itemView = new NgnItemViewHarness(this.locator.locator(this.classes['item-view']['root']));
+    this.overflowMenu = new NgnMenuHarness(this.locator.locator(this.classes['menu']['root']));
+  }
+}

package/src/components/button-group.ts

@@ -0,0 +1,18 @@
+import { expect, type Locator } from '@playwright/test';
+import { NgnButtonHarness } from './button';
+
+export class NgnButtonGroupHarness {
+  public readonly buttons: Locator;
+
+  constructor(public locator: Locator) {
+    this.buttons = locator.locator('button[ngnButton]');
+  }
+
+  public async expectItemCount(count: number) {
+    await expect(this.buttons).toHaveCount(count);
+  }
+
+  public getButtonAt(index: number): NgnButtonHarness {
+    return new NgnButtonHarness(this.buttons.nth(index));
+  }
+}

package/src/components/button.ts

@@ -0,0 +1,5 @@
+import type { Locator } from '@playwright/test';
+
+export class NgnButtonHarness {
+  constructor(public locator: Locator) {}
+}

package/src/components/calendar.ts

@@ -0,0 +1,67 @@
+import { type Locator, expect } from '@playwright/test';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+import { themeClasses } from '../utils/theme';
+import { NgnSelectHarness } from './select';
+import type { WeekDay } from '@ngneers/controls/calendar';
+import { en } from '@ngneers/controls/i18n/translations/en';
+
+export class NgnCalendarHarness {
+  public readonly classes = themeClasses(calendarControlTemplate);
+
+  public readonly backButton: Locator;
+  public readonly nextButton: Locator;
+  public readonly currentMonth: NgnSelectHarness;
+  public readonly currentYear: NgnSelectHarness;
+  public readonly days: Locator;
+  public readonly day: Locator;
+  public readonly daySameMonth: Locator;
+  public readonly dayOtherMonth: Locator;
+  public readonly daySelected: Locator;
+  public readonly weekDay: Locator;
+
+  constructor(public locator: Locator) {
+    this.backButton = locator.locator(this.classes.previous['root']);
+    this.nextButton = locator.locator(this.classes.next['root']);
+    this.currentMonth = new NgnSelectHarness(
+      locator.locator(this.classes['current-month']['root'])
+    );
+    this.currentYear = new NgnSelectHarness(locator.locator(this.classes['current-year']['root']));
+    this.days = locator.locator(this.classes.days);
+    this.day = locator.locator(this.classes.day);
+    this.daySameMonth = locator.locator(
+      `${this.classes.day}:not(${this.classes['day-other-month']})`
+    );
+    this.dayOtherMonth = locator.locator(`${this.classes.day}${this.classes['day-other-month']}`);
+    this.daySelected = locator.locator(this.classes['day-selected']);
+    this.weekDay = locator.locator(this.classes['week-day']);
+  }
+
+  public expectDate(year: string, month: string, day: string) {
+    return Promise.all([
+      this.currentYear.inputEditable.expectValue(year),
+      this.currentMonth.expectSelectedItemText(month),
+      expect(this.daySelected).toHaveText(day),
+    ]);
+  }
+
+  public expectFirstWeekday(weekday: WeekDay) {
+    return expect(this.weekDay.first()).toHaveText(en.calendar.weekdaysShort[weekday]);
+  }
+
+  public selectDay(day: number) {
+    return this.daySameMonth.nth(day - 1).click();
+  }
+
+  /**
+   * Select a month in the calendar while in months view
+   * @param month the month to select (1-12)
+   */
+  public async selectMonth(month: number) {
+    await this.currentMonth.open();
+    await this.currentMonth.clickItemByIndex(month - 1);
+  }
+
+  public async selectDayFromOtherMonth(day: number) {
+    return this.dayOtherMonth.filter({ hasText: new RegExp(`^\\s*${day}\\s*$`) }).click();
+  }
+}

package/src/components/chip.ts

@@ -0,0 +1,43 @@
+import { chipControlTemplate } from '@ngneers/controls-themes/templates/chip';
+import { themeClasses } from '../utils/theme';
+import test, { expect, type Locator } from '@playwright/test';
+
+export class NgnChipHarness {
+  public readonly classes = themeClasses(chipControlTemplate);
+
+  public readonly locator: Locator;
+  public readonly content: Locator;
+  public readonly closeButton: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this.content = locator.locator(this.classes.content);
+    this.closeButton = locator.locator(this.classes['close-button']);
+  }
+
+  public async click() {
+    await this.content.click();
+  }
+
+  public async close() {
+    await this.closeButton.click();
+  }
+
+  public async expectState(state: { actionable?: boolean; closable?: boolean }) {
+    if (state.actionable !== undefined) {
+      if (state.actionable) {
+        await expect(this.locator).toHaveClass(this.classes.actionable);
+      } else {
+        await expect(this.locator).not.toHaveClass(this.classes.actionable);
+      }
+    }
+
+    if (state.closable !== undefined) {
+      if (state.closable) {
+        await expect(this.locator).toHaveClass(this.classes.closable);
+      } else {
+        await expect(this.locator).not.toHaveClass(this.classes.closable);
+      }
+    }
+  }
+}

package/src/components/edit-inplace.ts

@@ -0,0 +1,34 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';
+import { NgnInplaceHarness } from './inplace';
+
+export class NgnEditInplaceHarness {
+  public readonly classes = themeClasses(editInplaceControlTemplate);
+
+  public readonly inplace: NgnInplaceHarness;
+  public readonly input: Locator;
+  public readonly closeButton: Locator;
+
+  constructor(public locator: Locator) {
+    this.inplace = new NgnInplaceHarness(this.locator.locator(this.classes['inplace']['root']));
+    this.input = this.locator.locator(this.classes['default-edit-input']);
+    this.closeButton = this.locator.locator(this.classes['default-edit-close-button']);
+  }
+
+  public async fillInput(value: string) {
+    await this.input.fill(value);
+  }
+
+  public async expectInputValue(value: string) {
+    await expect(this.input).toHaveValue(value);
+  }
+
+  public async clickCloseButton() {
+    await this.closeButton.click();
+  }
+
+  public async pressEnter() {
+    await this.input.press('Enter');
+  }
+}

package/src/components/filter.ts

@@ -0,0 +1,70 @@
+import { expect, type Locator } from '@playwright/test';
+import { filterControlTemplate } from '@ngneers/controls-themes/templates/filter';
+import { themeClasses } from '../utils/theme';
+import { NGN_CLASSES } from '../utils/classes';
+import { NgnInputHarness } from './input';
+import { NgnSelectHarness } from './select';
+
+export class NgnFilterHarness {
+  public readonly classes = themeClasses(filterControlTemplate);
+
+  public readonly trigger: Locator;
+  public readonly popoverContent: Locator;
+
+  constructor(public locator: Locator) {
+    this.trigger = locator.locator(this.classes['input-field']['root']);
+    this.popoverContent = locator.locator(this.classes['popover-content']);
+  }
+
+  public async expectOpened(opened = true): Promise<void> {
+    await expect(this.popoverContent).toBeVisible({ visible: opened });
+  }
+
+  public async open(): Promise<void> {
+    await this.trigger.click();
+    await this.expectOpened(true);
+  }
+
+  public row(index: number): Locator {
+    return this.locator.locator(this.classes['row']).nth(index);
+  }
+
+  public operatorSelect(index: number): NgnSelectHarness {
+    return new NgnSelectHarness(this.row(index).locator(this.classes['operator']['root']));
+  }
+
+  /** Select inside row using the 'value' ptClass (e.g. boolean operator or list select). */
+  public valueSelect(index: number): NgnSelectHarness {
+    return new NgnSelectHarness(this.row(index).locator(this.classes['value']['root']));
+  }
+
+  public valueInput(index: number): NgnInputHarness {
+    return new NgnInputHarness(
+      this.row(index).locator(`${this.classes['value']['root']} ${NGN_CLASSES.input['root']}`)
+    );
+  }
+
+  public removeButton(index: number): Locator {
+    return this.row(index).locator(this.classes['remove-btn']['root']);
+  }
+
+  public addConditionButton(): Locator {
+    return this.locator.locator('[data-testid="filter-add-rule"]');
+  }
+
+  public matchModeDivider(): Locator {
+    return this.locator.locator('[data-testid="filter-match-mode"]');
+  }
+
+  public clearButton(): Locator {
+    return this.locator.locator('[data-testid="filter-clear"]');
+  }
+
+  public applyButton(): Locator {
+    return this.locator.locator('[data-testid="filter-apply"]');
+  }
+
+  public cancelButton(): Locator {
+    return this.locator.locator('[data-testid="filter-cancel"]');
+  }
+}

package/src/components/hint.ts

@@ -0,0 +1,25 @@
+import { hintControlTemplate } from '@ngneers/controls-themes/templates/hint';
+import { themeClasses } from '../utils/theme';
+import { expect, type Locator } from '@playwright/test';
+
+export class NgnHintHarness {
+  public readonly classes = themeClasses(hintControlTemplate);
+
+  public readonly locator: Locator;
+  public readonly content: Locator;
+  public readonly icon: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this.content = locator.locator(this.classes.content);
+    this.icon = locator.locator(this.classes.icon);
+  }
+
+  public async expectIcon(hasIcon: boolean) {
+    if (hasIcon) {
+      await expect(this.icon).toBeVisible();
+    } else {
+      await expect(this.icon).not.toBeVisible();
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,37 @@
+export * from './accordion';
+export * from './avatar';
+export * from './breadcrumb';
+export * from './button-group';
+export * from './button';
+export * from './calendar';
+export * from './chip';
+export * from './edit-inplace';
+export * from './inplace';
+export * from './filter';
+export * from './hint';
+export * from './input';
+export * from './input-field';
+export * from './mask-input';
+export * from './item-view';
+export * from './list-box';
+export * from './menu';
+export * from './message';
+export * from './popover';
+export * from './progress';
+export * from './radio';
+export * from './scroller';
+export * from './filter';
+export * from './select';
+export * from './select-button';
+export * from './slider';
+export * from './snackbar';
+export * from './spinner';
+export * from './state';
+export * from './switch';
+export * from './tabs';
+export * from './tag';
+export * from './toast';
+export * from './toggle-button';
+export * from './tooltip';
+export * from './tree';
+export * from './upload';

package/src/components/inplace.ts

@@ -0,0 +1,33 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { inplaceControlTemplate } from '@ngneers/controls-themes/templates/inplace';
+
+export class NgnInplaceHarness {
+  public readonly classes = themeClasses(inplaceControlTemplate);
+
+  public readonly display: Locator;
+  public readonly content: Locator;
+
+  constructor(public locator: Locator) {
+    this.display = this.locator.locator(this.classes['display']);
+    this.content = this.locator.locator(this.classes['content']);
+  }
+
+  public expectDisplayVisible(visible = true) {
+    if (visible) {
+      return expect(this.display).toBeVisible();
+    }
+    return expect(this.display).not.toBeVisible();
+  }
+
+  public expectContentVisible(visible = true) {
+    if (visible) {
+      return expect(this.content).toBeVisible();
+    }
+    return expect(this.content).not.toBeVisible();
+  }
+
+  public async clickDisplay() {
+    await this.display.click();
+  }
+}

package/src/components/input-field.ts

@@ -0,0 +1,16 @@
+import type { Locator } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+
+export class NgnInputFieldHarness<T extends Record<string, any> = Record<string, any>> {
+  public readonly classes = themeClasses(inputFieldControlTemplate);
+
+  public readonly children: T;
+
+  constructor(
+    public locator: Locator,
+    children?: (locator: Locator) => T
+  ) {
+    this.children = children?.(locator) ?? ({} as T);
+  }
+}

package/src/components/input.ts

@@ -0,0 +1,32 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { inputControlTemplate } from '@ngneers/controls-themes/templates/input';
+
+export class NgnInputHarness {
+  public readonly classes = themeClasses(inputControlTemplate);
+
+  public readonly locator: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+  }
+
+  public expectValue(value: string): Promise<void> {
+    return expect(this.locator).toHaveValue(value);
+  }
+  public clear(): Promise<void> {
+    return this.locator.clear();
+  }
+
+  public fill(value: string): Promise<void> {
+    return this.locator.fill(value);
+  }
+
+  public pressSequentially(text: string): Promise<void> {
+    return this.locator.pressSequentially(text, { delay: 5 });
+  }
+
+  public press(key: string): Promise<void> {
+    return this.locator.press(key);
+  }
+}

package/src/components/item-view.ts

@@ -0,0 +1,48 @@
+import { expect, type Locator } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { itemViewControlTemplate } from '@ngneers/controls-themes/templates/item-view';
+
+export class NgnItemViewHarness {
+  public readonly classes = themeClasses(itemViewControlTemplate);
+  public readonly item: Locator;
+  public readonly itemVisible: Locator;
+  public readonly itemOverflowing: Locator;
+  public readonly overflowItem: Locator;
+
+  constructor(public locator: Locator) {
+    this.item = locator.locator(this.classes['item']);
+    this.itemVisible = locator.locator(
+      `${this.classes['item']}:not(${this.classes['item-overflowing']})`
+    );
+    this.itemOverflowing = locator.locator(this.classes['item-overflowing']);
+    this.overflowItem = locator.locator(this.classes['more-items']);
+  }
+
+  public async expectItemCount(count: number) {
+    await expect(this.item).toHaveCount(count);
+  }
+
+  public async expectItemVisibleCount(count: number) {
+    await expect(this.itemVisible).toHaveCount(count);
+  }
+
+  public async expectItemOverflowingCount(count: number) {
+    await expect(this.itemOverflowing).toHaveCount(count);
+  }
+
+  public async expectItemTexts(texts: string[]) {
+    await expect(this.item).toHaveText(texts);
+  }
+
+  public async expectItemVisibleTexts(texts: string[]) {
+    await expect(this.itemVisible).toHaveText(texts);
+  }
+
+  public async expectItemOverflowingTexts(texts: string[]) {
+    await expect(this.itemOverflowing).toHaveText(texts);
+  }
+
+  public getItemByIndex(index: number) {
+    return this.itemVisible.nth(index);
+  }
+}

package/src/components/list-box.ts

@@ -0,0 +1,25 @@
+import { expect, type Locator } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { listBoxControlTemplate } from '@ngneers/controls-themes/templates/list-box';
+import { NgnScrollerHarness } from './scroller';
+
+export class NgnListBoxHarness {
+  public readonly classes = themeClasses(listBoxControlTemplate);
+  public readonly group: Locator;
+  public readonly item: Locator;
+  public readonly itemHighlighted: Locator;
+  public readonly itemSelected: Locator;
+  public readonly scroller: NgnScrollerHarness;
+
+  constructor(public locator: Locator) {
+    this.group = locator.locator(this.classes['group']);
+    this.item = locator.locator(this.classes['item']);
+    this.itemHighlighted = locator.locator(this.classes['item-highlighted']);
+    this.itemSelected = locator.locator(this.classes['item-selected']);
+    this.scroller = new NgnScrollerHarness(locator.locator(this.classes['scroller']['root']));
+  }
+
+  public expectItemsCount(count: number) {
+    return expect(this.item).toHaveCount(count);
+  }
+}