e nhancement(Datepicker) implemented additional test on user input ch…

…ange modal se lected option input validation

spec/tests/datepicker/datepickerSpec.js

@@ -77,5 +77,32 @@ describe('Datepicker Plugin', () => {
         }, 400);
       }, 400);
     });
+
+    it('can change the calendar modal selected date by input', (done) => {
+      const input = document.querySelector('#datepickerInput');
+      M.Datepicker.init(input, { format: 'mm/dd/yyyy' });
+      const today = new Date();
+      let month = today.getMonth();
+      const year = today.getFullYear() - 44;
+      const day = 11;
+      input.value = `${month < 10 ? `0${month}` : month}/${day}/${year}`;
+      input.dispatchEvent(
+        new Event('change', { bubbles: true, cancelable: true })
+      );
+      keydown(input, 13);
+      setTimeout(() => {
+        expect(document.querySelector('.datepicker-modal')).toHaveClass(
+          'open',
+          'modal should be shown after input is submitted.'
+        );
+        const selectMonthElem = document.querySelector('.datepicker-select.orig-select-month');
+        const selectYearElem = document.querySelector('.datepicker-select.orig-select-year');
+        const selectedDayElem = document.querySelector(`.datepicker-row td[data-day="${day}"]`);
+        expect(selectMonthElem.querySelector('option[selected="selected"]').value === (month -1).toString()).toEqual(true, `selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}`)
+        expect(selectYearElem.querySelector('option[selected="selected"]').value === year.toString()).toEqual(true, `selected year should be ${year}, given value ${selectYearElem.querySelector('option[selected="selected"]').value}`)
+        expect(selectedDayElem.classList.contains('is-selected')).toEqual(true, `selected day should be ${day}, given value ${selectedDayElem.classList}`);
+        done();
+      }, 10);
+    });
   });
 });