Skip to content

Commit 0d6c150

Browse files
Ivan KitanovIvan Kitanov
Ivan Kitanov
authored and
Ivan Kitanov
committed
Moving logic from the DateRangePicker component to the PredefinedRangesArea and adding tests
1 parent f95cdd6 commit 0d6c150

File tree

3 files changed

+203
-67
lines changed

3 files changed

+203
-67
lines changed

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

Lines changed: 4 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -246,42 +246,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
246246
private _oldValue: DateRangeValue | null = null;
247247
private _visibleMonths = 2;
248248

249-
private _predefinedRanges: CustomDateRange[] = [
250-
{
251-
label: IgcDateRangePickerResourceStringsEN.last7Days,
252-
dateRange: {
253-
start: CalendarDay.today.add('day', -7).native,
254-
end: CalendarDay.today.native,
255-
},
256-
},
257-
{
258-
label: IgcDateRangePickerResourceStringsEN.currentMonth,
259-
dateRange: {
260-
start: CalendarDay.today.set({ date: 1 }).native,
261-
end: CalendarDay.today.set({ date: 1 }).add('month', 1).add('day', -1)
262-
.native,
263-
},
264-
},
265-
{
266-
label: IgcDateRangePickerResourceStringsEN.last30Days,
267-
dateRange: {
268-
start: CalendarDay.today.add('day', -29).native,
269-
end: CalendarDay.today.native,
270-
},
271-
},
272-
{
273-
label: IgcDateRangePickerResourceStringsEN.yearToDate,
274-
dateRange: {
275-
start: CalendarDay.today.set({
276-
year: CalendarDay.today.year,
277-
month: 0,
278-
date: 1,
279-
}).native,
280-
end: CalendarDay.today.native,
281-
},
282-
},
283-
];
284-
285249
protected override get __validators() {
286250
return dateRangeValidators;
287251
}
@@ -290,12 +254,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
290254
return this.mode === 'dropdown';
291255
}
292256

293-
private get _allRanges(): CustomDateRange[] {
294-
return this.usePredefinedRanges
295-
? [...this._predefinedRanges, ...this.customRanges]
296-
: [...this.customRanges];
297-
}
298-
299257
private get _firstDefinedInRange(): Date | null {
300258
return this.value?.start ?? this.value?.end ?? null;
301259
}
@@ -1125,34 +1083,15 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
11251083
`;
11261084
}
11271085

1128-
protected renderRanges() {
1129-
return html`
1130-
<div part="ranges">
1131-
${this._allRanges.map(
1132-
(range) => html`
1133-
<igc-chip
1134-
@click=${() =>
1135-
this._select(
1136-
{ start: range.dateRange.start, end: range.dateRange.end },
1137-
true
1138-
)}
1139-
>
1140-
${range.label}
1141-
</igc-chip>
1142-
`
1143-
)}
1144-
</div>
1145-
`;
1146-
}
1147-
11481086
protected renderPicker(id: string) {
11491087
return this._isDropDown
11501088
? html`
11511089
<igc-popover ?open=${this.open} anchor="${id}" flip shift>
11521090
<igc-focus-trap ?disabled=${!this.open || this.disabled}>
11531091
${this.renderCalendar(id)}
11541092
<igc-predefined-ranges-area
1155-
.ranges=${this._allRanges}
1093+
.usePredefinedRanges=${this.usePredefinedRanges}
1094+
.customRanges=${this.customRanges}
11561095
@range-select=${this._selectPredefinedRange}
11571096
>
11581097
</igc-predefined-ranges-area>
@@ -1173,7 +1112,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
11731112
>
11741113
${this.renderCalendar(id)} ${this.renderActions()}
11751114
<igc-predefined-ranges-area
1176-
.ranges=${this._allRanges}
1115+
.usePredefinedRanges=${this.usePredefinedRanges}
1116+
.customRanges=${this.customRanges}
11771117
@range-select=${this._selectPredefinedRange}
11781118
>
11791119
</igc-predefined-ranges-area>

‎src/components/date-range-picker/predefined-ranges-area.spec.ts‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
2+
3+
import { spy } from 'sinon';
4+
import { CalendarDay } from '../calendar/model.js';
5+
import { defineComponents } from '../common/definitions/defineComponents.js';
6+
import type { CustomDateRange } from './date-range-picker.js';
7+
import IgcPredefinedRangesAreaComponent from './predefined-ranges-area.js';
8+
9+
describe('Divider', () => {
10+
before(() => {
11+
defineComponents(IgcPredefinedRangesAreaComponent);
12+
});
13+
14+
const today = CalendarDay.from(new Date());
15+
const previousThreeMonthsStart = new Date(
16+
today.native.getFullYear(),
17+
today.native.getMonth() - 3,
18+
1
19+
);
20+
const previousThreeMonthsEnd = new Date(
21+
today.native.getFullYear(),
22+
today.native.getMonth(),
23+
0
24+
);
25+
const nextThreeMonthsStart = new Date(
26+
today.native.getFullYear(),
27+
today.native.getMonth() + 1,
28+
1
29+
);
30+
const nextThreeMonthsEnd = new Date(
31+
today.native.getFullYear(),
32+
today.native.getMonth() + 4,
33+
0
34+
);
35+
36+
const customRanges: CustomDateRange[] = [
37+
{
38+
label: 'Previous Three Months',
39+
dateRange: {
40+
start: previousThreeMonthsStart,
41+
end: previousThreeMonthsEnd,
42+
},
43+
},
44+
{
45+
label: 'Next Three Months',
46+
dateRange: {
47+
start: nextThreeMonthsStart,
48+
end: nextThreeMonthsEnd,
49+
},
50+
},
51+
];
52+
53+
const createDefaultComponent = () => html`
54+
<igc-predefined-ranges-area></igc-predefined-ranges-area>
55+
`;
56+
57+
const createComponentWithCustomRanges = () => html`
58+
<igc-predefined-ranges-area
59+
use-predefined-ranges
60+
.customRanges=${customRanges}
61+
></igc-predefined-ranges-area>
62+
`;
63+
64+
let component: IgcPredefinedRangesAreaComponent;
65+
66+
beforeEach(async () => {
67+
component = await fixture<IgcPredefinedRangesAreaComponent>(
68+
createDefaultComponent()
69+
);
70+
});
71+
72+
describe('Predefined Area Component Tests', () => {
73+
it('passes the a11y audit', async () => {
74+
await expect(component).to.be.accessible();
75+
await expect(component).shadowDom.to.be.accessible();
76+
});
77+
78+
it('is correctly initialized and rendered with its default component state', () => {
79+
expect(component).dom.to.equal(
80+
' <igc-predefined-ranges-area></igc-predefined-ranges-area>'
81+
);
82+
expect((component as any)._allRanges.length).to.equal(0);
83+
});
84+
85+
it('is correctly initialized and rendered with predefined ranges', async () => {
86+
component.usePredefinedRanges = true;
87+
await elementUpdated(component);
88+
89+
expect(component).dom.to.equal(
90+
' <igc-predefined-ranges-area use-predefined-ranges></igc-predefined-ranges-area>'
91+
);
92+
93+
const predefinedRanges = (component as any)._predefinedRanges;
94+
const chips = component.renderRoot.querySelectorAll('igc-chip');
95+
96+
expect((component as any)._allRanges.length).to.equal(chips.length);
97+
98+
for (let i = 0; i < chips.length; i++) {
99+
expect(chips[i].innerText).to.equal(predefinedRanges[i].label);
100+
}
101+
});
102+
103+
it('is correctly initialized and rendered with predefined ranges and custom ranges', async () => {
104+
component = await fixture<IgcPredefinedRangesAreaComponent>(
105+
createComponentWithCustomRanges()
106+
);
107+
108+
const allRanges = (component as any)._allRanges;
109+
const chips = component.renderRoot.querySelectorAll('igc-chip');
110+
111+
expect(allRanges.length).to.equal(chips.length);
112+
113+
for (let i = 0; i < chips.length; i++) {
114+
expect(chips[i].innerText).to.equal(allRanges[i].label);
115+
}
116+
});
117+
118+
it('correctly provides details about the chip that has been clicked on', async () => {
119+
component = await fixture<IgcPredefinedRangesAreaComponent>(
120+
createComponentWithCustomRanges()
121+
);
122+
123+
const eventSpy = spy();
124+
component.addEventListener('range-select', eventSpy);
125+
const allRanges = (component as any)._allRanges;
126+
const chips = component.renderRoot.querySelectorAll('igc-chip');
127+
128+
expect(allRanges.length).to.equal(chips.length);
129+
130+
for (let i = 0; i < chips.length; i++) {
131+
expect(chips[i].innerText).to.equal(allRanges[i].label);
132+
133+
chips[i].click();
134+
await elementUpdated(component);
135+
136+
expect(eventSpy.calledWithMatch({ detail: allRanges[i] })).to.be.true;
137+
}
138+
});
139+
});
140+
});

‎src/components/date-range-picker/predefined-ranges-area.ts‎

Lines changed: 59 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,79 @@
11
import { LitElement, html } from 'lit-element';
22
import { property } from 'lit/decorators.js';
3+
import { CalendarDay } from '../calendar/model.js';
34
import IgcChipComponent from '../chip/chip.js';
45
import { registerComponent } from '../common/definitions/register.js';
6+
import { IgcDateRangePickerResourceStringsEN } from '../common/i18n/date-range-picker.resources.js';
57
import type { CustomDateRange } from './date-range-picker.js';
68
import { styles } from './predefined-ranges.area.css.js';
79

810
export default class IgcPredefinedRangesAreaComponent extends LitElement {
911
public static readonly tagName = 'igc-predefined-ranges-area';
1012
public static override styles = [styles];
1113

14+
private _predefinedRanges: CustomDateRange[] = [
15+
{
16+
label: IgcDateRangePickerResourceStringsEN.last7Days,
17+
dateRange: {
18+
start: CalendarDay.today.add('day', -7).native,
19+
end: CalendarDay.today.native,
20+
},
21+
},
22+
{
23+
label: IgcDateRangePickerResourceStringsEN.currentMonth,
24+
dateRange: {
25+
start: CalendarDay.today.set({ date: 1 }).native,
26+
end: CalendarDay.today.set({ date: 1 }).add('month', 1).add('day', -1)
27+
.native,
28+
},
29+
},
30+
{
31+
label: IgcDateRangePickerResourceStringsEN.last30Days,
32+
dateRange: {
33+
start: CalendarDay.today.add('day', -29).native,
34+
end: CalendarDay.today.native,
35+
},
36+
},
37+
{
38+
label: IgcDateRangePickerResourceStringsEN.yearToDate,
39+
dateRange: {
40+
start: CalendarDay.today.set({
41+
year: CalendarDay.today.year,
42+
month: 0,
43+
date: 1,
44+
}).native,
45+
end: CalendarDay.today.native,
46+
},
47+
},
48+
];
49+
1250
/* blazorSuppress */
1351
public static register() {
1452
registerComponent(IgcPredefinedRangesAreaComponent, IgcChipComponent);
1553
}
1654

1755
/**
18-
* Renders chips with ranges based on the elements of the array.
56+
* Whether the control will show chips with predefined ranges.
57+
* @attr
58+
*/
59+
@property({
60+
reflect: true,
61+
type: Boolean,
62+
attribute: 'use-predefined-ranges',
63+
})
64+
public usePredefinedRanges = false;
65+
66+
/**
67+
* Renders chips with custom ranges based on the elements of the array.
1968
*/
20-
@property({ type: Array }) ranges: CustomDateRange[] = [];
69+
@property({ type: Array })
70+
public customRanges: CustomDateRange[] = [];
71+
72+
private get _allRanges(): CustomDateRange[] {
73+
return this.usePredefinedRanges
74+
? [...this._predefinedRanges, ...this.customRanges]
75+
: [...this.customRanges];
76+
}
2177

2278
private handleRangeSelect(range: CustomDateRange) {
2379
const event = new CustomEvent('range-select', { detail: range });
@@ -27,7 +83,7 @@ export default class IgcPredefinedRangesAreaComponent extends LitElement {
2783
protected override render() {
2884
return html`
2985
<div class="ranges">
30-
${this.ranges.map(
86+
${this._allRanges.map(
3187
(range) => html`
3288
<igc-chip @click=${() => this.handleRangeSelect(range)}>
3389
${range.label}

0 commit comments

Comments
 (0)