test: extend dialog snapshots to cover overlay shadow DOM (#9941)

Author: web-padawan

packages/dialog/test/dom/__snapshots__/dialog.test.snap.js

@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["vaadin-dialog host"] =
+snapshots["vaadin-dialog host"] = 
 `<vaadin-dialog
   opened=""
   role="dialog"
@@ -12,7 +12,7 @@ snapshots["vaadin-dialog host"] =
 `;
 /* end snapshot vaadin-dialog host */
 
-snapshots["vaadin-dialog overlay"] =
+snapshots["vaadin-dialog shadow"] = 
 `<vaadin-dialog-overlay
   exportparts="backdrop, overlay, header, title, header-content, content, footer"
   focus-trap=""
@@ -41,9 +41,9 @@ snapshots["vaadin-dialog overlay"] =
   </slot>
 </vaadin-dialog-overlay>
 `;
-/* end snapshot vaadin-dialog overlay */
+/* end snapshot vaadin-dialog shadow */
 
-snapshots["vaadin-dialog overlay modeless"] =
+snapshots["vaadin-dialog modeless"] = 
 `<vaadin-dialog-overlay
   exportparts="backdrop, overlay, header, title, header-content, content, footer"
   focus-trap=""
@@ -72,9 +72,9 @@ snapshots["vaadin-dialog overlay modeless"] =
   </slot>
 </vaadin-dialog-overlay>
 `;
-/* end snapshot vaadin-dialog overlay modeless */
+/* end snapshot vaadin-dialog modeless */
 
-snapshots["vaadin-dialog overlay theme"] =
+snapshots["vaadin-dialog theme"] = 
 `<vaadin-dialog-overlay
   exportparts="backdrop, overlay, header, title, header-content, content, footer"
   focus-trap=""
@@ -104,4 +104,62 @@ snapshots["vaadin-dialog overlay theme"] =
   </slot>
 </vaadin-dialog-overlay>
 `;
-/* end snapshot vaadin-dialog overlay theme */
+/* end snapshot vaadin-dialog theme */
+
+snapshots["vaadin-dialog overlay"] = 
+`<div
+  id="backdrop"
+  part="backdrop"
+>
+</div>
+<div
+  id="overlay"
+  part="overlay"
+  tabindex="0"
+>
+  <section
+    class="resizer-container"
+    id="resizerContainer"
+  >
+    <header part="header">
+      <div part="title">
+        <slot name="title">
+        </slot>
+      </div>
+      <div part="header-content">
+        <slot name="header-content">
+        </slot>
+      </div>
+    </header>
+    <div
+      id="content"
+      part="content"
+    >
+      <slot>
+      </slot>
+    </div>
+    <footer part="footer">
+      <slot name="footer">
+      </slot>
+    </footer>
+    <div class="edge n resizer">
+    </div>
+    <div class="e edge resizer">
+    </div>
+    <div class="edge resizer s">
+    </div>
+    <div class="edge resizer w">
+    </div>
+    <div class="nw resizer">
+    </div>
+    <div class="ne resizer">
+    </div>
+    <div class="resizer se">
+    </div>
+    <div class="resizer sw">
+    </div>
+  </section>
+</div>
+`;
+/* end snapshot vaadin-dialog overlay */
+

packages/dialog/test/dom/dialog.test.js

@@ -26,19 +26,23 @@ describe('vaadin-dialog', () => {
     await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
-  it('overlay', async () => {
-    await expect(overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+  it('shadow', async () => {
+    await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
-  it('overlay modeless', async () => {
+  it('modeless', async () => {
     dialog.modeless = true;
     await nextUpdate(dialog);
-    await expect(overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
-  it('overlay theme', async () => {
+  it('theme', async () => {
     dialog.setAttribute('theme', 'custom');
     await nextUpdate(dialog);
-    await expect(overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+  });
+
+  it('overlay', async () => {
+    await expect(overlay).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 });