fix: update Material visual tests

vaadin · Sep 15, 2021 · 576cfae · 576cfae
1 parent 150d8b7
commit 576cfae
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js
@@ -1,5 +1,6 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import '../../../theme/material/vaadin-checkbox.js';
 
 describe('checkbox', () => {
@@ -16,14 +17,9 @@ describe('checkbox', () => {
     await visualDiff(div, 'basic');
   });
 
-  it('focus-ring', async () => {
-    element.setAttribute('focus-ring', '');
-    await visualDiff(div, 'focus-ring');
-  });
-
-  it('disabled', async () => {
-    element.disabled = true;
-    await visualDiff(div, 'disabled');
+  it('empty', async () => {
+    element.label = '';
+    await visualDiff(div, 'empty');
   });
 
   it('checked', async () => {
@@ -36,25 +32,47 @@ describe('checkbox', () => {
     await visualDiff(div, 'indeterminate');
   });
 
-  it('disabled checked', async () => {
-    element.disabled = true;
-    element.checked = true;
-    await visualDiff(div, 'disabled-checked');
+  it('focus-ring', async () => {
+    await sendKeys({ press: 'Tab' });
+    await visualDiff(div, 'focus-ring');
   });
 
-  it('disabled indeterminate', async () => {
-    element.disabled = true;
-    element.indeterminate = true;
-    await visualDiff(div, 'disabled-indeterminate');
-  });
+  describe('disabled', () => {
+    beforeEach(() => {
+      element.disabled = true;
+    });
 
-  it('empty', async () => {
-    element.textContent = '';
-    await visualDiff(div, 'empty');
+    it('basic', async () => {
+      await visualDiff(div, 'disabled');
+    });
+
+    it('checked', async () => {
+      element.checked = true;
+      await visualDiff(div, 'disabled-checked');
+    });
+
+    it('indeterminate', async () => {
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-indeterminate');
+    });
   });
 
-  it('RTL', async () => {
-    document.documentElement.setAttribute('dir', 'rtl');
-    await visualDiff(div, 'rtl');
+  describe('RTL', () => {
+    before(() => {
+      document.documentElement.setAttribute('dir', 'rtl');
+    });
+
+    after(() => {
+      document.documentElement.removeAttribute('dir');
+    });
+
+    it('basic', async () => {
+      await visualDiff(div, 'rtl');
+    });
+
+    it('empty', async () => {
+      element.label = '';
+      await visualDiff(div, 'rtl-empty');
+    });
   });
 });
diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png
diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -14,7 +14,7 @@ registerStyles(
       -webkit-tap-highlight-color: transparent;
     }
 
-    [part='label']:not([empty]) {
+    :host([has-label]) [part='label'] {
       margin: 3px 12px 3px 6px;
     }
 
@@ -126,7 +126,7 @@ registerStyles(
     }
 
     /* RTL specific styles */
-    :host([dir='rtl']) [part='label']:not([empty]) {
+    :host([dir='rtl'][has-label]) [part='label'] {
       margin: 3px 6px 3px 12px;
     }
   `,