test(aria/toolbar): generate additional tests for Toolbar directives, harnesses and patterns

Author: adolgachev

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

@@ -44,12 +44,14 @@ export class ToolbarWidgetHarness extends ContentContainerComponentHarness<strin
     static hostSelector: string;
     isActive(): Promise<boolean>;
     isDisabled(): Promise<boolean>;
+    isSelected(): Promise<boolean>;
     static with(options?: ToolbarWidgetHarnessFilters): HarnessPredicate<ToolbarWidgetHarness>;
 }
 
 // @public
 export interface ToolbarWidgetHarnessFilters extends BaseHarnessFilters {
     active?: boolean;
+    selected?: boolean;
     text?: string | RegExp;
 }
 

src/aria/private/toolbar/toolbar.spec.ts

@@ -163,6 +163,20 @@ describe('Toolbar Pattern', () => {
     return toolbar.inputs.items().find(item => item.value() === value)!;
   }
 
+  describe('Tabindex', () => {
+    it('should expose tabIndex signals', () => {
+      const {toolbar, items} = getPatterns();
+
+      expect(items[0].tabIndex()).toBe(0);
+      expect(items[1].tabIndex()).toBe(-1);
+
+      toolbar.onKeydown(right()); // Move focus to item 1
+
+      expect(items[0].tabIndex()).toBe(-1);
+      expect(items[1].tabIndex()).toBe(0);
+    });
+  });
+
   describe('Navigation', () => {
     describe('with horizontal orientation', () => {
       it('should navigate on click (horizontal, ltr)', () => {

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

@@ -21,4 +21,7 @@ export interface ToolbarWidgetHarnessFilters extends BaseHarnessFilters {
 
   /** Active state that the widget should match. */
   active?: boolean;
+
+  /** Selected state that the widget should match. */
+  selected?: boolean;
 }

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

@@ -93,12 +93,20 @@ describe('ToolbarHarness', () => {
     fixture.componentInstance.undoDisabled.set(true);
     expect(await widget.isDisabled()).toBe(true);
   });
+
+  it('should be able to get whether a widget is selected', async () => {
+    const widget = await loader.getHarness(ToolbarWidgetHarness.with({text: 'Undo'}));
+    expect(await widget.isSelected()).toBe(false);
+
+    await widget.click();
+    expect(await widget.isSelected()).toBe(true);
+  });
 });
 
 @Component({
   template: `
     <div ngToolbar [orientation]="orientation()" [disabled]="toolbarDisabled()">
-      <button ngToolbarWidget value="undo" [disabled]="undoDisabled()">Undo</button>
+      <button ngToolbarWidget #u="ngToolbarWidget" value="undo" [disabled]="undoDisabled()" [aria-pressed]="u.selected()">Undo</button>
       <button ngToolbarWidget value="redo">Redo</button>
 
       <div ngToolbarWidgetGroup>

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

@@ -28,6 +28,11 @@ export class ToolbarWidgetHarness extends ContentContainerComponentHarness<strin
         'active',
         options.active,
         async (harness, active) => (await harness.isActive()) === active,
+      )
+      .addOption(
+        'selected',
+        options.selected,
+        async (harness, selected) => (await harness.isSelected()) === selected,
       );
   }
 
@@ -52,4 +57,10 @@ export class ToolbarWidgetHarness extends ContentContainerComponentHarness<strin
     const host = await this.host();
     return (await host.getAttribute('aria-disabled')) === 'true';
   }
+
+  /** Gets whether the widget is selected. */
+  async isSelected(): Promise<boolean> {
+    const host = await this.host();
+    return (await host.getAttribute('aria-pressed')) === 'true';
+  }
 }

src/aria/toolbar/toolbar.spec.ts

@@ -626,6 +626,55 @@ describe('Toolbar', () => {
       expect(item2.getAttribute('aria-pressed')).toBe('false');
     });
   });
+
+  describe('ARIA attributes and roles', () => {
+    beforeEach(() => setupToolbar());
+
+    it('should have role="toolbar"', () => {
+      expect(toolbarElement.getAttribute('role')).toBe('toolbar');
+    });
+
+    it('should set aria-orientation based on input', () => {
+      expect(toolbarElement.getAttribute('aria-orientation')).toBe('horizontal');
+      fixture.componentInstance.orientation.set('vertical');
+      fixture.detectChanges();
+      expect(toolbarElement.getAttribute('aria-orientation')).toBe('vertical');
+    });
+
+    it('should set aria-disabled based on input', () => {
+      expect(toolbarElement.getAttribute('aria-disabled')).toBe('false');
+      fixture.componentInstance.disabled.set(true);
+      fixture.detectChanges();
+      expect(toolbarElement.getAttribute('aria-disabled')).toBe('true');
+    });
+  });
+
+  describe('Focus management', () => {
+    beforeEach(() => setupToolbar());
+
+    it('should have tabindex on widgets set by active state', () => {
+      const widgets = getWidgetEls();
+      expect(widgets[0].getAttribute('tabindex')).toBe('0');
+      expect(widgets[1].getAttribute('tabindex')).toBe('-1');
+
+      click(widgets[1]);
+      expect(widgets[0].getAttribute('tabindex')).toBe('-1');
+      expect(widgets[1].getAttribute('tabindex')).toBe('0');
+    });
+  });
+
+  describe('Hard disabled state attributes', () => {
+    beforeEach(() => setupToolbar({softDisabled: false}));
+
+    it('should set inert and disabled attributes on hard-disabled widgets', () => {
+      fixture.componentInstance.widgets[0].disabled.set(true);
+      fixture.detectChanges();
+
+      const widgets = getWidgetEls();
+      expect(widgets[0].hasAttribute('inert')).toBe(true);
+      expect(widgets[0].getAttribute('disabled')).toBe('true');
+    });
+  });
 });
 
 @Component({