Migrate ARIAAttributesView test from web layout test to unit test

Bug: 40262388
Change-Id: I22bee08f23bdc204c4ccfae58061cd5fc28e83ab
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6862798
Commit-Queue: Eric Leese <[email protected]>
Reviewed-by: Eric Leese <[email protected]>
Auto-Submit: Changhao Han <[email protected]>
Commit-Queue: Changhao Han <[email protected]>

Author: hanselfmu-chromium

front_end/panels/accessibility/ARIAAttributesView.test.ts

@@ -0,0 +1,101 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+
+import * as Accessibility from './accessibility.js';
+
+describeWithMockConnection('ARIAAttributesView', () => {
+  let target: SDK.Target.Target;
+  let domModel: SDK.DOMModel.DOMModel;
+  let node: SDK.DOMModel.DOMNode;
+  let setAttributeValueSpy: sinon.SinonSpy;
+
+  beforeEach(() => {
+    stubNoopSettings();
+    target = createTarget();
+    domModel = target.model(SDK.DOMModel.DOMModel) as SDK.DOMModel.DOMModel;
+    node = new SDK.DOMModel.DOMNode(domModel);
+    node.setAttributesPayload(['role', 'checkbox', 'aria-checked', 'true']);
+    setAttributeValueSpy = sinon.spy(node, 'setAttributeValue');
+  });
+
+  const modifyAttribute =
+      (view: Accessibility.ARIAAttributesView.ARIAAttributesPane, childIndex: number, newValue: string) => {
+        const treeOutline = view.getTreeOutlineForTesting();
+        assert.exists(treeOutline);
+        const treeElement =
+            treeOutline.rootElement().childAt(childIndex) as Accessibility.ARIAAttributesView.ARIAAttributesTreeElement;
+        assert.exists(treeElement);
+        treeElement.listItemElement.querySelector('span')?.click();
+
+        const prompt = treeElement.getPromptForTesting();
+        assert.exists(prompt);
+        const proxyElement = prompt.element();
+        (proxyElement as HTMLElement).textContent = newValue;
+
+        proxyElement.dispatchEvent(new FocusEvent('blur'));
+      };
+
+  it('can modify an ARIA attribute value', () => {
+    const view = new Accessibility.ARIAAttributesView.ARIAAttributesPane();
+    renderElementIntoDOM(view);
+    view.setNode(node);
+
+    modifyAttribute(view, 1, 'false');
+
+    sinon.assert.calledOnceWithExactly(setAttributeValueSpy, 'aria-checked', 'false');
+  });
+
+  it('can modify an ARIA role', () => {
+    const view = new Accessibility.ARIAAttributesView.ARIAAttributesPane();
+    renderElementIntoDOM(view);
+    view.setNode(node);
+
+    modifyAttribute(view, 0, 'radio');
+
+    sinon.assert.calledOnceWithExactly(setAttributeValueSpy, 'role', 'radio');
+  });
+});
+
+describe('ARIAAttributesTreeElement', () => {
+  it('should create a value element with the correct class and text content', () => {
+    const value = 'test value';
+    const element = Accessibility.ARIAAttributesView.ARIAAttributesTreeElement.createARIAValueElement(value);
+    assert.strictEqual(element.textContent, value);
+    assert.isTrue(element.classList.contains('monospace'));
+  });
+
+  it('should append a name element with the correct classes and text content', () => {
+    const parentPane = {} as Accessibility.ARIAAttributesView.ARIAAttributesPane;
+    const attribute = {name: 'aria-label', value: 'test'} as SDK.DOMModel.Attribute;
+    const target = {} as SDK.Target.Target;
+    const treeElement = new Accessibility.ARIAAttributesView.ARIAAttributesTreeElement(parentPane, attribute, target);
+    treeElement.onattach();
+
+    treeElement.appendNameElement('aria-label');
+
+    const nameElement = treeElement.listItemElement.querySelector('.ax-name');
+    assert.exists(nameElement);
+    assert.strictEqual(nameElement.textContent, 'aria-label');
+    assert.isTrue(nameElement.classList.contains('monospace'));
+  });
+
+  it('should append a value element with the correct text content', () => {
+    const parentPane = {} as Accessibility.ARIAAttributesView.ARIAAttributesPane;
+    const attribute = {name: 'aria-label', value: 'test'} as SDK.DOMModel.Attribute;
+    const target = {} as SDK.Target.Target;
+    const treeElement = new Accessibility.ARIAAttributesView.ARIAAttributesTreeElement(parentPane, attribute, target);
+    treeElement.onattach();
+
+    treeElement.appendAttributeValueElement('test');
+
+    const valueElement = treeElement.listItemElement.querySelector('span:not(.ax-name):not(.separator)');
+    assert.exists(valueElement);
+    assert.strictEqual(valueElement.textContent, 'test');
+  });
+});

front_end/panels/accessibility/ARIAAttributesView.ts

@@ -61,6 +61,10 @@ export class ARIAAttributesPane extends AccessibilitySubPane {
     this.treeOutline.element.classList.toggle('hidden', !foundAttributes);
   }
 
+  getTreeOutlineForTesting(): Readonly<UI.TreeOutline.TreeOutline>|undefined {
+    return this.treeOutline;
+  }
+
   private isARIAAttribute(attribute: SDK.DOMModel.Attribute): boolean {
     return ATTRIBUTES.has(attribute.name);
   }
@@ -95,6 +99,10 @@ export class ARIAAttributesTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.addEventListener('click', this.mouseClick.bind(this));
   }
 
+  getPromptForTesting(): Readonly<ARIAAttributePrompt>|undefined {
+    return this.prompt;
+  }
+
   private populateListItem(): void {
     this.listItemElement.removeChildren();
     this.appendNameElement(this.attribute.name);

front_end/panels/accessibility/BUILD.gn

@@ -77,7 +77,10 @@ devtools_entrypoint("meta") {
 ts_library("unittests") {
   testonly = true
 
-  sources = [ "AccessibilitySidebarView.test.ts" ]
+  sources = [
+    "ARIAAttributesView.test.ts",
+    "AccessibilitySidebarView.test.ts",
+  ]
 
   deps = [
     ":bundle",