Calendar widget test and small styling fix on wide screens (#14139)
* setup component test * fix * fixes * make more clear
This commit is contained in:
Angel Garbarino
GitHub
parent
7d9ba86145
commit
880a8143e0
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@ $dark-gray: #535f73;
|
|||
|
||||
.calendar-content {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
width: 234px;
|
||||
|
||||
&.calendar-open {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
> .menu {
|
||||
margin-bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue