uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Calendar/__tests__/Calendar.test.tsx

@@ -0,0 +1,71 @@
+import { describe, test, expect, vi, beforeAll } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme';
+import Calendar from '../Calendar';
+
+const defaultTestId = 'ucl-uikit-calendar';
+
+const customRender = (ui: React.ReactElement) => {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ThemeContextProvider>{children}</ThemeContextProvider>
+    ),
+  });
+};
+
+describe('Calendar', () => {
+  beforeAll(() => {
+    // Snapshot tests will fail because the Calendar Grid includes styling for "today's date".
+    // Therefore, we need to use Vitest to mock the current date.
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2025-03-10')); // Arbitrary fixed date -- Alex's birthday :)
+  });
+
+  // Snapshot tests
+
+  test('Snapshot: no date provided', () => {
+    const renderResult = customRender(<Calendar />);
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: with date provided', () => {
+    const renderResult = customRender(
+      <Calendar pickedDate={new Date('2025-01-06')} />
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Unit tests
+
+  test('Can be found via default test id', () => {
+    customRender(<Calendar />);
+    const calendar = screen.getByTestId(defaultTestId);
+    expect(calendar).toBeInTheDocument();
+  });
+
+  test('Can be found custom test id', () => {
+    const customTestId = '123';
+    customRender(<Calendar testId={customTestId} />);
+    const calendar = screen.getByTestId(customTestId);
+    expect(calendar).toBeInTheDocument();
+  });
+
+  test('Can pick a date', () => {
+    const dateToPick = new Date('2025-03-22');
+    const onDatePick = vi.fn();
+    customRender(
+      <Calendar
+        pickedDate={new Date('2025-03-01')} // To ensure the calendar is displayed for March 2025
+        onDatePick={onDatePick}
+      />
+    );
+    const dayButton = screen.getByText('22');
+
+    fireEvent.click(dayButton);
+    // OnDatePick = (date: Date | null, event: React.SyntheticEvent) => void
+    const [firstArg, secondArg] = onDatePick.mock.calls[0];
+    expect(firstArg).toEqual(dateToPick);
+    expect(secondArg).toHaveProperty('type', 'click');
+    expect(secondArg).toHaveProperty('target');
+  });
+});