@zohodesk/components 1.6.31 → 1.6.34

package/es/DateTime/__tests__/DateWidget.spec.js

@@ -1,11 +1,43 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import DateWidget from "../DateWidget";
 describe('DateWidget', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup());
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DateWidget, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateWidget, {
+      value: "2024-01-15T10:00:00.000"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateWidget, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateWidget, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // a custom trigger element replaces the built-in TextBoxIcon when children are supplied
+
+  test('Render with children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateWidget, null, /*#__PURE__*/React.createElement("span", null, "Custom Trigger")));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/DateTime/__tests__/DaysRow.spec.js

@@ -1,12 +1,28 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import DaysRow from "../DaysRow";
+const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const dayNamesShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 describe('DaysRow', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup()); // dayNames/dayNamesShort/holidays are read unconditionally in render, so every case supplies all three
+
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DaysRow, {
-      dayNames: []
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      holidays: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with holidays', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DaysRow, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      holidays: [0, 6]
     }));
     expect(asFragment()).toMatchSnapshot();
   });

package/es/DateTime/__tests__/Time.spec.js

@@ -1,11 +1,58 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import Time from "../Time";
+const hourSuggestions = ['01', '02', '03'];
+const minSuggestions = ['00', '01', '02'];
+const ampmSuggestions = ['AM', 'PM'];
 describe('Time', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup()); // the Select children call options.forEach unconditionally, so every case supplies the suggestion arrays
+
+  test('Render with default props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Time, null));
+    } = render( /*#__PURE__*/React.createElement(Time, {
+      timeText: "Time",
+      hourSuggestions: hourSuggestions,
+      minSuggestions: minSuggestions,
+      ampmSuggestions: ampmSuggestions,
+      hours: "01",
+      mins: "00",
+      amPm: "AM"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the AmPm select renders only when is24Hour is falsy; is24Hour=true is the negative case
+
+  test('Render with is24Hour=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Time, {
+      timeText: "Time",
+      hourSuggestions: hourSuggestions,
+      minSuggestions: minSuggestions,
+      ampmSuggestions: ampmSuggestions,
+      hours: "01",
+      mins: "00",
+      is24Hour: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps overriding the hour Select dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Time, {
+      timeText: "Time",
+      hourSuggestions: hourSuggestions,
+      minSuggestions: minSuggestions,
+      ampmSuggestions: ampmSuggestions,
+      hours: "01",
+      mins: "00",
+      amPm: "AM",
+      customProps: {
+        HourSelectProps: {
+          dataId: 'customHourField'
+        }
+      }
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/DateTime/__tests__/YearView.spec.js

@@ -1,10 +1,67 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import YearView from "../YearView";
+import { cn } from "@dot-system/css-utility";
+const monthNamesShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // the real Virtualizer measures DOM size (0 in jsdom) and the year range spans 1850-9999;
+// mocked to render only the first few rows so the output stays small and deterministic
+
+jest.mock('@zohodesk/virtualizer', () => {
+  const React = require('react');
+
+  return {
+    Virtualizer: function MockVirtualizer({
+      elementRenderer,
+      elementsCount,
+      className,
+      dataId
+    }) {
+      const count = Math.min(elementsCount, 3);
+      const items = [];
+
+      for (let index = 0; index < count; index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index,
+          style: {},
+          ref: () => {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn(className),
+        "data-id": dataId
+      }, items);
+    }
+  };
+});
 describe('YearView', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup()); // Year's isActive is derived from viewedYear === year, not a direct prop; viewedYear unset parses to 0, so isActive=false here
+
+  test('Render with default props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(YearView, null)); // expect(asFragment()).toMatchSnapshot();
+    } = render( /*#__PURE__*/React.createElement(YearView, null));
+    expect(asFragment()).toMatchSnapshot();
+  }); // 1850 is the first rendered year (range start); matching it sets the Year row's derived isActive=true
+
+  test('Render with viewedYear matching the rendered year', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(YearView, {
+      viewedYear: "1850"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the month grid renders only when isMonthOpen is true for the matching year; monthNamesShort is then required
+
+  test('Render with viewedYear matching and isMonthOpen=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(YearView, {
+      viewedYear: "1850",
+      isMonthOpen: true,
+      monthNamesShort: monthNamesShort
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });