Skip to content

Commit 84727f6

Browse files
ddariboddaribo
committed
tests(drp): fix calendar selection tests
1 parent 3c1a94a commit 84727f6

File tree

3 files changed

+72
-51
lines changed

3 files changed

+72
-51
lines changed

‎src/components/date-range-picker/date-range-picker.spec.ts‎

Lines changed: 61 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
22
import { spy } from 'sinon';
33
import IgcCalendarComponent from '../calendar/calendar.js';
4+
import { getCalendarDOM, getDOMDate } from '../calendar/helpers.spec.js';
45
import { CalendarDay } from '../calendar/model.js';
56
import { defineComponents } from '../common/definitions/defineComponents.js';
7+
import { simulateClick } from '../common/utils.spec.js';
68
import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
79
import IgcDateRangePickerComponent from './date-range-picker.js';
810

@@ -12,10 +14,6 @@ describe('Date range picker', () => {
1214
let picker: IgcDateRangePickerComponent;
1315
let _dateTimeInput: IgcDateTimeInputComponent;
1416
let calendar: IgcCalendarComponent;
15-
const date_1 = new CalendarDay({ year: 2025, month: 2, date: 19 });
16-
const date_2 = date_1.set({ date: 22 });
17-
const date_1_str = date_1.native.toISOString();
18-
const date_2_str = date_2.native.toISOString();
1917

2018
beforeEach(async () => {
2119
picker = await fixture<IgcDateRangePickerComponent>(
@@ -129,21 +127,24 @@ describe('Date range picker', () => {
129127
});
130128
});
131129
describe('Selection via the calendar', () => {
130+
const today = CalendarDay.from(new Date());
131+
const tomorrow = today.add('day', 1);
132+
132133
it('should select a single date in dropdown mode and emit igcChange', async () => {
133134
const eventSpy = spy(picker, 'emitEvent');
134-
135135
picker.open = true;
136136
await elementUpdated(picker);
137137

138-
calendar.values = `${date_1_str}`;
138+
await selectDates(today, null, calendar);
139139

140140
expect(eventSpy).calledWith('igcChange');
141141
expect(picker.value?.length).to.equal(2);
142-
expect(picker.value?.[0]).to.deep.equal(date_1);
143-
expect(picker.value?.[1]).to.deep.equal(date_1);
144-
expect(
145-
picker.shadowRoot!.querySelector('igc-popover')?.hasAttribute('open')
146-
).to.equal(false);
142+
expect(picker.value?.[0]).to.deep.equal(today.native);
143+
expect(picker.value?.[1]).to.deep.equal(today.native);
144+
145+
const popover = picker.renderRoot.querySelector('igc-popover');
146+
// when selecting a single date, the calendar won't close
147+
expect(popover?.hasAttribute('open')).to.equal(true);
147148
});
148149

149150
it('should select a range of dates in dropdown mode and emit igcChange', async () => {
@@ -152,15 +153,16 @@ describe('Date range picker', () => {
152153
picker.open = true;
153154
await elementUpdated(picker);
154155

155-
calendar.values = `${date_1_str}, ${date_2_str}`;
156+
await selectDates(today, tomorrow, calendar);
156157

157158
expect(eventSpy).calledWith('igcChange');
158159
expect(picker.value?.length).to.equal(2);
159-
expect(picker.value?.[0]).to.deep.equal(date_1);
160-
expect(picker.value?.[1]).to.deep.equal(date_2);
161-
expect(
162-
picker.shadowRoot!.querySelector('igc-popover')?.hasAttribute('open')
163-
).to.equal(false);
160+
expect(picker.value?.[0]).to.deep.equal(today.native);
161+
expect(picker.value?.[1]).to.deep.equal(tomorrow.native);
162+
163+
const popover = picker.renderRoot.querySelector('igc-popover');
164+
// with the second click, the calendar closes
165+
expect(popover?.hasAttribute('open')).to.equal(false);
164166
});
165167

166168
it('should select a range of dates in dialog mode and emit igcChange when done is clicked', async () => {
@@ -171,55 +173,74 @@ describe('Date range picker', () => {
171173
picker.open = true;
172174
await elementUpdated(picker);
173175

174-
calendar.values = `${date_1_str}, ${date_2_str}`;
176+
await selectDates(today, tomorrow, calendar);
175177

176178
expect(eventSpy).not.to.be.calledWith('igcChange');
177-
expect(
178-
picker.shadowRoot!.querySelector('igc-popover')?.hasAttribute('open')
179-
).to.equal(true);
179+
let dialog = picker.renderRoot.querySelector('igc-dialog');
180+
expect(dialog?.hasAttribute('open')).to.equal(true);
180181

181182
const doneBtn = picker.shadowRoot!.querySelector(
182183
'igc-button[slot="footer"]:last-of-type'
183-
)!;
184-
doneBtn?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
184+
) as HTMLButtonElement;
185+
doneBtn?.click();
186+
await elementUpdated(picker);
185187

186188
expect(eventSpy).calledWith('igcChange');
187189
expect(picker.value?.length).to.equal(2);
188-
expect(picker.value?.[0]).to.deep.equal(date_1);
189-
expect(picker.value?.[1]).to.deep.equal(date_2);
190-
expect(
191-
picker.shadowRoot!.querySelector('igc-popover')?.hasAttribute('open')
192-
).to.equal(false);
190+
expect(picker.value?.[0]).to.deep.equal(today.native);
191+
expect(picker.value?.[1]).to.deep.equal(tomorrow.native);
192+
193+
dialog = picker.renderRoot.querySelector('igc-dialog');
194+
expect(dialog?.hasAttribute('open')).to.equal(false);
193195
});
194196

195197
it('should not emit igcChange when cancel is clicked and the value should be the initial value', async () => {
196198
const eventSpy = spy(picker, 'emitEvent');
197199

198-
picker.value;
199200
picker.mode = 'dialog';
201+
const date1 = today.add('day', -2);
202+
const date2 = today.add('day', 2);
203+
picker.value = [date1.native, date2.native];
200204
await elementUpdated(picker);
201205
picker.open = true;
202206
await elementUpdated(picker);
203207

204-
calendar.values = `${date_1_str}, ${date_2_str}`;
208+
await selectDates(date1, date2, calendar);
205209

206210
expect(eventSpy).not.to.be.calledWith('igcChange');
207-
expect(
208-
picker.shadowRoot!.querySelector('igc-popover')?.hasAttribute('open')
209-
).to.equal(true);
211+
let dialog = picker.renderRoot.querySelector('igc-dialog');
212+
expect(dialog?.hasAttribute('open')).to.equal(true);
210213

211214
const cancelBtn = picker.shadowRoot!.querySelector(
212215
'igc-button[slot="footer"]'
213-
)!;
214-
cancelBtn?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
216+
) as HTMLButtonElement;
217+
cancelBtn?.click();
218+
await elementUpdated(picker);
215219

216220
expect(eventSpy).not.to.be.calledWith('igcChange');
217221
expect(picker.value?.length).to.equal(2);
218-
expect(picker.value?.[0]).to.deep.equal(date_1);
219-
expect(picker.value?.[1]).to.deep.equal(date_2);
220-
expect(
221-
picker.shadowRoot!.querySelector('igc-popover')?.hasAttribute('open')
222-
).to.equal(false);
222+
expect(picker.value?.[0]).to.deep.equal(date1.native);
223+
expect(picker.value?.[1]).to.deep.equal(date2.native);
224+
dialog = picker.renderRoot.querySelector('igc-dialog');
225+
expect(dialog?.hasAttribute('open')).to.equal(false);
223226
});
224227
});
225228
});
229+
230+
const selectDates = async (
231+
startDate: CalendarDay | null,
232+
endDate: CalendarDay | null,
233+
calendar: IgcCalendarComponent
234+
) => {
235+
const daysView = getCalendarDOM(calendar).views.days;
236+
if (startDate) {
237+
const startDayDOM = getDOMDate(startDate, daysView);
238+
simulateClick(startDayDOM);
239+
await elementUpdated(calendar);
240+
}
241+
if (endDate) {
242+
const endDayDom = getDOMDate(endDate, daysView);
243+
simulateClick(endDayDom);
244+
await elementUpdated(calendar);
245+
}
246+
};

‎src/components/date-range-picker/date-range-picker.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
528528
}
529529

530530
protected dialogDone() {
531+
this.emitEvent('igcChange', { detail: this.value ?? undefined });
531532
this._hide(true);
532533
}
533534

@@ -708,7 +709,10 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
708709
this._startDate = rangeValues[0];
709710
this._endDate = rangeValues[rangeValues.length - 1];
710711
this.value = [this._startDate, this._endDate];
711-
this.emitEvent('igcChange', { detail: this.value });
712+
713+
if (this.isDropDown) {
714+
this.emitEvent('igcChange', { detail: this.value });
715+
}
712716

713717
this._shouldCloseCalendarDropdown();
714718
}
@@ -886,6 +890,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
886890
<igc-button slot="footer" @click=${this.dialogCancel} variant="flat"
887891
>Cancel</igc-button
888892
>
893+
<!--TODO: Localize -->
889894
<igc-button slot="footer" @click=${this.dialogDone} variant="flat"
890895
>Done</igc-button
891896
>
@@ -908,14 +913,11 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
908913
display-format=${ifDefined(this._displayFormat)}
909914
?disabled=${this.disabled}
910915
?readonly=${readOnly}
911-
?required=${this.required}
912916
.value=${picker === 'start' ? this._startDate : this._endDate}
913917
.locale=${this.locale}
914918
.prompt=${this.prompt}
915919
.outlined=${this.outlined}
916920
.placeholder=${this.placeholder}
917-
.min=${this.min}
918-
.max=${this.max}
919921
.invalid=${live(this.invalid)}
920922
@igcChange=${this.handleInputChangeEvent}
921923
@igcInput=${this.handleInputEvent}
@@ -957,8 +959,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
957959
placeholder=${this.placeholder}
958960
?readonly=${true}
959961
?required=${this.required}
960-
.locale=${this.locale}
961-
.prompt=${this.prompt}
962962
.outlined=${this.outlined}
963963
?invalid=${live(this.invalid)}
964964
.disabled=${this.disabled}

‎stories/date-range-picker.stories.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -459,17 +459,17 @@ export const Slots: Story = {
459459
?keep-open-on-select=${args.keepOpenOnSelect}
460460
>
461461
<span slot="prefix-start">$</span>
462-
<span slot="prefix-end">$</span>
462+
<span slot="prefix-end">*</span>
463463
<span slot="suffix-start">🦀</span>
464-
<span slot="suffix-end">🦀</span>
464+
<span slot="suffix-end">😂</span>
465465
466-
<span slot="start-calendar-icon-open">👩‍💻</span>
467-
<span slot="start-calendar-icon">👩‍💻</span>
466+
<span slot="start-calendar-icon-open">⬆️</span>
467+
<span slot="start-calendar-icon">⬇️</span>
468468
<span slot="end-calendar-icon-open">👩‍💻</span>
469469
<span slot="end-calendar-icon">👩‍💻</span>
470470
471471
<span slot="start-clear-icon">🗑️</span>
472-
<span slot="end-clear-icon">🗑️</span>
472+
<span slot="end-clear-icon">🚮</span>
473473
474474
<p slot="helper-text">
475475
For example, select the dates of your future vacation

0 commit comments

Comments
 (0)