From 867494eacf06410ee3281e4d270d22c8a74e5bd1 Mon Sep 17 00:00:00 2001
From: Thibaut Gery <thibaut.gery@datadoghq.com>
Date: Wed, 4 Jan 2023 14:50:15 +0100
Subject: [PATCH] [REPLAY] Add e2e test on adoptedStyleSheets on shadow root

---
 .../scenario/recorder/shadowDom.scenario.ts   | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/test/e2e/scenario/recorder/shadowDom.scenario.ts b/test/e2e/scenario/recorder/shadowDom.scenario.ts
index 1f9cfceeff..83493c376e 100644
--- a/test/e2e/scenario/recorder/shadowDom.scenario.ts
+++ b/test/e2e/scenario/recorder/shadowDom.scenario.ts
@@ -8,6 +8,7 @@ import {
   findElementWithTagName,
   findFullSnapshot,
   findIncrementalSnapshot,
+  findNode,
   findTextContent,
   findTextNode,
 } from '@datadog/browser-rum/test/utils'
@@ -80,6 +81,34 @@ const divShadowDom = `<script>
  </script>
  `
 
+/** Will generate the following HTML 
+ * ```html
+ * <my-div id="titi">
+ *  #shadow-root
+ *    <div>toto</div>
+ *</my-div>
+ *```
+ when called like `<my-div />`
+ */
+const divWithStyleShadowDom = `<script>
+class DivWithStyle extends HTMLElement {
+ constructor() {
+   super();
+   this.attachShadow({ mode: "open" });
+ }
+ connectedCallback() {
+   const div = document.createElement("div");
+   div.textContent = 'toto'
+   this.shadowRoot.appendChild(div);
+   const styleSheet = new CSSStyleSheet();
+   styleSheet.insertRule('div { width: 100%; }')
+   this.shadowRoot.adoptedStyleSheets= [styleSheet]
+ }
+}
+     window.customElements.define("div-with-style", DivWithStyle);
+</script>
+`
+
 describe('recorder with shadow DOM', () => {
   createTest('can record fullsnapshot with the detail inside the shadow root')
     .withRum({ defaultPrivacyLevel: 'allow', enableExperimentalFeatures: ['record_shadow_dom'] })
@@ -104,6 +133,33 @@ describe('recorder with shadow DOM', () => {
       expect(textNode?.textContent).toBe('toto')
     })
 
+  createTest('can record fullsnapshot with adoptedStylesheet')
+    .withRum({ defaultPrivacyLevel: 'allow', enableExperimentalFeatures: ['record_shadow_dom'] })
+    .withRumInit(initRumAndStartRecording)
+    .withSetup(bundleSetup)
+    .withBody(
+      html`
+        ${divWithStyleShadowDom}
+        <div-with-style />
+      `
+    )
+    .run(async ({ serverEvents }) => {
+      await flushEvents()
+
+      expect(serverEvents.sessionReplay.length).toBe(1)
+
+      const fullSnapshot = findFullSnapshot(getFirstSegment(serverEvents))!
+      expect(fullSnapshot).toBeTruthy()
+      const shadowRoot = findNode(
+        fullSnapshot.data.node,
+        (node) => node.type === NodeType.DocumentFragment
+      ) as DocumentFragmentNode
+      expect(shadowRoot.isShadowRoot).toBe(true)
+      expect(shadowRoot.adoptedStyleSheets).toEqual([
+        { cssRules: ['div { width: 100%; }'], disabled: false, media: [] },
+      ])
+    })
+
   createTest('can apply privacy level set from outside or inside the shadow DOM')
     .withRum({ defaultPrivacyLevel: 'allow', enableExperimentalFeatures: ['record_shadow_dom'] })
     .withRumInit(initRumAndStartRecording)