From 157f74f7c8dc1be9e234cb614da8b503a69b8f28 Mon Sep 17 00:00:00 2001
From: Thibaut Gery <thibaut.gery@datadoghq.com>
Date: Fri, 17 Feb 2023 14:15:44 +0100
Subject: [PATCH 1/3] [REPLAY] Fix serialization for checkbox & radio

---
 .../rum/src/domain/record/serialize.spec.ts   | 60 +++++++++++++++++++
 packages/rum/src/domain/record/serialize.ts   |  2 +-
 packages/rum/test/htmlAst.ts                  |  4 --
 3 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/packages/rum/src/domain/record/serialize.spec.ts b/packages/rum/src/domain/record/serialize.spec.ts
index 543eb1644c..87f856a081 100644
--- a/packages/rum/src/domain/record/serialize.spec.ts
+++ b/packages/rum/src/domain/record/serialize.spec.ts
@@ -359,6 +359,66 @@ describe('serializeNodeWithId', () => {
       )
     })
 
+    it('serializes <input type="radio"> elements checked state', () => {
+      const radio = document.createElement('input')
+      radio.type = 'radio'
+      expect(serializeNodeWithId(radio, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+        jasmine.objectContaining({
+          attributes: {
+            type: 'radio',
+            value: 'on',
+            checked: false,
+          },
+        })
+      )
+
+      radio.checked = true
+
+      expect(serializeNodeWithId(radio, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+        jasmine.objectContaining({
+          attributes: {
+            type: 'radio',
+            value: 'on',
+            checked: true,
+          },
+        })
+      )
+    })
+
+    it('serializes <input type="radio"> elements checked state with mask serialization', () => {
+      const radio = document.createElement('input')
+      radio.type = 'radio'
+      expect(
+        serializeNodeWithId(radio, {
+          ...DEFAULT_OPTIONS,
+          parentNodePrivacyLevel: NodePrivacyLevel.MASK_USER_INPUT,
+        })! as ElementNode
+      ).toEqual(
+        jasmine.objectContaining({
+          attributes: {
+            type: 'radio',
+            value: '***',
+          },
+        })
+      )
+
+      radio.checked = true
+
+      expect(
+        serializeNodeWithId(radio, {
+          ...DEFAULT_OPTIONS,
+          parentNodePrivacyLevel: NodePrivacyLevel.MASK_USER_INPUT,
+        })! as ElementNode
+      ).toEqual(
+        jasmine.objectContaining({
+          attributes: {
+            type: 'radio',
+            value: '***',
+          },
+        })
+      )
+    })
+
     it('serializes <audio> elements paused state', () => {
       const audio = document.createElement('audio')
 
diff --git a/packages/rum/src/domain/record/serialize.ts b/packages/rum/src/domain/record/serialize.ts
index 7f3cc1d879..ac41133f9f 100644
--- a/packages/rum/src/domain/record/serialize.ts
+++ b/packages/rum/src/domain/record/serialize.ts
@@ -460,7 +460,7 @@ function getAttributesForPrivacyLevel(
     if (nodePrivacyLevel === NodePrivacyLevel.ALLOW) {
       safeAttrs.checked = !!inputElement.checked
     } else if (shouldMaskNode(inputElement, nodePrivacyLevel)) {
-      safeAttrs.checked = CENSORED_STRING_MARK
+      delete safeAttrs.checked
     }
   }
 
diff --git a/packages/rum/test/htmlAst.ts b/packages/rum/test/htmlAst.ts
index e95abe7960..4202fec3b2 100644
--- a/packages/rum/test/htmlAst.ts
+++ b/packages/rum/test/htmlAst.ts
@@ -340,7 +340,6 @@ export const AST_MASK = {
                 type: 'checkbox',
                 name: 'inputFoo',
                 value: '***',
-                checked: '***',
               },
               childNodes: [],
             },
@@ -372,7 +371,6 @@ export const AST_MASK = {
                 type: 'radio',
                 name: 'radioGroup',
                 value: '***',
-                checked: '***',
               },
               childNodes: [],
             },
@@ -655,7 +653,6 @@ export const AST_MASK_USER_INPUT = {
                 type: 'checkbox',
                 name: 'inputFoo',
                 value: '***',
-                checked: '***',
               },
               childNodes: [],
             },
@@ -687,7 +684,6 @@ export const AST_MASK_USER_INPUT = {
                 type: 'radio',
                 name: 'radioGroup',
                 value: '***',
-                checked: '***',
               },
               childNodes: [],
             },

From 8f9eb1f1206c1bea4b6df025155f36dcd1104272 Mon Sep 17 00:00:00 2001
From: Thibaut Gery <thibaut.gery@datadoghq.com>
Date: Mon, 20 Feb 2023 11:16:38 +0100
Subject: [PATCH 2/3] [REPLAY] Refactor unit tests for clarity

---
 .../rum/src/domain/record/serialize.spec.ts   | 207 ++++++++----------
 1 file changed, 92 insertions(+), 115 deletions(-)

diff --git a/packages/rum/src/domain/record/serialize.spec.ts b/packages/rum/src/domain/record/serialize.spec.ts
index 87f856a081..3df7a40a56 100644
--- a/packages/rum/src/domain/record/serialize.spec.ts
+++ b/packages/rum/src/domain/record/serialize.spec.ts
@@ -107,14 +107,21 @@ describe('serializeNodeWithId', () => {
       isolatedDom.clear()
     })
 
+    function serializeElement(
+      node: Node,
+      options: SerializeOptions = DEFAULT_OPTIONS
+    ): (ElementNode & { id: number }) | null {
+      return serializeNodeWithId(node, options) as (ElementNode & { id: number }) | null
+    }
+
     it('serializes a div', () => {
-      expect(serializeNodeWithId(document.createElement('div'), DEFAULT_OPTIONS)).toEqual({
+      expect(serializeElement(document.createElement('div'))).toEqual({
         type: NodeType.Element,
         tagName: 'div',
         attributes: {},
         isSVG: undefined,
         childNodes: [],
-        id: jasmine.any(Number) as unknown as number,
+        id: jasmine.any(Number),
       })
     })
 
@@ -122,7 +129,7 @@ describe('serializeNodeWithId', () => {
       const element = document.createElement('div')
       element.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_HIDDEN)
 
-      expect(serializeNodeWithId(element, DEFAULT_OPTIONS)).toEqual({
+      expect(serializeElement(element)).toEqual({
         type: NodeType.Element,
         tagName: 'div',
         attributes: {
@@ -132,7 +139,7 @@ describe('serializeNodeWithId', () => {
         },
         isSVG: undefined,
         childNodes: [],
-        id: jasmine.any(Number) as unknown as number,
+        id: jasmine.any(Number),
       })
     })
 
@@ -140,7 +147,7 @@ describe('serializeNodeWithId', () => {
       const element = document.createElement('div')
       element.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_HIDDEN)
       element.appendChild(document.createElement('hr'))
-      expect((serializeNodeWithId(element, DEFAULT_OPTIONS)! as ElementNode).childNodes).toEqual([])
+      expect(serializeElement(element)!.childNodes).toEqual([])
     })
 
     it('serializes attributes', () => {
@@ -150,7 +157,7 @@ describe('serializeNodeWithId', () => {
       element.className = 'zog'
       element.style.width = '10px'
 
-      expect((serializeNodeWithId(element, DEFAULT_OPTIONS)! as ElementNode).attributes).toEqual({
+      expect(serializeElement(element)!.attributes).toEqual({
         foo: 'bar',
         'data-foo': 'data-bar',
         class: 'zog',
@@ -175,16 +182,14 @@ describe('serializeNodeWithId', () => {
       })
 
       it('should be retrieved from attributes during initial full snapshot', () => {
-        const serializedAttributes = (
-          serializeNodeWithId(element, {
-            ...DEFAULT_OPTIONS,
-            serializationContext: {
-              shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
-              status: SerializationContextStatus.INITIAL_FULL_SNAPSHOT,
-              elementsScrollPositions,
-            },
-          }) as ElementNode
-        ).attributes
+        const serializedAttributes = serializeElement(element, {
+          ...DEFAULT_OPTIONS,
+          serializationContext: {
+            shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
+            status: SerializationContextStatus.INITIAL_FULL_SNAPSHOT,
+            elementsScrollPositions,
+          },
+        })!.attributes
 
         expect(serializedAttributes).toEqual(
           jasmine.objectContaining({
@@ -196,16 +201,14 @@ describe('serializeNodeWithId', () => {
       })
 
       it('should not be retrieved from attributes during subsequent full snapshot', () => {
-        const serializedAttributes = (
-          serializeNodeWithId(element, {
-            ...DEFAULT_OPTIONS,
-            serializationContext: {
-              shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
-              status: SerializationContextStatus.SUBSEQUENT_FULL_SNAPSHOT,
-              elementsScrollPositions,
-            },
-          }) as ElementNode
-        ).attributes
+        const serializedAttributes = serializeElement(element, {
+          ...DEFAULT_OPTIONS,
+          serializationContext: {
+            shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
+            status: SerializationContextStatus.SUBSEQUENT_FULL_SNAPSHOT,
+            elementsScrollPositions,
+          },
+        })!.attributes
 
         expect(serializedAttributes.rr_scrollLeft).toBeUndefined()
         expect(serializedAttributes.rr_scrollTop).toBeUndefined()
@@ -215,16 +218,14 @@ describe('serializeNodeWithId', () => {
       it('should be retrieved from elementsScrollPositions during subsequent full snapshot', () => {
         elementsScrollPositions.set(element, { scrollLeft: 10, scrollTop: 20 })
 
-        const serializedAttributes = (
-          serializeNodeWithId(element, {
-            ...DEFAULT_OPTIONS,
-            serializationContext: {
-              shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
-              status: SerializationContextStatus.SUBSEQUENT_FULL_SNAPSHOT,
-              elementsScrollPositions,
-            },
-          }) as ElementNode
-        ).attributes
+        const serializedAttributes = serializeElement(element, {
+          ...DEFAULT_OPTIONS,
+          serializationContext: {
+            shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
+            status: SerializationContextStatus.SUBSEQUENT_FULL_SNAPSHOT,
+            elementsScrollPositions,
+          },
+        })!.attributes
 
         expect(serializedAttributes).toEqual(
           jasmine.objectContaining({
@@ -237,15 +238,13 @@ describe('serializeNodeWithId', () => {
       it('should not be retrieved during mutation', () => {
         elementsScrollPositions.set(element, { scrollLeft: 10, scrollTop: 20 })
 
-        const serializedAttributes = (
-          serializeNodeWithId(element, {
-            ...DEFAULT_OPTIONS,
-            serializationContext: {
-              shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
-              status: SerializationContextStatus.MUTATION,
-            },
-          }) as ElementNode
-        ).attributes
+        const serializedAttributes = serializeElement(element, {
+          ...DEFAULT_OPTIONS,
+          serializationContext: {
+            shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
+            status: SerializationContextStatus.MUTATION,
+          },
+        })!.attributes
 
         expect(serializedAttributes.rr_scrollLeft).toBeUndefined()
         expect(serializedAttributes.rr_scrollTop).toBeUndefined()
@@ -256,7 +255,7 @@ describe('serializeNodeWithId', () => {
       const head = document.createElement('head')
       head.innerHTML = '  <title>  foo </title>  '
 
-      expect((serializeNodeWithId(head, DEFAULT_OPTIONS)! as ElementNode).childNodes).toEqual([
+      expect(serializeElement(head)!.childNodes).toEqual([
         jasmine.objectContaining({
           type: NodeType.Element,
           tagName: 'title',
@@ -269,7 +268,7 @@ describe('serializeNodeWithId', () => {
       const input = document.createElement('input')
       input.value = 'toto'
 
-      expect(serializeNodeWithId(input, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(input)!).toEqual(
         jasmine.objectContaining({
           attributes: { value: 'toto' },
         })
@@ -280,7 +279,7 @@ describe('serializeNodeWithId', () => {
       const textarea = document.createElement('textarea')
       textarea.value = 'toto'
 
-      expect(serializeNodeWithId(textarea, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(textarea)!).toEqual(
         jasmine.objectContaining({
           attributes: { value: 'toto' },
         })
@@ -297,7 +296,7 @@ describe('serializeNodeWithId', () => {
       select.appendChild(option2)
       select.options.selectedIndex = 1
 
-      expect(serializeNodeWithId(select, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(select)!).toEqual(
         jasmine.objectContaining({
           attributes: { value: 'bar' },
           childNodes: [
@@ -322,7 +321,7 @@ describe('serializeNodeWithId', () => {
       input.type = 'password'
       input.value = 'toto'
 
-      expect(serializeNodeWithId(input, DEFAULT_OPTIONS)! as ElementNode).toEqual(jasmine.objectContaining({}))
+      expect(serializeElement(input)!).toEqual(jasmine.objectContaining({}))
     })
 
     it('does not serialize <input type="password"> values set via attribute setter', () => {
@@ -330,13 +329,13 @@ describe('serializeNodeWithId', () => {
       input.type = 'password'
       input.setAttribute('value', 'toto')
 
-      expect(serializeNodeWithId(input, DEFAULT_OPTIONS)! as ElementNode).toEqual(jasmine.objectContaining({}))
+      expect(serializeElement(input)!).toEqual(jasmine.objectContaining({}))
     })
 
     it('serializes <input type="checkbox"> elements checked state', () => {
       const checkbox = document.createElement('input')
       checkbox.type = 'checkbox'
-      expect(serializeNodeWithId(checkbox, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(checkbox)!).toEqual(
         jasmine.objectContaining({
           attributes: {
             type: 'checkbox',
@@ -348,7 +347,7 @@ describe('serializeNodeWithId', () => {
 
       checkbox.checked = true
 
-      expect(serializeNodeWithId(checkbox, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(checkbox)!).toEqual(
         jasmine.objectContaining({
           attributes: {
             type: 'checkbox',
@@ -362,67 +361,25 @@ describe('serializeNodeWithId', () => {
     it('serializes <input type="radio"> elements checked state', () => {
       const radio = document.createElement('input')
       radio.type = 'radio'
-      expect(serializeNodeWithId(radio, DEFAULT_OPTIONS)! as ElementNode).toEqual(
-        jasmine.objectContaining({
-          attributes: {
-            type: 'radio',
-            value: 'on',
-            checked: false,
-          },
-        })
-      )
-
-      radio.checked = true
-
-      expect(serializeNodeWithId(radio, DEFAULT_OPTIONS)! as ElementNode).toEqual(
-        jasmine.objectContaining({
-          attributes: {
-            type: 'radio',
-            value: 'on',
-            checked: true,
-          },
-        })
-      )
-    })
-
-    it('serializes <input type="radio"> elements checked state with mask serialization', () => {
-      const radio = document.createElement('input')
-      radio.type = 'radio'
-      expect(
-        serializeNodeWithId(radio, {
-          ...DEFAULT_OPTIONS,
-          parentNodePrivacyLevel: NodePrivacyLevel.MASK_USER_INPUT,
-        })! as ElementNode
-      ).toEqual(
-        jasmine.objectContaining({
-          attributes: {
-            type: 'radio',
-            value: '***',
-          },
-        })
-      )
+      expect(serializeElement(radio)!.attributes).toEqual({
+        type: 'radio',
+        value: 'on',
+        checked: false,
+      })
 
       radio.checked = true
 
-      expect(
-        serializeNodeWithId(radio, {
-          ...DEFAULT_OPTIONS,
-          parentNodePrivacyLevel: NodePrivacyLevel.MASK_USER_INPUT,
-        })! as ElementNode
-      ).toEqual(
-        jasmine.objectContaining({
-          attributes: {
-            type: 'radio',
-            value: '***',
-          },
-        })
-      )
+      expect(serializeElement(radio)!.attributes).toEqual({
+        type: 'radio',
+        value: 'on',
+        checked: true,
+      })
     })
 
     it('serializes <audio> elements paused state', () => {
       const audio = document.createElement('audio')
 
-      expect(serializeNodeWithId(audio, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(audio)!).toEqual(
         jasmine.objectContaining({
           attributes: { rr_mediaState: 'paused' },
         })
@@ -431,7 +388,7 @@ describe('serializeNodeWithId', () => {
       // Emulate a playing audio file
       Object.defineProperty(audio, 'paused', { value: false })
 
-      expect(serializeNodeWithId(audio, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+      expect(serializeElement(audio)!).toEqual(
         jasmine.objectContaining({
           attributes: { rr_mediaState: 'played' },
         })
@@ -444,7 +401,7 @@ describe('serializeNodeWithId', () => {
         input.value = 'toto'
         input.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK_USER_INPUT)
 
-        expect(serializeNodeWithId(input, DEFAULT_OPTIONS)! as ElementNode).toEqual(
+        expect(serializeElement(input)!).toEqual(
           jasmine.objectContaining({
             attributes: {
               [PRIVACY_ATTR_NAME]: PRIVACY_ATTR_VALUE_MASK_USER_INPUT,
@@ -461,7 +418,7 @@ describe('serializeNodeWithId', () => {
         parent.appendChild(input)
         parent.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK_USER_INPUT)
 
-        expect((serializeNodeWithId(parent, DEFAULT_OPTIONS)! as ElementNode).childNodes[0]).toEqual(
+        expect(serializeElement(parent)!.childNodes[0]).toEqual(
           jasmine.objectContaining({
             attributes: { value: '***' },
           })
@@ -474,7 +431,7 @@ describe('serializeNodeWithId', () => {
         button.value = 'toto'
         button.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK_USER_INPUT)
 
-        expect((serializeNodeWithId(button, DEFAULT_OPTIONS)! as ElementNode).attributes.value).toEqual('toto')
+        expect(serializeElement(button)!.attributes.value).toEqual('toto')
       })
 
       it('does not apply mask for <input type="submit"> contained in a masked ancestor', () => {
@@ -483,7 +440,27 @@ describe('serializeNodeWithId', () => {
         button.value = 'toto'
         button.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK_USER_INPUT)
 
-        expect((serializeNodeWithId(button, DEFAULT_OPTIONS)! as ElementNode).attributes.value).toEqual('toto')
+        expect(serializeElement(button)!.attributes.value).toEqual('toto')
+      })
+
+      it('serializes <input type="radio"> elements without checked property', () => {
+        const radio = document.createElement('input')
+        radio.type = 'radio'
+        radio.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK_USER_INPUT)
+
+        expect(serializeElement(radio)!.attributes).toEqual({
+          type: 'radio',
+          value: '***',
+          'data-dd-privacy': 'mask-user-input',
+        })
+
+        radio.checked = true
+
+        expect(serializeElement(radio)!.attributes).toEqual({
+          type: 'radio',
+          value: '***',
+          'data-dd-privacy': 'mask-user-input',
+        })
       })
     })
 
@@ -493,14 +470,14 @@ describe('serializeNodeWithId', () => {
         input.placeholder = 'someValue'
         input.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK)
 
-        expect((serializeNodeWithId(input, DEFAULT_OPTIONS)! as ElementNode).attributes.placeholder).toEqual('***')
+        expect(serializeElement(input)!.attributes.placeholder).toEqual('***')
       })
     })
 
     it('serializes a shadow host', () => {
       const div = document.createElement('div')
       div.attachShadow({ mode: 'open' })
-      expect(serializeNodeWithId(div, DEFAULT_OPTIONS)).toEqual({
+      expect(serializeElement(div, DEFAULT_OPTIONS)).toEqual({
         type: NodeType.Element,
         tagName: 'div',
         attributes: {},
@@ -533,7 +510,7 @@ describe('serializeNodeWithId', () => {
           },
         },
       }
-      expect(serializeNodeWithId(div, options)).toEqual({
+      expect(serializeElement(div, options)).toEqual({
         type: NodeType.Element,
         tagName: 'div',
         attributes: {},
@@ -566,7 +543,7 @@ describe('serializeNodeWithId', () => {
       isolatedDom.document.head.appendChild(styleNode)
       const styleSheet = styleNode.sheet
       styleSheet?.insertRule('body { width: 100%; }')
-      expect(serializeNodeWithId(styleNode, DEFAULT_OPTIONS)).toEqual({
+      expect(serializeElement(styleNode)).toEqual({
         type: NodeType.Element,
         tagName: 'style',
         id: jasmine.any(Number) as unknown as number,

From cf1a67f74c4e56b7ee5a62c4633a7c548baf4859 Mon Sep 17 00:00:00 2001
From: Thibaut Gery <thibaut.gery@datadoghq.com>
Date: Tue, 21 Feb 2023 14:03:12 +0100
Subject: [PATCH 3/3] [REPLAY] Improve typing

---
 packages/rum/src/domain/record/serialize.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rum/src/domain/record/serialize.spec.ts b/packages/rum/src/domain/record/serialize.spec.ts
index 3df7a40a56..b5668eb30f 100644
--- a/packages/rum/src/domain/record/serialize.spec.ts
+++ b/packages/rum/src/domain/record/serialize.spec.ts
@@ -108,7 +108,7 @@ describe('serializeNodeWithId', () => {
     })
 
     function serializeElement(
-      node: Node,
+      node: Element,
       options: SerializeOptions = DEFAULT_OPTIONS
     ): (ElementNode & { id: number }) | null {
       return serializeNodeWithId(node, options) as (ElementNode & { id: number }) | null