chore: auto-generate RTL visual tests

.gitignore

@@ -13,8 +13,8 @@ packages/*/test/visual/*/screenshots/*/failed
 packages/*/test/visual/screenshots/local-*
 packages/*/test/visual/*/screenshots/*/local-*
 
-# Generated Lit test files
-packages/*/test/*.generated.*
+# Generated test files
+packages/*/test/**/*.generated.*
 
 # Generated theme folders .ts files
 packages/**/theme/**/*.d.ts

package.json

@@ -20,7 +20,7 @@
     "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "start": "web-dev-server --node-resolve --open /dev",
     "check-releases": "node ./scripts/check-releases.js && web-dev-server --node-resolve --open /scripts/check-releases.html",
-    "test": "node scripts/generateLitTests.js && web-test-runner",
+    "test": "node scripts/generateTests.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",

packages/text-field/test/visual/lumo/text-field.test.js

@@ -5,6 +5,8 @@ import '@vaadin/vaadin-lumo-styles/test/autoload.js';
 import '../common.js';
 import '../../../theme/lumo/vaadin-text-field.js';
 
+const DIR = document.dir || 'ltr';
+
 describe('text-field', () => {
   let div, element;
 
@@ -68,12 +70,12 @@ describe('text-field', () => {
     await visualDiff(div, 'invalid');
   });
 
-  it('error message', async () => {
-    element.label = 'Label';
-    element.errorMessage = 'This field is required';
+  it(`${DIR} error message`, async () => {
+    element.label = DIR === 'ltr' ? 'Label' : 'نام کالا';
+    element.errorMessage = DIR === 'ltr' ? 'This field is required' : 'خطا';
     element.required = true;
     element.validate();
-    await visualDiff(div, 'error-message');
+    await visualDiff(div, `${DIR}-error-message`);
   });
 
   it('helper text', async () => {
@@ -87,20 +89,20 @@ describe('text-field', () => {
     await visualDiff(div, 'clear-button');
   });
 
-  it('prefix slot', async () => {
+  it(`${DIR} prefix slot`, async () => {
     const span = document.createElement('span');
     span.setAttribute('slot', 'prefix');
     span.textContent = '$';
     element.appendChild(span);
-    await visualDiff(div, 'prefix');
+    await visualDiff(div, `${DIR}-prefix`);
   });
 
-  it('suffix slot', async () => {
+  it(`${DIR} suffix slot`, async () => {
     const span = document.createElement('span');
     span.setAttribute('slot', 'suffix');
     span.textContent = '$';
     element.appendChild(span);
-    await visualDiff(div, 'suffix');
+    await visualDiff(div, `${DIR}-suffix`);
   });
 
   describe('alignment', () => {
@@ -128,45 +130,6 @@ describe('text-field', () => {
     });
   });
 
-  describe('RTL', () => {
-    before(() => {
-      document.documentElement.setAttribute('dir', 'rtl');
-    });
-
-    after(() => {
-      document.documentElement.removeAttribute('dir');
-    });
-
-    it('RTL label', async () => {
-      element.label = 'نام کالا';
-      await visualDiff(div, 'rtl-label');
-    });
-
-    it('RTL prefix', async () => {
-      const span = document.createElement('span');
-      span.setAttribute('slot', 'prefix');
-      span.textContent = 'قیمت';
-      element.appendChild(span);
-      await visualDiff(div, 'rtl-prefix');
-    });
-
-    it('RTL suffix', async () => {
-      const span = document.createElement('span');
-      span.setAttribute('slot', 'suffix');
-      span.textContent = 'تومان';
-      element.appendChild(span);
-      await visualDiff(div, 'rtl-suffix');
-    });
-
-    it('RTL error message', async () => {
-      element.label = 'نام کالا';
-      element.errorMessage = 'خطا';
-      element.required = true;
-      element.validate();
-      await visualDiff(div, 'rtl-error-message');
-    });
-  });
-
   describe('borders enabled', () => {
     before(() => {
       document.documentElement.style.setProperty('--vaadin-input-field-border-width', '1px');

scripts/generateTests.js

@@ -0,0 +1,46 @@
+import { globSync } from 'glob';
+import fs from 'node:fs';
+
+// Remove any existing generated test files
+globSync('packages/*/test/**/*.generated.test.{js,ts}').forEach((testPath) => {
+  fs.unlinkSync(testPath);
+});
+
+const packages = fs.readdirSync('packages');
+
+// Generate Lit unit test files
+packages
+  .filter((pkg) => {
+    return globSync(`packages/${pkg}/vaadin-lit-*`).length > 0;
+  })
+  .flatMap((pkg) => {
+    return globSync(`packages/${pkg}/test/*.test.{js,ts}`);
+  })
+  .filter((testPath) => {
+    return !/(-polymer|-lit)(\.generated)?\.test/u.test(testPath);
+  })
+  .forEach((testPath) => {
+    const generatedLitTestPath = testPath.replace('.test.', '-lit.generated.test.');
+    fs.symlinkSync(fs.realpathSync(testPath), generatedLitTestPath);
+  });
+
+// Generate RTL visual test files
+packages
+  .flatMap((pkg) => {
+    return globSync(`packages/${pkg}/test/visual/**/*.test.{js,ts}`);
+  })
+  .filter((testPath) => {
+    if (/(-rtl|-ltr)(\.generated)?\.test/u.test(testPath)) {
+      return false;
+    }
+
+    if (!fs.readFileSync(testPath, 'utf-8').match(/^const DIR = document.dir/mu)) {
+      return false;
+    }
+
+    return true;
+  })
+  .forEach((testPath) => {
+    const generatedRTLTestPath = testPath.replace('.test.', '-rtl.generated.test.');
+    fs.symlinkSync(fs.realpathSync(testPath), generatedRTLTestPath);
+  });

web-dev-server.config.js

@@ -26,6 +26,23 @@ function generatedLitTestsPlugin() {
   };
 }
 
+/** @return {import('@web/test-runner').TestRunnerPlugin} */
+export function generatedRTLVisualTestsPlugin() {
+  return {
+    name: 'generated-rtl-visual-tests',
+    transform(context) {
+      if (context.url.includes('-rtl.generated.test.')) {
+        let { body } = context;
+
+        body = `document.documentElement.setAttribute('dir', 'rtl');\n${body}`;
+        body = body.replace(/it(\(.+DIR)/gu, 'it.only$1');
+
+        return { body };
+      }
+    },
+  };
+}
+
 const preventFouc = `
   <style>
     body:not(.resolved) {
@@ -75,6 +92,7 @@ export default {
     },
     esbuildPlugin({ ts: true }),
     generatedLitTestsPlugin(),
+    generatedRTLVisualTestsPlugin(),
   ],
   nodeResolve: {
     // Use Lit in production mode

wtr-utils.js

@@ -9,6 +9,7 @@ import minimist from 'minimist';
 import { execSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
+import { generatedRTLVisualTestsPlugin } from './web-dev-server.config.js';
 
 dotenv.config();
 
@@ -222,6 +223,8 @@ const getScreenshotFileName = ({ name, testFile }, type, diff) => {
     const match = testFile.match(/\/packages\/(.+)\.test\.(js|ts)/u);
     folder = match[1].replace(/(lumo|material)/u, '$1/screenshots');
   }
+  folder = folder.replace('-rtl.generated', '');
+
   return path.join(folder, type, diff ? `${name}-diff` : name);
 };
 
@@ -308,6 +311,7 @@ const createVisualTestsConfig = (theme, browserVersion) => {
     ],
     plugins: [
       esbuildPlugin({ ts: true }),
+      generatedRTLVisualTestsPlugin(),
       visualRegressionPlugin({
         baseDir: 'packages',
         getBaselineName(args) {