@griddo/ax 1.65.10 → 1.65.13

package/src/components/Fields/AsyncSelect/index.test.tsx

@@ -0,0 +1,306 @@
+import React from "react";
+import axios from "axios";
+import "@testing-library/jest-dom";
+import AsyncSelect from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, cleanup, act } from "@testing-library/react";
+import { ISite } from "@ax/types";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IAsyncSelectProps>();
+
+const defaultSite = mock<ISite>();
+defaultSite.id = 113;
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+describe("AsyncSelect component rendering", () => {
+  test("should render the component AsyncSelect", async () => {
+    defaultProps.name = "texto de prueba";
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+    expect(screen.getByTestId("asyncSelect")).toBeTruthy();
+  });
+});
+
+describe("AsyncSelect component events", () => {
+  test("should call the api and receive data in pages", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "pages";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.selectedContent = { id: 1 };
+    defaultProps.value = [3622, 3621];
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          label: "Home",
+        },
+        {
+          value: 3731,
+          label: "English child",
+        },
+        {
+          value: 3730,
+          label: "English Parent",
+        },
+        {
+          value: 3787,
+          label: "English test",
+        },
+        {
+          value: 3745,
+          label: "New Page",
+        },
+        {
+          value: 3784,
+          label: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("Home");
+  });
+
+  test("should call the api and receive data in pages with no selectedContent", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "pages";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.selectedContent = null;
+    defaultProps.value = 3622;
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          label: "Home",
+        },
+        {
+          value: 3731,
+          label: "English child",
+        },
+        {
+          value: 3730,
+          label: "English Parent",
+        },
+        {
+          value: 3787,
+          label: "English test",
+        },
+        {
+          value: 3745,
+          label: "New Page",
+        },
+        {
+          value: 3784,
+          label: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("Home");
+  });
+
+  test("should call the api and receive data in categories", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "categories";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.value = 3622;
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          label: "Home",
+        },
+        {
+          value: 3731,
+          label: "English child",
+        },
+        {
+          value: 3730,
+          label: "English Parent",
+        },
+        {
+          value: 3787,
+          label: "English test",
+        },
+        {
+          value: 3745,
+          label: "New Page",
+        },
+        {
+          value: 3784,
+          label: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("Home");
+  });
+
+  test("should call the api and not receiving data", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "categories";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+
+    const data = {
+      data: [],
+      status: 500,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).not.toHaveTextContent("Home");
+  });
+
+  test("should call the api with source", async () => {
+    defaultProps.site = defaultSite;
+    defaultProps.entity = "categories";
+    defaultProps.source = "source";
+    defaultProps.options = {
+      excludeDetailPages: true,
+    };
+    defaultProps.lang = "en_GB";
+    defaultProps.value = 3787;
+
+    const data = {
+      data: [
+        {
+          value: 3622,
+          title: "Home",
+        },
+        {
+          value: 3731,
+          title: "English child",
+        },
+        {
+          value: 3730,
+          title: "English Parent",
+        },
+        {
+          value: 3787,
+          title: "English test",
+        },
+        {
+          value: 3745,
+          title: "New Page",
+        },
+        {
+          value: 3784,
+          title: "Prueba",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <AsyncSelect {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    expect(screen.getByTestId("asyncSelect")).toHaveTextContent("English test");
+  });
+});
+
+interface IAsyncSelectProps {
+  name: string;
+  value: any;
+  entity?: string;
+  entityId?: string | number;
+  error?: boolean;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  site: ISite;
+  lang: string;
+  selectedContent: any;
+  mandatory?: boolean;
+  placeholder?: string;
+  filter?: any[];
+  options?: any;
+  source?: string;
+}

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

@@ -33,7 +33,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 
   const isPage = entity === "pages";
   const isCategories = entity === "categories";
-
   useEffect(() => {
     const getItems = async () => {
       let data = [];
@@ -123,21 +122,23 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
   const className = error ? "react-select-error" : "";
 
   return (
-    <S.StyledSelect
-      name={name}
-      value={getObjectValue(value, state.items) || ""}
-      cacheOptions
-      loadOptions={loadOptions}
-      defaultOptions={state.items}
-      onInputChange={handleInputChange}
-      onChange={handleChange}
-      classNamePrefix="react-select"
-      error={error}
-      isDisabled={disabled}
-      className={className}
-      mandatory={mandatory}
-      hasEmptyOption={state.hasEmptyOption}
-    />
+    <div data-testid="asyncSelect">
+      <S.StyledSelect
+        name={name}
+        value={getObjectValue(value, state.items) || ""}
+        cacheOptions
+        loadOptions={loadOptions}
+        defaultOptions={state.items}
+        onInputChange={handleInputChange}
+        onChange={handleChange}
+        classNamePrefix="react-select"
+        error={error}
+        isDisabled={disabled}
+        className={className}
+        mandatory={mandatory}
+        hasEmptyOption={state.hasEmptyOption}
+      />
+    </div>
   );
 };
 
@@ -159,7 +160,7 @@ interface IAsyncSelectProps {
   error?: boolean;
   disabled?: boolean;
   onChange: (value: string) => void;
-  site: ISite;
+  site: ISite | null;
   lang: string;
   selectedContent: any;
   mandatory?: boolean;

package/src/components/Fields/HeadingField/index.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import HeadingField from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, cleanup } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  value: {
+    content: "",
+    tag: "",
+  },
+  title: "",
+  onChange: jest.fn(),
+  options: [
+    {
+      value: "",
+      label: "",
+    },
+  ],
+  showAdvanced: false,
+};
+
+describe("HeadingField component rendering", () => {
+  it("should render the component with only TextField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HeadingField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+
+    expect(textFieldContainer).toBeTruthy();
+  });
+  it("should render the component complete", () => {
+    const props = {
+      value: {
+        content: "value1",
+        tag: "tagValue",
+      },
+      title: "Title",
+      onChange: jest.fn(),
+      options: [
+        {
+          value: "value1",
+          label: "Value 1",
+        },
+      ],
+      showAdvanced: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HeadingField {...props} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const textFieldAdvancedWrapper = screen.getByTestId("textFieldAdvancedWrapper");
+    const contentWrapper = screen.getByTestId("contentWrapper");
+    const selectComponent = screen.getByTestId("selectComponent");
+
+    expect(textFieldContainer).toBeTruthy();
+    expect(textFieldAdvancedWrapper).toBeTruthy();
+    expect(contentWrapper).toBeTruthy();
+    expect(selectComponent).toBeTruthy();
+  });
+});

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

@@ -16,7 +16,7 @@ const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
     <>
       <TextField {...props} value={contentValue} onChange={handleChange} />
       {showAdvanced && (
-        <S.AdvancedWrapper>
+        <S.AdvancedWrapper data-testid="textFieldAdvancedWrapper">
           <FieldsBehavior fieldType="Select" options={options} value={value.tag} onChange={handleSelectChange} />
         </S.AdvancedWrapper>
       )}

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

@@ -3,15 +3,28 @@ import React, { useState } from "react";
 import * as S from "./style";
 
 const Select = (props: ISelectProps): JSX.Element => {
-  const { name, value, options, error, defaultValue, placeholder, isMulti, disabled, type, mandatory, onChange, alignRight } = props;
+  const {
+    name,
+    value,
+    options,
+    error,
+    defaultValue,
+    placeholder,
+    isMulti,
+    disabled,
+    type,
+    mandatory,
+    onChange,
+    alignRight,
+  } = props;
   const className = error ? `react-select-error ${type}` : type;
   const emptyOption = { value: null, label: placeholder || "Empty" };
-  
+
   const isMandatory = !mandatory && type !== "inline";
   const [hasEmptyOption, setHasEmptyOption] = useState(isMandatory);
-  
-  const optionValues: any = hasEmptyOption ? [emptyOption , ...options] : options;
-  
+
+  const optionValues: any = hasEmptyOption ? [emptyOption, ...options] : options;
+
   const handleChange = (selectedValue: IOptionProps) => {
     onChange(selectedValue.value);
   };
@@ -20,7 +33,7 @@ const Select = (props: ISelectProps): JSX.Element => {
     const inputValue = newValue.replace(/\W/g, "");
     setHasEmptyOption(isMandatory && inputValue.length === 0);
     return inputValue;
-  }
+  };
 
   // tslint:disable-next-line: no-shadowed-variable
   const getObjectValue = (value: string, options: IOptionProps[]) => {
@@ -29,28 +42,30 @@ const Select = (props: ISelectProps): JSX.Element => {
     } else {
       return options.find((option) => option.value === value);
     }
-  }
+  };
 
   const searchable = type === "inline" ? false : true;
 
   return (
-    <S.StyledSelect
-      name={name}
-      value={getObjectValue(value, optionValues)}
-      options={optionValues}
-      isMulti={isMulti}
-      isDisabled={disabled}
-      placeholder={placeholder}
-      defaultValue={defaultValue}
-      className={className}
-      classNamePrefix="react-select"
-      error={error}
-      onChange={handleChange}
-      isSearchable={searchable}
-      hasEmptyOption={hasEmptyOption}
-      onInputChange={handleInputChange}
-      alignRight={alignRight}
-    />
+    <div data-testid="selectComponent">
+      <S.StyledSelect
+        name={name}
+        value={getObjectValue(value, optionValues)}
+        options={optionValues}
+        isMulti={isMulti}
+        isDisabled={disabled}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        className={className}
+        classNamePrefix="react-select"
+        error={error}
+        onChange={handleChange}
+        isSearchable={searchable}
+        hasEmptyOption={hasEmptyOption}
+        onInputChange={handleInputChange}
+        alignRight={alignRight}
+      />
+    </div>
   );
 };
 

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

@@ -6,7 +6,7 @@ import { isReqOk } from "@ax/helpers";
 import { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
 import { pages as pagesApi } from "@ax/api";
 import PageFinder from "./PageFinder";
-import { findAnchorsFromPage } from "./utils";
+import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./utils";
 
 import * as S from "./style";
 
@@ -14,8 +14,11 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   const { value, onChange, showAdvanced, handlePanel, inFloatingPanel, disabled, handleValidation, validators } = props;
   const { isOpen, toggleModal } = useModal();
   const [anchorOptions, setAnchorOptions] = useState<ISelectOption[]>([]);
+  const [tabOptions, setTabOptions] = useState<ISelectOption[]>([]);
   const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [isTabsVisible, setTabsVisible] = useState<boolean>(false);
   const [internalPageName, setInternalPageName] = useState(null);
+  const [pageData, setPageData] = useState<IPage | null>(null);
 
   const pageID = value && value.linkTo ? value.linkTo : null;
 
@@ -24,17 +27,23 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       const response = await pagesApi.getPageInfo(id);
       if (isReqOk(response.status)) {
         const { data } = response;
+        setPageData(data);
         setInternalPageName(data.title);
 
         onChange({
           ...value,
           ...(!data.follow && { noFollow: true }),
-          ...(!value?.title && { title: data.title })
+          ...(!value?.title && { title: data.title }),
         });
 
-        const anchors: ISelectOption[] = findAnchorsFromPage(data);
+        const tabs: ISelectOption[] = findTabsFromPage(data);
+        setTabOptions(tabs);
+        if (tabs.length > 0) setTabsVisible(true);
+
+        const anchors: ISelectOption[] =
+          tabs.length && value?.subSlug ? findAnchorsFromTab(data, value.subSlug) : findAnchorsFromPage(data);
         setAnchorOptions(anchors);
-        if (anchors.length > 0) setIsVisible(true);
+        if (anchors.length > 0 && (!tabs.length || (tabs.length && value?.subSlug))) setIsVisible(true);
       } else {
         setAnchorOptions([]);
       }
@@ -42,6 +51,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
     let isMounted = true;
     if (isMounted && pageID) {
+      setTabsVisible(false);
       setIsVisible(false);
       getPageInfo(pageID);
     }
@@ -79,6 +89,17 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
   const handleAnchorChange = (newValue: string) => onChange({ ...value, anchor: newValue });
 
+  const handleTabChange = (newValue: string) => {
+    onChange({ ...value, subSlug: newValue });
+    if (pageData && newValue) {
+      const anchors: ISelectOption[] = findAnchorsFromTab(pageData, newValue);
+      setAnchorOptions(anchors);
+      if (anchors.length > 0) setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
   const validator = { format: "fullURL" };
   const defensiveHref = value ? value.href : "";
 
@@ -132,6 +153,19 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   return (
     <>
       {field}
+      {value && value.linkTo && isTabsVisible && (
+        <S.AnchorWrapper>
+          <FieldsBehavior
+            title="Tab"
+            options={tabOptions}
+            name="tab"
+            fieldType="Select"
+            value={value.subSlug}
+            onChange={handleTabChange}
+            placeholder="Select Tab"
+          />
+        </S.AnchorWrapper>
+      )}
       {value && value.linkTo && isVisible && (
         <S.AnchorWrapper>
           <FieldsBehavior