Skip to content

DatePicker.test throws error after deleting a defaultValue in DT/ST when current timeZone is ST/DT #7399

Closed
@majornista

Description

@majornista

Provide a general summary of the issue here

The following test fails when the defaultValue timeZone's daylight savings/standard time does not match the current timeZone's standard/daylight savings time.

it('should keep timeZone from defaultValue when date and time are cleared', async function () {
let {getAllByRole} = render(
<DatePicker
label="Date"
defaultValue={parseZonedDateTime(
'2024-09-21T00:00:00[America/Los_Angeles]'
)} />
);
let combobox = getAllByRole('group')[0];
expectPlaceholder(combobox, '9/21/2024, 12:00 AM PDT');
await user.tab();
await user.keyboard('{Backspace}');
await user.tab();
let i;
for (i = 0; i < 2; i++) {
await user.keyboard('{Backspace}');
}
await user.tab();
for (i = 0; i < 4; i++) {
await user.keyboard('{Backspace}');
}
await user.tab();
for (i = 0; i < 2; i++) {
await user.keyboard('{Backspace}');
}
await user.tab();
for (i = 0; i < 2; i++) {
await user.keyboard('{Backspace}');
}
await user.tab();
await user.keyboard('{Backspace}');
expectPlaceholder(combobox, 'mm/dd/yyyy, ––:–– AM PDT');
});

🤔 Expected Behavior?

If the defaultValue is on daylight savings time and the user clears the value while in a time zone on standard time, the DatePicker's time zone will change to standard time. I think this is the correct behavior, however, the test is written to always expect "PDT" Pacific Daylight Savings Time, which means it will fail when we're on standard time.

😯 Current Behavior

The test is written to always expect "PDT" Pacific Daylight Savings Time, which means it will fail when we're on standard time.

expectPlaceholder(combobox, 'mm/dd/yyyy, ––:–– AM PDT');

💁 Possible Solution

Use the timeZoneName for the current date time.

      let timeZoneName =
        new DateFormatter('en-US',
          {
            timeZone: 'America/Los_Angeles',
            timeZoneName: 'short'
          })
          .formatToParts(new Date())
          .find(p => p.type === 'timeZoneName')
          .value;

      expectPlaceholder(combobox, `mm/dd/yyyy, ––:–– AM ${timeZoneName}`);

🔦 Context

No response

🖥️ Steps to Reproduce

Run yarn test packages/@react-spectrum/datepicker/test/DatePicker.test.js from the first Sunday in November to the second Sunday in March.

Version

@react-spectrum/datepicker@3.10.3

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

Adobe/Accessibility

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions