chore(form-core): test initial dirty state prefilled FormGroup

packages/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -670,6 +670,24 @@ export function runFormGroupMixinSuite(cfg = {}) {
         expect(el.validationStates.error.Input1IsTen).to.be.true;
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
+
+      it('does not become dirty when elements are prefilled', async () => {
+        const el = /**  @type {FormGroup} */ (await fixture(html`
+        <${tag} .serializedValue="${{ input1: 'x', input2: 'y' }}">
+          <${childTag} name="input1" ></${childTag}>
+          <${childTag} name="input2"></${childTag}>
+        </${tag}>
+      `));
+        expect(el.dirty).to.be.false;
+
+        const el2 = /**  @type {FormGroup} */ (await fixture(html`
+        <${tag} .modelValue="${{ input1: 'x', input2: 'y' }}">
+          <${childTag} name="input1" ></${childTag}>
+          <${childTag} name="input2"></${childTag}>
+        </${tag}>
+      `));
+        expect(el2.dirty).to.be.false;
+      });
     });
 
     // TODO: this should be tested in FormGroupMixin

packages/form-integrations/test/form-integrations.test.js

@@ -11,24 +11,24 @@ describe('Form Integrations', () => {
     const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
     await el.updateComplete;
     const formEl = el._lionFormNode;
+
     expect(formEl.serializedValue).to.eql({
-      bio: '',
-      'checkers[]': [['foo', 'bar']],
-      comments: '',
+      full_name: { first_name: '', last_name: '' },
       date: '2000-12-12',
       datepicker: '2020-12-12',
-      dinosaurs: 'brontosaurus',
-      email: '',
-      favoriteColor: 'hotpink',
-      full_name: {
-        first_name: '',
-        last_name: '',
-      },
-      iban: '',
-      lyrics: '1',
+      bio: '',
       money: '',
+      iban: '',
+      email: '',
+      checkers: ['foo', 'bar'],
+      dinosaurs: '',
+      favoriteFruit: 'Banana',
+      favoriteMovie: 'Rocky',
+      favoriteColor: 'hotpink',
+      lyrics: '1',
       range: 2.3,
-      'terms[]': [[]],
+      terms: [],
+      comments: '',
     });
   });
 
@@ -37,23 +37,51 @@ describe('Form Integrations', () => {
     await el.updateComplete;
     const formEl = el._lionFormNode;
     expect(formEl.formattedValue).to.eql({
-      bio: '',
-      'checkers[]': [['foo', 'bar']],
-      comments: '',
+      full_name: { first_name: '', last_name: '' },
       date: '12/12/2000',
       datepicker: '12/12/2020',
-      dinosaurs: 'brontosaurus',
-      email: '',
-      favoriteColor: 'hotpink',
-      full_name: {
-        first_name: '',
-        last_name: '',
-      },
-      iban: '',
-      lyrics: '1',
+      bio: '',
       money: '',
+      iban: '',
+      email: '',
+      checkers: ['foo', 'bar'],
+      dinosaurs: '',
+      favoriteFruit: 'Banana',
+      favoriteMovie: 'Rocky',
+      favoriteColor: 'hotpink',
+      lyrics: '1',
       range: 2.3,
-      'terms[]': [[]],
+      terms: [],
+      comments: '',
+    });
+  });
+
+  describe('Form Integrations', () => {
+    it('does not become dirty when elements are prefilled', async () => {
+      const el = /** @type {UmbrellaForm} */ (await fixture(
+        html`<umbrella-form
+          .serializedValue="${{
+            full_name: { first_name: '', last_name: '' },
+            date: '2000-12-12',
+            datepicker: '2020-12-12',
+            bio: '',
+            money: '',
+            iban: '',
+            email: '',
+            checkers: ['foo', 'bar'],
+            dinosaurs: 'brontosaurus',
+            favoriteFruit: 'Banana',
+            favoriteMovie: 'Rocky',
+            favoriteColor: 'hotpink',
+            lyrics: '1',
+            range: 2.3,
+            terms: [],
+            comments: '',
+          }}"
+        ></umbrella-form>`,
+      ));
+
+      expect(el._lionFormNode.dirty).to.be.false;
     });
   });
 });

packages/form-integrations/test/helpers/umbrella-form.js

@@ -12,6 +12,8 @@ import '@lion/checkbox-group/define';
 import '@lion/radio-group/define';
 import '@lion/select/define';
 import '@lion/select-rich/define';
+import '@lion/listbox/define';
+import '@lion/combobox/define';
 import '@lion/input-range/define';
 import '@lion/textarea/define';
 import '@lion/button/define';
@@ -23,9 +25,13 @@ export class UmbrellaForm extends LitElement {
     ));
   }
 
+  set serializedValue(v) {
+    this.__serializedValue = v;
+  }
+
   render() {
     return html`
-      <lion-form>
+      <lion-form .serializedValue="${this.__serializedValue}">
         <form>
           <lion-fieldset name="full_name">
             <lion-input
@@ -42,13 +48,13 @@ export class UmbrellaForm extends LitElement {
           <lion-input-date
             name="date"
             label="Date of application"
-            .modelValue="${new Date('2000/12/12')}"
+            .modelValue="${new Date('2000-12-12')}"
             .validators="${[new Required()]}"
           ></lion-input-date>
           <lion-input-datepicker
             name="datepicker"
             label="Date to be picked"
-            .modelValue="${new Date('2020/12/12')}"
+            .modelValue="${new Date('2020-12-12')}"
             .validators="${[new Required()]}"
           ></lion-input-datepicker>
           <lion-textarea
@@ -62,7 +68,7 @@ export class UmbrellaForm extends LitElement {
           <lion-input-email name="email" label="Email"></lion-input-email>
           <lion-checkbox-group
             label="What do you like?"
-            name="checkers[]"
+            name="checkers"
             .validators="${[new Required()]}"
           >
             <lion-checkbox .choiceValue=${'foo'} checked label="I like foo"></lion-checkbox>
@@ -75,15 +81,31 @@ export class UmbrellaForm extends LitElement {
             .validators="${[new Required()]}"
           >
             <lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
-            <lion-radio .choiceValue=${'brontosaurus'} checked label="brontosaurus"></lion-radio>
+            <lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
             <lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
           </lion-radio-group>
+          <lion-listbox name="favoriteFruit" label="Favorite fruit">
+            <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+            <lion-option checked .choiceValue=${'Banana'}>Banana</lion-option>
+            <lion-option .choiceValue=${'Mango'}>Mango</lion-option>
+          </lion-listbox>
+          <lion-combobox
+            .validators="${[new Required()]}"
+            name="favoriteMovie"
+            label="Favorite movie"
+            autocomplete="both"
+          >
+            <lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
+            <lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
+            <lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
+            <lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
+            <lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
+            <lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
+          </lion-combobox>
           <lion-select-rich name="favoriteColor" label="Favorite color">
-            <lion-options slot="input">
             <lion-option .choiceValue=${'red'}>Red</lion-option>
             <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
             <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-            </lion-options>
           </lion-select-rich>
           <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
             <select slot="input">
@@ -100,21 +122,27 @@ export class UmbrellaForm extends LitElement {
             unit="%"
             step="0.1"
             label="Input range"
+          ></lion-input-range>
+          <lion-checkbox-group
+            .mulipleChoice="${false}"
+            name="terms"
+            .validators="${[new Required()]}"
           >
-          </lion-input-range>
-          <lion-checkbox-group name="terms[]" .validators="${[new Required()]}">
             <lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
           </lion-checkbox-group>
+          <lion-switch name="notifications" label="Notifications"></lion-switch>
+          <lion-input-stepper max="5" min="0" name="rsvp">
+            <label slot="label">RSVP</label>
+            <div slot="help-text">Max. 5 guests</div>
+          </lion-input-stepper>
           <lion-textarea name="comments" label="Comments"></lion-textarea>
           <div class="buttons">
             <lion-button raised>Submit</lion-button>
             <lion-button
               type="button"
               raised
-              @click=${() => {
-                const lionForm = this._lionFormNode;
-                lionForm.resetGroup();
-              }}
+              @click=${ev =>
+                ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
               >Reset</lion-button
             >
           </div>