test: add snapshot tests for checkbox (#3517)

packages/checkbox/test/checkbox.test.js

@@ -38,28 +38,10 @@ describe('checkbox', () => {
       link = label.children[0];
     });
 
-    // TODO: A legacy test. Replace with snapshot tests when possible.
-    it('should display the label', () => {
-      expect(label.textContent).to.equal('I accept the terms and conditions');
-    });
-
-    // TODO: A legacy test. Replace with snapshot tests when possible.
-    it('should be possible to disabled imperatively', () => {
-      checkbox.disabled = true;
-      expect(input.hasAttribute('disabled')).to.be.true;
-    });
-
-    // TODO: A legacy test. Replace with snapshot tests when possible.
     it('should set value property to "on"', () => {
       expect(checkbox.value).to.equal('on');
     });
 
-    // TODO: A legacy test. Replace with snapshot tests when possible.
-    it('should set input value property to "on"', () => {
-      expect(input.value).to.equal('on');
-    });
-
-    // TODO: A legacy test. Replace with snapshot tests when possible.
     it('should set the name to the empty string', () => {
       expect(checkbox.name).to.equal('');
     });
@@ -152,7 +134,7 @@ describe('checkbox', () => {
       label.innerHTML = '';
       await nextFrame();
 
-      expect(checkbox.hasAttribute('has-input')).to.be.false;
+      expect(checkbox.hasAttribute('has-label')).to.be.false;
     });
 
     describe('active attribute', () => {

packages/checkbox/test/dom/__snapshots__/checkbox.test.snap.js

@@ -0,0 +1,71 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["vaadin-checkbox host default"] = 
+`<vaadin-checkbox
+  has-label=""
+  has-value=""
+  label="I accept terms and conditions"
+>
+  <label
+    for="vaadin-checkbox-0"
+    id="label-vaadin-checkbox-0"
+    slot="label"
+  >
+    I accept terms and conditions
+  </label>
+  <input
+    id="vaadin-checkbox-0"
+    slot="input"
+    type="checkbox"
+    value="on"
+  >
+</vaadin-checkbox>
+`;
+/* end snapshot vaadin-checkbox host default */
+
+snapshots["vaadin-checkbox host disabled"] = 
+`<vaadin-checkbox
+  aria-disabled="true"
+  disabled=""
+  has-label=""
+  has-value=""
+  label="I accept terms and conditions"
+>
+  <label
+    for="vaadin-checkbox-1"
+    id="label-vaadin-checkbox-1"
+    slot="label"
+  >
+    I accept terms and conditions
+  </label>
+  <input
+    disabled=""
+    id="vaadin-checkbox-1"
+    slot="input"
+    tabindex="-1"
+    type="checkbox"
+    value="on"
+  >
+</vaadin-checkbox>
+`;
+/* end snapshot vaadin-checkbox host disabled */
+
+snapshots["vaadin-checkbox shadow default"] = 
+`<div class="vaadin-checkbox-container">
+  <div class="vaadin-checkbox-wrapper">
+    <div part="checkbox">
+    </div>
+    <slot name="input">
+    </slot>
+  </div>
+  <slot name="label">
+  </slot>
+  <div style="display: none !important">
+    <slot id="noop">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot vaadin-checkbox shadow default */
+

packages/checkbox/test/dom/checkbox.test.js

@@ -0,0 +1,28 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../../vaadin-checkbox.js';
+
+describe('vaadin-checkbox', () => {
+  let checkbox;
+
+  beforeEach(() => {
+    checkbox = fixtureSync('<vaadin-checkbox label="I accept terms and conditions"></vaadin-checkbox>');
+  });
+
+  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();
+    });
+  });
+});