feat(aria/accordion): introduce accordion harness

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

@@ -0,0 +1,59 @@
+## API Report File for "@angular/aria_accordion_testing"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import * as _angular_cdk_testing from '@angular/cdk/testing';
+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 AccordionGroupHarness extends ComponentHarness {
+    getAccordions(filters?: AccordionHarnessFilters): Promise<AccordionHarness[]>;
+    // (undocumented)
+    static hostSelector: string;
+    static with(options?: AccordionGroupHarnessFilters): HarnessPredicate<AccordionGroupHarness>;
+}
+
+// @public
+export interface AccordionGroupHarnessFilters extends BaseHarnessFilters {
+}
+
+// @public
+export class AccordionHarness extends ContentContainerComponentHarness<AccordionSection> {
+    blur(): Promise<void>;
+    collapse(): Promise<void>;
+    expand(): Promise<void>;
+    focus(): Promise<void>;
+    protected getRootHarnessLoader(): Promise<_angular_cdk_testing.HarnessLoader>;
+    getTitle(): Promise<string>;
+    // (undocumented)
+    static hostSelector: string;
+    isDisabled(): Promise<boolean>;
+    isExpanded(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
+    toggle(): Promise<void>;
+    static with(options?: AccordionHarnessFilters): HarnessPredicate<AccordionHarness>;
+}
+
+// @public
+export interface AccordionHarnessFilters extends BaseHarnessFilters {
+    disabled?: boolean;
+    expanded?: boolean;
+    title?: string | RegExp;
+}
+
+// @public
+export enum AccordionSection {
+    // (undocumented)
+    PANEL = "[ngAccordionPanel]",
+    // (undocumented)
+    TRIGGER = "[ngAccordionTrigger]"
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

src/aria/accordion/BUILD.bazel

@@ -13,6 +13,7 @@ ng_project(
         "//src/aria/private",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
+        "//src/cdk/testing",
     ],
 )
 
@@ -26,7 +27,9 @@ ng_project(
         ":accordion",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
+        "//src/cdk/testing",
         "//src/cdk/testing/private",
+        "//src/cdk/testing/testbed",
     ],
 )
 

src/aria/accordion/testing/BUILD.bazel

@@ -0,0 +1,42 @@
+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 = [
+        "//:node_modules/@angular/core",
+        "//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",
+        "//:node_modules/@angular/platform-browser",
+        "//src/aria/accordion",
+        "//src/cdk/testing",
+        "//src/cdk/testing/private",
+        "//src/cdk/testing/testbed",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [
+        ":unit_tests_lib",
+    ],
+)

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

@@ -0,0 +1,22 @@
+/**
+ * @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';
+
+/** Filters for locating an `AccordionHarness`. */
+export interface AccordionHarnessFilters extends BaseHarnessFilters {
+  /** Only find instances whose title text matches the given value. */
+  title?: string | RegExp;
+  /** Only find instances whose expanded state matches the given value. */
+  expanded?: boolean;
+  /** Only find instances whose disabled state matches the given value. */
+  disabled?: boolean;
+}
+
+/** Filters for locating an `AccordionGroupHarness`. */
+export interface AccordionGroupHarnessFilters extends BaseHarnessFilters {}

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

@@ -0,0 +1,150 @@
+/**
+ * @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 {Component} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {ComponentHarness} from '@angular/cdk/testing';
+import {AccordionHarness, AccordionGroupHarness} from './accordion-harness';
+import {AccordionGroup, AccordionPanel, AccordionTrigger} from '../index';
+
+/** Lightweight test harness to test querying inside the accordion body panel. */
+class TestButtonHarness extends ComponentHarness {
+  static hostSelector = 'button.test-button';
+
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}
+
+describe('Accordion Harnesses', () => {
+  let fixture: any;
+  let loader: any;
+
+  @Component({
+    imports: [AccordionGroup, AccordionPanel, AccordionTrigger],
+    template: `
+      <div ngAccordionGroup>
+        <div #panel1="ngAccordionPanel" ngAccordionPanel>
+          <button class="test-button">Inside Content 1</button>
+        </div>
+        <button ngAccordionTrigger [panel]="panel1">Section 1</button>
+
+        <div #panel2="ngAccordionPanel" ngAccordionPanel>Content 2</div>
+        <button ngAccordionTrigger [panel]="panel2" disabled>Section 2</button>
+      </div>
+    `,
+  })
+  class AccordionHarnessTestComponent {}
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AccordionHarnessTestComponent],
+    });
+    fixture = TestBed.createComponent(AccordionHarnessTestComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should find accordion group and list all scoped accordions using getAccordions', async () => {
+    const group = await loader.getHarness(AccordionGroupHarness);
+    const accordions = await group.getAccordions();
+
+    expect(accordions.length).toBe(2);
+    expect(await accordions[0].getTitle()).toBe('Section 1');
+    expect(await accordions[1].getTitle()).toBe('Section 2');
+  });
+
+  it('should find all individual accordions via standard root loader', async () => {
+    const accordions = await loader.getAllHarnesses(AccordionHarness);
+    expect(accordions.length).toBe(2);
+  });
+
+  it('should filter accordions by title', async () => {
+    const accordions = await loader.getAllHarnesses(AccordionHarness.with({title: 'Section 1'}));
+    expect(accordions.length).toBe(1);
+    expect(await accordions[0].getTitle()).toBe('Section 1');
+  });
+
+  it('should filter accordions by expanded state', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    await accordion.expand();
+
+    const expandedAccordions = await loader.getAllHarnesses(
+      AccordionHarness.with({expanded: true}),
+    );
+    expect(expandedAccordions.length).toBe(1);
+    expect(await expandedAccordions[0].getTitle()).toBe('Section 1');
+  });
+
+  it('should filter accordions by disabled state', async () => {
+    const disabledAccordions = await loader.getAllHarnesses(
+      AccordionHarness.with({disabled: true}),
+    );
+    expect(disabledAccordions.length).toBe(1);
+    expect(await disabledAccordions[0].getTitle()).toBe('Section 2');
+  });
+
+  it('should get the title of the accordion', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    expect(await accordion.getTitle()).toBe('Section 1');
+  });
+
+  it('should correctly report the expanded state of an accordion', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    expect(await accordion.isExpanded()).toBeFalse();
+  });
+
+  it('should correctly report the disabled state of an accordion', async () => {
+    const activeAccordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    const disabledAccordion = await loader.getHarness(AccordionHarness.with({title: 'Section 2'}));
+
+    expect(await activeAccordion.isDisabled()).toBeFalse();
+    expect(await disabledAccordion.isDisabled()).toBeTrue();
+  });
+
+  it('expands a collapsed accordion using the expand method', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+
+    await accordion.expand();
+
+    expect(await accordion.isExpanded()).toBeTrue();
+  });
+
+  it('collapses an expanded accordion using the collapse method', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    await accordion.expand();
+
+    await accordion.collapse();
+
+    expect(await accordion.isExpanded()).toBeFalse();
+  });
+
+  it('toggles the expanded state of an accordion using the toggle method', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+
+    await accordion.toggle();
+
+    expect(await accordion.isExpanded()).toBeTrue();
+  });
+
+  it('should support focusing and blurring accordion triggers', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    await accordion.focus();
+    expect(await accordion.isFocused()).toBeTrue();
+
+    await accordion.blur();
+    expect(await accordion.isFocused()).toBeFalse();
+  });
+
+  it('should query components inside the accordion panel using ContentContainerComponentHarness', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'}));
+    const button = await accordion.getHarness(TestButtonHarness);
+    expect(await button.getText()).toBe('Inside Content 1');
+  });
+});