feat(aria/toolbar): add test harnesses

goldens/aria/toolbar/testing/index.api.md

@@ -0,0 +1,58 @@
+## API Report File for "@angular/aria_toolbar_testing"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { ComponentHarness } from '@angular/cdk/testing';
+import { ContentContainerComponentHarness } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+
+// @public
+export class ToolbarHarness extends ComponentHarness {
+    getOrientation(): Promise<'vertical' | 'horizontal'>;
+    getWidgetGroups(filters?: ToolbarWidgetGroupHarnessFilters): Promise<ToolbarWidgetGroupHarness[]>;
+    getWidgets(filters?: ToolbarWidgetHarnessFilters): Promise<ToolbarWidgetHarness[]>;
+    // (undocumented)
+    static hostSelector: string;
+    isDisabled(): Promise<boolean>;
+    static with(options?: ToolbarHarnessFilters): HarnessPredicate<ToolbarHarness>;
+}
+
+// @public
+export interface ToolbarHarnessFilters extends BaseHarnessFilters {
+}
+
+// @public
+export class ToolbarWidgetGroupHarness extends ComponentHarness {
+    getWidgets(filters?: ToolbarWidgetHarnessFilters): Promise<ToolbarWidgetHarness[]>;
+    // (undocumented)
+    static hostSelector: string;
+    static with(options?: ToolbarWidgetGroupHarnessFilters): HarnessPredicate<ToolbarWidgetGroupHarness>;
+}
+
+// @public
+export interface ToolbarWidgetGroupHarnessFilters extends BaseHarnessFilters {
+}
+
+// @public
+export class ToolbarWidgetHarness extends ContentContainerComponentHarness<string> {
+    click(): Promise<void>;
+    getText(): Promise<string>;
+    // (undocumented)
+    static hostSelector: string;
+    isActive(): Promise<boolean>;
+    isDisabled(): Promise<boolean>;
+    static with(options?: ToolbarWidgetHarnessFilters): HarnessPredicate<ToolbarWidgetHarness>;
+}
+
+// @public
+export interface ToolbarWidgetHarnessFilters extends BaseHarnessFilters {
+    active?: boolean;
+    text?: string | RegExp;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

src/aria/config.bzl

@@ -7,6 +7,7 @@ ARIA_ENTRYPOINTS = [
     "menu",
     "tabs",
     "toolbar",
+    "toolbar/testing",
     "tree",
     "private",
 ]

src/aria/toolbar/testing/BUILD.bazel

@@ -0,0 +1,39 @@
+load("//tools:defaults.bzl", "ng_project", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/aria/toolbar",
+        "//src/cdk/testing",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_project(
+    name = "unit_tests_lib",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":testing",
+        "//:node_modules/@angular/core",
+        "//src/aria/toolbar",
+        "//src/cdk/testing",
+        "//src/cdk/testing/private",
+        "//src/cdk/testing/testbed",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/aria/toolbar/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export * from './public-api';

src/aria/toolbar/testing/public-api.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export * from './toolbar-widget-harness';
+export * from './toolbar-widget-group-harness';
+export * from './toolbar-harness';
+export * from './toolbar-harness-filters';

src/aria/toolbar/testing/toolbar-harness-filters.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {BaseHarnessFilters} from '@angular/cdk/testing';
+
+/** A set of criteria that can be used to filter a list of Aria toolbar instances. */
+export interface ToolbarHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of Aria toolbar widget group instances. */
+export interface ToolbarWidgetGroupHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of Aria toolbar widgets. */
+export interface ToolbarWidgetHarnessFilters extends BaseHarnessFilters {
+  /** Text that the widget should match. */
+  text?: string | RegExp;
+
+  /** Active state that the widget should match. */
+  active?: boolean;
+}

src/aria/toolbar/testing/toolbar-harness.spec.ts

@@ -0,0 +1,123 @@
+import {Component, signal} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Toolbar} from '../toolbar';
+import {ToolbarWidget} from '../toolbar-widget';
+import {ToolbarWidgetGroup} from '../toolbar-widget-group';
+import {ToolbarHarness} from './toolbar-harness';
+import {ToolbarWidgetGroupHarness} from './toolbar-widget-group-harness';
+import {ToolbarWidgetHarness} from './toolbar-widget-harness';
+
+describe('ToolbarHarness', () => {
+  let fixture: ComponentFixture<ToolbarHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolbarHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  it('should be able to load toolbar harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(ToolbarHarness);
+    expect(harnesses.length).toBe(1);
+  });
+
+  it('should be able to load toolbar widget group harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(ToolbarWidgetGroupHarness);
+    expect(harnesses.length).toBe(2);
+  });
+
+  it('should be able to load toolbar widget harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(ToolbarWidgetHarness);
+    expect(harnesses.length).toBe(8);
+  });
+
+  it('should be able to get the widgets in a toolbar', async () => {
+    const toolbar = await loader.getHarness(ToolbarHarness);
+    const widgets = await toolbar.getWidgets();
+    expect(widgets.length).toBe(8);
+  });
+
+  it('should be able to get the widget groups in a toolbar', async () => {
+    const toolbar = await loader.getHarness(ToolbarHarness);
+    const groups = await toolbar.getWidgetGroups();
+    expect(groups.length).toBe(2);
+  });
+
+  it('should be able to get the toolbar orientation', async () => {
+    const toolbar = await loader.getHarness(ToolbarHarness);
+    expect(await toolbar.getOrientation()).toBe('horizontal');
+
+    fixture.componentInstance.orientation.set('vertical');
+    expect(await toolbar.getOrientation()).toBe('vertical');
+  });
+
+  it('should be able to get whether the toolbar is disabled', async () => {
+    const toolbar = await loader.getHarness(ToolbarHarness);
+    expect(await toolbar.isDisabled()).toBe(false);
+
+    fixture.componentInstance.toolbarDisabled.set(true);
+    expect(await toolbar.isDisabled()).toBe(true);
+  });
+
+  it('should be able to get the widgets in a widget group', async () => {
+    const group = await loader.getHarness(ToolbarWidgetGroupHarness);
+    const widgets = await group.getWidgets();
+    expect(widgets.length).toBe(3);
+  });
+
+  it('should be able to load a widget harness by text', async () => {
+    const harnesses = await loader.getAllHarnesses(ToolbarWidgetHarness.with({text: /^Align/}));
+    expect(harnesses.length).toBe(3);
+    expect(await parallel(() => harnesses.map(harness => harness.getText()))).toEqual([
+      'Align left',
+      'Align center',
+      'Align right',
+    ]);
+  });
+
+  it('should be able to toggle the active state of a widget', async () => {
+    const widget = await loader.getHarness(ToolbarWidgetHarness.with({text: 'Align left'}));
+    expect(await widget.isActive()).toBe(false);
+
+    await widget.click();
+    expect(await widget.isActive()).toBe(true);
+  });
+
+  it('should be able to get whether a widget is disabled', async () => {
+    const widget = await loader.getHarness(ToolbarWidgetHarness.with({text: 'Undo'}));
+    expect(await widget.isDisabled()).toBe(false);
+
+    fixture.componentInstance.undoDisabled.set(true);
+    expect(await widget.isDisabled()).toBe(true);
+  });
+});
+
+@Component({
+  template: `
+    <div ngToolbar [orientation]="orientation()" [disabled]="toolbarDisabled()">
+      <button ngToolbarWidget value="undo" [disabled]="undoDisabled()">Undo</button>
+      <button ngToolbarWidget value="redo">Redo</button>
+
+      <div ngToolbarWidgetGroup>
+        <button ngToolbarWidget value="bold">Bold</button>
+        <button ngToolbarWidget value="italic">Italic</button>
+        <button ngToolbarWidget value="underlined">Underlined</button>
+      </div>
+
+      <div ngToolbarWidgetGroup>
+        <button ngToolbarWidget value="aling-left">Align left</button>
+        <button ngToolbarWidget value="aling-center">Align center</button>
+        <button ngToolbarWidget value="aling-right">Align right</button>
+      </div>
+    </div>
+  `,
+  imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
+})
+class ToolbarHarnessTest {
+  orientation = signal<'vertical' | 'horizontal'>('horizontal');
+  toolbarDisabled = signal(false);
+  undoDisabled = signal(false);
+}

src/aria/toolbar/testing/toolbar-harness.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {
+  ToolbarHarnessFilters,
+  ToolbarWidgetHarnessFilters,
+  ToolbarWidgetGroupHarnessFilters,
+} from './toolbar-harness-filters';
+import {ToolbarWidgetHarness} from './toolbar-widget-harness';
+import {ToolbarWidgetGroupHarness} from './toolbar-widget-group-harness';
+
+/** Harness for interacting with an Aria toolbar in tests. */
+export class ToolbarHarness extends ComponentHarness {
+  static hostSelector = '[ngToolbar]';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `ToolbarHarness`
+   * that meets certain criteria.
+   * @param options Options for filtering which dialog instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ToolbarHarnessFilters = {}): HarnessPredicate<ToolbarHarness> {
+    return new HarnessPredicate(ToolbarHarness, options);
+  }
+
+  /** Gets all widgets in the toolbar. */
+  async getWidgets(filters: ToolbarWidgetHarnessFilters = {}): Promise<ToolbarWidgetHarness[]> {
+    return await this.locatorForAll(ToolbarWidgetHarness.with(filters))();
+  }
+
+  /** Gets all widget groups in the toolbar. */
+  async getWidgetGroups(
+    filters: ToolbarWidgetGroupHarnessFilters = {},
+  ): Promise<ToolbarWidgetGroupHarness[]> {
+    return await this.locatorForAll(ToolbarWidgetGroupHarness.with(filters))();
+  }
+
+  /** Gets whether the toolbar is disabled. */
+  async isDisabled(): Promise<boolean> {
+    const host = await this.host();
+    return (await host.getAttribute('aria-disabled')) === 'true';
+  }
+
+  /** Gets the orientation of the toolbar. */
+  async getOrientation(): Promise<'vertical' | 'horizontal'> {
+    const host = await this.host();
+    return (await host.getAttribute('aria-orientation')) as 'vertical' | 'horizontal';
+  }
+}

src/aria/toolbar/testing/toolbar-widget-group-harness.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {
+  ToolbarWidgetHarnessFilters,
+  ToolbarWidgetGroupHarnessFilters,
+} from './toolbar-harness-filters';
+import {ToolbarWidgetHarness} from './toolbar-widget-harness';
+
+/** Harness for interacting with an Aria toolbar widget group in tests. */
+export class ToolbarWidgetGroupHarness extends ComponentHarness {
+  static hostSelector = '[ngToolbarWidgetGroup]';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `ToolbarWidgetGroupHarness`
+   * that meets certain criteria.
+   * @param options Options for filtering which dialog instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(
+    options: ToolbarWidgetGroupHarnessFilters = {},
+  ): HarnessPredicate<ToolbarWidgetGroupHarness> {
+    return new HarnessPredicate(ToolbarWidgetGroupHarness, options);
+  }
+
+  /** Gets all widgets in the group. */
+  async getWidgets(filters: ToolbarWidgetHarnessFilters = {}): Promise<ToolbarWidgetHarness[]> {
+    return await this.locatorForAll(ToolbarWidgetHarness.with(filters))();
+  }
+}