Hugging Face's logo

AbdulElahGwaith
/
react-day-picker

Model card Files
xet
 Community
react-day-picker / examples /__snapshots__ /Range.test.tsx.snap
AbdulElahGwaith's picture
AbdulElahGwaith
Upload folder using huggingface_hub
cf86710 verified
raw
history blame contribute delete
37.6 kB
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`should match the snapshot 1`] = `
<div>
 <div>
 <div
 class="rdp-root"
 data-mode="range"
 id="test"
 >
 <div
 class="rdp-months"
 >
 <nav
 aria-label="Navigation bar"
 class="rdp-nav"
 >
 <button
 aria-label="Go to the Previous Month"
 class="rdp-button_previous"
 type="button"
 >
 <svg
 class="rdp-chevron"
 height="24"
 viewBox="0 0 24 24"
 width="24"
 >
 <polygon
 points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
 />
 </svg>
 </button>
 <button
 aria-label="Go to the Next Month"
 class="rdp-button_next"
 type="button"
 >
 <svg
 class="rdp-chevron"
 height="24"
 viewBox="0 0 24 24"
 width="24"
 >
 <polygon
 points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
 />
 </svg>
 </button>
 </nav>
 <div
 class="rdp-month"
 >
 <div
 class="rdp-month_caption"
 >
 <span
 aria-live="polite"
 class="rdp-caption_label"
 role="status"
 >
 June 2020
 </span>
 </div>
 <table
 aria-label="June 2020"
 aria-multiselectable="true"
 class="rdp-month_grid"
 role="grid"
 >
 <thead
 aria-hidden="true"
 >
 <tr
 class="rdp-weekdays"
 >
 <th
 aria-label="Sunday"
 class="rdp-weekday"
 scope="col"
 >
 Su
 </th>
 <th
 aria-label="Monday"
 class="rdp-weekday"
 scope="col"
 >
 Mo
 </th>
 <th
 aria-label="Tuesday"
 class="rdp-weekday"
 scope="col"
 >
 Tu
 </th>
 <th
 aria-label="Wednesday"
 class="rdp-weekday"
 scope="col"
 >
 We
 </th>
 <th
 aria-label="Thursday"
 class="rdp-weekday"
 scope="col"
 >
 Th
 </th>
 <th
 aria-label="Friday"
 class="rdp-weekday"
 scope="col"
 >
 Fr
 </th>
 <th
 aria-label="Saturday"
 class="rdp-weekday"
 scope="col"
 >
 Sa
 </th>
 </tr>
 </thead>
 <tbody
 class="rdp-weeks"
 >
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-05-31"
 data-hidden="true"
 data-month="2020-05"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day"
 data-day="2020-06-01"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 1st, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 1
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-02"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 2nd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 2
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-03"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 3rd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 3
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-04"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 4th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 4
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-05"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 5th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 5
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-06"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 6th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 6
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-07"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 7th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 7
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-08"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 8th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 8
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-09"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 9th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 9
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-10"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 10th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 10
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-11"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 11th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 11
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-12"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 12th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 12
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-13"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 13th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 13
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-14"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 14th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 14
 </button>
 </td>
 <td
 aria-selected="true"
 class="rdp-day rdp-selected rdp-range_start"
 data-day="2020-06-15"
 data-selected="true"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 15th, 2020, selected"
 class="rdp-day_button"
 tabindex="0"
 type="button"
 >
 15
 </button>
 </td>
 <td
 aria-selected="true"
 class="rdp-day rdp-selected rdp-range_middle"
 data-day="2020-06-16"
 data-selected="true"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 16th, 2020, selected"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 16
 </button>
 </td>
 <td
 aria-selected="true"
 class="rdp-day rdp-selected rdp-range_middle"
 data-day="2020-06-17"
 data-selected="true"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 17th, 2020, selected"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 17
 </button>
 </td>
 <td
 aria-selected="true"
 class="rdp-day rdp-selected rdp-range_middle"
 data-day="2020-06-18"
 data-selected="true"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 18th, 2020, selected"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 18
 </button>
 </td>
 <td
 aria-selected="true"
 class="rdp-day rdp-selected rdp-range_end"
 data-day="2020-06-19"
 data-selected="true"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 19th, 2020, selected"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 19
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-20"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 20th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 20
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-21"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 21st, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 21
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-22"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 22nd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 22
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-23"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 23rd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 23
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-24"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 24th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 24
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-25"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 25th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 25
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-26"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 26th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 26
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-27"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 27th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 27
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-28"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 28th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 28
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-29"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 29th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 29
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-30"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 30th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 30
 </button>
 </td>
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-01"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-02"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-03"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-04"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <div
 aria-live="polite"
 class="rdp-footer"
 role="status"
 >
 June 15th, 2020–June 19th, 2020
 </div>
 </div>
 <button
 type="button"
 >
 Reset
 </button>
 </div>
</div>
`;
exports[`when a day in the range is clicked when the day is clicked again when a day in the range is clicked again should match the snapshot 1`] = `
<div>
 <div>
 <div
 class="rdp-root"
 data-mode="range"
 id="test"
 >
 <div
 class="rdp-months"
 >
 <nav
 aria-label="Navigation bar"
 class="rdp-nav"
 >
 <button
 aria-label="Go to the Previous Month"
 class="rdp-button_previous"
 type="button"
 >
 <svg
 class="rdp-chevron"
 height="24"
 viewBox="0 0 24 24"
 width="24"
 >
 <polygon
 points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
 />
 </svg>
 </button>
 <button
 aria-label="Go to the Next Month"
 class="rdp-button_next"
 type="button"
 >
 <svg
 class="rdp-chevron"
 height="24"
 viewBox="0 0 24 24"
 width="24"
 >
 <polygon
 points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
 />
 </svg>
 </button>
 </nav>
 <div
 class="rdp-month"
 >
 <div
 class="rdp-month_caption"
 >
 <span
 aria-live="polite"
 class="rdp-caption_label"
 role="status"
 >
 June 2020
 </span>
 </div>
 <table
 aria-label="June 2020"
 aria-multiselectable="true"
 class="rdp-month_grid"
 role="grid"
 >
 <thead
 aria-hidden="true"
 >
 <tr
 class="rdp-weekdays"
 >
 <th
 aria-label="Sunday"
 class="rdp-weekday"
 scope="col"
 >
 Su
 </th>
 <th
 aria-label="Monday"
 class="rdp-weekday"
 scope="col"
 >
 Mo
 </th>
 <th
 aria-label="Tuesday"
 class="rdp-weekday"
 scope="col"
 >
 Tu
 </th>
 <th
 aria-label="Wednesday"
 class="rdp-weekday"
 scope="col"
 >
 We
 </th>
 <th
 aria-label="Thursday"
 class="rdp-weekday"
 scope="col"
 >
 Th
 </th>
 <th
 aria-label="Friday"
 class="rdp-weekday"
 scope="col"
 >
 Fr
 </th>
 <th
 aria-label="Saturday"
 class="rdp-weekday"
 scope="col"
 >
 Sa
 </th>
 </tr>
 </thead>
 <tbody
 class="rdp-weeks"
 >
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-05-31"
 data-hidden="true"
 data-month="2020-05"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day"
 data-day="2020-06-01"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 1st, 2020"
 class="rdp-day_button"
 tabindex="0"
 type="button"
 >
 1
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-02"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 2nd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 2
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-03"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 3rd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 3
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-04"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 4th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 4
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-05"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 5th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 5
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-06"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 6th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 6
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-07"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 7th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 7
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-08"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 8th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 8
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-09"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 9th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 9
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-10"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 10th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 10
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-11"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 11th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 11
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-12"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 12th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 12
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-13"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 13th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 13
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-14"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 14th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 14
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-15"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 15th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 15
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-16"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 16th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 16
 </button>
 </td>
 <td
 class="rdp-day rdp-focused"
 data-day="2020-06-17"
 data-focused="true"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 17th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 17
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-18"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 18th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 18
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-19"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 19th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 19
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-20"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 20th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 20
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-21"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 21st, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 21
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-22"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 22nd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 22
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-23"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 23rd, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 23
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-24"
 role="gridcell"
 >
 <button
 aria-label="Wednesday, June 24th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 24
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-25"
 role="gridcell"
 >
 <button
 aria-label="Thursday, June 25th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 25
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-26"
 role="gridcell"
 >
 <button
 aria-label="Friday, June 26th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 26
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-27"
 role="gridcell"
 >
 <button
 aria-label="Saturday, June 27th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 27
 </button>
 </td>
 </tr>
 <tr
 class="rdp-week"
 >
 <td
 class="rdp-day"
 data-day="2020-06-28"
 role="gridcell"
 >
 <button
 aria-label="Sunday, June 28th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 28
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-29"
 role="gridcell"
 >
 <button
 aria-label="Monday, June 29th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 29
 </button>
 </td>
 <td
 class="rdp-day"
 data-day="2020-06-30"
 role="gridcell"
 >
 <button
 aria-label="Tuesday, June 30th, 2020"
 class="rdp-day_button"
 tabindex="-1"
 type="button"
 >
 30
 </button>
 </td>
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-01"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-02"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-03"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 <td
 class="rdp-day rdp-hidden rdp-outside"
 data-day="2020-07-04"
 data-hidden="true"
 data-month="2020-07"
 data-outside="true"
 role="gridcell"
 />
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <div
 aria-live="polite"
 class="rdp-footer"
 role="status"
 >
 Please pick the first day.
 </div>
 </div>
 <button
 type="button"
 >
 Reset
 </button>
 </div>
</div>
`;