diff --git a/.gitignore b/.gitignore index 0588d01d984..7d2d2a7ac2d 100644 --- a/.gitignore +++ b/.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 diff --git a/package.json b/package.json index e346d6f16e9..806f4e48016 100644 --- a/package.json +++ b/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", diff --git a/packages/text-field/test/visual/lumo/text-field.test.js b/packages/text-field/test/visual/lumo/text-field.test.js index 3c63ca2c1a0..a12068676fb 100644 --- a/packages/text-field/test/visual/lumo/text-field.test.js +++ b/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'); diff --git a/scripts/generateLitTests.js b/scripts/generateLitTests.js deleted file mode 100644 index 56f1de57a76..00000000000 --- a/scripts/generateLitTests.js +++ /dev/null @@ -1,22 +0,0 @@ -import { globSync } from 'glob'; -import fs from 'node:fs'; - -const packages = fs.readdirSync('packages'); - -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.'); - - if (!fs.existsSync(generatedLitTestPath)) { - fs.symlinkSync(fs.realpathSync(testPath), generatedLitTestPath); - } - }); diff --git a/scripts/generateTests.js b/scripts/generateTests.js new file mode 100644 index 00000000000..cb4f7be799e --- /dev/null +++ b/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); + }); diff --git a/web-dev-server.config.js b/web-dev-server.config.js index f55c7a769fb..b7f9d360e83 100644 --- a/web-dev-server.config.js +++ b/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 = `