Merge remote-tracking branch 'origin/main' into refactor/form-layout-…

…based-on-css-grid
vaadin · Jan 30, 2025 · 2c5f25a · 2c5f25a
2 parents 7df07bf + 91d99d2
commit 2c5f25a
Show file tree

Hide file tree

Showing 176 changed files with 259 additions and 540 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,9 @@ packages/*/test/visual/screenshots/failed
 packages/*/test/visual/*/screenshots/*/failed
 packages/icons/test/visual/screenshots/failed
 
+# Generated Lit test files
+packages/*/test/*.generated.*
+
 # Generated theme folders .ts files
 packages/**/theme/**/*.d.ts
 

diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "analyze": "polymer analyze packages/**/vaadin-*.js > analysis.json && node scripts/prepareDocs.js && node scripts/buildWebtypes.js && node scripts/generateLumoAutoCompleteCss.js && ./scripts/buildThemeTypings.sh",
     "build:ts": "tsc --build tsconfig.build.json",
-    "debug": "web-test-runner --watch",
-    "debug:it": "web-test-runner --watch --config web-test-runner-it.config.js",
+    "debug": "yarn test --watch",
+    "debug:it": "yarn test --watch --config web-test-runner-it.config.js",
     "dist": "rimraf dist && yarn analyze && rollup -c rollup.config.js && cp analysis.json dist",
     "docs": "yarn analyze && web-dev-server --node-resolve --open",
     "icons": "lerna run icons",
@@ -18,16 +18,16 @@
     "prepare": "husky",
     "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "start": "web-dev-server --node-resolve --open /dev",
-    "test": "web-test-runner",
-    "test:firefox": "web-test-runner --config web-test-runner-firefox.config.js",
-    "test:it": "web-test-runner --config web-test-runner-it.config.js",
-    "test:lumo": "web-test-runner --config web-test-runner-lumo.config.js",
-    "test:material": "web-test-runner --config web-test-runner-material.config.js",
-    "test:snapshots": "web-test-runner --config web-test-runner-snapshots.config.js",
-    "test:webkit": "web-test-runner --config web-test-runner-webkit.config.js",
-    "update:lumo": "TEST_ENV=update web-test-runner --config web-test-runner-lumo.config.js",
-    "update:material": "TEST_ENV=update web-test-runner --config web-test-runner-material.config.js",
-    "update:snapshots": "web-test-runner --config web-test-runner-snapshots.config.js --update-snapshots"
+    "test": "node scripts/generateLitTests.js && web-test-runner",
+    "test:firefox": "yarn test --config web-test-runner-firefox.config.js",
+    "test:it": "yarn test --config web-test-runner-it.config.js",
+    "test:lumo": "yarn test --config web-test-runner-lumo.config.js",
+    "test:material": "yarn test --config web-test-runner-material.config.js",
+    "test:snapshots": "yarn test --config web-test-runner-snapshots.config.js",
+    "test:webkit": "yarn test --config web-test-runner-webkit.config.js",
+    "update:lumo": "TEST_ENV=update yarn test --config web-test-runner-lumo.config.js",
+    "update:material": "TEST_ENV=update yarn test --config web-test-runner-material.config.js",
+    "update:snapshots": "yarn test --config web-test-runner-snapshots.config.js --update-snapshots"
   },
   "devDependencies": {
     "@fontsource/roboto": "^4.5.8",

diff --git a/packages/a11y-base/test/focus-trap-controller.test.js b/packages/a11y-base/test/focus-trap-controller.test.js
@@ -58,9 +58,7 @@ async function tab() {
 }
 
 async function shiftTab() {
-  await sendKeys({ down: 'Shift' });
-  await sendKeys({ press: 'Tab' });
-  await sendKeys({ up: 'Shift' });
+  await sendKeys({ press: 'Shift+Tab' });
   return document.activeElement;
 }
 

diff --git a/packages/app-layout/test/helpers.js b/packages/app-layout/test/helpers.js
@@ -9,7 +9,5 @@ export async function tab() {
 }
 
 export async function shiftTab() {
-  await sendKeys({ down: 'Shift' });
-  await sendKeys({ press: 'Tab' });
-  await sendKeys({ up: 'Shift' });
+  await sendKeys({ press: 'Shift+Tab' });
 }
diff --git a/packages/button/test/button-lit.test.ts b/packages/button/test/button-lit.test.ts
diff --git a/packages/button/test/button-polymer.test.ts b/packages/button/test/button-polymer.test.ts
diff --git a/packages/button/test/button.common.ts → packages/button/test/button.test.ts b/packages/button/test/button.common.ts → packages/button/test/button.test.ts
@@ -2,6 +2,7 @@ import { expect } from '@vaadin/chai-plugins';
 import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
 import { fire, fixtureSync, middleOfNode, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
+import '../vaadin-button.js';
 import type { Button } from '../vaadin-button.js';
 
 describe('vaadin-button', () => {

diff --git a/packages/checkbox-group/test/checkbox-group.common.js b/packages/checkbox-group/test/checkbox-group.common.js
@@ -287,9 +287,7 @@ describe('vaadin-checkbox-group', () => {
       await sendKeys({ press: 'Tab' });
 
       // Move focus out of the checkbox group.
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
 
       expect(checkboxes[0].hasAttribute('focused')).to.be.false;
       expect(group.hasAttribute('focused')).to.be.false;

diff --git a/packages/checkbox-group/test/validation.common.js b/packages/checkbox-group/test/validation.common.js
@@ -82,9 +82,7 @@ describe('validation', () => {
       expect(validateSpy.called).to.be.false;
 
       // Move focus out of the checkbox group.
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(validateSpy.calledOnce).to.be.true;
     });
 
@@ -132,9 +130,7 @@ describe('validation', () => {
         await sendKeys({ press: 'Tab' });
 
         // Move focus out of the checkbox group.
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: 'Tab' });
-        await sendKeys({ up: 'Shift' });
+        await sendKeys({ press: 'Shift+Tab' });
 
         expect(validateSpy.called).to.be.false;
       });

diff --git a/packages/checkbox/test/validation.common.js b/packages/checkbox/test/validation.common.js
@@ -108,9 +108,7 @@ describe('validation', () => {
         await sendKeys({ press: 'Tab' });
 
         // Blur the checkbox.
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: 'Tab' });
-        await sendKeys({ up: 'Shift' });
+        await sendKeys({ press: 'Shift+Tab' });
 
         expect(validateSpy.called).to.be.false;
       });

diff --git a/packages/component-base/test/virtualizer-reorder-elements.test.js b/packages/component-base/test/virtualizer-reorder-elements.test.js
@@ -152,9 +152,7 @@ describe('reorder elements', () => {
       // Tab upwards
       for (let i = tabToIndex - 1; i >= 0; i--) {
         await nextFrame();
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: 'Tab' });
-        await sendKeys({ up: 'Shift' });
+        await sendKeys({ press: 'Shift+Tab' });
         await nextFrame();
         expect(document.activeElement.id).to.equal(`item-${i}`);
       }

diff --git a/packages/context-menu/test/a11y.common.js b/packages/context-menu/test/a11y.common.js
@@ -79,9 +79,7 @@ describe('a11y', () => {
     it('should move focus to the prev element outside the menu on Shift+Tab pressed inside', async () => {
       contextMenuButton.click();
       await nextRender();
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(getDeepActiveElement()).to.equal(firstGlobalFocusable);
     });
 

diff --git a/packages/dashboard/test/dashboard-keyboard.test.ts b/packages/dashboard/test/dashboard-keyboard.test.ts
@@ -88,9 +88,7 @@ describe('dashboard - keyboard interaction', () => {
     await sendKeys({ press: 'Space' });
 
     // Focus the focus-button with shift + tab
-    await sendKeys({ down: 'Shift' });
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ up: 'Shift' });
+    await sendKeys({ press: 'Shift+Tab' });
 
     // Click the focus-button
     await sendKeys({ press: 'Space' });
@@ -158,9 +156,7 @@ describe('dashboard - keyboard interaction', () => {
     it('should blur deselected widget on shift tab', async () => {
       const widget = getElementFromCell(dashboard, 0, 0)!;
       await sendKeys({ press: 'Escape' });
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(widget.hasAttribute('selected')).to.be.false;
       expect(widget.hasAttribute('focused')).to.be.false;
       expect(widget.contains(document.activeElement)).to.be.false;
@@ -233,29 +229,23 @@ describe('dashboard - keyboard interaction', () => {
     it('should increase the widget row span on shift + arrow down', async () => {
       // Set minimum row height to enable vertical resizing
       setMinimumRowHeight(dashboard, 100);
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+ArrowDown' });
       expect((dashboard.items[0] as DashboardItem).rowspan).to.equal(2);
     });
 
     it('should decrease the widget row span on shift + arrow up', async () => {
       // Set minimum row height to enable vertical resizing
       setMinimumRowHeight(dashboard, 100);
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'Shift+ArrowDown' });
       await updateComplete(dashboard);
-      await sendKeys({ press: 'ArrowUp' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+ArrowUp' });
       expect((dashboard.items[0] as DashboardItem).rowspan).to.equal(1);
     });
 
     it('should dispatch an item resized event shift + arrow down', async () => {
       const spy = sinon.spy();
       dashboard.addEventListener('dashboard-item-resized', spy);
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+ArrowDown' });
       expect(spy.calledOnce).to.be.true;
       expect(spy.firstCall.args[0].detail.item).to.eql({ id: 0 });
       expect(spy.firstCall.args[0].detail.items).to.eql(dashboard.items);
@@ -266,23 +256,17 @@ describe('dashboard - keyboard interaction', () => {
       const spy = sinon.spy();
       // @ts-ignore unexpected event type
       dashboard.addEventListener('item-resize', spy);
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+ArrowDown' });
       expect(spy.called).to.be.false;
     });
 
     it('should not increase the widget row span on shift + arrow down if row min height is not defined', async () => {
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+ArrowDown' });
       expect((dashboard.items[0] as DashboardItem).rowspan).to.not.equal(2);
     });
 
     it('should not move the widget on arrow down if ctrl key is pressed', async () => {
-      await sendKeys({ down: 'Control' });
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ up: 'Control' });
+      await sendKeys({ press: 'Control+ArrowDown' });
       expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
     });
 
@@ -341,9 +325,7 @@ describe('dashboard - keyboard interaction', () => {
     it('should release focus trap on deselect', async () => {
       const widget = getElementFromCell(dashboard, 0, 0)!;
       await sendKeys({ press: 'Escape' });
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(widget.contains(document.activeElement)).to.be.false;
     });
 
@@ -369,18 +351,14 @@ describe('dashboard - keyboard interaction', () => {
       });
 
       it('should increase the widget column span on shift + arrow forwards', async () => {
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: arrowForwards });
-        await sendKeys({ up: 'Shift' });
+        await sendKeys({ press: `Shift+${arrowForwards}` });
         expect((dashboard.items[0] as DashboardItem).colspan).to.equal(2);
       });
 
       it('should decrease the widget column span on shift + arrow backwards', async () => {
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: arrowForwards });
+        await sendKeys({ press: `Shift+${arrowForwards}` });
         await updateComplete(dashboard);
-        await sendKeys({ press: arrowBackwards });
-        await sendKeys({ up: 'Shift' });
+        await sendKeys({ press: `Shift+${arrowBackwards}` });
         expect((dashboard.items[0] as DashboardItem).colspan).to.equal(1);
       });
     });
@@ -412,9 +390,7 @@ describe('dashboard - keyboard interaction', () => {
 
     it('should blur deselected selected on shift tab', async () => {
       await sendKeys({ press: 'Escape' });
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(section.hasAttribute('selected')).to.be.false;
       expect(section.hasAttribute('focused')).to.be.false;
       expect(section.contains(document.activeElement)).to.be.false;
@@ -446,16 +422,12 @@ describe('dashboard - keyboard interaction', () => {
 
     it('should release focus trap on deselect', async () => {
       await sendKeys({ press: 'Escape' });
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(section.contains(document.activeElement)).to.be.false;
     });
 
     it('should not increase the section row span on shift + arrow down', async () => {
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+ArrowDown' });
       expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
     });
   });
@@ -565,10 +537,8 @@ describe('dashboard - keyboard interaction', () => {
       await sendKeys({ press: 'Space' });
       await nextFrame();
       // Focus backward button, click it
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
+      await sendKeys({ press: 'Shift+Tab' });
       await nextFrame();
 
       expect(getMoveBackwardButton(widget).matches(':focus')).to.be.true;
@@ -598,10 +568,8 @@ describe('dashboard - keyboard interaction', () => {
       await sendKeys({ press: 'Space' });
       await nextFrame();
       // Focus backwards button, click it
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
+      await sendKeys({ press: 'Shift+Tab' });
       await sendKeys({ press: 'Space' });
       await nextFrame();
 

diff --git a/packages/date-picker/test/fullscreen.common.js b/packages/date-picker/test/fullscreen.common.js
@@ -157,9 +157,7 @@ describe('fullscreen mode', () => {
     it('should move focus to Cancel button on date cell Shift Tab', async () => {
       const spy = sinon.spy(overlayContent._cancelButton, 'focus');
 
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
 
       expect(spy.calledOnce).to.be.true;
     });
@@ -169,9 +167,7 @@ describe('fullscreen mode', () => {
       const spy = sinon.spy(cell, 'focus');
 
       // Move focus to Cancel button
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
 
       await sendKeys({ press: 'Tab' });
 

diff --git a/packages/date-picker/test/keyboard-input.common.js b/packages/date-picker/test/keyboard-input.common.js
@@ -258,9 +258,7 @@ describe('keyboard', () => {
 
       const spy = sinon.spy(input, 'focus');
 
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
 
       expect(spy.calledOnce).to.be.true;
     });
@@ -273,19 +271,15 @@ describe('keyboard', () => {
     });
 
     it('should move focus to Cancel button on input Shift Tab', async () => {
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
       expect(overlayContent._cancelButton.hasAttribute('focused')).to.be.true;
     });
 
     it('should reveal the focused date on Today button Shift Tab', async () => {
       const spy = sinon.spy(overlayContent, 'revealDate');
       overlayContent._todayButton.focus();
 
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
+      await sendKeys({ press: 'Shift+Tab' });
 
       await aTimeout(1);
       expect(spy.called).to.be.true;
@@ -328,9 +322,7 @@ describe('keyboard', () => {
         overlayContent._todayButton.focus();
 
         // Move focus to the calendar
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: 'Tab' });
-        await sendKeys({ up: 'Shift' });
+        await sendKeys({ press: 'Shift+Tab' });
 
         await waitForScrollToFinish(datePicker);