test: add unit and visual tests

test/vaadin-radio-group.html

@@ -77,6 +77,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="default-with-slotted-helper">
+    <template>
+      <vaadin-radio-group>
+        <div slot="helper">foo</div>
+      </vaadin-radio-group>
+    </template>
+  </test-fixture>
+
   <script>
     describe('vaadin-radio-group', () => {
 
@@ -428,6 +436,69 @@
         expect(vaadinRadioButtonGroup.hasAttribute('focused')).to.be.false;
       });
 
+      it('setting errorMessage updates has-error-message attribute', function() {
+        vaadinRadioButtonGroup.errorMessage = 'foo';
+        expect(vaadinRadioButtonGroup.hasAttribute('has-error-message')).to.be.true;
+      });
+
+      it('setting errorMessage to empty string does not update has-error-message attribute', function() {
+        vaadinRadioButtonGroup.errorMessage = '';
+        expect(vaadinRadioButtonGroup.hasAttribute('has-error-message')).to.be.false;
+      });
+
+      it('setting errorMessage to null does not update has-error-message attribute', function() {
+        vaadinRadioButtonGroup.errorMessage = null;
+        expect(vaadinRadioButtonGroup.hasAttribute('has-error-message')).to.be.false;
+      });
+
+      describe('vaadin-radio-group helper text', () => {
+        it('setting helper updates has-helper attribute', function() {
+          vaadinRadioButtonGroup.helperText = 'foo';
+          expect(vaadinRadioButtonGroup.hasAttribute('has-helper')).to.be.true;
+        });
+
+        it('setting helper to empty string does not update has-helper attribute', function() {
+          vaadinRadioButtonGroup.helperText = '';
+          expect(vaadinRadioButtonGroup.hasAttribute('has-helper')).to.be.false;
+        });
+
+        it('setting helper to null does not update has-helper attribute', function() {
+          vaadinRadioButtonGroup.helperText = null;
+          expect(vaadinRadioButtonGroup.hasAttribute('has-helper')).to.be.false;
+        });
+
+        it('setting number helper updates has-helper attribute', function() {
+          vaadinRadioButtonGroup.helperText = 0;
+          expect(vaadinRadioButtonGroup.hasAttribute('has-helper')).to.be.true;
+        });
+
+        it('text-field with slotted helper updates has-helper attribute', function() {
+          const radioButtonGroupWithSlottedHelper = fixture('default-with-slotted-helper');
+          radioButtonGroupWithSlottedHelper._observer.flush();
+          expect(radioButtonGroupWithSlottedHelper.hasAttribute('has-helper')).to.be.true;
+        });
+
+        it('setting helper with slot updates has-helper attribute', function() {
+          const helper = document.createElement('div');
+          helper.setAttribute('slot', 'helper');
+          helper.textContent = 'foo';
+          vaadinRadioButtonGroup.appendChild(helper);
+          vaadinRadioButtonGroup._observer.flush();
+
+          expect(vaadinRadioButtonGroup.hasAttribute('has-helper')).to.be.true;
+        });
+
+        it('removing slotted helper removes has-helper attribute', function() {
+          const radioButtonGroupWithSlottedHelper = fixture('default-with-slotted-helper');
+
+          const helper = radioButtonGroupWithSlottedHelper.querySelector('[slot="helper"]');
+          radioButtonGroupWithSlottedHelper.removeChild(helper);
+          radioButtonGroupWithSlottedHelper._observer.flush();
+
+          expect(radioButtonGroupWithSlottedHelper.hasAttribute('has-helper')).to.be.false;
+        });
+      });
+
       describe('RTL mode', () => {
 
         beforeEach(() => vaadinRadioButtonGroup.setAttribute('dir', 'rtl'));

test/visual/default-rtl.html

@@ -31,6 +31,23 @@
 
     <br/>
 
+    <vaadin-radio-group label="Label" helper-text="Helper text">
+      <vaadin-radio-button>1</vaadin-radio-button>
+      <vaadin-radio-button>2</vaadin-radio-button>
+    </vaadin-radio-group>
+
+    <br/>
+
+    <span>On material theme, helper text is hidden when error message is shown:</span>
+
+    <vaadin-radio-group label="Label" required error-message="Error message"
+      helper-text="Helper text" invalid>
+      <vaadin-radio-button>1</vaadin-radio-button>
+      <vaadin-radio-button>2</vaadin-radio-button>
+    </vaadin-radio-group>
+
+    <br/>
+
     <vaadin-radio-group label="Vertical" theme="vertical">
       <vaadin-radio-button>1</vaadin-radio-button>
       <vaadin-radio-button>2</vaadin-radio-button>

test/visual/default.html

@@ -30,6 +30,31 @@
 
     <br/>
 
+    <vaadin-radio-group label="Label" helper-text="Helper text">
+      <vaadin-radio-button>1</vaadin-radio-button>
+      <vaadin-radio-button>2</vaadin-radio-button>
+    </vaadin-radio-group>
+
+    <br/>
+
+    <vaadin-radio-group id="helperAboveField"
+      theme="helper-above-field" label="Label" helper-text="Helper text">
+      <vaadin-radio-button>1</vaadin-radio-button>
+      <vaadin-radio-button>2</vaadin-radio-button>
+    </vaadin-radio-group>
+
+    <br/>
+
+    <span>On material theme, helper text is hidden when error message is shown:</span>
+
+    <vaadin-radio-group label="Label" required error-message="Error message"
+      helper-text="Helper text" invalid>
+      <vaadin-radio-button>1</vaadin-radio-button>
+      <vaadin-radio-button>2</vaadin-radio-button>
+    </vaadin-radio-group>
+
+    <br/>
+
     <vaadin-radio-group label="Vertical" theme="vertical">
       <vaadin-radio-button>1</vaadin-radio-button>
       <vaadin-radio-button>2</vaadin-radio-button>
@@ -55,6 +80,10 @@
       MockInteractions.keyDownOn(document.body, 9);
       document.getElementById('radio').dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
     }
+
+    if (theme === 'material') {
+      document.querySelector('#helperAboveField').setAttribute('hidden', '');
+    }
   </script>
 
 </body>