@lion/ui 0.0.1

package/components/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js

@@ -0,0 +1,488 @@
+const html = /** @param {TemplateStringsArray} strings */ strings => strings[0];
+
+export default html`
+  <div id="js-content-wrapper">
+    <table
+      aria-labelledby="month year"
+      aria-readonly="true"
+      class="calendar__grid"
+      data-wrap-cols=""
+      role="grid"
+    >
+      <thead>
+        <tr role="row">
+          <th class="calendar__weekday-header" aria-label="Sunday" scope="col" role="columnheader">
+            Sun
+          </th>
+          <th class="calendar__weekday-header" aria-label="Monday" scope="col" role="columnheader">
+            Mon
+          </th>
+          <th class="calendar__weekday-header" aria-label="Tuesday" scope="col" role="columnheader">
+            Tue
+          </th>
+          <th
+            class="calendar__weekday-header"
+            aria-label="Wednesday"
+            scope="col"
+            role="columnheader"
+          >
+            Wed
+          </th>
+          <th
+            class="calendar__weekday-header"
+            aria-label="Thursday"
+            scope="col"
+            role="columnheader"
+          >
+            Thu
+          </th>
+          <th class="calendar__weekday-header" aria-label="Friday" scope="col" role="columnheader">
+            Fri
+          </th>
+          <th
+            class="calendar__weekday-header"
+            aria-label="Saturday"
+            scope="col"
+            role="columnheader"
+          >
+            Sat
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr role="row">
+          <td class="calendar__day-cell" role="gridcell" start-of-last-week>
+            <button
+              aria-label="25 November 2018 Sunday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">25</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="26 November 2018 Monday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">26</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="27 November 2018 Tuesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">27</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="28 November 2018 Wednesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">28</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="29 November 2018 Thursday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">29</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell" last-day>
+            <button
+              aria-label="30 November 2018 Friday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">30</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell" end-of-first-week first-day>
+            <button
+              aria-label="1 December 2018 Saturday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">1</span>
+            </button>
+          </td>
+        </tr>
+        <tr role="row">
+          <td class="calendar__day-cell" role="gridcell" start-of-first-full-week>
+            <button
+              aria-label="2 December 2018 Sunday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">2</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="3 December 2018 Monday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">3</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="4 December 2018 Tuesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">4</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="5 December 2018 Wednesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">5</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="6 December 2018 Thursday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">6</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="7 December 2018 Friday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">7</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="8 December 2018 Saturday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">8</span>
+            </button>
+          </td>
+        </tr>
+        <tr role="row">
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="9 December 2018 Sunday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">9</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="10 December 2018 Monday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">10</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="11 December 2018 Tuesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">11</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="12 December 2018 Wednesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">12</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="13 December 2018 Thursday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">13</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="14 December 2018 Friday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">14</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="15 December 2018 Saturday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">15</span>
+            </button>
+          </td>
+        </tr>
+        <tr role="row">
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="16 December 2018 Sunday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">16</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="17 December 2018 Monday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">17</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="18 December 2018 Tuesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">18</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="19 December 2018 Wednesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">19</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="20 December 2018 Thursday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">20</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="21 December 2018 Friday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">21</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="22 December 2018 Saturday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">22</span>
+            </button>
+          </td>
+        </tr>
+        <tr role="row">
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="23 December 2018 Sunday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">23</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="24 December 2018 Monday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">24</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="25 December 2018 Tuesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">25</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="26 December 2018 Wednesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">26</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="27 December 2018 Thursday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">27</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="28 December 2018 Friday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">28</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell" end-of-last-full-week>
+            <button
+              aria-label="29 December 2018 Saturday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">29</span>
+            </button>
+          </td>
+        </tr>
+        <tr role="row">
+          <td class="calendar__day-cell" role="gridcell" start-of-last-week>
+            <button
+              aria-label="30 December 2018 Sunday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">30</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" last-day role="gridcell">
+            <button
+              aria-label="31 December 2018 Monday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">31</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell" first-day>
+            <button
+              aria-label="1 January 2019 Tuesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">1</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="2 January 2019 Wednesday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">2</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="3 January 2019 Thursday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">3</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell">
+            <button
+              aria-label="4 January 2019 Friday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">4</span>
+            </button>
+          </td>
+          <td class="calendar__day-cell" role="gridcell" end-of-first-week>
+            <button
+              aria-label="5 January 2019 Saturday"
+              aria-pressed="false"
+              class="calendar__day-button"
+              tabindex="-1"
+            >
+              <span class="calendar__day-button__text">5</span>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+`;

package/components/calendar/test-helpers/CalendarObject.js

@@ -0,0 +1,174 @@
+import { DayObject } from './DayObject.js';
+
+/**
+ * Abstraction around calendar DOM structure,
+ * allows for writing readable, 'DOM structure agnostic' tests
+ */
+export class CalendarObject {
+  /**
+   * @param {import('../src/LionCalendar.js').LionCalendar} calendarEl
+   */
+  constructor(calendarEl) {
+    this.el = calendarEl;
+  }
+
+  /**
+   * Node references
+   */
+
+  get rootEl() {
+    return this.el.shadowRoot?.querySelector('.calendar');
+  }
+
+  get headerEl() {
+    return this.el.shadowRoot?.querySelector('.calendar__navigation');
+  }
+
+  get yearHeadingEl() {
+    return this.el.shadowRoot?.querySelector('#year');
+  }
+
+  get monthHeadingEl() {
+    return this.el.shadowRoot?.querySelector('#month');
+  }
+
+  get nextYearButtonEl() {
+    return /** @type {HTMLElement & { ariaLabel: string }} */ (
+      this.el.shadowRoot?.querySelectorAll('.calendar__next-button')[0]
+    );
+  }
+
+  get previousYearButtonEl() {
+    return /** @type {HTMLElement & { ariaLabel: string }} */ (
+      this.el.shadowRoot?.querySelectorAll('.calendar__previous-button')[0]
+    );
+  }
+
+  get nextMonthButtonEl() {
+    return this.el.shadowRoot?.querySelectorAll('.calendar__next-button')[1];
+  }
+
+  get previousMonthButtonEl() {
+    return this.el.shadowRoot?.querySelectorAll('.calendar__previous-button')[1];
+  }
+
+  get gridEl() {
+    return this.el.shadowRoot?.querySelector('.calendar__grid');
+  }
+
+  get weekdayHeaderEls() {
+    return /** @type {HTMLElement[]} */ (
+      Array.from(
+        /** @type {ShadowRoot} */ (this.el.shadowRoot).querySelectorAll(
+          '.calendar__weekday-header',
+        ),
+      )
+    );
+  }
+
+  get dayEls() {
+    return /** @type {HTMLElement[]} */ (
+      Array.from(
+        /** @type {ShadowRoot} */ (this.el.shadowRoot).querySelectorAll(
+          '.calendar__day-button[current-month]',
+        ),
+      )
+    );
+  }
+
+  get previousMonthDayEls() {
+    return /** @type {HTMLElement[]} */ (
+      Array.from(
+        /** @type {ShadowRoot} */ (this.el.shadowRoot).querySelectorAll(
+          '.calendar__day-button[previous-month]',
+        ),
+      )
+    );
+  }
+
+  get nextMonthDayEls() {
+    return /** @type {HTMLElement[]} */ (
+      Array.from(
+        /** @type {ShadowRoot} */ (this.el.shadowRoot).querySelectorAll(
+          '.calendar__day-button[next-month]',
+        ),
+      )
+    );
+  }
+
+  get dayObjs() {
+    return this.dayEls.map(d => new DayObject(d));
+  }
+
+  get previousMonthDayObjs() {
+    return this.previousMonthDayEls.map(d => new DayObject(d));
+  }
+
+  get nextMonthDayObjs() {
+    return this.nextMonthDayEls.map(d => new DayObject(d));
+  }
+
+  /**
+   * @param {number} monthDayNumber
+   */
+  getDayEl(monthDayNumber) {
+    // Relies on the fact that empty cells don't have .calendar__day-button[current-month]
+    return /** @type {HTMLElement} */ (
+      this.el.shadowRoot?.querySelectorAll('.calendar__day-button[current-month]')[
+        monthDayNumber - 1
+      ]
+    );
+  }
+
+  /**
+   * @param {number} monthDayNumber
+   */
+  getDayObj(monthDayNumber) {
+    return new DayObject(/** @type{HTMLElement} */ (this.getDayEl(monthDayNumber)));
+  }
+
+  get selectedDayObj() {
+    return this.dayObjs.find(d => d.isSelected);
+  }
+
+  get centralDayObj() {
+    return this.dayObjs.find(d => d.isCentral);
+  }
+
+  get focusedDayObj() {
+    return this.dayObjs.find(d => d.el === this.el.shadowRoot?.activeElement);
+  }
+
+  /**
+   * @desc Applies condition to all days, or days in filter
+   *
+   * @param {function} condition : condition that should apply for "filter" days
+   * - Example: "(dayObj) => dayObj.selected"
+   * @param {number[]|function} [filter] - month day numbers for which condition should apply.
+   * - Example 1: "[15, 20]"
+   * - Example 2: "(dayNumber) => dayNumber === 15" (1 based ,not zero based)
+   */
+  checkForAllDayObjs(condition, filter) {
+    return this.dayEls.every(d => {
+      const dayObj = new DayObject(d);
+      const dayNumber = dayObj.monthday;
+      let shouldApply = true;
+      if (filter !== undefined) {
+        shouldApply = filter instanceof Array ? filter.includes(dayNumber) : filter(dayNumber);
+      }
+      // for instance, should be 'disabled' for the 15th and 20th day
+      return !shouldApply || (condition(dayObj) && shouldApply);
+    });
+  }
+
+  /**
+   * States
+   */
+  get activeMonth() {
+    return this.monthHeadingEl?.textContent?.trim();
+  }
+
+  get activeYear() {
+    return this.yearHeadingEl?.textContent?.trim();
+  }
+}