@griddo/ax 1.75.34 → 1.75.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.34",
+  "version": "1.75.36",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cadffc9497096901e309b5b897f168759e09df92"
+  "gitHead": "2d221923450bac0e467a2f6b3c30db8b29a9f5f0"
 }

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import CategoryCell, { ICategoryCellProps } from "@ax/components/CategoryCell";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ICategoryCellProps>();
+const addCategoryColorsMock = defaultProps.addCategoryColors as jest.MockedFunction<(cats: string[]) => void>;
+
+describe("CategoryCell component rendering", () => {
+  it("should render the component with no elements", () => {
+    defaultProps.categoryColors = {};
+    defaultProps.categories = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CategoryCell {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("elements-wrapper")).not.toBeTruthy();
+  });
+
+  it("should render the component with one element and no remaining element", () => {
+    defaultProps.categoryColors = {
+      Hogwarts: "#FFE695",
+    };
+    defaultProps.categories = ["Hogwarts"];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CategoryCell {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(addCategoryColorsMock).toBeCalled();
+    expect(screen.getByTestId("elements-wrapper")).toBeTruthy();
+    expect(screen.queryByTestId("remaining-element")).not.toBeTruthy();
+  });
+
+  it("should render the component with two remaining elements", () => {
+    defaultProps.categoryColors = {
+      Hogwarts: "#FFE695",
+      Test: "#FFE695",
+    };
+    defaultProps.categories = ["Hogwarts", "Test"];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CategoryCell {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(addCategoryColorsMock).toBeCalled();
+    expect(screen.getByTestId("elements-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("remaining-element")).toBeTruthy();
+    expect(screen.getAllByTestId("div-element")).toHaveLength(2);
+  });
+});

package/src/components/CategoryCell/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import { ElementsTooltip } from "@ax/components";
-import * as S from "./style"
+import * as S from "./style";
 
-const CategoryCell = (props: IProps): JSX.Element => {
+const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
   const { categories, categoryColors, addCategoryColors } = props;
 
   useEffect(() => {
@@ -17,7 +17,7 @@ const CategoryCell = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface ICategoryCellProps {
   categories: any;
   categoryColors: any;
   addCategoryColors(cats: string[]): void;