test: use label instead of deprecated default slot (#3514)

vaadin · Mar 3, 2022 · feabe44 · feabe44
1 parent 001492c
commit feabe44
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 50 deletions.
diff --git a/packages/checkbox-group/test/checkbox-group.test.js b/packages/checkbox-group/test/checkbox-group.test.js
@@ -29,8 +29,8 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
-          <vaadin-checkbox value="2" disabled>Checkbox 2</vaadin-checkbox>
+          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
+          <vaadin-checkbox value="2" label="Checkbox 2" disabled></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       checkboxes = group.querySelectorAll('vaadin-checkbox');
@@ -61,8 +61,8 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group disabled>
-          <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
-          <vaadin-checkbox value="2">Checkbox 2</vaadin-checkbox>
+          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
+          <vaadin-checkbox value="2" label="Checkbox 2"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       await nextFrame();
@@ -97,9 +97,9 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
-          <vaadin-checkbox value="2">Checkbox 2</vaadin-checkbox>
-          <vaadin-checkbox value="3">Checkbox 3</vaadin-checkbox>
+          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
+          <vaadin-checkbox value="2" label="Checkbox 2"></vaadin-checkbox>
+          <vaadin-checkbox value="3" label="Checkbox 3"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       await nextFrame();
@@ -207,7 +207,7 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
+          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       await nextFrame();
@@ -258,7 +258,7 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
+          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       await nextFrame();
@@ -475,9 +475,9 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group>
-          <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
-          <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
-          <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
+          <vaadin-checkbox name="language" value="en" label="English">/vaadin-checkbox>
+          <vaadin-checkbox name="language" value="fr" label="Français"></vaadin-checkbox>
+          <vaadin-checkbox name="language" value="de" label="Deutsch">/vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       checkboxes = group.querySelectorAll('vaadin-checkbox');
@@ -559,9 +559,9 @@ describe('vaadin-checkbox-group', () => {
         <dom-bind>
           <template>
             <vaadin-checkbox-group id="group" value="{{value}}">
-              <vaadin-checkbox value="a">Checkbox <b>a</b></vaadin-checkbox>
-              <vaadin-checkbox value="b">Checkbox <b>b</b></vaadin-checkbox>
-              <vaadin-checkbox value="c">Checkbox <b>c</b></vaadin-checkbox>
+              <vaadin-checkbox value="a" label="Checkbox A"></vaadin-checkbox>
+              <vaadin-checkbox value="b" label="Checkbox B"></vaadin-checkbox>
+              <vaadin-checkbox value="c" label="Checkbox C"></vaadin-checkbox>
             </vaadin-checkbox-group>
           </template>
         </template>
@@ -619,18 +619,18 @@ describe('vaadin-checkbox-group', () => {
     beforeEach(async () => {
       group = fixtureSync(`
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="c_1">Checkbox 1</vaadin-checkbox>
-          <vaadin-checkbox value="c_2">Checkbox 2</vaadin-checkbox>
-          <vaadin-checkbox value="c_3">Checkbox 3</vaadin-checkbox>
-          <vaadin-checkbox value="c_4">Checkbox 4</vaadin-checkbox>
-          <vaadin-checkbox value="c_5">Checkbox 5</vaadin-checkbox>
-          <vaadin-checkbox value="c_6">Checkbox 6</vaadin-checkbox>
-          <vaadin-checkbox value="c_7">Checkbox 7</vaadin-checkbox>
-          <vaadin-checkbox value="c_8">Checkbox 8</vaadin-checkbox>
-          <vaadin-checkbox value="c_9">Checkbox 9</vaadin-checkbox>
-          <vaadin-checkbox value="c_10">Checkbox 10</vaadin-checkbox>
-          <vaadin-checkbox value="c_11">Checkbox 11</vaadin-checkbox>
-          <vaadin-checkbox value="c_12">Checkbox 12</vaadin-checkbox>
+          <vaadin-checkbox value="c_1" label="Checkbox 1"></vaadin-checkbox>
+          <vaadin-checkbox value="c_2" label="Checkbox 2"></vaadin-checkbox>
+          <vaadin-checkbox value="c_3" label="Checkbox 3"></vaadin-checkbox>
+          <vaadin-checkbox value="c_4" label="Checkbox 4"></vaadin-checkbox>
+          <vaadin-checkbox value="c_5" label="Checkbox 5"></vaadin-checkbox>
+          <vaadin-checkbox value="c_6" label="Checkbox 6"></vaadin-checkbox>
+          <vaadin-checkbox value="c_7" label="Checkbox 7"></vaadin-checkbox>
+          <vaadin-checkbox value="c_8" label="Checkbox 8"></vaadin-checkbox>
+          <vaadin-checkbox value="c_9" label="Checkbox 9"></vaadin-checkbox>
+          <vaadin-checkbox value="c_10" label="Checkbox 10"></vaadin-checkbox>
+          <vaadin-checkbox value="c_11" label="Checkbox 11"></vaadin-checkbox>
+          <vaadin-checkbox value="c_12" label="Checkbox 12"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `);
       await nextFrame();

diff --git a/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js b/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js
@@ -14,9 +14,9 @@ describe('checkbox-group', () => {
     element = fixtureSync(
       `
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="a">A</vaadin-checkbox>
-          <vaadin-checkbox value="b">B</vaadin-checkbox>
-          <vaadin-checkbox value="c">C</vaadin-checkbox>
+          <vaadin-checkbox value="a" label="A"></vaadin-checkbox>
+          <vaadin-checkbox value="b" label="B"></vaadin-checkbox>
+          <vaadin-checkbox value="c" label="C"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `,
       div

diff --git a/packages/checkbox-group/test/visual/material/checkbox-group.test.js b/packages/checkbox-group/test/visual/material/checkbox-group.test.js
@@ -14,9 +14,9 @@ describe('checkbox-group', () => {
     element = fixtureSync(
       `
         <vaadin-checkbox-group>
-          <vaadin-checkbox value="a">A</vaadin-checkbox>
-          <vaadin-checkbox value="b">B</vaadin-checkbox>
-          <vaadin-checkbox value="c">C</vaadin-checkbox>
+          <vaadin-checkbox value="a" label="A"></vaadin-checkbox>
+          <vaadin-checkbox value="b" label="B"></vaadin-checkbox>
+          <vaadin-checkbox value="c" label="C"></vaadin-checkbox>
         </vaadin-checkbox-group>
       `,
       div

diff --git a/packages/checkbox/test/checkbox.test.js b/packages/checkbox/test/checkbox.test.js
@@ -26,7 +26,11 @@ describe('checkbox', () => {
 
   describe('default', () => {
     beforeEach(async () => {
-      checkbox = fixtureSync('<vaadin-checkbox>I accept <a href="#">the terms and conditions</a></vaadin-checkbox>');
+      checkbox = fixtureSync(`
+        <vaadin-checkbox>
+          <label slot="label">I accept <a href="#">the terms and conditions</a></label>
+        </vaadin-checkbox>
+      `);
       // Wait for MutationObserver.
       await nextFrame();
       input = checkbox.inputElement;

diff --git a/packages/radio-group/test/radio-button.test.js b/packages/radio-group/test/radio-button.test.js
@@ -27,7 +27,7 @@ describe('radio-button', () => {
   // TODO: A legacy suit. Replace with snapshot tests when possible.
   describe('default', () => {
     beforeEach(async () => {
-      radio = fixtureSync('<vaadin-radio-button>Label</vaadin-radio-button>');
+      radio = fixtureSync('<vaadin-radio-button label="Label"></vaadin-radio-button>');
       // Wait for MutationObserver
       await nextFrame();
       label = radio.querySelector('[slot=label]');

diff --git a/packages/radio-group/test/radio-group.test.js b/packages/radio-group/test/radio-group.test.js
@@ -665,9 +665,9 @@ describe('radio-group', () => {
             <vaadin-radio-button label="Radio button 7" value="r_7"></vaadin-radio-button>
             <vaadin-radio-button label="Radio button 8" value="r_8"></vaadin-radio-button>
             <vaadin-radio-button label="Radio button 9" value="r_9"></vaadin-radio-button>
-            <vaadin-radio-button label="Radio button 10 value="r_10"></vaadin-radio-button>
-            <vaadin-radio-button label="Radio button 11 value="r_11"></vaadin-radio-button>
-            <vaadin-radio-button label="Radio button 12 value="r_12"></vaadin-radio-button>
+            <vaadin-radio-button label="Radio button 10" value="r_10"></vaadin-radio-button>
+            <vaadin-radio-button label="Radio button 11" value="r_11"></vaadin-radio-button>
+            <vaadin-radio-button label="Radio button 12" value="r_12"></vaadin-radio-button>
           </vaadin-radio-group>
         </div>
       `);

diff --git a/packages/radio-group/test/visual/lumo/radio-group.test.js b/packages/radio-group/test/visual/lumo/radio-group.test.js
@@ -14,9 +14,9 @@ describe('radio-group', () => {
     element = fixtureSync(
       `
         <vaadin-radio-group>
-          <vaadin-radio-button value="a">A</vaadin-radio-button>
-          <vaadin-radio-button value="b">B</vaadin-radio-button>
-          <vaadin-radio-button value="c">C</vaadin-radio-button>
+          <vaadin-radio-button value="a" label="A"></vaadin-radio-button>
+          <vaadin-radio-button value="b" label="B"></vaadin-radio-button>
+          <vaadin-radio-button value="c" label="C"></vaadin-radio-button>
         </vaadin-radio-group>
       `,
       div

diff --git a/packages/radio-group/test/visual/material/radio-group.test.js b/packages/radio-group/test/visual/material/radio-group.test.js
@@ -14,9 +14,9 @@ describe('radio-group', () => {
     element = fixtureSync(
       `
         <vaadin-radio-group>
-          <vaadin-radio-button value="a">A</vaadin-radio-button>
-          <vaadin-radio-button value="b">B</vaadin-radio-button>
-          <vaadin-radio-button value="c">C</vaadin-radio-button>
+          <vaadin-radio-button value="a" label="A"></vaadin-radio-button>
+          <vaadin-radio-button value="b" label="B"></vaadin-radio-button>
+          <vaadin-radio-button value="c" label="C"></vaadin-radio-button>
         </vaadin-radio-group>
       `,
       div

diff --git a/packages/vaadin-overlay/test/focus-trap.test.js b/packages/vaadin-overlay/test/focus-trap.test.js
@@ -43,9 +43,9 @@ customElements.define(
             <textarea tabindex="1">tabindex 1</textarea>
             <input type="text" id="text" value="tabindex 0" />
             <vaadin-radio-group>
-              <vaadin-radio-button id="radioButton1">Button 1</vaadin-radio-button>
-              <vaadin-radio-button id="radioButton2">Button 2</vaadin-radio-button>
-              <vaadin-radio-button id="radioButton3">Button 3</vaadin-radio-button>
+              <vaadin-radio-button id="radioButton1" label="Button 1"></vaadin-radio-button>
+              <vaadin-radio-button id="radioButton2" label="Button 2"></vaadin-radio-button>
+              <vaadin-radio-button id="radioButton3" label="Button 3"></vaadin-radio-button>
             </vaadin-radio-group>
             <vaadin-button>tabindex 0</vaadin-button>
           </template>
@@ -262,9 +262,9 @@ describe('focus-trap', function () {
               <textarea tabindex="1">tabindex 1</textarea>
               <input type="text" id="text" value="tabindex 0">
               <vaadin-radio-group>
-                <vaadin-radio-button id="radioButton1">Button 1</vaadin-radio-button>
-                <vaadin-radio-button id="radioButton2">Button 2</vaadin-radio-button>
-                <vaadin-radio-button id="radioButton3">Button 3</vaadin-radio-button>
+                <vaadin-radio-button id="radioButton1" label="Button 1"></vaadin-radio-button>
+                <vaadin-radio-button id="radioButton2" label="Button 2"></vaadin-radio-button>
+                <vaadin-radio-button id="radioButton3" label="Button 3"></vaadin-radio-button>
               </vaadin-radio-group>
               <vaadin-button>tabindex 0</vaadin-button>
             </template>