@ngneers/controls-playwright 0.0.1-pre1

package/src/components/spinner.ts

@@ -0,0 +1,27 @@
+import { spinnerControlTemplate } from '@ngneers/controls-themes/templates/spinner';
+import { themeClasses } from '../utils/theme';
+import test, { expect, type Locator } from '@playwright/test';
+
+export class NgnSpinnerHarness {
+  public readonly classes = themeClasses(spinnerControlTemplate);
+
+  public readonly locator: Locator;
+  public readonly svg: Locator;
+  public readonly circle: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this.svg = locator.locator(this.classes.svg);
+    this.circle = locator.locator(this.classes.circle);
+  }
+
+  public async expectVisible() {
+    await expect(this.locator).toBeVisible();
+    await expect(this.svg).toBeVisible();
+    await expect(this.circle).toBeVisible();
+  }
+
+  public async expectRole() {
+    await expect(this.locator).toHaveAttribute('role', 'status');
+  }
+}

package/src/components/state.ts

@@ -0,0 +1,37 @@
+import { stateControlTemplate } from '@ngneers/controls-themes/templates/state';
+import { expect, type Locator } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { NgnSpinnerHarness } from './spinner';
+
+export class NgnStateHarness {
+  public readonly classes = themeClasses(stateControlTemplate);
+
+  public readonly indicator: Locator;
+  public readonly icon: Locator;
+  public readonly spinner: NgnSpinnerHarness;
+
+  constructor(public readonly locator: Locator) {
+    this.indicator = locator.locator(this.classes.indicator);
+    this.icon = locator.locator('ngn-icon');
+    this.spinner = new NgnSpinnerHarness(locator.locator('ngn-spinner'));
+  }
+
+  public async expectLoading() {
+    await expect(this.locator).toBeVisible();
+    await this.spinner.expectVisible();
+    await expect(this.icon).toHaveCount(0);
+  }
+
+  public async expectIcon(kind: string) {
+    await expect(this.locator).toBeVisible();
+    await expect(this.locator).toHaveClass(
+      new RegExp(`(^|\\s)ngn-state-kind-${escapeRegExp(kind)}(\\s|$)`)
+    );
+    await expect(this.icon).toBeVisible();
+    await expect(this.spinner.locator).toHaveCount(0);
+  }
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/src/components/switch.ts

@@ -0,0 +1,43 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { switchControlTemplate } from '@ngneers/controls-themes/templates/switch';
+
+export class NgnSwitchHarness {
+  public readonly classes = themeClasses(switchControlTemplate);
+
+  public readonly locator: Locator;
+  public readonly input: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this.input = locator.locator(this.classes.input);
+  }
+
+  public async toggle(force = false) {
+    await this.input.click({ force });
+  }
+
+  public async expectValue(value: boolean) {
+    if (value) {
+      await expect(this.input).toBeChecked();
+    } else {
+      await expect(this.input).not.toBeChecked();
+    }
+  }
+
+  public async expectDisabled(disabled: boolean) {
+    if (disabled) {
+      await expect(this.input).toBeDisabled();
+    } else {
+      await expect(this.input).not.toBeDisabled();
+    }
+  }
+
+  public async expectReadonly(readonly: boolean) {
+    if (readonly) {
+      await expect(this.input).toHaveAttribute('aria-readonly');
+    } else {
+      await expect(this.input).not.toHaveAttribute('aria-readonly');
+    }
+  }
+}

package/src/components/tabs.ts

@@ -0,0 +1,50 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';
+
+export class NgnTabsHarness {
+  public readonly classes = themeClasses(tabsControlTemplate);
+
+  public readonly headers: Locator;
+  public readonly contents: Locator;
+
+  constructor(public locator: Locator) {
+    this.headers = this.locator.locator(this.classes['header']);
+    this.contents = this.locator.locator(this.classes['content']);
+  }
+
+  public getTabByIndex(index: number): NgnTabHarness {
+    return new NgnTabHarness(this, index);
+  }
+
+  public expectTabCount(count: number) {
+    return expect(this.headers).toHaveCount(count);
+  }
+}
+
+export class NgnTabHarness {
+  public readonly classes = themeClasses(tabsControlTemplate);
+
+  public readonly header: Locator;
+  public readonly content: Locator;
+
+  constructor(
+    public tabs: NgnTabsHarness,
+    public index: number
+  ) {
+    this.header = this.tabs.headers.nth(index);
+    this.content = this.tabs.contents.nth(index);
+  }
+
+  public expectHeaderText(expected: string) {
+    return expect(this.header).toHaveText(expected);
+  }
+
+  public expectActive(active = true) {
+    return expect(this.header).toHaveAttribute('aria-selected', String(active));
+  }
+
+  public async select() {
+    await this.header.click();
+  }
+}

package/src/components/tag.ts

@@ -0,0 +1,25 @@
+import { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';
+import { themeClasses } from '../utils/theme';
+import test, { expect, type Locator } from '@playwright/test';
+
+export class NgnTagHarness {
+  public readonly classes = themeClasses(tagControlTemplate);
+
+  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/toast.ts

@@ -0,0 +1,82 @@
+import { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';
+import { themeClasses } from '../utils/theme';
+import test, { expect, type Locator, type Page } from '@playwright/test';
+
+export class NgnToastHarness {
+  public readonly classes = themeClasses(toastControlTemplate);
+
+  public readonly locator: Locator;
+  public readonly header: Locator;
+  public readonly content: Locator;
+  public readonly icon: Locator;
+  public readonly closeButton: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this.header = locator.locator(this.classes.defaultHeader);
+    this.content = locator.locator(this.classes.defaultContent);
+    this.icon = this.header.locator('ngn-icon').first();
+    this.closeButton = this.header.locator('button');
+  }
+
+  public async expectVisible() {
+    await expect(this.locator).toBeVisible();
+  }
+
+  public async expectHidden() {
+    await expect(this.locator).not.toBeVisible();
+  }
+
+  public async expectHeader(text: string) {
+    await expect(this.header).toContainText(text);
+  }
+
+  public async expectContent(text: string) {
+    await expect(this.content).toContainText(text);
+  }
+
+  public async expectIcon(hasIcon: boolean) {
+    if (hasIcon) {
+      await expect(this.icon).toBeVisible();
+    } else {
+      await expect(this.icon).not.toBeVisible();
+    }
+  }
+
+  public async expectClosable(closable: boolean) {
+    if (closable) {
+      await expect(this.closeButton).toBeVisible();
+    } else {
+      await expect(this.closeButton).not.toBeVisible();
+    }
+  }
+
+  public async close() {
+    await this.closeButton.click();
+  }
+}
+
+export class NgnToastHostHarness {
+  public readonly classes = themeClasses(toastControlTemplate);
+  public readonly locator: Locator;
+
+  constructor(page: Page) {
+    this.locator = page.locator('ngn-toast-host');
+  }
+
+  public getToast(index: number = 0): NgnToastHarness {
+    return new NgnToastHarness(this.locator.locator('ngn-toast').nth(index));
+  }
+
+  public getAllToasts(): Locator {
+    return this.locator.locator('ngn-toast');
+  }
+
+  public async expectToastCount(count: number) {
+    await expect(this.getAllToasts()).toHaveCount(count);
+  }
+
+  public async expectVisible() {
+    await expect(this.locator).toBeVisible();
+  }
+}

package/src/components/toggle-button.ts

@@ -0,0 +1,33 @@
+import { type Locator, expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';
+
+export class NgnToggleButtonHarness {
+  public readonly classes = themeClasses(toggleButtonControlTemplate);
+
+  public readonly locator: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+  }
+
+  public async click(force = false) {
+    await this.locator.click({ force });
+  }
+
+  public async expectActive(active: boolean) {
+    if (active) {
+      await expect(this.locator).toHaveClass(new RegExp(this.classes.active));
+    } else {
+      await expect(this.locator).not.toHaveClass(new RegExp(this.classes.active));
+    }
+  }
+
+  public async expectDisabled(disabled: boolean) {
+    if (disabled) {
+      await expect(this.locator).toBeDisabled();
+    } else {
+      await expect(this.locator).not.toBeDisabled();
+    }
+  }
+}

package/src/components/tooltip.ts

@@ -0,0 +1,38 @@
+import { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+import { themeClasses } from '../utils/theme';
+import { expect, type Locator } from '@playwright/test';
+
+export class NgnTooltipHarness {
+  public readonly classes = themeClasses(tooltipControlTemplate);
+
+  private readonly _ngnDefer: Locator;
+  private readonly _contentWrapper: Locator;
+
+  public readonly locator: Locator;
+  public readonly content: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this._ngnDefer = locator.locator('ngn-defer');
+    this._contentWrapper = locator.locator(this.classes.content);
+    this.content = this._ngnDefer.locator('> *');
+  }
+
+  public async expectOpened(opened = true) {
+    await expect(this._contentWrapper).toBeVisible({ visible: opened });
+  }
+
+  public async expectRendered(rendered = true): Promise<void> {
+    await expect(this._ngnDefer).toBeAttached();
+    await expect(async () => {
+      const el = await this._ngnDefer.elementHandle();
+      const hasContent =
+        !!(await el?.innerText()) || !!(await el?.evaluate(e => e.childElementCount));
+      if (rendered) {
+        expect(hasContent).toBeTruthy();
+      } else {
+        expect(hasContent).toBeFalsy();
+      }
+    }).toPass({ timeout: 2000 });
+  }
+}

package/src/components/tree.ts

@@ -0,0 +1,98 @@
+import { expect, type Locator } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { treeControlTemplate } from '@ngneers/controls-themes/templates/tree';
+import { NgnScrollerHarness } from './scroller';
+
+export class NgnTreeHarness {
+  public readonly classes = themeClasses(treeControlTemplate);
+  /** All currently rendered nodes (branches and leaves). */
+  public readonly node: Locator;
+  /** Leaf rows. */
+  public readonly item: Locator;
+  /** Branch rows (nodes with children). */
+  public readonly group: Locator;
+  public readonly toggle: Locator;
+  public readonly itemSelected: Locator;
+  public readonly itemHighlighted: Locator;
+  public readonly itemDisabled: Locator;
+  public readonly itemExpanded: Locator;
+  public readonly checkbox: Locator;
+  public readonly empty: Locator;
+  public readonly spinner: Locator;
+  public readonly scroller: NgnScrollerHarness;
+
+  constructor(public locator: Locator) {
+    this.node = locator.locator('[role="treeitem"]');
+    this.item = locator.locator(this.classes['item']);
+    this.group = locator.locator(this.classes['group']);
+    this.toggle = locator.locator(this.classes['toggle']);
+    this.itemSelected = locator.locator(this.classes['item-selected']);
+    this.itemHighlighted = locator.locator(this.classes['item-highlighted']);
+    this.itemDisabled = locator.locator(this.classes['item-disabled']);
+    this.itemExpanded = locator.locator(this.classes['item-expanded']);
+    this.checkbox = locator.locator(this.classes['item-checkbox']['root']);
+    this.empty = locator.locator(this.classes['empty']);
+    this.spinner = locator.locator('ngn-spinner');
+    this.scroller = new NgnScrollerHarness(locator.locator(this.classes['scroller']['root']));
+  }
+
+  /** A single node located by its exact (trimmed, case-insensitive) label. */
+  public getNode(text: string): Locator {
+    return this.node.filter({ hasText: new RegExp(`^\\s*${text}\\s*$`, 'i') });
+  }
+
+  /** A single node located by the `testId` of its item. */
+  public getNodeByTestId(testId: string): Locator {
+    return this.node.filter({ has: this.locator.locator(`[data-testid="${testId}"]`) });
+  }
+
+  public expectNodeCount(count: number): Promise<void> {
+    return expect(this.node).toHaveCount(count);
+  }
+
+  public expectItemCount(count: number): Promise<void> {
+    return expect(this.item).toHaveCount(count);
+  }
+
+  public expectGroupCount(count: number): Promise<void> {
+    return expect(this.group).toHaveCount(count);
+  }
+
+  public expectNodeTexts(texts: string[]): Promise<void> {
+    return expect(this.node).toHaveText(texts.map(t => new RegExp(`^\\s*${t}\\s*$`)));
+  }
+
+  /** Click a node's row (selects / checks it when selectable). */
+  public clickNode(text: string): Promise<void> {
+    return this.getNode(text).click();
+  }
+
+  /** Click a branch node's expand/collapse toggle. */
+  public toggleNode(text: string): Promise<void> {
+    return this.getNode(text).locator(this.classes['toggle']).click();
+  }
+
+  public expectExpanded(text: string, expanded = true): Promise<void> {
+    return expect(this.getNode(text)).toHaveAttribute('aria-expanded', String(expanded));
+  }
+
+  public expectSelected(text: string, selected = true): Promise<void> {
+    return expect(this.getNode(text)).toHaveAttribute('aria-selected', String(selected));
+  }
+
+  public expectChecked(text: string, state: 'true' | 'false' | 'mixed'): Promise<void> {
+    return expect(this.getNode(text)).toHaveAttribute('aria-checked', state);
+  }
+
+  public expectDisabled(text: string, disabled = true): Promise<void> {
+    return disabled
+      ? expect(this.getNode(text)).toHaveAttribute('aria-disabled', 'true')
+      : expect(this.getNode(text)).not.toHaveAttribute('aria-disabled', 'true');
+  }
+
+  /** Assert the tree's `aria-activedescendant` points at the given node. */
+  public async expectActiveDescendant(text: string): Promise<void> {
+    const id = await this.getNode(text).getAttribute('id');
+    await expect(this.locator).toHaveAttribute('aria-activedescendant', id ?? '');
+  }
+}

package/src/components/upload.ts

@@ -0,0 +1,63 @@
+import { uploadControlTemplate } from '@ngneers/controls-themes/templates/upload';
+import { themeClasses } from '../utils/theme';
+import { expect, type Locator } from '@playwright/test';
+
+export class NgnUploadHarness {
+  public readonly classes = themeClasses(uploadControlTemplate);
+
+  public readonly locator: Locator;
+  public readonly zone: Locator;
+  public readonly input: Locator;
+  public readonly list: Locator;
+  public readonly items: Locator;
+
+  constructor(locator: Locator) {
+    this.locator = locator;
+    this.zone = locator.locator(this.classes.zone);
+    this.input = locator.locator('input[type=file]');
+    this.list = locator.locator(this.classes.list);
+    this.items = this.list.locator(this.classes.item);
+  }
+
+  /** Item `<li>` at the given index. */
+  public item(index: number = 0): Locator {
+    return this.items.nth(index);
+  }
+
+  public name(index: number = 0): Locator {
+    return this.item(index).locator(this.classes.name);
+  }
+
+  public async expectItemCount(count: number): Promise<void> {
+    await expect(this.items).toHaveCount(count);
+  }
+
+  public async expectItemName(index: number, text: string): Promise<void> {
+    await expect(this.name(index)).toHaveText(text);
+  }
+
+  public async expectItemState(
+    index: number,
+    state: 'pending' | 'uploading' | 'done' | 'failed'
+  ): Promise<void> {
+    const stateClass = this.classes[`item-${state}`].slice(1); // strip leading '.'
+    await expect(this.item(index)).toHaveClass(new RegExp(stateClass));
+  }
+
+  /** Select files through the projected native input (click-select path). */
+  public async selectFiles(
+    files: Array<{ name: string; mimeType: string; buffer: Buffer }>
+  ): Promise<void> {
+    await this.input.setInputFiles(files);
+  }
+
+  /** Action button ('upload' | 'cancel' | 'retry' | 'remove') on an item. */
+  public actionButton(index: number, label: string): Locator {
+    return this.item(index).getByLabel(new RegExp(`^${label}`, 'i'));
+  }
+
+  /** The "Upload" button rendered in confirm mode (`confirmTrigger: 'all'`). */
+  public uploadAllButton(): Locator {
+    return this.locator.locator(this.classes.trigger);
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/utils/classes.ts

@@ -0,0 +1,32 @@
+import { avatarControlTemplate } from '@ngneers/controls-themes/templates/avatar';
+import { themeClasses } from './theme';
+import { buttonControlTemplate } from '@ngneers/controls-themes/templates/button';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+import { checkboxControlTemplate } from '@ngneers/controls-themes/templates/checkbox';
+import { inputControlTemplate } from '@ngneers/controls-themes/templates/input';
+import { maskInputControlTemplate } from '@ngneers/controls-themes/templates/mask-input';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+import { listBoxControlTemplate } from '@ngneers/controls-themes/templates/list-box';
+import { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';
+import { scrollerControlTemplate } from '@ngneers/controls-themes/templates/scroller';
+import { selectControlTemplate } from '@ngneers/controls-themes/templates/select';
+import { splitterControlTemplate } from '@ngneers/controls-themes/templates/splitter';
+import { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';
+import { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+
+export const NGN_CLASSES = {
+  avatar: themeClasses(avatarControlTemplate),
+  button: themeClasses(buttonControlTemplate),
+  calendar: themeClasses(calendarControlTemplate),
+  checkbox: themeClasses(checkboxControlTemplate),
+  input: themeClasses(inputControlTemplate),
+  inputField: themeClasses(inputFieldControlTemplate),
+  maskInput: themeClasses(maskInputControlTemplate),
+  listBox: themeClasses(listBoxControlTemplate),
+  popover: themeClasses(popoverControlTemplate),
+  scroller: themeClasses(scrollerControlTemplate),
+  select: themeClasses(selectControlTemplate),
+  splitter: themeClasses(splitterControlTemplate),
+  tabs: themeClasses(tabsControlTemplate),
+  tooltip: themeClasses(tooltipControlTemplate),
+};

package/src/utils/theme.ts

@@ -0,0 +1,44 @@
+import type { ControlTemplate, ThemeClasses } from '@ngneers/controls-themes';
+
+export function themeClasses<CT extends ControlTemplate>(template: CT): ThemeClasses<CT> {
+  const result = {} as Record<string, unknown>;
+  for (const className of template.classNames) {
+    result[className] = `.ngn-${template.scope}-${className}`;
+  }
+  for (const dep of template.dependencies ?? []) {
+    const childClasses = themeClasses(dep.template);
+    // Non-projected deps get a `[ptDep]` marker class (`.ngn-{scope}-{depClass}`) applied to
+    // the child's host element (see `NgnPt`/`apply-theme.ts`'s `d()`). Whether a given child
+    // class then lives on that SAME host element or on an element nested inside the child's own
+    // template depends on which classNames the child passes as `hostClass` to
+    // `injectThemeTemplate` (e.g. list-box binds its own 'root' straight to its host, so marker
+    // and 'root' land on one element; input-field reserves a separate 'host' key for its host
+    // binding and keeps 'root' on an inner div, so marker and 'root' land on two elements).
+    // The theme package has no visibility into that per-component choice, so instead of guessing
+    // we match BOTH shapes via `:is()`: compound (same element) or descendant (nested element).
+    // Projected deps have no marker (no host the parent controls), so their classes stay raw,
+    // matching how `apply-theme.ts` resolves `projected: true` deps directly off the child's own
+    // scope.
+    result[dep.class] = dep.projected
+      ? childClasses
+      : scopeByMarker(childClasses, `.ngn-${template.scope}-${dep.class}`);
+  }
+  return result as ThemeClasses<CT>;
+}
+
+/**
+ * Scopes every selector string in a (possibly nested) theme-classes object to `marker`, matching
+ * either a compound (same-element) or descendant (nested-element) relationship — see the
+ * `dep.projected` branch above for why both shapes are needed. Recurses into nested dependency
+ * objects so grandchild slots are scoped transitively through every ancestor marker.
+ */
+function scopeByMarker<T>(classes: T, marker: string): T {
+  const scoped = {} as Record<string, unknown>;
+  for (const [key, value] of Object.entries(classes as Record<string, unknown>)) {
+    scoped[key] =
+      typeof value === 'string'
+        ? `:is(${marker}${value}, ${marker} ${value})`
+        : scopeByMarker(value, marker);
+  }
+  return scoped as T;
+}

package/tsconfig.lib.json

@@ -0,0 +1,20 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "types": ["node"],
+    // Resolve workspace peers to their built declarations (not source) so tsc treats
+    // them as external and emits only this package. Requires themes + controls built first.
+    "paths": {
+      "@ngneers/controls-themes": ["../themes/dist/index.d.ts"],
+      "@ngneers/controls-themes/*": ["../themes/dist/*"],
+      "@ngneers/controls/*": ["../controls/dist/*"]
+    }
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["**/*.spec.ts", "dist/**"]
+}