From c77345637b5b3aaad1af2f47190a8cd9403f139e Mon Sep 17 00:00:00 2001
From: Darrel <39296145+darrelhong@users.noreply.github.com>
Date: Tue, 22 Oct 2024 02:39:47 +0800
Subject: [PATCH] chore(web): add tests for ChangeDate component (#13599)

* chore(web): setup tests for ChangeDate component

* chore(web): add tests for callback funcs with the right value

* chore(web): add tests for daylight saving time

* rename file properly

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>
---
 .../shared-components/change-date.spec.ts     | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 web/src/lib/components/shared-components/change-date.spec.ts

diff --git a/web/src/lib/components/shared-components/change-date.spec.ts b/web/src/lib/components/shared-components/change-date.spec.ts
new file mode 100644
index 0000000000000..112e900c02890
--- /dev/null
+++ b/web/src/lib/components/shared-components/change-date.spec.ts
@@ -0,0 +1,70 @@
+import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+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 onCancel = vi.fn();
+  const onConfirm = vi.fn();
+
+  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());
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  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('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('2024-07-01T00:00:00.000+02:00');
+    });
+  });
+});