Skip to content

Commit

Permalink
test: streamline code for autoResponsive tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen committed Feb 25, 2025
1 parent 086d2d5 commit dfe8ee2
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 137 deletions.
34 changes: 15 additions & 19 deletions packages/form-layout/test/form-layout-auto-responsive.test.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 });
}
});
});
});
98 changes: 49 additions & 49 deletions test/integration/dialog-form-layout.test.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 });
}
});
});
});
});
116 changes: 47 additions & 69 deletions test/integration/horizontal-layout-form-layout.test.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 });
});
}
});
});
});
Expand Down

0 comments on commit dfe8ee2

Please sign in to comment.