add snapshot tests

vaadin · Feb 24, 2025 · 4945b14 · 4945b14
1 parent 5dba7ab
commit 4945b14
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/packages/form-layout/test/dom/__snapshots__/form-layout.test.snap.js b/packages/form-layout/test/dom/__snapshots__/form-layout.test.snap.js
@@ -70,3 +70,44 @@ snapshots["vaadin-form-layout auto-responsive autoRows default"] =
 `;
 /* end snapshot vaadin-form-layout auto-responsive autoRows default */
 
+snapshots["vaadin-form-layout auto-responsive basic host labelsAside"] = 
+`<vaadin-form-layout
+  auto-responsive=""
+  labels-aside=""
+  style="--_column-width: 13em; --_max-columns: 10;"
+>
+  <input placeholder="First name">
+  <input placeholder="Last name">
+  <input placeholder="Email">
+  <input placeholder="Phone">
+</vaadin-form-layout>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic host labelsAside */
+
+snapshots["vaadin-form-layout auto-responsive basic shadow labelsAside"] = 
+`<div
+  fits-labels-aside=""
+  id="layout"
+>
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic shadow labelsAside */
+
+snapshots["vaadin-form-layout auto-responsive basic shadow labelsAside not fitting side labels"] = 
+`<div id="layout">
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic shadow labelsAside not fitting side labels */
+
+snapshots["vaadin-form-layout auto-responsive basic shadow labelsAside with too narrow layout"] = 
+`<div id="layout">
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic shadow labelsAside with too narrow layout */
+
diff --git a/packages/form-layout/test/dom/form-layout.test.js b/packages/form-layout/test/dom/form-layout.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import '../../src/vaadin-form-layout.js';
 
 describe('vaadin-form-layout', () => {
@@ -33,12 +33,31 @@ describe('vaadin-form-layout', () => {
           layout.columnWidth = '15em';
           await expect(layout).dom.to.equalSnapshot();
         });
+
+        it('labelsAside', async () => {
+          layout.labelsAside = true;
+          await nextResize(layout);
+          await expect(layout).dom.to.equalSnapshot();
+        });
       });
 
       describe('shadow', () => {
         it('default', async () => {
           await expect(layout).shadowDom.to.equalSnapshot();
         });
+
+        it('labelsAside', async () => {
+          layout.labelsAside = true;
+          await nextResize(layout);
+          await expect(layout).shadowDom.to.equalSnapshot();
+        });
+
+        it('labelsAside with too narrow layout', async () => {
+          layout.style.width = '8em';
+          layout.labelsAside = true;
+          await nextResize(layout);
+          await expect(layout).shadowDom.to.equalSnapshot();
+        });
       });
     });