Fix switch's submitted value; fixes #409 (#442)

* fix switch's submitted value; fixes #409

* update tests

docs/docs/resources/changelog.md

@@ -17,6 +17,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
 - Added `appearance` to `<wa-callout>` and `<wa-tag>`
 - Fixed a bug in `<wa-switch>` where it would not properly change its "checked" state when its property changed.
+- Fixed a bug in `<wa-switch>` where the value would be incorrectly submitted as "on" when a value is provided and the switch is checked
 - Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
 - Improved performance of `<wa-select>` when using a large number of options
 - Updated the Japanese translation

src/components/switch/switch.test.ts

@@ -20,8 +20,7 @@ describe('<wa-switch>', () => {
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
 
         expect(el.name).to.equal(null);
-        // TODO - fix default value
-        // expect(el.value).to.be.null;
+        expect(el.value).to.equal('on');
         expect(el.title).to.equal('');
         expect(el.disabled).to.be.false;
         expect(el.required).to.be.false;
@@ -138,10 +137,7 @@ describe('<wa-switch>', () => {
       });
 
       describe('when submitting a form', () => {
-        //
-        // TODO - this test should pass, so this is likely a bug in the component
-        //
-        it.skip('should submit the correct value when a value is provided', async () => {
+        it('should submit the correct value when a value is provided', async () => {
           const form = await fixture<HTMLFormElement>(html`
             <form>
               <wa-switch name="a" value="1" checked></wa-switch>
@@ -215,10 +211,7 @@ describe('<wa-switch>', () => {
           expect(waSwitch.checkValidity()).to.be.true;
         });
 
-        //
-        // TODO - this test should pass, so this is likely a bug in the component
-        //
-        it.skip('should be present in form data when using the form attribute and located outside of a <form>', async () => {
+        it('should be present in form data when using the form attribute and located outside of a <form>', async () => {
           const el = await fixture<HTMLFormElement>(html`
             <div>
               <form id="f">

src/components/switch/switch.ts

@@ -212,16 +212,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
 
   setValue(value: string | File | FormData | null, stateValue?: string | File | FormData | null | undefined): void {
     if (!this.checked) {
-      this.value = null;
       this.internals.setFormValue(null, null);
       return;
     }
 
-    if (!value) {
-      value = 'on';
-    }
-
-    this.internals.setFormValue(value, stateValue);
+    this.internals.setFormValue(value ?? 'on', stateValue);
   }
 
   formResetCallback(): void {