From 4a7a69db8dc27b7c108bb3ce8ac3cdc1476f1a40 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Tue, 7 Mar 2023 12:59:20 -0600 Subject: [PATCH 1/4] Updated KDateRange to use vue-intl and added testing --- jest.conf/setup.js | 2 + lib/KDateRange/KDateCalendar.vue | 8 +-- lib/KDateRange/__tests__/KDateRange.spec.js | 63 +++++++++++++++++++-- package.json | 5 +- 4 files changed, 66 insertions(+), 12 deletions(-) diff --git a/jest.conf/setup.js b/jest.conf/setup.js index fa952be35..8c5230d12 100644 --- a/jest.conf/setup.js +++ b/jest.conf/setup.js @@ -7,6 +7,7 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import KThemePlugin from '../lib/KThemePlugin'; import KContentPlugin from '../lib/content/KContentPlugin'; +import VueIntl from 'vue-intl'; global.beforeEach(() => { return new Promise(resolve => { @@ -28,6 +29,7 @@ global.afterEach(() => { Vue.use(VueRouter); Vue.use(KThemePlugin); Vue.use(KContentPlugin); +Vue.use(VueIntl); Vue.config.silent = true; Vue.config.devtools = false; diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue index 223aa7059..a412d2e2f 100644 --- a/lib/KDateRange/KDateCalendar.vue +++ b/lib/KDateRange/KDateCalendar.vue @@ -21,7 +21,7 @@ @click="goNextMonth" />
-
+
{{ monthString(activeMonth) + ' ' + activeYearStart }}
-
+
{{ monthString(nextActiveMonth) + ' ' + activeYearEnd }}
    @@ -389,7 +389,7 @@ monthString(monthIndex) { const date = new Date(); date.setMonth(monthIndex); - return date.toLocaleString(this.dateLocale, { month: 'long' }); + return this.$formatDate(date, { month: 'long' }); }, }, }; diff --git a/lib/KDateRange/__tests__/KDateRange.spec.js b/lib/KDateRange/__tests__/KDateRange.spec.js index ebe8086ed..f627cc959 100644 --- a/lib/KDateRange/__tests__/KDateRange.spec.js +++ b/lib/KDateRange/__tests__/KDateRange.spec.js @@ -1,5 +1,7 @@ +import Vue from 'vue'; import { mount } from '@vue/test-utils'; import KDateRange from '../index'; +import KDateCalendar from '../KDateCalendar'; import validationConstants from '../validationConstants'; const DEFAULT_PROPS = { @@ -16,13 +18,13 @@ const DEFAULT_PROPS = { [validationConstants.DATE_BEFORE_FIRST_ALLOWED]: 'Date must be after 01/01/2022', }; -function makeWrapper(kDateRangeProps = {}) { +function makeKDateRangeWrapper(kDateRangeProps = {}) { return mount(KDateRange, { propsData: { ...DEFAULT_PROPS, ...kDateRangeProps }, }); } -function getElements(wrapper) { +function getKDateRangeElements(wrapper) { return { startDate: () => wrapper.find('[data-test="startDate"]'), endDate: () => wrapper.find('[data-test="endDate"]'), @@ -33,7 +35,7 @@ function getElements(wrapper) { describe('KDateRange component', () => { let wrapper; beforeAll(() => { - wrapper = makeWrapper(); + wrapper = makeKDateRangeWrapper(); }); it(`smoke test`, () => { @@ -72,16 +74,65 @@ describe('KDateRange component', () => { const start = new Date(2022, 8, 1); const end = new Date(2022, 11, 1); await wrapper.vm.setSelectedDatesFromCalendar({ start: start, end: end }); - const startDate = getElements(wrapper).startDate(); - const endDate = getElements(wrapper).endDate(); + const startDate = getKDateRangeElements(wrapper).startDate(); + const endDate = getKDateRangeElements(wrapper).endDate(); expect(startDate.props().value).toEqual(wrapper.vm.getDateString(start)); expect(endDate.props().value).toEqual(wrapper.vm.getDateString(end)); }); it('on submission, the submit event should be emitted', async () => { - const kModal = getElements(wrapper).kModal(); + const kModal = getKDateRangeElements(wrapper).kModal(); kModal.vm.$emit('submit'); await wrapper.vm.$nextTick(); expect(wrapper.emitted().submit).toBeTruthy(); }); }); + +const KDATECALENDAR_PROPS = { + firstAllowedDate: new Date(2022, 0, 1), + lastAllowedDate: new Date(), + selectedStartDate: new Date(2022, 8, 1), + selectedEndDate: new Date(), + dateLocale: 'en', + previousMonthText: 'Previous Month', + nextMonthText: 'Next Month', +}; + +function makeKDateCalendarWrapper(kDateCalendarProps = {}) { + return mount(KDateCalendar, { + propsData: { ...KDATECALENDAR_PROPS, ...kDateCalendarProps }, + }); +} + +function getKDateCalendarElements(wrapper) { + return { + previousMonthDisplay: () => wrapper.find('[data-test="previousMonth"]'), + currentMonthDisplay: () => wrapper.find('[data-test="currentMonth"]'), + }; +} + +describe('KDateCalendar component', () => { + let wrapper; + beforeAll(() => { + wrapper = makeKDateCalendarWrapper(); + }); + + + it(`smoke test`, () => { + expect(wrapper.exists()).toBe(true); + }); + + it('the month and year display on the left-side calendar view should contain the previous month', async () => { + const previousMonthDisplay = getKDateCalendarElements(wrapper).previousMonthDisplay(); + const previousMonth = new Date().setDate(0); + 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 () => { + const currentMonthDisplay = getKDateCalendarElements(wrapper).currentMonthDisplay(); + const date = Vue.prototype.$formatDate(new Date(), { month: 'long', year:'numeric' }); + expect(currentMonthDisplay.text()).toBe(date); + }); + +}); \ No newline at end of file diff --git a/package.json b/package.json index feb734ff9..19fa8fb02 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "lodash": "^4.17.15", "popper.js": "^1.14.6", "purecss": "^0.6.2", - "tippy.js": "^4.2.1" + "tippy.js": "^4.2.1", + "vue-intl": "^3.1.0" }, "peerDependencies": {}, "devDependencies": { @@ -65,7 +66,7 @@ "vue-simple-markdown": "^1.1.5", "vue-template-compiler": "2.6.14", "xml-loader": "^1.2.1", - "date-fns":"^1.30.1" + "date-fns": "^1.30.1" }, "resolutions": { "@babel/preset-env": "7.12.17", From bcdf0d045b6735d0d7612af85df9e0e88d78c5ff Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Tue, 7 Mar 2023 13:01:58 -0600 Subject: [PATCH 2/4] Fixed linting --- jest.conf/setup.js | 2 +- lib/KDateRange/__tests__/KDateRange.spec.js | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/jest.conf/setup.js b/jest.conf/setup.js index 8c5230d12..84b38cdd8 100644 --- a/jest.conf/setup.js +++ b/jest.conf/setup.js @@ -5,9 +5,9 @@ import * as AphroditeNoImportant from 'aphrodite/no-important'; import Vue from 'vue'; import VueRouter from 'vue-router'; +import VueIntl from 'vue-intl'; import KThemePlugin from '../lib/KThemePlugin'; import KContentPlugin from '../lib/content/KContentPlugin'; -import VueIntl from 'vue-intl'; global.beforeEach(() => { return new Promise(resolve => { diff --git a/lib/KDateRange/__tests__/KDateRange.spec.js b/lib/KDateRange/__tests__/KDateRange.spec.js index f627cc959..730ea92e8 100644 --- a/lib/KDateRange/__tests__/KDateRange.spec.js +++ b/lib/KDateRange/__tests__/KDateRange.spec.js @@ -116,7 +116,6 @@ describe('KDateCalendar component', () => { beforeAll(() => { wrapper = makeKDateCalendarWrapper(); }); - it(`smoke test`, () => { expect(wrapper.exists()).toBe(true); @@ -125,14 +124,13 @@ describe('KDateCalendar component', () => { it('the month and year display on the left-side calendar view should contain the previous month', async () => { const previousMonthDisplay = getKDateCalendarElements(wrapper).previousMonthDisplay(); const previousMonth = new Date().setDate(0); - const date = Vue.prototype.$formatDate(previousMonth, { month: 'long', year:'numeric' }); + 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 () => { const currentMonthDisplay = getKDateCalendarElements(wrapper).currentMonthDisplay(); - const date = Vue.prototype.$formatDate(new Date(), { month: 'long', year:'numeric' }); + const date = Vue.prototype.$formatDate(new Date(), { month: 'long', year: 'numeric' }); expect(currentMonthDisplay.text()).toBe(date); }); - -}); \ No newline at end of file +}); From e52983c09e8913c5c2d2e1d909ceb022dd35a5a2 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Tue, 7 Mar 2023 14:12:42 -0600 Subject: [PATCH 3/4] Updated changelog and removed unused props --- CHANGELOG.md | 2 ++ docs/pages/kdaterange.vue | 1 - lib/KDateRange/KDateCalendar.vue | 9 --------- lib/KDateRange/KDateDay.vue | 6 +----- lib/KDateRange/KDateInput.vue | 6 +----- lib/KDateRange/index.vue | 10 ---------- yarn.lock | 10 ++++++++++ 7 files changed, 14 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3a02d712..6682f5780 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le - [#403] - Add `KOptionalText` to KDS - [#420] - Add `KTabs`, `KTabsList`, and `KTabsPanel` - [#420] - Fix randomly missing focus ring +- [#427] - Update `KDateRange` to use `vue-intl` function `$formatDate` for date formatting and translations [#425]: https://github.com/learningequality/kolibri-design-system/pull/425 @@ -33,6 +34,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le [#420]: https://github.com/learningequality/kolibri-design-system/pull/420 [#424]: https://github.com/learningequality/kolibri-design-system/pull/424 [#426]: https://github.com/learningequality/kolibri-design-system/pull/426 +[#427]: https://github.com/learningequality/kolibri-design-system/pull/427 ## Version 1.4.x diff --git a/docs/pages/kdaterange.vue b/docs/pages/kdaterange.vue index 6e06c109e..7933867ac 100644 --- a/docs/pages/kdaterange.vue +++ b/docs/pages/kdaterange.vue @@ -17,7 +17,6 @@ cancelText="Cancel" title="Select a date range" description="(Optional) Description of modal component" - dateLocale="en-US" startDateLegendText="Start Date" endDateLegendText="End Date" previousMonthText="Previous Month" diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue index a412d2e2f..6ce940b91 100644 --- a/lib/KDateRange/KDateCalendar.vue +++ b/lib/KDateRange/KDateCalendar.vue @@ -49,7 +49,6 @@ :isEndOfWeek="dayInWeekIndex === 7" :isStartOfWeek="dayInWeekIndex === 1" :activeMonth="activeMonth" - :dateLocale="dateLocale" />
@@ -83,7 +82,6 @@ :isEndOfWeek="dayInWeekIndex === 7" :isStartOfWeek="dayInWeekIndex === 1" :activeMonth="nextActiveMonth" - :dateLocale="dateLocale" /> @@ -135,13 +133,6 @@ type: [Date, null], default: null, }, - /** - * Locale string for date formatting - */ - dateLocale: { - type: String, - required: true, - }, /** * label for previous month button */ diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue index 6897651af..1886b4804 100644 --- a/lib/KDateRange/KDateDay.vue +++ b/lib/KDateRange/KDateDay.vue @@ -61,10 +61,6 @@ type: Number, default: null, }, - dateLocale: { - type: String, - required: true, - }, }, data() { return {}; @@ -109,7 +105,7 @@ toMonthName(monthNumber) { const date = new Date(); date.setMonth(monthNumber); - return date.toLocaleString(this.dateLocale, { month: 'long' }); + return this.$formatDate(date, { month: 'long' }); }, }, }; diff --git a/lib/KDateRange/KDateInput.vue b/lib/KDateRange/KDateInput.vue index 1fcfe3a8a..986e1ce1b 100644 --- a/lib/KDateRange/KDateInput.vue +++ b/lib/KDateRange/KDateInput.vue @@ -38,10 +38,6 @@ KTextBox, }, props: { - dateLocale: { - type: String, - required: true, - }, inputRef: { type: String, default: null, @@ -76,7 +72,7 @@ return ( this.legendText + ' ' + - this.valueAsDate.toLocaleDateString(this.dateLocale, { + this.$formatDate(this.valueAsDate, { year: 'numeric', weekday: 'long', month: 'long', diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue index 154d50c92..27aba7331 100644 --- a/lib/KDateRange/index.vue +++ b/lib/KDateRange/index.vue @@ -21,7 +21,6 @@
Date: Tue, 7 Mar 2023 14:34:12 -0600 Subject: [PATCH 4/4] Updated tests --- lib/KDateRange/__tests__/KDateRange.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/KDateRange/__tests__/KDateRange.spec.js b/lib/KDateRange/__tests__/KDateRange.spec.js index 730ea92e8..27112e21e 100644 --- a/lib/KDateRange/__tests__/KDateRange.spec.js +++ b/lib/KDateRange/__tests__/KDateRange.spec.js @@ -93,7 +93,6 @@ const KDATECALENDAR_PROPS = { lastAllowedDate: new Date(), selectedStartDate: new Date(2022, 8, 1), selectedEndDate: new Date(), - dateLocale: 'en', previousMonthText: 'Previous Month', nextMonthText: 'Next Month', };