Test date editor for displaying inferred asset timezone

e2e/src/web/specs/asset-viewer/detail-panel.e2e-spec.ts

@@ -1,7 +1,9 @@
 import { AssetMediaResponseDto, LoginResponseDto, SharedLinkType } from '@immich/sdk';
 import { expect, test } from '@playwright/test';
+import { readFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
 import type { Socket } from 'socket.io-client';
-import { utils } from 'src/utils';
+import { testAssetDir, utils } from 'src/utils';
 
 test.describe('Detail Panel', () => {
   let admin: LoginResponseDto;
@@ -83,4 +85,42 @@ test.describe('Detail Panel', () => {
     await utils.waitForWebsocketEvent({ event: 'assetUpdate', id: asset.id });
     await expect(textarea).toHaveValue('new description');
   });
+
+  test.describe('Date editor', () => {
+    test('displays inferred asset timezone', async ({ context, page }) => {
+      const test = {
+        filepath: 'metadata/dates/datetimeoriginal-gps.jpg',
+        expected: {
+          dateTime: '2025-12-01T11:30',
+          // Test with a timezone which is NOT the first among timezones with the same offset
+          // This is to check that the editor does not simply fall back to the first available timezone with that offset
+          // America/Denver (-07:00) is not the first among timezones with offset -07:00
+          timeZoneWithOffset: 'America/Denver (-07:00)',
+        },
+      };
+
+      const asset = await utils.createAsset(admin.accessToken, {
+        assetData: {
+          bytes: await readFile(join(testAssetDir, test.filepath)),
+          filename: basename(test.filepath),
+        },
+      });
+
+      await utils.waitForWebsocketEvent({ event: 'assetUpload', id: asset.id });
+
+      // asset viewer -> detail panel -> date editor
+      await utils.setAuthCookies(context, admin.accessToken);
+      await page.goto(`/photos/${asset.id}`);
+      await page.waitForSelector('#immich-asset-viewer');
+
+      await page.getByRole('button', { name: 'Info' }).click();
+      await page.getByTestId('detail-panel-edit-date-button').click();
+      await page.waitForSelector('[role="dialog"]');
+
+      const datetime = page.locator('#datetime');
+      await expect(datetime).toHaveValue(test.expected.dateTime);
+      const timezone = page.getByRole('combobox', { name: 'Timezone' });
+      await expect(timezone).toHaveValue(test.expected.timeZoneWithOffset);
+    });
+  });
 });

web/src/lib/components/asset-viewer/detail-panel-date.svelte

@@ -41,6 +41,7 @@
     onclick={handleChangeDate}
     title={isOwner ? $t('edit_date') : ''}
     class:hover:text-primary={isOwner}
+    data-testid="detail-panel-edit-date-button"
   >
     <div class="flex gap-4">
       <div>