@griddo/ax 1.68.3 → 1.68.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.68.3",
+  "version": "1.68.4",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -221,5 +221,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "51a9cfb56854b1b9102de4d73d37b2835be55562"
+  "gitHead": "09ed7a46a84915d8dbf80a4221d285374550f081"
 }

package/src/__tests__/components/Fields/DateField/DateField.test.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup } from "@testing-library/react";
+
+import DateField, { IDateFieldProps } from "@ax/components/Fields/DateField";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IDateFieldProps>();
+
+describe("DateField component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.value = "values";
+    defaultProps.mandatory = true;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("dateWrapper")).toBeTruthy();
+  });
+
+  it("should render the component receiving a date as a number", () => {
+    defaultProps.value = 112233;
+    defaultProps.mandatory = false;
+    defaultProps.futureDate = false;
+    defaultProps.pastDate = true;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("dateWrapper")).toBeTruthy();
+  });
+
+  it("should render the component not receiving a proper date", () => {
+    defaultProps.value = undefined;
+    defaultProps.futureDate = true;
+    defaultProps.pastDate = false;
+    defaultProps.mandatory = false;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("dateWrapper")).toBeTruthy();
+  });
+
+  it("should render the component receiving a range date", () => {
+    defaultProps.value = "01/01/2022 - 10/01/2022";
+    defaultProps.mandatory = false;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
+    const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<(value: string) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("dateWrapper")).toBeTruthy();
+    expect(onChangeMock).toBeCalledWith("2022/01/01 - 2022/01/10");
+    expect(handleValidationMock).toBeCalled();
+  });
+});

package/src/__tests__/components/Fields/FieldGroup/FieldGroup.test.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import FieldGroup from "@ax/components/Fields/FieldGroup";
-import { ThemeProvider } from "styled-components";
 import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+import FieldGroup from "@ax/components/Fields/FieldGroup";
 
 afterEach(cleanup);
 

package/src/components/Fields/DateField/index.tsx

@@ -33,9 +33,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
   const currentDate = new Date();
   const defaultValue = mandatory ? dateToString(currentDate, "yyyy/MM/dd") : null;
   const stringDate = value && typeof value === "number" ? dateToString(new Date(value * 1000)) : value;
-
   const dateValue = stringDate && (isValidDate(stringDate) || isValidDateRange(stringDate)) ? stringDate : defaultValue;
-
   const isRange = dateValue && dateValue.split(" - ").length > 1;
   const { isOpen, toggleModal } = useModal();
 
@@ -64,8 +62,8 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
   registerLocale("en", en);
 
   const handleOnChange = (dates: any) => {
-    const start = dates.length ? dates[0] : dates;
-    const end = dates.length ? dates[1] : null;
+    const start = dates[0];
+    const end = dates[1];
 
     const equalRangeDates = areEqualDates(start, end);
 
@@ -78,6 +76,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
 
     setDates(rangeDates);
     onChange(selectedDate);
+
     handleValidation && handleValidation(start);
   };
 
@@ -96,7 +95,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
   );
 
   return (
-    <S.DatePickerWrapper>
+    <S.DatePickerWrapper data-testid="dateWrapper">
       <DatePicker
         locale={"en"}
         selected={start}
@@ -118,7 +117,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
   );
 };
 
-interface IDateFieldProps {
+export interface IDateFieldProps {
   value: string | any;
   selectsRange: boolean;
   onChange: (value: any) => void;

package/src/helpers/dates.tsx

@@ -8,6 +8,7 @@ const stringToDate = (value: string): Date => {
   const regEx = /^[0-9]{4}[\/][0-9]{2}[\/][0-9]{2}$/g;
   const isInversed = regEx.test(value);
   const formatDate = isInversed ? "yyyy/MM/dd" : "dd/MM/yyyy";
+
   return parse(value, formatDate, new Date());
 };
 
@@ -64,9 +65,7 @@ const getHumanLastModifiedDate = (modified: Date): string => {
   const oneDay = 60 * 60 * 24 * 1000;
   const isMoreThan24Hours = now.getTime() - date.getTime() > oneDay;
 
-  return isMoreThan24Hours
-    ? format(date, "d MMM HH:mm")
-    : formatDistanceToNowStrict(date, { addSuffix: true });
+  return isMoreThan24Hours ? format(date, "d MMM HH:mm") : formatDistanceToNowStrict(date, { addSuffix: true });
 };
 
 const getFormattedDateWithTimezone = (date: Date, formatString: string): string => {