fix(calendar-web): improve tests to handle startDateAttribute state and defaultDate propagation

Author: samuelreichert

packages/pluggableWidgets/calendar-web/src/__tests__/Calendar.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { dynamic, ListValueBuilder } from "@mendix/widget-plugin-test-utils";
 
 import MxCalendar from "../Calendar";
@@ -10,37 +10,41 @@ jest.mock("react-big-calendar", () => {
     const originalModule = jest.requireActual("react-big-calendar");
     return {
         ...originalModule,
-        Calendar: ({
-            children,
-            defaultView,
-            culture,
-            resizable,
-            selectable,
-            showAllEvents,
-            min,
-            max,
-            events,
-            step,
-            timeslots,
-            ...domProps
-        }: any) => (
-            <div
-                data-testid="mock-calendar"
-                data-default-view={defaultView}
-                data-culture={culture}
-                data-resizable={resizable}
-                data-selectable={selectable}
-                data-show-all-events={showAllEvents}
-                data-min={min?.toISOString()}
-                data-max={max?.toISOString()}
-                data-events-count={events?.length ?? 0}
-                data-step={step}
-                data-timeslots={timeslots}
-                {...domProps}
-            >
-                {children}
-            </div>
-        ),
+        Calendar: (mockProps: any) => {
+            const {
+                children,
+                defaultView,
+                defaultDate,
+                culture,
+                resizable,
+                selectable,
+                showAllEvents,
+                min,
+                max,
+                events,
+                step,
+                timeslots,
+                ...domProps
+            } = mockProps;
+
+            return (
+                <div
+                    data-testid="mock-calendar"
+                    data-default-view={defaultView}
+                    data-default-date={defaultDate?.toISOString()}
+                    data-culture={culture}
+                    data-resizable={resizable}
+                    data-selectable={selectable}
+                    data-show-all-events={showAllEvents}
+                    data-events-count={events?.length ?? 0}
+                    data-step={step}
+                    data-timeslots={timeslots}
+                    {...domProps}
+                >
+                    {children}
+                </div>
+            );
+        },
         dateFnsLocalizer: () => ({
             format: jest.fn(),
             parse: jest.fn(),
@@ -58,7 +62,7 @@ jest.mock("react-big-calendar", () => {
 });
 
 jest.mock("react-big-calendar/lib/addons/dragAndDrop", () => {
-    return jest.fn((Component: any) => Component);
+    return jest.fn(Component => Component);
 });
 
 const customViewProps: CalendarContainerProps = {
@@ -97,11 +101,6 @@ const customViewProps: CalendarContainerProps = {
     topBarDateFormat: undefined
 };
 
-const standardViewProps: CalendarContainerProps = {
-    ...customViewProps,
-    view: "standard"
-};
-
 beforeAll(() => {
     jest.useFakeTimers();
     jest.setSystemTime(new Date("2025-04-28T12:00:00Z"));
@@ -123,19 +122,78 @@ describe("Calendar", () => {
         expect(container.querySelector(".calendar-class")).toBeTruthy();
     });
 
-    it("does not render custom view button in standard view", () => {
-        const { container } = render(<MxCalendar {...standardViewProps} />);
-        expect(container).toBeTruthy();
-        // Since we're mocking the calendar, we can't test for specific text content
-        // but we can verify the component renders without errors
-    });
-
     it("passes step and timeslots to the calendar", () => {
         const { getByTestId } = render(<MxCalendar {...customViewProps} />);
         const calendar = getByTestId("mock-calendar");
         expect(calendar.getAttribute("data-step")).toBe("60");
         expect(calendar.getAttribute("data-timeslots")).toBe("2");
     });
+
+    it("renders loading bar when startDateAttribute is loading", () => {
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "loading"
+            } as any
+        };
+
+        const { container } = render(<MxCalendar {...props} />);
+
+        expect(container.querySelector(".widget-calendar-loading-bar")).toBeTruthy();
+        expect(container.querySelector("progress.widget-calendar-loading-bar")).toBeTruthy();
+        expect(screen.queryByTestId("mock-calendar")).toBeFalsy();
+    });
+
+    it("renders calendar when startDateAttribute is available", () => {
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "available",
+                value: new Date("2025-05-01T00:00:00.000Z")
+            } as any
+        };
+
+        render(<MxCalendar {...props} />);
+
+        expect(screen.getByTestId("mock-calendar")).toBeTruthy();
+        expect(screen.queryByRole("progressbar")).toBeFalsy();
+    });
+
+    it("renders calendar when startDateAttribute is unavailable", () => {
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "unavailable"
+            } as any
+        };
+
+        render(<MxCalendar {...props} />);
+
+        expect(screen.getByTestId("mock-calendar")).toBeTruthy();
+        expect(screen.queryByRole("progressbar")).toBeFalsy();
+    });
+
+    it("renders calendar when startDateAttribute is undefined", () => {
+        render(<MxCalendar {...customViewProps} startDateAttribute={undefined} />);
+
+        expect(screen.getByTestId("mock-calendar")).toBeTruthy();
+        expect(screen.queryByRole("progressbar")).toBeFalsy();
+    });
+
+    it("passes defaultDate from startDateAttribute value", () => {
+        const defaultDate = new Date("2025-06-10T08:30:00.000Z");
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "available",
+                value: defaultDate
+            } as any
+        };
+
+        render(<MxCalendar {...props} />);
+
+        expect(screen.getByTestId("mock-calendar").getAttribute("data-default-date")).toBe("2025-06-10T08:30:00.000Z");
+    });
 });
 
 describe("CalendarPropsBuilder validation", () => {
@@ -147,7 +205,10 @@ describe("CalendarPropsBuilder validation", () => {
         messages: {}
     } as any;
 
-    const buildWithStepTimeslots = (step: number, timeslots: number) => {
+    const buildWithStepTimeslots = (
+        step: number,
+        timeslots: number
+    ): ReturnType<typeof CalendarPropsBuilder.prototype.build> => {
         const props = { ...customViewProps, step, timeslots };
         const builder = new CalendarPropsBuilder(props);
         return builder.build(mockLocalizer, "en");

packages/pluggableWidgets/calendar-web/src/__tests__/__snapshots__/Calendar.spec.tsx.snap

@@ -10,8 +10,6 @@ exports[`Calendar renders correctly with basic props 1`] = `
     data-culture="en-US"
     data-default-view="day"
     data-events-count="0"
-    data-max="2025-04-28T23:59:59.000Z"
-    data-min="2025-04-28T00:00:00.000Z"
     data-resizable="true"
     data-selectable="true"
     data-show-all-events="true"