fix(utc): resolve UTC date handling bug and migrate tests to Vitest - #100
Open
HaidarZ wants to merge 1 commit into
Open
fix(utc): resolve UTC date handling bug and migrate tests to Vitest#100HaidarZ wants to merge 1 commit into
HaidarZ wants to merge 1 commit into
Conversation
When using the `use-utc` prop, dates and months were being selected as the day/month before the intended selection. This occurred because UTC handling was inconsistent across picker components - the `useUtc` parameter was not being passed through the component tree properly. Problem: - DateUtils functions accepted `useUtc` as an optional parameter with default value `false`, but components weren't consistently passing the prop value, causing UTC dates to be interpreted in local time - The `use-utc` prop was missing from PickerDay component declaration - Disabled date ranges functionality was commented out and non-functional Solution: - Refactored DateUtils to use a factory pattern `makeDateUtils(useUtc)` that returns a utility object with UTC mode baked in, ensuring consistent behavior throughout the component lifecycle - This approach aligns with the original UTC handling pattern from the upstream vuejs-datepicker (https://github.com/charliekassel/vuejs-datepicker) - Updated all picker components (PickerDay, PickerMonth, PickerYear, DateInput, DatePickerComponent) to instantiate DateUtils with the `useUtc` prop value at setup time - Added missing `use-utc` prop binding to PickerDay in parent template - Re-enabled disabled date ranges functionality with corrected logic (using >= and <= for inclusive range checking) Test Infrastructure Migration (Jest -> Vitest 4.0.16): - Added vitest.config.ts with happy-dom environment and path aliases - Updated package.json with Vitest scripts and dependencies - Fixed 3 failing tests: - jest.spyOn -> vi.spyOn in typedDates.spec.js - Removed async/done callback anti-pattern in Datepicker.spec.js - Updated DateUtils.spec.js to use new factory pattern API - All 126 tests now passing Technical changes: - DateUtils: Export `makeDateUtils(useUtc)` factory + default instance - Components: Create dateUtils instance in setup() with props.useUtc - PickerDay: Add `use-utc` prop to component props definition - DatePickerComponent: Pass `:use-utc="useUtc"` to PickerDay - Build outputs regenerated with fixes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes a critical bug where the
use-utcprop was not consistently applied across date picker components, causing date/month selection to be off by one when UTC mode was enabled. Additionally migrates the test infrastructure from Jest to Vitest for better Vue 3 compatibility.Problem
When using
use-utcprop set totrue:useUtcparameter wasn't being properly passed through the component treeSolution
UTC Fix:
DateUtilsto use a factory patternmakeDateUtils(useUtc)that returns a utility object with UTC behavior baked inuseUtcprop value at setup timeuse-utcprop binding to PickerDay component in DatePickerComponentTest Infrastructure:
jest.spyOnwithvi.spyOnfor Vitest compatibilitydonecallback in async testChanges
Core Files
src/components/datepicker/utils/DateUtils.ts- Factory pattern implementationsrc/components/datepicker/DatePickerComponent.vue- Added missing use-utc propsrc/components/datepicker/PickerDay.vue- Use makeDateUtils factory, enabled rangessrc/components/datepicker/PickerMonth.vue- Use makeDateUtils factorysrc/components/datepicker/PickerYear.vue- Use makeDateUtils factorysrc/components/datepicker/DateInput.vue- Use makeDateUtils factoryTest Infrastructure
vitest.config.ts- New Vitest configurationtests/unit/specs/DateUtils.spec.js- Updated for new APItests/unit/specs/DateInput/typedDates.spec.js- Fixed vi.spyOntests/unit/specs/Datepicker/Datepicker.spec.js- Fixed async/donepackage.json- Added Vitest dependencies and scripts.gitignore- Added coverage/ and .eslintcache.eslintignore- Added vitest.config.tstsconfig.json- Added vitest.config.ts to includeBuild Artifacts
build/DatePickerComponent.cssbuild/vuejs3-datepicker.jsbuild/vuejs3-datepicker.umd.cjsTesting
Breaking Changes
None. The changes are backward compatible - components using the default
useUtc: falsebehavior remain unchanged.Related Issues
Fixes the UTC date selection bug reported in the original issue.