Add test

Author: 0Calories

packages/utils/src/browser.ts

@@ -168,7 +168,7 @@ export function getElementIdentifier(
   options: string[] | { keyAttrs?: string[]; maxStringLength?: number } = {},
 ): string {
   if (elem instanceof HTMLElement && elem.dataset) {
-    return elem.dataset['component'] || htmlTreeAsString(elem, options);
+    return elem.dataset['component'] || elem.dataset['element'] || htmlTreeAsString(elem, options);
   }
 
   return htmlTreeAsString(elem, options);

packages/utils/test/browser.test.ts

@@ -1,11 +1,14 @@
 import { JSDOM } from 'jsdom';
 
-import { getDomElement, htmlTreeAsString } from '../src/browser';
+import { getDomElement, getElementIdentifier, htmlTreeAsString } from '../src/browser';
 
 beforeAll(() => {
   const dom = new JSDOM();
+
   // @ts-expect-error need to override global document
   global.document = dom.window.document;
+  // @ts-expect-error
+  global.HTMLElement = new JSDOM().window.HTMLElement;
 });
 
 describe('htmlTreeAsString', () => {
@@ -84,3 +87,14 @@ describe('getDomElement', () => {
     expect(el?.id).toEqual('mydiv');
   });
 });
+
+describe('getElementIdentifier', () => {
+  it('returns the component name if it exists', () => {
+    const el = document.createElement('div');
+    el.innerHTML = '<div id="very-cool-component">😎</div>';
+    el.setAttribute('data-component', 'VeryCoolComponent');
+    expect(el).toBeDefined();
+
+    expect(getElementIdentifier(el)).toBe('VeryCoolComponent');
+  });
+});