test: add tests for AppDatePicker

motss · Oct 3, 2021 · e120bb9 · e120bb9
1 parent 9e49ba5
commit e120bb9
Show file tree

Hide file tree

Showing 5 changed files with 731 additions and 29 deletions.
diff --git a/src/date-picker/date-picker.ts b/src/date-picker/date-picker.ts
@@ -63,7 +63,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
   #formatters: Formatters;
   #shouldUpdateFocusInNavigationButtons = false;
 
-  @queryAsync('.month-dropdown')
+  @queryAsync('.year-dropdown')
   private readonly _monthDropdown!: Promise<HTMLButtonElement | null>;
 
   @queryAsync('[data-navigation="previous"]')
@@ -112,15 +112,14 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
 
     if (changedProperties.has('value')) {
       const oldValue = toResolvedDate(
-        changedProperties.get('value') as string
-      ) || this._TODAY_DATE;
+        changedProperties.get('value') as string || this._TODAY_DATE
+      );
       const { date } = dateValidator(this.value, oldValue);
-      const valueDate = new Date(date);
 
-      this._currentDate = new Date(valueDate);
-      this._selectedDate = new Date(valueDate);
-      this.valueAsDate = valueDate;
-      this.valueAsNumber = +valueDate;
+      this._currentDate = new Date(date);
+      this._selectedDate = new Date(date);
+      this.valueAsDate = new Date(date);
+      this.valueAsNumber = +date;
     }
 
     const hasMax = changedProperties.has('max');
@@ -129,8 +128,9 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
     if (hasMax || hasMin) {
       const update = (isMax = false) => {
         const oldValue = toResolvedDate(
-          changedProperties.get(isMax ? 'max' : 'min') as string
-        ) || (isMax ? MAX_DATE: this._TODAY_DATE);
+          changedProperties.get(isMax ? 'max' : 'min') as string ||
+          (isMax ? MAX_DATE : this._TODAY_DATE)
+        );
         const value = this[isMax ? 'max' : 'min'] as MaybeDate;
         const { date, isValid } = dateValidator(value, oldValue);
 
@@ -223,7 +223,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
         <div class=selected-year>${selectedYear}</div>
 
         <mwc-icon-button
-          class=month-dropdown
+          class=year-dropdown
           ariaLabel=${this.yearDropdownLabel}
           @click=${this.#updateStartView}
         >${iconArrowDropdown}</mwc-icon-button>
@@ -234,8 +234,8 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
           nothing :
           html`
           <div class=month-pagination>
-            ${this.#renderNavigationButton('previous', !isInCurrentMonth(min, currentDate))}
-            ${this.#renderNavigationButton('next', !isInCurrentMonth(max, currentDate))}
+            ${this.#renderNavigationButton('previous', isInCurrentMonth(min, currentDate))}
+            ${this.#renderNavigationButton('next', isInCurrentMonth(max, currentDate))}
           </div>
           `
       }
@@ -327,17 +327,19 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
 
   #renderNavigationButton  = (
     navigationType: 'previous' | 'next',
-    shouldRender = false
+    shouldSkipRender = true
   ): TemplateResult => {
     const isPreviousNavigationType = navigationType === 'previous';
 
-    return shouldRender ? html`
-    <mwc-icon-button
-      data-navigation=${navigationType}
-      ariaLabel=${isPreviousNavigationType ? this.previousMonthLabel : this.nextMonthLabel}
-      @click=${this.#navigateMonth}
-    >${isPreviousNavigationType ? iconChevronLeft : iconChevronRight}</mwc-icon-button>
-    ` : html`<div data-navigation=${navigationType}></div>`;
+    return shouldSkipRender ?
+      html`<div data-navigation=${navigationType}></div>` :
+      html`
+      <mwc-icon-button
+        data-navigation=${navigationType}
+        ariaLabel=${isPreviousNavigationType ? this.previousMonthLabel : this.nextMonthLabel}
+        @click=${this.#navigateMonth}
+      >${isPreviousNavigationType ? iconChevronLeft : iconChevronRight}</mwc-icon-button>
+      `;
   };
 
   #navigateMonth = (ev: MouseEvent): void => {

diff --git a/src/date-picker/stylings.ts b/src/date-picker/stylings.ts
@@ -51,12 +51,12 @@ export const datePickerStyling = css`
   margin: 0 0 0 4px;
 }
 
-.month-dropdown {
+.year-dropdown {
   margin: 0 0 0 -8px;
   transition: transform 300ms cubic-bezier(0, 0, .4, 1);
   will-change: transform;
 }
-:host([startview="yearGrid"]) .month-dropdown {
+:host([startview="yearGrid"]) .year-dropdown {
   transform: rotateZ(180deg);
 }
 

diff --git a/src/helpers/to-resolved-date.ts b/src/helpers/to-resolved-date.ts
@@ -3,7 +3,7 @@ import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 import type { MaybeDate } from './typings.js';
 
 export function toResolvedDate(date?: MaybeDate): Date {
-  const dateDate = date == null ? new Date() : new Date(date);
+  const dateDate = new Date(date || new Date());
   const isUTCDateFormat = typeof date === 'string' && (
     /^\d{4}-\d{2}-\d{2}$/.test(date) ||
     /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}(?:Z|\+00:00|-00:00)$/.test(date));