test: add visual tests for buttons with icons in base theme (#9497)

Author: vursen

packages/button/package.json

@@ -46,6 +46,7 @@
   "devDependencies": {
     "@vaadin/chai-plugins": "25.0.0-alpha4",
     "@vaadin/icon": "25.0.0-alpha4",
+    "@vaadin/icons": "25.0.0-alpha4",
     "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"

packages/button/test/visual/base/button.test.js

@@ -1,6 +1,8 @@
 import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, mousedown } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/icon/src/vaadin-icon.js';
+import '@vaadin/icons/vaadin-iconset.js';
 import '../../../src/vaadin-button.js';
 
 describe('button', () => {
@@ -50,4 +52,25 @@ describe('button', () => {
       });
     });
   });
+
+  describe('icon', () => {
+    const PREFIX_ICON = '<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>';
+    const SUFFIX_ICON = '<vaadin-icon icon="vaadin:reply" slot="suffix"></vaadin-icon>';
+
+    it('before text', async () => {
+      element.insertAdjacentHTML('afterbegin', PREFIX_ICON);
+      await visualDiff(div, 'icon-before-text');
+    });
+
+    it('after text', async () => {
+      element.insertAdjacentHTML('beforeend', SUFFIX_ICON);
+      await visualDiff(div, 'icon-after-text');
+    });
+
+    it('without text', async () => {
+      element.textContent = '';
+      element.insertAdjacentHTML('afterbegin', PREFIX_ICON);
+      await visualDiff(div, 'icon-without-text');
+    });
+  });
 });