Add snapshot coverage for date-picker styles for when there is an active range selection.

[Elijbet]

Test type

new test

Which Component(s)

date-picker

Unstable Tests

No response

Test error, if applicable

No response

PR skipped, if applicable

Additional Info

Follow up on comment #6216 (comment) ttps://github.com/Esri/calcite-components/pull/6216#discussion_r1082024483 . .

Any JS needs to go into a play function which doesn't work OOTB with custom elements. @benelan will be looking into the play function implementation after v1, so we can add something along these lines:

const selectRangeString = html`
<script>
let weekDays = document.querySelector(".week-days");
weekDays.querySelector("calcite-date-picker-day:first-child").selected = true;
weekDays.querySelector("calcite-date-picker-day:last-child").selected = true;
</script>
`;
export const range_TestOnly = (): string =>
html`<div style="width: 400px">
<calcite-date-picker range></calcite-date-picker>
</div>
${selectRangeString}`;

export const rangeRTL_TestOnly = (): string =>
html`<div style="width: 400px">
<calcite-date-picker dir=“rtl” range></calcite-date-picker>
</div>
${selectRangeString}`;

[jcfranco]

I think this already covered by https://esri.github.io/calcite-design-system/?path=/story/components-controls-datepicker--range-highlighted-test-only. @Elijbet Can you confirm?

[Elijbet]

I think this already covered by https://esri.github.io/calcite-design-system/?path=/story/components-controls-datepicker--range-highlighted-test-only. @Elijbet Can you confirm?

Yep. Looks like it is. We can close this.

[jcfranco]

Thanks for checking. Closing!