@griddo/ax 1.74.27 → 1.74.29

package/package.json

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

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { mock } from "jest-mock-extended";
+
+import { parseTheme } from "@ax/helpers";
+import Loader, { IStateProps } from "@ax/components/Loader";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IStateProps>();
+
+describe("Loader component rendering", () => {
+  it("should render the component with circle", () => {
+    defaultProps.name = "Circle.svg";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Loader {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const wrapper = screen.getByTestId("circle-svg");
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("should render the component with dots", () => {
+    defaultProps.name = "Dots";
+    defaultProps.size = "60";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Loader {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const wrapper = screen.getByTestId("dots-svg");
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("shouldn't render the component", () => {
+    defaultProps.name = "Dottsi-1.svg";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Loader {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const circleWrapper = screen.queryByTestId("circle-svg");
+    const dotsWrapper = screen.queryByTestId("dots-svg");
+    expect(circleWrapper).not.toBeTruthy();
+    expect(dotsWrapper).not.toBeTruthy();
+  });
+});

package/src/components/Loader/components/Circle.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 function SvgCircle(props) {
   return (
-    <svg viewBox="0 0 100 100" {...props}>
+    <svg data-testid="circle-svg" viewBox="0 0 100 100" {...props}>
       <circle fill="none" stroke="#5057FF" strokeWidth={4} cx={50} cy={50} r={44} />
       <circle fill="#fff" stroke="#5057FF" strokeWidth={3} cx={8} cy={54} r={6}>
         <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 48" to="360 50 52" repeatCount="indefinite" />

package/src/components/Loader/components/Dots.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 function SvgDots(props) {
   return (
-    <svg viewBox="0 0 100 100" {...props}>
+    <svg data-testid="dots-svg" viewBox="0 0 100 100" {...props}>
       <circle fill="#5057FF" cx={6} cy={50} r={6}>
         <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin={0.1} />
       </circle>

package/src/components/Loader/index.tsx

@@ -5,7 +5,15 @@ import Dots from "./components/Dots";
 
 const components: Record<string, () => JSX.Element> = { Circle, Dots };
 
-const Loader = (props: IProps): JSX.Element => {
+const getImage = (name: string) => {
+  try {
+    return components[name];
+  } catch (err) {
+    return null;
+  }
+};
+
+const Loader = (props: IProps): JSX.Element | null => {
   const name = props.name
     .replace(".svg", "")
     .split("-")
@@ -13,20 +21,27 @@ const Loader = (props: IProps): JSX.Element => {
     .join("");
 
   const { size = "70" } = props;
+
   const elementProps = {
     height: size,
     width: size,
     viewBox: "0 0 100 100",
   };
 
-  return React.createElement(components[name], elementProps);
+  const Svg = getImage(name);
+
+  if (Svg) {
+    return React.createElement(Svg, elementProps);
+  }
+  
+  return null;
 };
 
-interface IStateProps {
+export interface IStateProps {
   name: string;
   size?: string;
 }
 
 type IProps = IStateProps;
 
-export default Loader;
+export default Loader;