add test

Author: wxiaoguang

web_src/js/utils/dom.test.ts

@@ -1,4 +1,4 @@
-import {createElementFromAttrs, createElementFromHTML} from './dom.ts';
+import {createElementFromAttrs, createElementFromHTML, querySingleVisibleElem} from './dom.ts';
 
 test('createElementFromHTML', () => {
   expect(createElementFromHTML('<a>foo<span>bar</span></a>').outerHTML).toEqual('<a>foo<span>bar</span></a>');
@@ -16,3 +16,10 @@ test('createElementFromAttrs', () => {
   }, 'txt', createElementFromHTML('<span>inner</span>'));
   expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" disabled="" tabindex="0" data-foo="the-data">txt<span>inner</span></button>');
 });
+
+test('querySingleVisibleElem', () => {
+  let el = createElementFromHTML('<div><span>foo</span></div>');
+  expect(querySingleVisibleElem(el, 'span').textContent).toEqual('foo');
+  el = createElementFromHTML('<div><span>foo</span><span>bar</span></div>');
+  expect(() => querySingleVisibleElem(el, 'span')).toThrowError('Expected exactly one visible element');
+});

web_src/js/utils/dom.ts

@@ -333,10 +333,7 @@ export function animateOnce(el: Element, animationClassName: string): Promise<vo
 
 export function querySingleVisibleElem<T extends HTMLElement>(parent: Element, selector: string) : T|null {
   const elems = parent.querySelectorAll<HTMLElement>(selector);
-  const candidates = [];
-  for (const button of elems) {
-    if (isElemVisible(button)) candidates.push(button);
-  }
-  if (candidates.length > 1) throw new Error('multiple primary buttons found, only one could be defined');
+  const candidates = Array.from(elems).filter(isElemVisible);
+  if (candidates.length > 1) throw new Error(`Expected exactly one visible element matching selector "${selector}", but found ${candidates.length}`);
   return candidates.length ? candidates[0] as T : null;
 }