@griddo/ax 1.74.33 → 1.74.35

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.74.33",
+  "version": "1.74.35",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b29bd0b407caec5a70f1642c8aa0d7d54861cdb4"
+  "gitHead": "c8d0bc0b49e530a1ee13bf6ad5c473c474e7884c"
 }

package/src/__tests__/components/Image/Image.test.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Image, { IImageProps } from "@ax/components/Image";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IImageProps>();
+
+describe("Image component rendering", () => {
+  it("should render the component with img tag", () => {
+    defaultProps.width = 1;
+    defaultProps.url = "https://res.cloudinary.com/url-example.png";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Image {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const imageWrapper = screen.getByTestId("image-wrapper");
+    expect(imageWrapper).toBeTruthy();
+  });
+
+  it("should render the component griddoImage", () => {
+    defaultProps.width = 1;
+    defaultProps.url = "/url-example.png";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Image {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const imageWrapper = screen.queryByTestId("image-wrapper");
+    expect(imageWrapper).not.toBeTruthy();
+  });
+});

package/src/__tests__/components/Lists/Lists.test.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import { ListItem, ListItemProps } from "@ax/components/Lists";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const onClickMock = jest.fn();
+
+const defaultProps: ListItemProps = {
+  children: false,
+  onClick: onClickMock,
+};
+
+describe("List component rendering", () => {
+  it("should render the component with icon", () => {
+    defaultProps.isSelected = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ListItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const wrapperList = screen.getByTestId("list-item");
+    expect(wrapperList).toBeTruthy();
+
+    const icon = screen.getByTestId("icon-component");
+    expect(icon).toBeTruthy();
+  });
+
+  it("should render the component with no icon", () => {
+    defaultProps.isSelected = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ListItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const wrapperList = screen.getByTestId("list-item");
+    expect(wrapperList).toBeTruthy();
+
+    const icon = screen.queryByTestId("icon-component");
+    expect(icon).not.toBeTruthy();
+  });
+
+  it("should call the onclick", () => {
+    defaultProps.isSelected = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ListItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const wrapperList = screen.getByTestId("list-item");
+    expect(wrapperList).toBeTruthy();
+
+    const icon = screen.queryByTestId("icon-component");
+    expect(icon).not.toBeTruthy();
+
+    fireEvent.click(wrapperList);
+    expect(onClickMock).toBeCalled();
+  });
+});

package/src/components/Image/index.tsx

@@ -9,18 +9,18 @@ const DAM_DEFAULTS = {
   formats: ["webp"],
 };
 
-const Image = (props: IProps): React.ReactElement => {
+const Image = (props: IImageProps): React.ReactElement => {
   const { url } = props;
 
   if (isCloudinary(url)) {
     const cloudinaryUrl = createCloudinaryUrl({ props });
-    return <img src={cloudinaryUrl} alt="Griddo site thumbnail" />;
+    return <img data-testid="image-wrapper" src={cloudinaryUrl} alt="Griddo site thumbnail" />;
   } else {
     return <GriddoImage {...DAM_DEFAULTS} {...props} />;
   }
 };
 
-export interface IProps {
+export interface IImageProps {
   width: number;
   height?: number;
   url: string;

package/src/components/Image/utils.ts

@@ -1,4 +1,4 @@
-import { IProps } from "./index";
+import { IImageProps } from "./index";
 
 // The string to split up the cloudinary url
 const CLOUDINARY_SEPARATOR = "image/upload";
@@ -48,7 +48,7 @@ interface ICloudinaryParams {
 }
 
 interface ICreateCloudinaryUrl {
-  props: IProps;
+  props: IImageProps;
   retina?: boolean;
 }
 

package/src/components/Lists/index.tsx

@@ -11,16 +11,13 @@ const ListItem = (props: ListItemProps): JSX.Element => {
       {children}
       {isSelected && <Icon name="Done" size="16" />}
     </S.StyledListItem>
-  )
-}
+  );
+};
 
-interface ListItemProps {
+export interface ListItemProps {
   isSelected?: boolean;
   children: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLSpanElement>;
 }
 
-export {
-  ListTitle,
-  ListItem
-}
+export { ListTitle, ListItem };