@cccsaurora/howler-ui 2.19.0-dev.931 → 2.19.0-dev.938

package/components/app/App.js

@@ -54,6 +54,7 @@ import dayjs from 'dayjs';
 import 'dayjs/locale/fr-ca';
 import duration from 'dayjs/plugin/duration';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import minMax from 'dayjs/plugin/minMax';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import i18n from '@cccsaurora/howler-ui/i18n';
@@ -85,6 +86,7 @@ dayjs.extend(utc);
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
+dayjs.extend(minMax);
 dayjs.locale(i18n.language === 'en' ? 'en' : 'fr-ca');
 loader.config({ monaco });
 const RoleRoute = ({ roles }) => {

package/components/routes/hits/search/shared/CustomSpan.js

@@ -11,16 +11,16 @@ import { useContextSelector } from 'use-context-selector';
 const CustomSpan = () => {
     const { t } = useTranslation();
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const defaultStartDate = dayjs().subtract(2, 'days');
-    const defaultEndDate = dayjs().subtract(1, 'day');
-    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate ? dayjs(ctx.startDate) : defaultStartDate);
     const setCustomSpan = useContextSelector(ParameterContext, ctx => ctx.setCustomSpan);
-    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : defaultEndDate));
+    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? dayjs(ctx.startDate) : null));
+    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : null));
     useEffect(() => {
-        if (span?.endsWith('custom')) {
-            setCustomSpan(startDate.toISOString(), endDate.toISOString());
+        if (span?.endsWith('custom') && (!startDate || !endDate)) {
+            const _startDate = startDate ?? dayjs().subtract(2, 'day');
+            const _endDate = endDate ?? dayjs().subtract(1, 'day');
+            setCustomSpan(dayjs.min(_startDate, _endDate).toISOString(), dayjs.max(_startDate, _endDate).toISOString());
         }
     }, [endDate, setCustomSpan, span, startDate]);
-    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
+    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDateTime: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDateTime: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
 };
 export default memo(CustomSpan);

package/components/routes/hits/search/shared/CustomSpan.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/hits/search/shared/CustomSpan.test.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+vi.mock('use-context-selector', async () => {
+    const actual = await vi.importActual('use-context-selector');
+    return {
+        ...actual,
+        createContext,
+        useContextSelector: (_context, selector) => selector(useContext(_context))
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import { render, screen, waitFor } from '@testing-library/react';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import dayjs from 'dayjs';
+import minMax from 'dayjs/plugin/minMax';
+import {} from 'react';
+dayjs.extend(minMax);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// Import after mocks
+import CustomSpan from './CustomSpan';
+const mockSetCustomSpan = vi.fn();
+const defaultCtx = {
+    span: 'date.range.custom',
+    startDate: undefined,
+    endDate: undefined,
+    setCustomSpan: mockSetCustomSpan
+};
+const makeWrapper = (ctx) => function ({ children }) {
+    return (_jsx(ParameterContext.Provider, { value: { ...defaultCtx, ...ctx }, children: children }));
+};
+describe('CustomSpan', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('useEffect – date initialisation', () => {
+        it('should set both dates to defaults when both are null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            const startDate = dayjs(start);
+            const endDate = dayjs(end);
+            expect(startDate.isBefore(endDate)).toBe(true);
+            expect(dayjs().diff(startDate, 'hour')).toBeGreaterThanOrEqual(47);
+            expect(dayjs().diff(startDate, 'hour')).toBeLessThanOrEqual(49);
+            expect(dayjs().diff(endDate, 'hour')).toBeGreaterThanOrEqual(23);
+            expect(dayjs().diff(endDate, 'hour')).toBeLessThanOrEqual(25);
+        });
+        it('should set default start date when only endDate is provided', async () => {
+            // Use a recent end date that's after the default start (now - 2 days)
+            const existingEnd = dayjs().subtract(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: existingEnd })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(end).toBe(existingEnd);
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+        it('should set default end date when only startDate is provided', async () => {
+            // Use a recent start date that's before the default end (now - 1 day)
+            const existingStart = dayjs().subtract(3, 'day').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: existingStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(start).toBe(existingStart);
+            expect(dayjs(end).isAfter(dayjs(start))).toBe(true);
+        });
+        it('should NOT call setCustomSpan when both dates are already set', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is not custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month', startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is undefined', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined, startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should ensure startDate is before endDate even if existing startDate is after default endDate', async () => {
+            const futureStart = dayjs().add(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: futureStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+    });
+    describe('rendering', () => {
+        it('should render nothing when span is not custom', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month' })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render nothing when span is undefined', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render two date pickers when span is custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+        it('should render pickers for any span ending with "custom"', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'my.prefix.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+    });
+    describe('onChange handlers', () => {
+        it('should not call setCustomSpan when both dates are present on render', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            const startPicker = screen.getByLabelText('date.select.start');
+            expect(startPicker).toBeInTheDocument();
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should render start picker with fallback value when startDate is null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: undefined,
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            // When startDate is null, the picker's value falls back to dayjs().subtract(1, 'days')
+            const startInput = screen.getByLabelText('date.select.start');
+            expect(startInput).toBeInTheDocument();
+            // The input should have a value (the fallback), not be empty
+            expect(startInput.value).not.toBe('');
+        });
+    });
+});

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-dev.931",
+  "version": "2.19.0-dev.938",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",