helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: navigate to time action (#20928)

Browse source 
* fix: navigate to time action

* change-date -> DateSelectionModal; use luxon; use handle* for callback fn name

* refactor change-date dialogs

* Review comments

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Min Idzelis 2025-10-16 13:44:09 -04:00 • committed by GitHub
parent d0eae97037
commit 2919ee4c65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 647 additions and 477 deletions
Download patch file Download diff file Expand all files Collapse all files

190
web/src/lib/components/shared-components/change-date.spec.ts
View file

@ -1,190 +0,0 @@
import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { DateTime } from 'luxon';
import ChangeDate from './change-date.svelte';
describe('ChangeDate component', () => {
const initialDate = DateTime.fromISO('2024-01-01');
const initialTimeZone = 'Europe/Berlin';
const currentInterval = {
start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
};
const onCancel = vi.fn();
const onConfirm = vi.fn();
const getRelativeInputToggle = () => screen.getByTestId('edit-by-offset-switch');
const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
const getCancelButton = () => screen.getByText('Cancel');
const getConfirmButton = () => screen.getByText('Confirm');
beforeEach(() => {
vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
vi.stubGlobal('visualViewport', getVisualViewportMock());
});
afterEach(() => {
vi.resetAllMocks();
});
afterAll(async () => {
await waitFor(() => {
// check that bits-ui body scroll-lock class is gone
expect(document.body.style.pointerEvents).not.toBe('none');
});
});
test('should render correct values', () => {
render(ChangeDate, { initialDate, initialTimeZone, onCancel, onConfirm });
expect(getDateInput().value).toBe('2024-01-01T00:00');
expect(getTimeZoneInput().value).toBe('Europe/Berlin (+01:00)');
});
test('calls onConfirm with correct date on confirm', async () => {
render(ChangeDate, {
props: { initialDate, initialTimeZone, onCancel, onConfirm },
});
await fireEvent.click(getConfirmButton());
expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
});
test('calls onCancel on cancel', async () => {
render(ChangeDate, {
props: { initialDate, initialTimeZone, onCancel, onConfirm },
});
await fireEvent.click(getCancelButton());
expect(onCancel).toHaveBeenCalled();
});
describe('when date is in daylight saving time', () => {
const dstDate = DateTime.fromISO('2024-07-01');
test('should render correct timezone with offset', () => {
render(ChangeDate, { initialDate: dstDate, initialTimeZone, onCancel, onConfirm });
expect(getTimeZoneInput().value).toBe('Europe/Berlin (+02:00)');
});
test('calls onConfirm with correct date on confirm', async () => {
render(ChangeDate, {
props: { initialDate: dstDate, initialTimeZone, onCancel, onConfirm },
});
await fireEvent.click(getConfirmButton());
expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
});
});
test('calls onConfirm with correct offset in relative mode', async () => {
render(ChangeDate, {
props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
});
await fireEvent.click(getRelativeInputToggle());
const dayInput = screen.getByPlaceholderText('days');
const hoursInput = screen.getByPlaceholderText('hours');
const minutesInput = screen.getByPlaceholderText('minutes');
const days = 5;
const hours = 4;
const minutes = 3;
await fireEvent.input(dayInput, { target: { value: days } });
await fireEvent.input(hoursInput, { target: { value: hours } });
await fireEvent.input(minutesInput, { target: { value: minutes } });
await fireEvent.click(getConfirmButton());
expect(onConfirm).toHaveBeenCalledWith({
mode: 'relative',
duration: days * 60 * 24 + hours * 60 + minutes,
timeZone: undefined,
});
});
test('calls onConfirm with correct timeZone in relative mode', async () => {
const user = userEvent.setup();
render(ChangeDate, {
props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
});
await user.click(getRelativeInputToggle());
await user.type(getTimeZoneInput(), initialTimeZone);
await user.keyboard('{ArrowDown}');
await user.keyboard('{Enter}');
await user.click(getConfirmButton());
expect(onConfirm).toHaveBeenCalledWith({
mode: 'relative',
duration: 0,
timeZone: initialTimeZone,
});
});
test('correctly handles date preview', () => {
const testCases = [
{
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+01:00', { setZone: true }),
duration: 0,
timezone: undefined,
expectedResult: 'Jan 1, 2024, 12:00 AM GMT+01:00',
},
{
timestamp: DateTime.fromISO('2024-01-01T04:00:00.000+05:00', { setZone: true }),
duration: 0,
timezone: undefined,
expectedResult: 'Jan 1, 2024, 4:00 AM GMT+05:00',
},
{
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+00:00', { setZone: true }),
duration: 0,
timezone: 'Europe/Berlin',
expectedResult: 'Jan 1, 2024, 1:00 AM GMT+01:00',
},
{
timestamp: DateTime.fromISO('2024-07-01T00:00:00.000+00:00', { setZone: true }),
duration: 0,
timezone: 'Europe/Berlin',
expectedResult: 'Jul 1, 2024, 2:00 AM GMT+02:00',
},
{
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+01:00', { setZone: true }),
duration: 1440,
timezone: undefined,
expectedResult: 'Jan 2, 2024, 12:00 AM GMT+01:00',
},
{
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+01:00', { setZone: true }),
duration: -1440,
timezone: undefined,
expectedResult: 'Dec 31, 2023, 12:00 AM GMT+01:00',
},
{
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000-01:00', { setZone: true }),
duration: -1440,
timezone: 'America/Anchorage',
expectedResult: 'Dec 30, 2023, 4:00 PM GMT-09:00',
},
];
const component = render(ChangeDate, {
props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
});
for (const testCase of testCases) {
expect(
component.component.calcNewDate(testCase.timestamp, testCase.duration, testCase.timezone),
JSON.stringify(testCase),
).toBe(testCase.expectedResult);
}
});
});