fix(rum): make sure custom transaction name logic is IE11 compliant (#…

…1511)

packages/rum-core/src/common/observers/page-clicks.js

@@ -108,13 +108,15 @@ function buildTransactionName(target) {
 }
 
 function findCustomTransactionName(target) {
+  const trCustomNameAttribute = 'data-transaction-name'
+  const fallbackName = target.getAttribute(trCustomNameAttribute)
   if (target.closest) {
     // Leverage closest API to traverse the element and its parents
     // only links and buttons are considered.
     const element = target.closest(INTERACTIVE_SELECTOR)
-    return element ? element.dataset.transactionName : null
+    return element ? element.getAttribute(trCustomNameAttribute) : fallbackName
   }
 
-  // browsers which don't support closest API will just look at the target element
-  return target.dataset.transactionName
+  // browsers (such as IE11) which don't support closest API will just look at the target element
+  return fallbackName
 }

packages/rum-core/test/common/observers/page-clicks.spec.js

@@ -144,53 +144,88 @@ describe('observePageClicks', () => {
   describeIf(
     'browsers supporting closest API',
     () => {
-      let childElement = document.createElement('span')
       ;[
         {
           name:
-            'should use customTransactionName when click target is a <button> descendant',
+            'should use customTransactionName when click target is a <button> child',
           parentTagName: 'button',
-          customTransactionName: 'button-custom-name',
+          parentCustomTransactionName: 'button-custom-name',
+          childCustomTransactionName: 'custom-name-html-child',
           expected: 'Click - button-custom-name'
         },
         {
           name:
-            'should use customTransactionName when click target is a <a> descendant',
+            'should use customTransactionName when click target is a <a> child',
           parentTagName: 'a',
-          customTransactionName: 'a-custom-name-html',
+          parentCustomTransactionName: 'a-custom-name-html',
+          childCustomTransactionName: 'custom-name-html-child',
           expected: 'Click - a-custom-name-html'
         },
         {
           name:
-            'should not use customTransactionName when click target is not descendant from <button> nor <a>',
+            'should use customTransactionName from child when parent does not have the attribute set',
+          parentTagName: 'button',
+          parentCustomTransactionName: null,
+          childCustomTransactionName: 'custom-name-html-child',
+          expected: 'Click - custom-name-html-child'
+        },
+        {
+          name:
+            'should not use parent customTransactionName when click target is not child from <button> nor <a>',
           parentTagName: 'div',
-          customTransactionName: 'div-custom-name-html',
+          parentCustomTransactionName: 'div-custom-name-html',
+          childCustomTransactionName: null,
           expected: 'Click - span'
+        },
+        {
+          name:
+            'should use child customTransactionName when click target is not child from <button> nor <a>',
+          parentTagName: 'div',
+          parentCustomTransactionName: 'div-custom-name-html',
+          childCustomTransactionName: 'custom-name-html-child',
+          expected: 'Click - custom-name-html-child'
+        }
+      ].forEach(
+        ({
+          name,
+          parentTagName,
+          parentCustomTransactionName,
+          childCustomTransactionName,
+          expected
+        }) => {
+          it(`${name}`, () => {
+            unobservePageClicks = observePageClicks(transactionService)
+            let parentElement = document.createElement(parentTagName)
+            let childElement = document.createElement('span')
+            if (parentCustomTransactionName) {
+              parentElement.setAttribute(
+                'data-transaction-name',
+                parentCustomTransactionName
+              )
+            }
+            if (childCustomTransactionName) {
+              childElement.setAttribute(
+                'data-transaction-name',
+                childCustomTransactionName
+              )
+            }
+            parentElement.appendChild(childElement)
+            containerElement.appendChild(parentElement)
+            // The structured represented here is:
+            /**
+             * <{{parentTagName}} data-transaction-name="{{customTransactionName}}">
+             *   <span></span>
+             * </{{parentTagName}}>
+             */
+
+            // Perform the click on the span - which is the child of the defined {{parentElement}} node
+            childElement.click()
+
+            let tr = transactionService.getCurrentTransaction()
+            expect(tr.name).toBe(expected)
+          })
         }
-      ].forEach(({ name, parentTagName, customTransactionName, expected }) => {
-        it(`${name}`, () => {
-          unobservePageClicks = observePageClicks(transactionService)
-          let parentElement = document.createElement(parentTagName)
-          parentElement.setAttribute(
-            'data-transaction-name',
-            customTransactionName
-          )
-          parentElement.appendChild(childElement)
-          containerElement.appendChild(parentElement)
-          // The structured represented here is:
-          /**
-           * <{{parentTagName}} data-transaction-name="{{customTransactionName}}">
-           *   <span></span>
-           * </{{parentTagName}}>
-           */
-
-          // Perform the click on the span - which is descendant of the defined {{parentElement}} node
-          childElement.click()
-
-          let tr = transactionService.getCurrentTransaction()
-          expect(tr.name).toBe(expected)
-        })
-      })
+      )
     },
     document.body.closest
   )