test: add snapshot tests for radio-group (#3520)

vaadin · Mar 4, 2022 · c24d5b2 · c24d5b2
1 parent f717293
commit c24d5b2
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 30 deletions.
diff --git a/packages/radio-group/test/dom/__snapshots__/radio-button.test.snap.js b/packages/radio-group/test/dom/__snapshots__/radio-button.test.snap.js
@@ -0,0 +1,71 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["vaadin-radio-button host default"] = 
+`<vaadin-radio-button
+  has-label=""
+  has-value=""
+  label="Radio button"
+>
+  <label
+    for="vaadin-radio-button-0"
+    id="label-vaadin-radio-button-0"
+    slot="label"
+  >
+    Radio button
+  </label>
+  <input
+    id="vaadin-radio-button-0"
+    slot="input"
+    type="radio"
+    value="on"
+  >
+</vaadin-radio-button>
+`;
+/* end snapshot vaadin-radio-button host default */
+
+snapshots["vaadin-radio-button host disabled"] = 
+`<vaadin-radio-button
+  aria-disabled="true"
+  disabled=""
+  has-label=""
+  has-value=""
+  label="Radio button"
+>
+  <label
+    for="vaadin-radio-button-1"
+    id="label-vaadin-radio-button-1"
+    slot="label"
+  >
+    Radio button
+  </label>
+  <input
+    disabled=""
+    id="vaadin-radio-button-1"
+    slot="input"
+    tabindex="-1"
+    type="radio"
+    value="on"
+  >
+</vaadin-radio-button>
+`;
+/* end snapshot vaadin-radio-button host disabled */
+
+snapshots["vaadin-radio-button shadow default"] = 
+`<div class="vaadin-radio-button-container">
+  <div class="vaadin-radio-button-wrapper">
+    <div part="radio">
+    </div>
+    <slot name="input">
+    </slot>
+  </div>
+  <slot name="label">
+  </slot>
+  <div style="display: none !important">
+    <slot id="noop">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot vaadin-radio-button shadow default */
+
diff --git a/packages/radio-group/test/dom/__snapshots__/radio-group.test.snap.js b/packages/radio-group/test/dom/__snapshots__/radio-group.test.snap.js
@@ -0,0 +1,156 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["vaadin-radio-group host default"] = 
+`<vaadin-radio-group role="radiogroup">
+  <vaadin-radio-button
+    has-label=""
+    has-value=""
+    label="Radio 1"
+    value="1"
+  >
+    <label
+      for="vaadin-radio-button-0"
+      id="label-vaadin-radio-button-1"
+      slot="label"
+    >
+      Radio 1
+    </label>
+    <input
+      id="vaadin-radio-button-0"
+      slot="input"
+      type="radio"
+      value="1"
+    >
+  </vaadin-radio-button>
+  <vaadin-radio-button
+    has-label=""
+    has-value=""
+    label="Radio 2"
+    value="2"
+  >
+    <label
+      for="vaadin-radio-button-1"
+      id="label-vaadin-radio-button-2"
+      slot="label"
+    >
+      Radio 2
+    </label>
+    <input
+      id="vaadin-radio-button-1"
+      slot="input"
+      type="radio"
+      value="2"
+    >
+  </vaadin-radio-button>
+  <label
+    id="label-vaadin-radio-group-0"
+    slot="label"
+  >
+  </label>
+  <div
+    hidden=""
+    id="error-message-vaadin-radio-group-0"
+    slot="error-message"
+  >
+  </div>
+</vaadin-radio-group>
+`;
+/* end snapshot vaadin-radio-group host default */
+
+snapshots["vaadin-radio-group host disabled"] = 
+`<vaadin-radio-group
+  aria-disabled="true"
+  disabled=""
+  role="radiogroup"
+>
+  <vaadin-radio-button
+    aria-disabled="true"
+    disabled=""
+    has-label=""
+    has-value=""
+    label="Radio 1"
+    value="1"
+  >
+    <label
+      for="vaadin-radio-button-2"
+      id="label-vaadin-radio-button-4"
+      slot="label"
+    >
+      Radio 1
+    </label>
+    <input
+      disabled=""
+      id="vaadin-radio-button-2"
+      slot="input"
+      tabindex="-1"
+      type="radio"
+      value="1"
+    >
+  </vaadin-radio-button>
+  <vaadin-radio-button
+    aria-disabled="true"
+    disabled=""
+    has-label=""
+    has-value=""
+    label="Radio 2"
+    value="2"
+  >
+    <label
+      for="vaadin-radio-button-3"
+      id="label-vaadin-radio-button-5"
+      slot="label"
+    >
+      Radio 2
+    </label>
+    <input
+      disabled=""
+      id="vaadin-radio-button-3"
+      slot="input"
+      tabindex="-1"
+      type="radio"
+      value="2"
+    >
+  </vaadin-radio-button>
+  <label
+    id="label-vaadin-radio-group-3"
+    slot="label"
+  >
+  </label>
+  <div
+    hidden=""
+    id="error-message-vaadin-radio-group-1"
+    slot="error-message"
+  >
+  </div>
+</vaadin-radio-group>
+`;
+/* end snapshot vaadin-radio-group host disabled */
+
+snapshots["vaadin-radio-group shadow default"] = 
+`<div class="vaadin-group-field-container">
+  <div part="label">
+    <slot name="label">
+    </slot>
+    <span
+      aria-hidden="true"
+      part="required-indicator"
+    >
+    </span>
+  </div>
+  <div part="group-field">
+    <slot>
+    </slot>
+  </div>
+  <div part="helper-text">
+    <slot name="helper">
+    </slot>
+  </div>
+  <div part="error-message">
+    <slot name="error-message">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot vaadin-radio-group shadow default */
+
diff --git a/packages/radio-group/test/dom/radio-button.test.js b/packages/radio-group/test/dom/radio-button.test.js
@@ -0,0 +1,28 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../../vaadin-radio-button.js';
+
+describe('vaadin-radio-button', () => {
+  let checkbox;
+
+  beforeEach(() => {
+    checkbox = fixtureSync('<vaadin-radio-button label="Radio button"></vaadin-radio-button>');
+  });
+
+  describe('host', () => {
+    it('default', async () => {
+      await expect(checkbox).dom.to.equalSnapshot();
+    });
+
+    it('disabled', async () => {
+      checkbox.disabled = true;
+      await expect(checkbox).dom.to.equalSnapshot();
+    });
+  });
+
+  describe('shadow', () => {
+    it('default', async () => {
+      await expect(checkbox).shadowDom.to.equalSnapshot();
+    });
+  });
+});
diff --git a/packages/radio-group/test/dom/radio-group.test.js b/packages/radio-group/test/dom/radio-group.test.js
@@ -0,0 +1,33 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../../vaadin-radio-group.js';
+
+describe('vaadin-radio-group', () => {
+  let group;
+
+  beforeEach(() => {
+    group = fixtureSync(`
+      <vaadin-radio-group>
+        <vaadin-radio-button value="1" label="Radio 1"></vaadin-radio-button>
+        <vaadin-radio-button value="2" label="Radio 2"></vaadin-radio-button>
+      </vaadin-radio-group>
+    `);
+  });
+
+  describe('host', () => {
+    it('default', async () => {
+      await expect(group).dom.to.equalSnapshot();
+    });
+
+    it('disabled', async () => {
+      group.disabled = true;
+      await expect(group).dom.to.equalSnapshot();
+    });
+  });
+
+  describe('shadow', () => {
+    it('default', async () => {
+      await expect(group).shadowDom.to.equalSnapshot();
+    });
+  });
+});
diff --git a/packages/radio-group/test/radio-button.test.js b/packages/radio-group/test/radio-button.test.js
@@ -24,12 +24,9 @@ describe('radio-button', () => {
     });
   });
 
-  // TODO: A legacy suit. Replace with snapshot tests when possible.
   describe('default', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
       radio = fixtureSync('<vaadin-radio-button label="Label"></vaadin-radio-button>');
-      // Wait for MutationObserver
-      await nextFrame();
       label = radio.querySelector('[slot=label]');
     });
 
@@ -44,10 +41,6 @@ describe('radio-button', () => {
     it('should set value property to "on"', () => {
       expect(radio.value).to.equal('on');
     });
-
-    it('should display the label', () => {
-      expect(label.textContent).to.equal('Label');
-    });
   });
 
   describe('native input', () => {
@@ -57,16 +50,10 @@ describe('radio-button', () => {
       label = radio.querySelector('[slot=label]');
     });
 
-    // TODO: A legacy test. Replace with snapshot tests when possible.
     it('should set input checked to false by default', () => {
       expect(input.checked).to.be.false;
     });
 
-    // TODO: A legacy test. Replace with snapshot tests when possible.
-    it('should set input value to "on" by default', () => {
-      expect(input.value).to.equal('on');
-    });
-
     it('should set checked property on input click', () => {
       input.click();
       expect(radio.checked).to.be.true;
@@ -137,18 +124,6 @@ describe('radio-button', () => {
     });
   });
 
-  // TODO: A legacy suit. Replace with snapshot tests when possible.
-  describe('label attribute', () => {
-    beforeEach(() => {
-      radio = fixtureSync('<vaadin-radio-button label="Label"></vaadin-radio-button>');
-      label = radio.querySelector('[slot=label]');
-    });
-
-    it('should display the label', () => {
-      expect(label.textContent).to.equal('Label');
-    });
-  });
-
   // TODO: A legacy suit. Replace with snapshot tests when possible.
   describe('active attribute', () => {
     beforeEach(() => {

diff --git a/packages/radio-group/test/radio-group.test.js b/packages/radio-group/test/radio-group.test.js
@@ -44,10 +44,6 @@ describe('radio-group', () => {
       expect(group.readonly).to.be.false;
     });
 
-    it('should set role to radiogroup', () => {
-      expect(group.getAttribute('role')).to.equal('radiogroup');
-    });
-
     it('should keep initial disabled property for radio buttons', () => {
       expect(buttons[0].disabled).to.be.false;
       expect(buttons[1].disabled).to.be.true;