Merge pull request #718 from LianaHarris360/fix-kdaterange-tests

Fix KDateRange failing tests on prs opened on last day of the month

CHANGELOG.md

@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#718]
+  - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property.
+  - **Products impact:** none
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/713
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#718]: https://github.com/learningequality/kolibri-design-system/pull/718
+
 - [#687]
   - **Description:** Adds logic that inserts ARIA live assertive and polite regions to an application's document body during KDS initialization and documents this on the new "Installation" page. Relatedly adds `useKLiveRegion` composable with public methods for updating the live regions with assertive and polite messages. 
   - **Products impact:** new API

lib/KDateRange/KDateCalendar.vue

@@ -157,8 +157,9 @@
         },
         numOfDays: 7,
         isFirstChoice: this.selectedStartDate == null ? true : false,
-        activeMonth: new Date().getMonth() - 1 == -1 ? 11 : new Date().getMonth() - 1,
-        activeYearStart: new Date().getFullYear(),
+        activeMonth:
+          this.lastAllowedDate.getMonth() - 1 == -1 ? 11 : this.lastAllowedDate.getMonth() - 1,
+        activeYearStart: this.lastAllowedDate.getFullYear(),
       };
     },
     computed: {

lib/KDateRange/__tests__/KDateRange.spec.js

@@ -90,9 +90,9 @@ describe('KDateRange component', () => {
 
 const KDATECALENDAR_PROPS = {
   firstAllowedDate: new Date(2022, 0, 1),
-  lastAllowedDate: new Date(),
+  lastAllowedDate: new Date(2022, 10, 1),
   selectedStartDate: new Date(2022, 8, 1),
-  selectedEndDate: new Date(),
+  selectedEndDate: new Date(2022, 10, 1),
   previousMonthText: 'Previous Month',
   nextMonthText: 'Next Month',
 };
@@ -120,16 +120,19 @@ describe('KDateCalendar component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  it('the month and year display on the left-side calendar view should contain the previous month', async () => {
+  it('the month and year display on the left-side calendar view should display the previous month of the lastAllowedDate', async () => {
     const previousMonthDisplay = getKDateCalendarElements(wrapper).previousMonthDisplay();
-    const previousMonth = new Date().setDate(0);
+    const lastAllowedDate = wrapper.props().lastAllowedDate;
+    const previousMonth = new Date(lastAllowedDate);
+    previousMonth.setMonth(lastAllowedDate.getMonth() - 1);
     const date = Vue.prototype.$formatDate(previousMonth, { month: 'long', year: 'numeric' });
     expect(previousMonthDisplay.text()).toBe(date);
   });
 
-  it('the month and year display on the right-side calendar view should contain the current month', async () => {
+  it('the month and year display on the right-side calendar view should display the current month of the lastAllowedDate', async () => {
     const currentMonthDisplay = getKDateCalendarElements(wrapper).currentMonthDisplay();
-    const date = Vue.prototype.$formatDate(new Date(), { month: 'long', year: 'numeric' });
+    const lastAllowedDate = wrapper.props().lastAllowedDate;
+    const date = Vue.prototype.$formatDate(lastAllowedDate, { month: 'long', year: 'numeric' });
     expect(currentMonthDisplay.text()).toBe(date);
   });
 });