Skip to content

Commit 7343e67

Browse files
ddariboddaribo
committed
refactor & add slots; add tests for slots; add resource strings
1 parent c0e540d commit 7343e67

File tree

4 files changed

+388
-33
lines changed

4 files changed

+388
-33
lines changed

‎src/components/common/i18n/date-range-picker.resources.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* blazorSuppress */
2+
export interface IgcDateRangePickerResourceStrings {
3+
separator: string;
4+
done: string;
5+
cancel: string;
6+
last7Days: string;
7+
last30Days: string;
8+
currentMonth: string;
9+
yearToDate: string;
10+
}
11+
12+
export const IgcDateRangePickerResourceStringsEN: IgcDateRangePickerResourceStrings =
13+
{
14+
separator: 'to',
15+
done: 'Done',
16+
cancel: 'Cancel',
17+
last7Days: 'Last 7 days',
18+
last30Days: 'Last 30 days',
19+
currentMonth: 'Current month',
20+
yearToDate: 'Year to date',
21+
};

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

Lines changed: 253 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,32 @@ describe('Date range picker', () => {
488488
expect(picker.displayFormat).to.equal(picker.inputFormat);
489489
});
490490
});
491+
492+
it('should expose the default strings for localization', async () => {
493+
picker.resourceStrings.done = 'Done - localized';
494+
picker.resourceStrings.cancel = 'Cancel - localized';
495+
picker.resourceStrings.separator = 'Separator - localized';
496+
picker.mode = 'dialog';
497+
picker.open = true;
498+
await elementUpdated(picker);
499+
500+
const doneBtn = picker.shadowRoot!.querySelector(
501+
'igc-button[slot="footer"]:last-of-type'
502+
) as HTMLButtonElement;
503+
expect(doneBtn.innerText).to.equal('Done - localized');
504+
505+
const cancelBtn = picker.shadowRoot!.querySelector(
506+
'igc-button[slot="footer"]'
507+
) as HTMLButtonElement;
508+
expect(cancelBtn.innerText).to.equal('Cancel - localized');
509+
510+
picker.open = false;
511+
await elementUpdated(picker);
512+
const separator = picker.shadowRoot!.querySelector(
513+
'[part="separator"]'
514+
) as any;
515+
expect(separator?.innerText).to.equal('Separator - localized');
516+
});
491517
});
492518
describe('Interactions', () => {
493519
describe('Selection via the calendar', () => {
@@ -794,10 +820,235 @@ describe('Date range picker', () => {
794820
});
795821
});
796822
});
797-
// TODO
798823
describe('Slots', () => {
799-
it('should render slotted elements', async () => {});
824+
it('should render slotted elements - two inputs', async () => {
825+
picker = await fixture<IgcDateRangePickerComponent>(
826+
html`<igc-date-range-picker>
827+
<span slot="prefix-start">$</span>
828+
<span slot="prefix-end">$-end</span>
829+
<span slot="suffix-start">~</span>
830+
<span slot="suffix-end">~-end</span>
831+
<p slot="helper-text">For example, select a range</p>
832+
<p slot="title">Custom title</p>
833+
<p slot="header-date">Custom header date</p>
834+
<span slot="calendar-icon-open-start">v</span>
835+
<span slot="calendar-icon-open-end">v-end</span>
836+
<span slot="calendar-icon-start">^</span>
837+
<span slot="calendar-icon-end">^-end</span>
838+
<span slot="clear-icon-start">X</span>
839+
<span slot="clear-icon-end">X-end</span>
840+
<button slot="actions">Custom action</button>
841+
<span slot="separator">Custom separator</span>
842+
</igc-date-range-picker>`
843+
);
844+
await elementUpdated(picker);
845+
846+
const slotTests = [
847+
{
848+
slot: 'prefix-start',
849+
tagName: 'span',
850+
content: '$',
851+
},
852+
{
853+
slot: 'prefix-end',
854+
tagName: 'span',
855+
content: '$-end',
856+
},
857+
{
858+
slot: 'suffix-start',
859+
tagName: 'span',
860+
content: '~',
861+
},
862+
{
863+
slot: 'suffix-end',
864+
tagName: 'span',
865+
content: '~-end',
866+
},
867+
{
868+
slot: 'title',
869+
tagName: 'p',
870+
content: 'Custom title',
871+
prerequisite: () => {
872+
picker.mode = 'dialog';
873+
},
874+
},
875+
{
876+
slot: 'header-date',
877+
tagName: 'p',
878+
content: 'Custom header date',
879+
prerequisite: () => {
880+
picker.mode = 'dialog';
881+
},
882+
},
883+
{
884+
slot: 'helper-text',
885+
tagName: 'p',
886+
content: 'For example, select a range',
887+
},
888+
{
889+
slot: 'calendar-icon-start',
890+
tagName: 'span',
891+
content: '^',
892+
},
893+
{
894+
slot: 'calendar-icon-end',
895+
tagName: 'span',
896+
content: '^-end',
897+
},
898+
{
899+
slot: 'calendar-icon-open-start',
900+
tagName: 'span',
901+
content: 'v',
902+
prerequisite: async () => await picker.show(),
903+
},
904+
{
905+
slot: 'calendar-icon-open-end',
906+
tagName: 'span',
907+
content: 'v-end',
908+
prerequisite: async () => await picker.show(),
909+
},
910+
{
911+
slot: 'clear-icon-start',
912+
tagName: 'span',
913+
content: 'X',
914+
prerequisite: () => {
915+
picker.value = { start: today.native, end: tomorrow.native };
916+
},
917+
},
918+
{
919+
slot: 'clear-icon-end',
920+
tagName: 'span',
921+
content: 'X-end',
922+
prerequisite: () => {
923+
picker.value = { start: today.native, end: tomorrow.native };
924+
},
925+
},
926+
{
927+
slot: 'actions',
928+
tagName: 'button',
929+
content: 'Custom action',
930+
prerequisite: async () => await picker.show(),
931+
},
932+
{
933+
slot: 'separator',
934+
tagName: 'span',
935+
content: 'Custom separator',
936+
},
937+
];
938+
939+
for (let i = 0; i < slotTests.length; i++) {
940+
await slotTests[i].prerequisite?.();
941+
await elementUpdated(picker);
942+
943+
const slot = picker.renderRoot.querySelector(
944+
`slot[name="${slotTests[i].slot}"]`
945+
) as HTMLSlotElement;
946+
const elements = slot.assignedElements();
947+
948+
expect((elements[0] as HTMLElement).innerText).to.equal(
949+
slotTests[i].content
950+
);
951+
expect(elements[0].tagName.toLowerCase()).to.equal(
952+
slotTests[i].tagName
953+
);
954+
}
955+
});
956+
957+
it('should render slotted elements - single input', async () => {
958+
picker = await fixture<IgcDateRangePickerComponent>(
959+
html`<igc-date-range-picker single-input mode="dialog">
960+
<span slot="prefix">$</span>
961+
<span slot="suffix">~</span>
962+
<p slot="helper-text">For example, select a range</p>
963+
<p slot="title">Custom title</p>
964+
<p slot="header-date">Custom header date</p>
965+
<span slot="calendar-icon-open">v</span>
966+
<span slot="calendar-icon">^</span>
967+
<span slot="clear-icon">X</span>
968+
<button slot="actions">Custom action</button>
969+
<span slot="separator">Custom separator</span>
970+
</igc-date-range-picker>`
971+
);
972+
await elementUpdated(picker);
973+
974+
const slotTests = [
975+
{
976+
slot: 'prefix',
977+
tagName: 'span',
978+
content: '$',
979+
},
980+
{
981+
slot: 'suffix',
982+
tagName: 'span',
983+
content: '~',
984+
},
985+
{
986+
slot: 'title',
987+
tagName: 'p',
988+
content: 'Custom title',
989+
prerequisite: () => {
990+
picker.mode = 'dialog';
991+
},
992+
},
993+
{
994+
slot: 'header-date',
995+
tagName: 'p',
996+
content: 'Custom header date',
997+
prerequisite: () => {
998+
picker.mode = 'dialog';
999+
},
1000+
},
1001+
{
1002+
slot: 'helper-text',
1003+
tagName: 'p',
1004+
content: 'For example, select a range',
1005+
},
1006+
{
1007+
slot: 'calendar-icon',
1008+
tagName: 'span',
1009+
content: '^',
1010+
},
1011+
{
1012+
slot: 'calendar-icon-open',
1013+
tagName: 'span',
1014+
content: 'v',
1015+
prerequisite: async () => await picker.show(),
1016+
},
1017+
{
1018+
slot: 'clear-icon',
1019+
tagName: 'span',
1020+
content: 'X',
1021+
prerequisite: () => {
1022+
picker.value = { start: today.native, end: tomorrow.native };
1023+
},
1024+
},
1025+
{
1026+
slot: 'actions',
1027+
tagName: 'button',
1028+
content: 'Custom action',
1029+
prerequisite: async () => await picker.show(),
1030+
},
1031+
];
1032+
1033+
for (let i = 0; i < slotTests.length; i++) {
1034+
await slotTests[i].prerequisite?.();
1035+
await elementUpdated(picker);
1036+
1037+
const slot = picker.renderRoot.querySelector(
1038+
`slot[name="${slotTests[i].slot}"]`
1039+
) as HTMLSlotElement;
1040+
const elements = slot.assignedElements();
1041+
1042+
expect((elements[0] as HTMLElement).innerText).to.equal(
1043+
slotTests[i].content
1044+
);
1045+
expect(elements[0].tagName.toLowerCase()).to.equal(
1046+
slotTests[i].tagName
1047+
);
1048+
}
1049+
});
8001050

1051+
// TODO
8011052
it('should render area with chips to select predefined date ranges', async () => {});
8021053

8031054
it('should render area for custom actions', async () => {});

0 commit comments

Comments
 (0)