From dfe8ee2ac12fa556915082b425b4bf39f0aa2fe8 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Tue, 25 Feb 2025 17:31:56 +0400
Subject: [PATCH] test: streamline code for autoResponsive tests

---
 .../test/form-layout-auto-responsive.test.js  |  34 +++--
 test/integration/dialog-form-layout.test.js   |  98 +++++++--------
 .../horizontal-layout-form-layout.test.js     | 116 +++++++-----------
 3 files changed, 111 insertions(+), 137 deletions(-)

diff --git a/packages/form-layout/test/form-layout-auto-responsive.test.js b/packages/form-layout/test/form-layout-auto-responsive.test.js
index 752fe24db7..c45ba47ff6 100644
--- a/packages/form-layout/test/form-layout-auto-responsive.test.js
+++ b/packages/form-layout/test/form-layout-auto-responsive.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';
 import '../src/vaadin-form-row.js';
 import { assertFormLayoutGrid } from './helpers.js';
@@ -124,24 +124,20 @@ describe('form-layout auto responsive', () => {
       assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
     });
 
-    it('should adjust number of columns based on container width', () => {
-      container.style.width = '300px';
-      assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
-
-      container.style.width = '200px';
-      assertFormLayoutGrid(layout, { columns: 2, rows: 2 });
-
-      container.style.width = '100px';
-      assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
-
-      container.style.width = '50px';
-      assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
-
-      container.style.width = '200px';
-      assertFormLayoutGrid(layout, { columns: 2, rows: 2 });
-
-      container.style.width = '300px';
-      assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+    it('should adjust number of columns based on container width', async () => {
+      const breakpoints = [
+        { width: '300px', columns: 3, rows: 2 },
+        { width: '200px', columns: 2, rows: 2 },
+        { width: '100px', columns: 1, rows: 4 },
+        { width: '200px', columns: 2, rows: 2 },
+        { width: '300px', columns: 3, rows: 2 },
+      ];
+
+      for (const { width, columns, rows } of breakpoints) {
+        container.style.width = width;
+        await nextResize(layout);
+        assertFormLayoutGrid(layout, { columns, rows });
+      }
     });
   });
 });
diff --git a/test/integration/dialog-form-layout.test.js b/test/integration/dialog-form-layout.test.js
index 651173001e..4af1494861 100644
--- a/test/integration/dialog-form-layout.test.js
+++ b/test/integration/dialog-form-layout.test.js
@@ -1,5 +1,5 @@
 import { setViewport } from '@vaadin/test-runner-commands';
-import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, nextResize } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '@vaadin/form-layout';
 import '@vaadin/form-layout/vaadin-form-item.js';
@@ -54,59 +54,59 @@ describe('form-layout in dialog', () => {
   });
 
   describe('auto-responsive', () => {
-    beforeEach(async () => {
-      dialog = fixtureSync(`<vaadin-dialog></vaadin-dialog>`);
-      dialog.renderer = (root) => {
-        root.innerHTML = `
-          <vaadin-form-layout
-            auto-responsive
-            auto-rows
-            max-columns="3"
-            column-width="100px"
-            style="--vaadin-form-layout-column-spacing: 0px;"
-          >
-            <input placeholder="First name">
-            <input placeholder="Last Name">
-            <input placeholder="Email">
-            <input placeholder="Phone">
-          </vaadin-form-layout>
-        `;
-      };
-      dialog.opened = true;
-      await nextRender();
-      layout = dialog.$.overlay.querySelector('vaadin-form-layout');
-    });
-
-    afterEach(async () => {
-      dialog.opened = false;
-      await nextFrame();
-    });
-
-    it('should start with max number of form layout columns', () => {
-      assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
-    });
-
-    it('should adjust number of form layout columns based on dialog width', async () => {
-      // Dialog adds a total gap of 80px between the layout and the viewport
-      const dialogGap = 80;
+    // Dialog adds a total gap of 80px between the layout and the viewport
+    const DIALOG_GAP = 80;
 
-      await setViewport({ width: 300 + dialogGap, height: 768 });
-      assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+    describe('basic', () => {
+      beforeEach(async () => {
+        dialog = fixtureSync(`<vaadin-dialog></vaadin-dialog>`);
+        dialog.renderer = (root) => {
+          root.innerHTML = `
+            <vaadin-form-layout
+              auto-responsive
+              auto-rows
+              max-columns="3"
+              column-width="100px"
+              style="--vaadin-form-layout-column-spacing: 0px;"
+            >
+              <input placeholder="First name">
+              <input placeholder="Last Name">
+              <input placeholder="Email">
+              <input placeholder="Phone">
+            </vaadin-form-layout>
+          `;
+        };
+        dialog.opened = true;
+        await nextRender();
+        layout = dialog.$.overlay.querySelector('vaadin-form-layout');
+      });
 
-      await setViewport({ width: 200 + dialogGap, height: 768 });
-      assertFormLayoutGrid(layout, { columns: 2, rows: 2 });
+      afterEach(async () => {
+        dialog.opened = false;
+        await nextFrame();
+      });
 
-      await setViewport({ width: 100 + dialogGap, height: 768 });
-      assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
+      it('should start with max number of form layout columns', () => {
+        assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+      });
 
-      await setViewport({ width: 50 + dialogGap, height: 768 });
-      assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
-
-      await setViewport({ width: 200 + dialogGap, height: 768 });
-      assertFormLayoutGrid(layout, { columns: 2, rows: 2 });
+      it('should adjust number of form layout columns based on dialog width', async () => {
+        const breakpoints = [
+          { width: 300, columns: 3, rows: 2 },
+          { width: 200, columns: 2, rows: 2 },
+          { width: 100, columns: 1, rows: 4 },
+          { width: 50, columns: 1, rows: 4 },
+          { width: 100, columns: 1, rows: 4 },
+          { width: 200, columns: 2, rows: 2 },
+          { width: 300, columns: 3, rows: 2 },
+        ];
 
-      await setViewport({ width: 300 + dialogGap, height: 768 });
-      assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+        for (const { width, columns, rows } of breakpoints) {
+          await setViewport({ width: width + DIALOG_GAP, height: 768 });
+          await nextResize(layout);
+          assertFormLayoutGrid(layout, { columns, rows });
+        }
+      });
     });
   });
 });
diff --git a/test/integration/horizontal-layout-form-layout.test.js b/test/integration/horizontal-layout-form-layout.test.js
index de218cfbb2..fa8d021605 100644
--- a/test/integration/horizontal-layout-form-layout.test.js
+++ b/test/integration/horizontal-layout-form-layout.test.js
@@ -1,5 +1,5 @@
 import { setViewport } from '@vaadin/test-runner-commands';
-import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '@vaadin/form-layout';
 import '@vaadin/horizontal-layout';
@@ -13,80 +13,58 @@ describe('form-layouts in horizontal-layout', () => {
   });
 
   describe('auto-responsive', () => {
-    beforeEach(async () => {
-      horizontalLayout = fixtureSync(`
-        <vaadin-horizontal-layout>
-          <vaadin-form-layout
-            auto-responsive
-            auto-rows
-            max-columns="3"
-            column-width="100px"
-            style="--vaadin-form-layout-column-spacing: 0px;"
-          >
-            <input placeholder="First name">
-            <input placeholder="Last name">
-            <input placeholder="Email">
-            <input placeholder="Phone">
-          </vaadin-form-layout>
-
-          <vaadin-form-layout
-            auto-responsive
-            auto-rows
-            max-columns="3"
-            column-width="100px"
-            style="--vaadin-form-layout-column-spacing: 0px;"
-          >
-            <input placeholder="First name">
-            <input placeholder="Last name">
-            <input placeholder="Email">
-            <input placeholder="Phone">
-          </vaadin-form-layout>
-        </vaadin-horizontal-layout>
-      `);
-      formLayouts = [...horizontalLayout.querySelectorAll('vaadin-form-layout')];
-      await nextFrame();
-    });
-
-    it('should start with max number of form layout columns', () => {
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
-      });
-    });
-
-    it('should adjust number of form layout columns based on horizontal layout width', async () => {
-      await setViewport({ width: 600, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+    describe('basic', () => {
+      beforeEach(async () => {
+        horizontalLayout = fixtureSync(`
+          <vaadin-horizontal-layout>
+            ${Array.from(
+              { length: 2 },
+              () => `
+                <vaadin-form-layout
+                  auto-responsive
+                  auto-rows
+                  max-columns="3"
+                  column-width="100px"
+                  style="--vaadin-form-layout-column-spacing: 0px;"
+                >
+                  <input placeholder="First name">
+                  <input placeholder="Last name">
+                  <input placeholder="Email">
+                  <input placeholder="Phone">
+                </vaadin-form-layout>
+              `,
+            ).join('')}
+          </vaadin-horizontal-layout>
+        `);
+        formLayouts = [...horizontalLayout.querySelectorAll('vaadin-form-layout')];
+        await nextFrame();
       });
 
-      await setViewport({ width: 400, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 2, rows: 2 });
+      it('should start with max number of form layout columns', () => {
+        formLayouts.forEach((layout) => {
+          assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+        });
       });
 
-      await setViewport({ width: 200, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
-      });
-
-      await setViewport({ width: 50, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
-      });
+      it('should adjust number of form layout columns based on horizontal layout width', async () => {
+        const breakpoints = [
+          { width: 600, columns: 3, rows: 2 },
+          { width: 400, columns: 2, rows: 2 },
+          { width: 200, columns: 1, rows: 4 },
+          { width: 50, columns: 1, rows: 4 },
+          { width: 200, columns: 1, rows: 4 },
+          { width: 400, columns: 2, rows: 2 },
+          { width: 600, columns: 3, rows: 2 },
+        ];
 
-      await setViewport({ width: 200, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 1, rows: 4 });
-      });
-
-      await setViewport({ width: 400, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 2, rows: 2 });
-      });
+        for (const { width, columns, rows } of breakpoints) {
+          await setViewport({ width, height: 768 });
+          await nextResize(horizontalLayout);
 
-      await setViewport({ width: 600, height: 768 });
-      formLayouts.forEach((layout) => {
-        assertFormLayoutGrid(layout, { columns: 3, rows: 2 });
+          formLayouts.forEach((layout) => {
+            assertFormLayoutGrid(layout, { columns, rows });
+          });
+        }
       });
     });
   });