wip

Author: vursen

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

@@ -5,7 +5,7 @@ import '@vaadin/vaadin-lumo-styles/test/autoload.js';
 import '../common.js';
 import '../../../theme/lumo/vaadin-text-field.js';
 
-const isRTL = document.dir === 'rtl';
+const DIR = document.dir;
 
 describe('text-field', () => {
   let div, element;
@@ -45,12 +45,12 @@ describe('text-field', () => {
   });
 
   it('label', async () => {
-    element.label = isRTL ? 'نام کالا' : 'Label';
+    element.label = 'Label';
     await visualDiff(div, 'label');
   });
 
   it('placeholder', async () => {
-    element.placeholder = isRTL ? 'جایگزین' : 'Placeholder';
+    element.placeholder = 'Placeholder';
     await visualDiff(div, 'placeholder');
   });
 
@@ -60,7 +60,7 @@ describe('text-field', () => {
   });
 
   it('required', async () => {
-    element.label = isRTL ? 'نام کالا' : 'Label';
+    element.label = 'Label';
     element.required = true;
     await visualDiff(div, 'required');
   });
@@ -70,16 +70,16 @@ describe('text-field', () => {
     await visualDiff(div, 'invalid');
   });
 
-  it('error message', async () => {
-    element.label = isRTL ? 'نام کالا' : 'Label';
-    element.errorMessage = 'خطا';
+  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 () => {
-    element.helperText = isRTL ? 'متن راهنما' : 'Helper text';
+    element.helperText = 'Helper text';
     await visualDiff(div, 'helper-text');
   });
 
@@ -89,23 +89,23 @@ 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 = isRTL ? 'تومان' : '$';
+    span.textContent = '$';
     element.appendChild(span);
-    await visualDiff(div, 'suffix');
+    await visualDiff(div, `${DIR}-suffix`);
   });
 
-  (isRTL ? describe.skip : describe)('alignment', () => {
+  describe('alignment', () => {
     let field;
 
     beforeEach(() => {
@@ -130,7 +130,7 @@ describe('text-field', () => {
     });
   });
 
-  (isRTL ? describe.skip : describe)('borders enabled', () => {
+  describe('borders enabled', () => {
     before(() => {
       document.documentElement.style.setProperty('--vaadin-input-field-border-width', '1px');
     });
@@ -159,7 +159,7 @@ describe('text-field', () => {
     });
   });
 
-  (isRTL ? describe.skip : describe)('focus', () => {
+  describe('focus', () => {
     afterEach(async () => {
       await resetMouse();
     });

scripts/generateTests.js

@@ -21,10 +21,7 @@ packages
   })
   .forEach((testPath) => {
     const generatedLitTestPath = testPath.replace('.test.', '-lit.generated.test.');
-
-    if (!fs.existsSync(generatedLitTestPath)) {
-      fs.symlinkSync(fs.realpathSync(testPath), generatedLitTestPath);
-    }
+    fs.symlinkSync(fs.realpathSync(testPath), generatedLitTestPath);
   });
 
 // Generate RTL visual test files
@@ -33,12 +30,17 @@ packages
     return globSync(`packages/${pkg}/test/visual/**/*.test.{js,ts}`);
   })
   .filter((testPath) => {
-    return !/(-rtl|-ltr)(\.generated)?\.test/u.test(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.');
-
-    if (!fs.existsSync(generatedRTLTestPath)) {
-      fs.symlinkSync(fs.realpathSync(testPath), generatedRTLTestPath);
-    }
+    fs.symlinkSync(fs.realpathSync(testPath), generatedRTLTestPath);
   });

web-dev-server.config.js

@@ -32,9 +32,12 @@ export function generatedRTLVisualTestsPlugin() {
     name: 'generated-rtl-visual-tests',
     transform(context) {
       if (context.url.includes('-rtl.generated.test.')) {
-        return {
-          body: `document.documentElement.setAttribute('dir', 'rtl');\n${context.body}`,
-        };
+        let { body } = context;
+
+        body = `document.documentElement.setAttribute('dir', 'rtl');\n${body}`;
+        body = body.replace(/it(\(.+DIR)/gu, 'it.only$1');
+
+        return { body };
       }
     },
   };