fix(utils): un-break current htmlTreeAsString keyAttrs usages

Author: ZachGawlik

packages/utils/src/browser.ts

@@ -14,7 +14,7 @@ const DEFAULT_MAX_STRING_LENGTH = 80;
  */
 export function htmlTreeAsString(
   elem: unknown,
-  options: { keyAttrs?: string[]; maxStringLength?: number } = {},
+  options: string[] | { keyAttrs?: string[]; maxStringLength?: number } = {},
 ): string {
   type SimpleNode = {
     parentNode: SimpleNode;
@@ -33,7 +33,8 @@ export function htmlTreeAsString(
     const separator = ' > ';
     const sepLength = separator.length;
     let nextStr;
-    const { keyAttrs, maxStringLength = DEFAULT_MAX_STRING_LENGTH } = options;
+    const keyAttrs = Array.isArray(options) ? options : options.keyAttrs;
+    const maxStringLength = (!Array.isArray(options) && options.maxStringLength) || DEFAULT_MAX_STRING_LENGTH;
 
     while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {
       nextStr = _htmlElementAsString(currentElem, keyAttrs);

packages/utils/test/browser.test.ts

@@ -44,6 +44,10 @@ describe('htmlTreeAsString', () => {
     </li>`;
     document.body.appendChild(el);
 
+    // Two formats for specifying keyAttrs
+    expect(htmlTreeAsString(document.getElementById('cat-2'), ['test-id'])).toBe(
+      'body > ul > li.li-class[title="li-title"] > img[test-id="cat-2-test-id"]',
+    );
     expect(htmlTreeAsString(document.getElementById('cat-2'), { keyAttrs: ['test-id'] })).toBe(
       'body > ul > li.li-class[title="li-title"] > img[test-id="cat-2-test-id"]',
     );