test(aria/accordion): Generate additional tests for Accordion harness and pattern

Author: adolgachev

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

@@ -16,6 +16,8 @@ export interface AccordionHarnessFilters extends BaseHarnessFilters {
   expanded?: boolean;
   /** Only find instances whose disabled state matches the given value. */
   disabled?: boolean;
+  /** Only find instances whose id matches the given value. */
+  id?: string | RegExp;
 }
 
 /** Filters for locating an `AccordionGroupHarness`. */

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

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component} from '@angular/core';
+import {Component, signal} 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';
+import {AccordionContent} from '../accordion-content';
 
 /** Lightweight test harness to test querying inside the accordion body panel. */
 class TestButtonHarness extends ComponentHarness {
@@ -27,7 +28,7 @@ describe('Accordion Harnesses', () => {
   let loader: any;
 
   @Component({
-    imports: [AccordionGroup, AccordionPanel, AccordionTrigger],
+    imports: [AccordionGroup, AccordionPanel, AccordionTrigger, AccordionContent],
     template: `
       <div ngAccordionGroup>
         <div #panel1="ngAccordionPanel" ngAccordionPanel>
@@ -37,10 +38,19 @@ describe('Accordion Harnesses', () => {
 
         <div #panel2="ngAccordionPanel" ngAccordionPanel>Content 2</div>
         <button ngAccordionTrigger [panel]="panel2" disabled>Section 2</button>
+
+        <div #panel3="ngAccordionPanel" ngAccordionPanel [preserveContent]="preserveContent()">
+          <ng-template ngAccordionContent>
+            <button class="test-button">Inside Content 3</button>
+          </ng-template>
+        </div>
+        <button ngAccordionTrigger [panel]="panel3" id="custom-id-3">Section 3</button>
       </div>
     `,
   })
-  class AccordionHarnessTestComponent {}
+  class AccordionHarnessTestComponent {
+    preserveContent = signal(false);
+  }
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -55,14 +65,14 @@ describe('Accordion Harnesses', () => {
     const group = await loader.getHarness(AccordionGroupHarness);
     const accordions = await group.getAccordions();
 
-    expect(accordions.length).toBe(2);
+    expect(accordions.length).toBe(3);
     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);
+    expect(accordions.length).toBe(3);
   });
 
   it('should filter accordions by title', async () => {
@@ -147,4 +157,40 @@ describe('Accordion Harnesses', () => {
     const button = await accordion.getHarness(TestButtonHarness);
     expect(await button.getText()).toBe('Inside Content 1');
   });
+
+  it('should filter accordions by id', async () => {
+    const accordions = await loader.getAllHarnesses(AccordionHarness.with({id: 'custom-id-3'}));
+    expect(accordions.length).toBe(1);
+    expect(await accordions[0].getTitle()).toBe('Section 3');
+  });
+
+  it('should handle deferred content when collapsed', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 3'}));
+
+    // Initially collapsed, content should not be available
+    const button = await accordion.getHarnessOrNull(TestButtonHarness);
+    expect(button).toBeNull();
+  });
+
+  it('should handle deferred content when expanded', async () => {
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 3'}));
+    await accordion.expand();
+
+    // Now expanded, content should be available
+    const button = await accordion.getHarness(TestButtonHarness);
+    expect(await button.getText()).toBe('Inside Content 3');
+  });
+
+  it('should preserve content when collapsed if preserveContent is true', async () => {
+    fixture.componentInstance.preserveContent.set(true);
+    fixture.detectChanges();
+
+    const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 3'}));
+    await accordion.expand(); // Render it first
+    await accordion.collapse();
+
+    // Content should still be available even though collapsed
+    const button = await accordion.getHarness(TestButtonHarness);
+    expect(await button.getText()).toBe('Inside Content 3');
+  });
 });

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

@@ -41,6 +41,9 @@ export class AccordionHarness extends ContentContainerComponentHarness<Accordion
         'disabled',
         options.disabled,
         async (harness, disabled) => (await harness.isDisabled()) === disabled,
+      )
+      .addOption('id', options.id, async (harness, id) =>
+        HarnessPredicate.stringMatches((await harness.host()).getAttribute('id'), id),
       );
   }
 

src/aria/private/accordion/accordion.spec.ts

@@ -322,5 +322,49 @@ describe('Accordion Pattern', () => {
         expect(triggerPatterns[1].expanded()).toBeTrue();
       });
     });
+
+    describe('AccordionTriggerPattern methods', () => {
+      it('should expand via open()', () => {
+        expect(triggerPatterns[0].expanded()).toBeFalse();
+        triggerPatterns[0].open();
+        expect(triggerPatterns[0].expanded()).toBeTrue();
+      });
+
+      it('should collapse via close()', () => {
+        triggerPatterns[0].expanded.set(true);
+        expect(triggerPatterns[0].expanded()).toBeTrue();
+        triggerPatterns[0].close();
+        expect(triggerPatterns[0].expanded()).toBeFalse();
+      });
+
+      it('should toggle via toggle()', () => {
+        expect(triggerPatterns[0].expanded()).toBeFalse();
+        triggerPatterns[0].toggle();
+        expect(triggerPatterns[0].expanded()).toBeTrue();
+
+        triggerPatterns[0].toggle();
+        expect(triggerPatterns[0].expanded()).toBeFalse();
+      });
+    });
+
+    describe('softDisabled behavior', () => {
+      it('should compute hardDisabled as true when disabled=true and softDisabled=false', () => {
+        triggerInputs[0].disabled.set(true);
+        groupInputs.softDisabled.set(false);
+        expect(triggerPatterns[0].hardDisabled()).toBeTrue();
+      });
+
+      it('should compute hardDisabled as false when disabled=true and softDisabled=true', () => {
+        triggerInputs[0].disabled.set(true);
+        groupInputs.softDisabled.set(true);
+        expect(triggerPatterns[0].hardDisabled()).toBeFalse();
+      });
+
+      it('should compute hardDisabled as false when disabled=false', () => {
+        triggerInputs[0].disabled.set(false);
+        groupInputs.softDisabled.set(false);
+        expect(triggerPatterns[0].hardDisabled()).toBeFalse();
+      });
+    });
   });
 });