uikit-react-public 0.11.16 → 0.11.24

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

@@ -1,147 +1,88 @@
-import {
-  describe,
-  test,
-  expect,
-  vi,
-  afterEach,
-  beforeAll,
-  afterAll,
-} from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-} from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeContextProvider } from '../../../theme';
-import Datepicker from '../Datepicker';
+import Datepicker from '..';
+
+const defaultTestId = 'ucl-uikit-datepicker';
 
 const customRender = (ui: React.ReactElement) => {
   return render(ui, {
     wrapper: ({ children }) => (
-      <ThemeContextProvider>
-        {children}
-      </ThemeContextProvider>
+      <ThemeContextProvider>{children}</ThemeContextProvider>
     ),
   });
 };
 
 describe('Datepicker', () => {
-  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 :)
-  });
-
-  afterAll(() => {
-    vi.useRealTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.resetAllMocks();
-  });
+  // Snapshot tests
 
   test('Snapshot: no date provided', () => {
-    const renderResult = customRender(
-      <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-      />
-    );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    const renderResult = customRender(<Datepicker />);
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('Snapshot: date provided', () => {
+  test('Snapshot: with date provided', () => {
     const renderResult = customRender(
-      <Datepicker
-        date={new Date('2025-02-04')}
-        onDateChange={vi.fn()}
-      />
+      <Datepicker value={new Date('2025-03-10')} />
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('Snapshot: with :focus & date provided', () => {
-    const testId = 'abc';
-    const renderResult = customRender(
-      <Datepicker
-        date={new Date('2025-02-04')}
-        onDateChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const dateField = screen.getByTestId(
-      testId + '-date-field'
-    );
-    fireEvent.focus(dateField);
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+  // Unit tests
+
+  test('Can be found via default test ID', () => {
+    customRender(<Datepicker />);
+    const datepicker = screen.getByTestId(defaultTestId);
+    expect(datepicker).toBeInTheDocument();
   });
 
-  test('Renders without crashing', () => {
-    const testId = 'abc';
-    customRender(
-      <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const datepicker = screen.getByTestId(testId);
+  test('Can be found via custom test id', () => {
+    const customTestId = '123';
+    customRender(<Datepicker testId={customTestId} />);
+    const datepicker = screen.getByTestId(customTestId);
     expect(datepicker).toBeInTheDocument();
   });
 
-  test('Calendar Menu appears on :focus', () => {
-    const testId = 'abc';
+  test('Input value reflects the date', () => {
+    customRender(<Datepicker value={new Date('2025-03-10')} />);
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    expect(input).toHaveValue('10/03/2025');
+  });
+
+  test('Calendar appears on input focus', async () => {
+    customRender(<Datepicker />);
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+
+    // Calendar should not be visible initially
+    expect(screen.queryByTestId('ucl-uikit-calendar')).not.toBeInTheDocument();
+
+    fireEvent.focus(input);
+
+    // Calendar should now be visible
+    expect(screen.getByTestId('ucl-uikit-calendar')).toBeInTheDocument();
+  });
+
+  test('value after minDate is set to null automatically', () => {
+    const onValueChange = vi.fn();
     customRender(
       <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-        testId={testId}
+        value={new Date('2025-01-10')} // Before minDate
+        minDate='2025-02-01'
+        onValueChange={onValueChange}
       />
     );
-    let calendarMenu = screen.queryByTestId(
-      testId + '-calendar-menu'
-    );
-    expect(calendarMenu).not.toBeInTheDocument();
-    const dateField = screen.getByTestId(testId);
-    fireEvent.focus(dateField);
-    calendarMenu = screen.getByTestId(
-      testId + '-calendar-menu'
-    );
-    expect(calendarMenu).toBeInTheDocument();
+    expect(onValueChange).toHaveBeenCalledWith(null);
   });
 
-  test('Calendar Menu disappears on :blur', () => {
-    const testId = 'abc';
+  test('value after maxDate is set to null automatically', () => {
+    const onValueChange = vi.fn();
     customRender(
       <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-        testId={testId}
+        value={new Date('2025-03-10')} // After maxDate
+        maxDate='2025-01-31'
+        onValueChange={onValueChange}
       />
     );
-    const dateField = screen.getByTestId(
-      testId + '-date-field'
-    );
-    fireEvent.focus(dateField);
-    let calendarMenu = screen.getByTestId(
-      testId + '-calendar-menu'
-    ) as HTMLElement | null;
-    expect(calendarMenu).toBeInTheDocument();
-    fireEvent.blur(dateField);
-    calendarMenu = screen.queryByTestId(
-      testId + '-calendar-menu'
-    ) as HTMLElement | null;
-    expect(calendarMenu).not.toBeInTheDocument();
+    expect(onValueChange).toHaveBeenCalledWith(null);
   });
-
-  // Additonal tests can be added here
 });