Calendar widget test and small styling fix on wide screens (#14139)

* setup component test * fix * fixes * make more clear
2022-02-17 16:52:06 -07:00 · 2022-02-17 16:52:06 -07:00 · 880a8143e0
parent 7d9ba86145
commit 880a8143e0
6 changed files with 154 additions and 6 deletions
--- a/ui/app/adapters/clients/monthly.js
+++ b/ui/app/adapters/clients/monthly.js
@ -6,7 +6,6 @@ export default class MonthlyAdapter extends ApplicationAdapter {
    // Query has startTime defined. The API will return the endTime if none is provided.
    return this.ajax(url, 'GET').then((resp) => {
      let response = resp || {};
-      // if the response is a 204 it has no request id (ARG TODO test that it returns a 204)
      response.id = response.request_id || 'no-data';
      return response;
    });
--- a/ui/app/components/calendar-widget.js
+++ b/ui/app/components/calendar-widget.js
@ -13,7 +13,7 @@ import { tracked } from '@glimmer/tracking';
 * <CalendarWidget
 * @param {array} arrayOfMonths - An array of all the months that the calendar widget iterates through.
 * @param {string} endTimeDisplay - The formatted display value of the endTime. Ex: January 2022.
- * @param {string} endTimeFromResponse - The value returned on the counters/activity endpoint, which shows the true endTime not the selected one, which can be different.
+ * @param {array} endTimeFromResponse - The value returned on the counters/activity endpoint, which shows the true endTime not the selected one, which can be different. Ex: ['2022', 0]
 * @param {function} handleClientActivityQuery - a function passed from parent. This component sends the month and year to the parent via this method which then calculates the new data.
 * @param {function} handleCurrentBillingPeriod - a function passed from parent. This component makes the parent aware that the user selected Current billing period and it handles resetting the data.
 * @param {string} startTimeDisplay - The formatted display value of the endTime. Ex: January 2022. This component is only responsible for modifying the endTime which is sends to the parent to make the network request.
--- a/ui/app/styles/components/calendar-widget.scss
+++ b/ui/app/styles/components/calendar-widget.scss
@ -2,7 +2,11 @@ $dark-gray: #535f73;

 .calendar-content {
  display: flex;
-  width: 500px;
+  width: 234px;
+
+  &.calendar-open {
+    width: 500px;
+  }

  > .menu {
    margin-bottom: 0px;
--- a/ui/app/templates/components/calendar-widget.hbs
+++ b/ui/app/templates/components/calendar-widget.hbs
@ -9,12 +9,13 @@
    {{@endTimeDisplay}}
    <Chevron @direction="down" @isButton={{true}} />
  </D.Trigger>
-  <D.Content @defaultClass="popup-menu-content calendar-content">
+  <D.Content @defaultClass={{concat "popup-menu-content calendar-content" (if this.showCalendar " calendar-open")}}>
    <nav class="box menu">
      <div class="calendar-title is-subtitle-gray">DATE OPTIONS</div>
      <ul class="menu-list">
        <li class="action">
          <button
+            data-test-current-billing-period
            class="link link-plain has-text-weight-semibold is-ghost"
            type="button"
            {{on "click" (fn this.selectCurrentBillingPeriod D)}}
@ -24,6 +25,7 @@
        </li>
        <li class="action">
          <button
+            data-test-show-calendar
            class={{concat "link link-plain has-text-weight-semibold is-ghost" (if this.showCalendar " is-active")}}
            type="button"
            {{on "click" this.toggleShowCalendar}}
@ -37,9 +39,10 @@
      </ul>
    </nav>
    {{#if this.showCalendar}}
-      <div class="calendar-widget-container">
+      <div class="calendar-widget-container" data-test-calendar-widget-container>
        <div class="select-year">
          <button
+            data-test-previous-year
            id="previous-year"
            type="button"
            class="button is-transparent"
@ -54,8 +57,9 @@
              {{on "mouseleave" this.removeTooltip}}
            />
          </button>
-          <p>{{this.displayYear}}</p>
+          <p data-test-display-year>{{this.displayYear}}</p>
          <button
+            data-test-future-year
            type="button"
            class={{concat "button is-transparent " (if (or this.tooltipTarget) "negative-margin" "padding-right")}}
            disabled={{this.disableFutureYear}}
@ -83,6 +87,7 @@
        <div {{did-insert this.disableMonths}} class="calendar-widget-grid calendar-widget">
          {{#each @arrayOfMonths as |month index|}}
            <button
+              data-test-calendar-month={{month}}
              type="button"
              {{on "click" (fn this.selectEndMonth index this.displayYear D)}}
              class="is-month-list"
--- a/ui/tests/integration/components/calendar-widget-test.js
+++ b/ui/tests/integration/components/calendar-widget-test.js
@ -0,0 +1,125 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import sinon from 'sinon';
+import hbs from 'htmlbars-inline-precompile';
+import calendarDropdown from 'vault/tests/pages/components/calendar-widget';
+
+module('Integration | Component | calendar-widget', function (hooks) {
+  setupRenderingTest(hooks);
+
+  const ARRAY_OF_MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  hooks.beforeEach(function () {
+    this.set('handleClientActivityQuery', sinon.spy());
+    this.set('handleCurrentBillingPeriod', sinon.spy());
+    this.set('arrayOfMonths', ARRAY_OF_MONTHS);
+    this.set('endTimeFromResponse', ['2022', 0]);
+  });
+
+  test('it renders and can open the calendar view', async function (assert) {
+    await render(hbs`
+      <CalendarWidget
+        @arrayOfMonths={{arrayOfMonths}}
+        @endTimeDisplay={{"January 2022"}}
+        @endTimeFromResponse={{endTimeFromResponse}}
+        @handleClientActivityQuery={{handleClientActivityQuery}}
+        @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+        @startTimeDisplay={{"February 2021"}}
+      />
+    `);
+
+    await calendarDropdown.openCalendar();
+    assert.ok(calendarDropdown.showsCalendar, 'renders the calendar component');
+  });
+
+  test('it does not allow a user to click to a future year but does allow a user to click to previous year', async function (assert) {
+    await render(hbs`
+      <CalendarWidget
+        @arrayOfMonths={{arrayOfMonths}}
+        @endTimeDisplay={{"March 2022"}}
+        @endTimeFromResponse={{endTimeFromResponse}}
+        @handleClientActivityQuery={{handleClientActivityQuery}}
+        @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+        @startTimeDisplay={{"February 2021"}}
+      />
+    `);
+
+    await calendarDropdown.openCalendar();
+    assert.dom('[data-test-future-year]').isDisabled('Future year is disabled');
+
+    await calendarDropdown.clickPreviousYear();
+    assert.dom('[data-test-display-year]').hasText('2021', 'shows the previous year');
+    assert
+      .dom('[data-test-calendar-month="January"]')
+      .hasClass('is-readOnly', 'January 2021 is disabled because it comes before February 2021');
+  });
+
+  test('it enables the current month but disables future months', async function (assert) {
+    await render(hbs`
+      <CalendarWidget
+        @arrayOfMonths={{arrayOfMonths}}
+        @endTimeDisplay={{"January 2022"}}
+        @endTimeFromResponse={{endTimeFromResponse}}
+        @handleClientActivityQuery={{handleClientActivityQuery}}
+        @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+        @startTimeDisplay={{"February 2021"}}
+      />
+    `);
+    await calendarDropdown.openCalendar();
+    assert
+      .dom('[data-test-calendar-month="January"]')
+      .doesNotHaveClass('is-readOnly', 'January 2022 is enabled');
+    assert.dom('[data-test-calendar-month="February"]').hasClass('is-readOnly', 'February 2022 is enabled');
+  });
+
+  test('it allows you to reset the billing period', async function (assert) {
+    await render(hbs`
+    <CalendarWidget
+      @arrayOfMonths={{arrayOfMonths}}
+      @endTimeDisplay={{"January 2022"}}
+      @endTimeFromResponse={{endTimeFromResponse}}
+      @handleClientActivityQuery={{handleClientActivityQuery}}
+      @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+      @startTimeDisplay={{"February 2021"}}
+    />
+  `);
+    await calendarDropdown.menuToggle();
+    await calendarDropdown.clickCurrentBillingPeriod();
+    assert.ok(this.handleCurrentBillingPeriod.calledOnce, 'it calls the parents handleCurrentBillingPeriod');
+  });
+
+  test('it passes the appropriate data to the handleCurrentBillingPeriod when a date is selected', async function (assert) {
+    await render(hbs`
+    <CalendarWidget
+      @arrayOfMonths={{arrayOfMonths}}
+      @endTimeDisplay={{"January 2022"}}
+      @endTimeFromResponse={{endTimeFromResponse}}
+      @handleClientActivityQuery={{handleClientActivityQuery}}
+      @handleCurrentBillingPeriod={{handleCurrentBillingPeriod}}
+      @startTimeDisplay={{"February 2021"}}
+    />
+  `);
+    await calendarDropdown.openCalendar();
+    await calendarDropdown.clickPreviousYear();
+    await click('[data-test-calendar-month="October"]'); // select endTime of October 2021
+    assert.ok(this.handleClientActivityQuery.calledOnce, 'it calls the parents handleClientActivityQuery');
+    assert.ok(
+      this.handleClientActivityQuery.calledWith(9, 2021, 'endTime'),
+      'Passes the month as an index, year and date type to the parent'
+    );
+  });
+});
--- a/ui/tests/pages/components/calendar-widget.js
+++ b/ui/tests/pages/components/calendar-widget.js
@ -0,0 +1,15 @@
+import { clickable, create, isPresent } from 'ember-cli-page-object';
+
+export default create({
+  clickPreviousYear: clickable('[data-test-previous-year]'),
+  clickCurrentBillingPeriod: clickable('[data-test-current-billing-period]'),
+  customEndMonthBtn: clickable('[data-test-show-calendar]'),
+  menuToggle: clickable('[data-test-popup-menu-trigger="true"]'),
+  showsCalendar: isPresent('[data-test-calendar-widget-container]'),
+
+  async openCalendar() {
+    await this.menuToggle();
+    await this.customEndMonthBtn();
+    return;
+  },
+});