✨ [RUM-3684] Capture scroll record on shadow dom elements

packages/rum/src/domain/record/record.spec.ts

@@ -3,14 +3,15 @@ import type { RumConfiguration, ViewCreatedEvent } from '@datadog/browser-rum-co
 import { LifeCycle, LifeCycleEventType } from '@datadog/browser-rum-core'
 import type { Clock } from '@datadog/browser-core/test'
 import { createNewEvent, collectAsyncCalls } from '@datadog/browser-core/test'
-import { findFullSnapshot, findNode, recordsPerFullSnapshot } from '../../../test'
+import { findElement, findFullSnapshot, findNode, recordsPerFullSnapshot } from '../../../test'
 import type {
   BrowserIncrementalSnapshotRecord,
   BrowserMutationData,
   BrowserRecord,
   DocumentFragmentNode,
   ElementNode,
   FocusRecord,
+  ScrollData,
 } from '../../types'
 import { NodeType, RecordType, IncrementalSource } from '../../types'
 import { appendElement } from '../../../../rum-core/test'
@@ -334,20 +335,26 @@ describe('record', () => {
       expect(inputRecords.length).toBe(1)
     })
 
-    it('should record the scroll event inside a shadow root', () => {
-      const div = appendElement('<div></div>', createShadow()) as HTMLDivElement
+    fit('should record the scroll event inside a shadow root', () => {
+      const div = appendElement('<div unique-selector="enabled"></div>', createShadow()) as HTMLDivElement
       startRecording()
       expect(getEmittedRecords().length).toBe(recordsPerFullSnapshot())
 
       div.dispatchEvent(createNewEvent('scroll', { target: div, composed: false }))
 
       recordApi.flushMutations()
-      const innerMutationData = getLastIncrementalSnapshotData<BrowserMutationData>(
+      const innerMutationData = getLastIncrementalSnapshotData<ScrollData>(
         getEmittedRecords(),
         IncrementalSource.Scroll
       )
 
-      expect(innerMutationData).toBeDefined()
+      const fs = findFullSnapshot({ records: getEmittedRecords() })!
+      const scrollableNode = findElement(
+        fs.data.node,
+        (node) => { return node.attributes['unique-selector'] === "enabled" }
+      )!
+
+      expect(innerMutationData.id).toBe(scrollableNode.id)
     })
 
     it('should clean the state once the shadow dom is removed to avoid memory leak', () => {

test/e2e/scenario/recorder/shadowDom.scenario.ts

@@ -86,6 +86,18 @@ const divShadowDom = `<script>
  </script>
  `
 
+/** Will generate the following HTML
+ * ```html
+ * <my-div id="titi">
+ *  #shadow-root
+ *    <div scrollable-div style="height:100px; overflow: scroll;">
+ *      <div style="height:500px;"></div>
+ *    </div>
+ *    <button>scroll to 250</button>
+ *</my-div>
+ *```
+ when called like `<my-div />`
+ */
 const scrollableDivShadowDom = `<script>
  class CustomScrollableDiv extends HTMLElement {
   constructor() {
@@ -290,9 +302,11 @@ describe('recorder with shadow DOM', () => {
       <my-scrollable-div id="host" />
     `)
     .run(async ({ intakeRegistry }) => {
-      const div = await getNodeInsideShadowDom('my-scrollable-div', 'button')
+      const button = await getNodeInsideShadowDom('my-scrollable-div', 'button')
 
-      await div.click()
+      // Triggering scrollTo from the test itself is not allowed
+      // Thus, a callback to scroll the div was added to the button 'click' event
+      await button.click()
 
       await flushEvents()
       expect(intakeRegistry.replaySegments.length).toBe(1)