test: add missing Lumo CSS imports, import all global styles (#9619)

Author: vursen

packages/vaadin-lumo-styles/test/autoload.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '../font-icons.js';
 import '../color-global.js';
 import '../badge-global.js';
 import '../typography-global.js';

packages/vaadin-lumo-styles/test/visual/badge.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../badge-global.js';
+import '../../props.css';
+import '../../global.css';
 
 describe('badge', () => {
   it('flex-shrink', async () => {

packages/vaadin-lumo-styles/test/visual/font-icons.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../font-icons.js';
+import '../../props.css';
+import '../../global.css';
 
 describe('font-icons', () => {
   let wrapper;
@@ -11,7 +12,7 @@ describe('font-icons', () => {
     const data = await fetch(`${origin}${file}`);
     const icons = await data.json();
     wrapper = fixtureSync(`
-      <div style="display: flex; flex-wrap: wrap; width: 600px">
+      <div style="display: flex; flex-wrap: wrap; width: 600px; line-height: 1">
         <style>
           .font-icon {
             font-family: lumo-icons;

packages/vaadin-lumo-styles/test/visual/font-size.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../typography-global.js';
+import '../../props.css';
+import '../../global.css';
 
 describe('font-size', () => {
   let wrapper;

packages/vaadin-lumo-styles/test/visual/headings.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../autoload.js';
+import '../../props.css';
+import '../../global.css';
 
 describe('headings', () => {
   it('default', async () => {
@@ -28,27 +29,27 @@ describe('headings', () => {
         h6 {
           margin-top: 1.25em;
         }
-        
+
         h1 {
           margin-bottom: 0.75em;
         }
-        
+
         h2 {
           margin-bottom: 0.5em;
         }
-        
+
         h3 {
           margin-bottom: 0.5em;
         }
-        
+
         h4 {
           margin-bottom: 0.5em;
         }
-        
+
         h5 {
           margin-bottom: 0.25em;
         }
-        
+
         h6 {
           margin-bottom: 0;
         }