@ludo.ninja/components 1.1.1 → 1.1.3

package/dist/system/Forms/TextArea/index.jsx

@@ -1,127 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  BorderColorLight,
-  ProgressColorMinimum,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
 import { MainText } from '@/styles/typography';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
 import BasicErrorLabel from '../ErrorLabel';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledTextArea = styled.textarea(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ',
-        ';\n  background: ',
-        ';\n  color: ',
-        ';\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ',
-        ';\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ::-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n\n  ',
-        ' {\n    min-height: ',
-        ';\n    border-radius: ',
-        ';\n    border: ',
-        ' solid\n      ',
-        ';\n    padding: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ',
-        ';\n  background: ',
-        ';\n  color: ',
-        ';\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ',
-        ';\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ::-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n\n  ',
-        ' {\n    min-height: ',
-        ';\n    border-radius: ',
-        ';\n    border: ',
-        ' solid\n      ',
-        ';\n    padding: ',
-        ';\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  MainText,
-  function (props) {
-    return props.status ? ProgressColorMinimum : BorderColorLight;
-  },
-  WhiteColor,
-  BlackColor,
-  TextGrayColor,
-  TextGrayColor,
-  TextGrayColor,
-  function (props) {
-    return props.status ? '#F4205F' : '#C1C8DE';
-  },
-  function (props) {
-    return props.status ? '#F4205F' : '#C1C8DE';
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(92),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(1),
-  function (props) {
-    return props.status ? ProgressColorMinimum : BorderColorLight;
-  },
-  adaptiveValueCalc(12)
-);
+var StyledTextArea = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n\n  ", " {\n    min-height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n\n  ", " {\n    min-height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, TextGrayColor, TextGrayColor, TextGrayColor, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(92), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
 // const maxCountLength = 400;
 var BasicTextArea = function (_a) {
-  var data = _a.data,
-    register = _a.register,
-    isNeedBiggerArea = _a.isNeedBiggerArea,
-    error = _a.error;
-  var renderError = function () {
-    if (error.isNeedShowError) {
-      return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
-    }
-  };
-  return (
-    <>
-      <StyledTextArea
-        {...register}
-        rows={isNeedBiggerArea ? 8 : 4}
-        status={error.isNeedShowError}
-        id={data.name}
-        name={data.name}
-        autoComplete={'off'}
-        placeholder={data.placeHolder}
-      />
+    var data = _a.data, register = _a.register, isNeedBiggerArea = _a.isNeedBiggerArea, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<>
+      <StyledTextArea {...register} rows={isNeedBiggerArea ? 8 : 4} status={error.isNeedShowError} id={data.name} name={data.name} autoComplete={'off'} placeholder={data.placeHolder}/>
       {renderError()}
-    </>
-  );
+    </>);
 };
 export default BasicTextArea;
 var templateObject_1;

package/dist/system/Forms/index.js

@@ -2,5 +2,4 @@ import CheckboxInput from './Checkbox';
 import BasicErrorLabel from './ErrorLabel';
 import Input from './Input';
 import BasicTextArea from './TextArea';
-
 export { Input, BasicTextArea, BasicErrorLabel, CheckboxInput };

package/dist/system/Img/ExternalImage/index.jsx

@@ -1,46 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { forwardRef } from 'react';
-
 import styled from 'styled-components';
-import { border, layout, space } from 'styled-system';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledImage = styled.img(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  max-width: 100%;\n  height: ',
-        ';\n  ',
-        '\n  ',
-        '\n  ',
-        '\n',
-      ],
-      [
-        '\n  display: block;\n  max-width: 100%;\n  height: ',
-        ';\n  ',
-        '\n  ',
-        '\n  ',
-        '\n',
-      ]
-    )),
-  function (props) {
-    return props.height ? props.height : 'auto';
-  },
-  space,
-  layout,
-  border
-);
+import { border, layout, space, } from 'styled-system';
+var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 100%;\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  display: block;\n  max-width: 100%;\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return (props.height ? props.height : 'auto'); }, space, layout, border);
 export var ExternalImage = forwardRef(function (props, ref) {
-  return <StyledImage ref={ref} {...props} />;
+    return <StyledImage ref={ref} {...props}/>;
 });
 ExternalImage.displayName = 'ExternalImage';
 var templateObject_1;

package/dist/system/Img/ImageInterceptor/ImageInterceptor.test.jsx

@@ -1,81 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import { fireEvent, render, screen } from '@testing-library/react';
 import styled from 'styled-components';
-
 import { ImageInterceptor } from '../ImageInterceptor';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 jest.mock('react-loading-skeleton', function () {
-  return function TestSkeleton(props) {
-    return (
-      <div
-        data-testid="skeleton"
-        style={{
-          borderRadius: props.borderRadius,
-        }}
-      />
-    );
-  };
+    return function TestSkeleton(props) {
+        return (<div data-testid="skeleton" style={{
+                borderRadius: props.borderRadius,
+            }}/>);
+    };
 });
-var TestImage = styled.img(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      ['\n  width: 100px;\n  height: 100px;\n'],
-      ['\n  width: 100px;\n  height: 100px;\n']
-    ))
-);
+var TestImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100px;\n  height: 100px;\n"], ["\n  width: 100px;\n  height: 100px;\n"])));
 var validSrc = '/tests/test_1.svg';
 describe('ImageInterceptor Component', function () {
-  test('renders the skeleton while the image is loading', function () {
-    render(
-      <ImageInterceptor>
-        <TestImage src={validSrc} />
-      </ImageInterceptor>
-    );
-    expect(screen.getByTestId('skeleton')).toBeInTheDocument();
-  });
-  test('renders the image after it has loaded', function () {
-    render(
-      <ImageInterceptor>
-        <TestImage src={validSrc} />
-      </ImageInterceptor>
-    );
-    var image = screen.getByRole('img');
-    fireEvent.load(image);
-    expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-    expect(image).toHaveAttribute('src', validSrc);
-  });
-  test('renders the fallback image if an error occurs', function () {
-    render(
-      <ImageInterceptor>
-        <TestImage src="invalid-image.jpg" />
-      </ImageInterceptor>
-    );
-    var image = screen.getByRole('img');
-    fireEvent.error(image);
-    expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-    expect(image).toHaveAttribute('src', '/noContent/noContent.svg');
-  });
-  test('applies the correct styles to the skeleton', function () {
-    render(
-      <ImageInterceptor borderRadiusSkeleton={10}>
-        <TestImage src={validSrc} />
-      </ImageInterceptor>
-    );
-    expect(screen.getByTestId('skeleton')).toHaveStyle({
-      borderRadius: '10px',
+    test('renders the skeleton while the image is loading', function () {
+        render(<ImageInterceptor>
+        <TestImage src={validSrc}/>
+      </ImageInterceptor>);
+        expect(screen.getByTestId('skeleton')).toBeInTheDocument();
+    });
+    test('renders the image after it has loaded', function () {
+        render(<ImageInterceptor>
+        <TestImage src={validSrc}/>
+      </ImageInterceptor>);
+        var image = screen.getByRole('img');
+        fireEvent.load(image);
+        expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
+        expect(image).toHaveAttribute('src', validSrc);
+    });
+    test('renders the fallback image if an error occurs', function () {
+        render(<ImageInterceptor>
+        <TestImage src="invalid-image.jpg"/>
+      </ImageInterceptor>);
+        var image = screen.getByRole('img');
+        fireEvent.error(image);
+        expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
+        expect(image).toHaveAttribute('src', '/noContent/noContent.svg');
+    });
+    test('applies the correct styles to the skeleton', function () {
+        render(<ImageInterceptor borderRadiusSkeleton={10}>
+        <TestImage src={validSrc}/>
+      </ImageInterceptor>);
+        expect(screen.getByTestId('skeleton')).toHaveStyle({
+            borderRadius: '10px',
+        });
     });
-  });
 });
 var templateObject_1;

package/dist/system/Img/ImageInterceptor/index.jsx

@@ -1,67 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useState } from 'react';
-
 import Skeleton from 'react-loading-skeleton';
 import styled from 'styled-components';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var SImage = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n',
-      ],
-      [
-        '\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n',
-      ]
-    ))
-);
+var SImage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n"])));
 export var ImageInterceptor = function (_a) {
-  var children = _a.children,
-    _b = _a.fallback,
-    fallback = _b === void 0 ? '/noContent/noContent.svg' : _b,
-    _c = _a.isShowSkeleton,
-    isShowSkeleton = _c === void 0 ? true : _c,
-    borderRadiusSkeleton = _a.borderRadiusSkeleton,
-    className = _a.className;
-  var _d = useState(children.props.src !== fallback),
-    isLoading = _d[0],
-    setIsLoading = _d[1];
-  var _e = useState(false),
-    isError = _e[0],
-    setIsError = _e[1];
-  return (
-    <SImage className={className}>
+    var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? '/noContent/noContent.svg' : _b, _c = _a.isShowSkeleton, isShowSkeleton = _c === void 0 ? true : _c, borderRadiusSkeleton = _a.borderRadiusSkeleton, className = _a.className;
+    var _d = useState(children.props.src !== fallback), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(false), isError = _e[0], setIsError = _e[1];
+    return (<SImage className={className}>
       {React.cloneElement(children, {
-        src: isError ? fallback : children.props.src,
-        onLoad: function () {
-          setIsLoading(false);
-        },
-        onError: function () {
-          setIsError(true);
-          setIsLoading(false);
-        },
-      })}
-      {isShowSkeleton && isLoading && (
-        <Skeleton
-          className={'skeleton'}
-          width={children.props.width || '100%'}
-          height={children.props.height || '100%'}
-          borderRadius={
-            borderRadiusSkeleton || children.props.borderRadius || 2
-          }
-        />
-      )}
-    </SImage>
-  );
+            src: isError ? fallback : children.props.src,
+            onLoad: function () {
+                setIsLoading(false);
+            },
+            onError: function () {
+                setIsError(true);
+                setIsLoading(false);
+            },
+        })}
+      {isShowSkeleton && isLoading && (<Skeleton className={'skeleton'} width={children.props.width || '100%'} height={children.props.height || '100%'} borderRadius={borderRadiusSkeleton || children.props.borderRadius || 2}/>)}
+    </SImage>);
 };
 var templateObject_1;

package/dist/system/Img/Profilepic/index.jsx

@@ -1,64 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import Image from 'next/image';
-
 import styled from 'styled-components';
-
 import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
-
 import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledProfilePic = styled(Image)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      ['\n  border-radius: 50%;\n'],
-      ['\n  border-radius: 50%;\n']
-    ))
-);
+var StyledProfilePic = styled(Image)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n"], ["\n  border-radius: 50%;\n"])));
 var getProfilePicProps = function (size) {
-  return {
-    width: size,
-    height: size,
-  };
+    return {
+        width: size,
+        height: size,
+    };
 };
 export var ProfilePic = function (_a) {
-  var userPicSrc = _a.userPicSrc,
-    _b = _a.size,
-    size = _b === void 0 ? 40 : _b;
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  var _c = getProfilePicProps(size),
-    width = _c.width,
-    height = _c.height;
-  return (
-    <ImageInterceptor borderRadiusSkeleton={'50%'}>
-      <StyledProfilePic
-        src={userPicSrc}
-        width={getAdaptiveValueWithCheck4k({
-          windowDimensions: windowDimensions,
-          currentSize: width,
-        })}
-        height={getAdaptiveValueWithCheck4k({
-          windowDimensions: windowDimensions,
-          currentSize: height,
-        })}
-        priority={true}
-        alt={'ProfilePic'}
-      />
-    </ImageInterceptor>
-  );
+    var userPicSrc = _a.userPicSrc, _b = _a.size, size = _b === void 0 ? 40 : _b;
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    var _c = getProfilePicProps(size), width = _c.width, height = _c.height;
+    return (<ImageInterceptor borderRadiusSkeleton={'50%'}>
+      <StyledProfilePic src={userPicSrc} width={getAdaptiveValueWithCheck4k({
+            windowDimensions: windowDimensions,
+            currentSize: width,
+        })} height={getAdaptiveValueWithCheck4k({
+            windowDimensions: windowDimensions,
+            currentSize: height,
+        })} priority={true} alt={'ProfilePic'}/>
+    </ImageInterceptor>);
 };
 ProfilePic.displayName = 'ProfilePic';
 var templateObject_1;

package/dist/system/Img/Userpic/UserPic.test.jsx

@@ -1,89 +1,66 @@
 import React from 'react';
-
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import 'jest-styled-components';
-
 import { useUserStore } from '@/modules/user/store';
-
 import useFetchUserpic from '@/api/server-medias/queries/useFetchUserPic';
-
 import UserPic from '@/system/Img/Userpic';
-
 jest.mock('@/modules/user/store');
 jest.mock('@/api/server-medias/queries/useFetchUserPic');
-jest.mock('@/utils/env', function () {
-  return {
+jest.mock('@/utils/env', function () { return ({
     getMediaENVDomain: jest.fn().mockReturnValue('https://media.ludo.ninja'),
-  };
-});
-jest.mock('@/public/defaultUserpics/defaultUserpic.svg', function () {
-  return 'div';
-});
+}); });
+jest.mock('@/public/defaultUserpics/defaultUserpic.svg', function () { return 'div'; });
 describe('UserPic Component', function () {
-  beforeEach(function () {
-    useUserStore.mockReturnValue({
-      isSignedIn: true,
-      isLoadingProfileData: false,
-      profileData: null,
-    });
-    useFetchUserpic.mockReturnValue({
-      load: jest.fn(),
-      userPic: 'fetched-user-pic.svg',
-      loading: false,
-      data: {},
-      refetch: jest.fn(),
-      error: undefined,
+    beforeEach(function () {
+        useUserStore.mockReturnValue({
+            isSignedIn: true,
+            isLoadingProfileData: false,
+            profileData: null,
+        });
+        useFetchUserpic.mockReturnValue({
+            load: jest.fn(),
+            userPic: 'fetched-user-pic.svg',
+            loading: false,
+            data: {},
+            refetch: jest.fn(),
+            error: undefined,
+        });
     });
-  });
-  test('renders default user picture when no user picture is available', function () {
-    useFetchUserpic.mockReturnValue({
-      load: jest.fn(),
-      userPic: null,
-      loading: false,
-      data: {},
-      refetch: jest.fn(),
-      error: undefined,
-    });
-    render(
-      <div>
+    test('renders default user picture when no user picture is available', function () {
+        useFetchUserpic.mockReturnValue({
+            load: jest.fn(),
+            userPic: null,
+            loading: false,
+            data: {},
+            refetch: jest.fn(),
+            error: undefined,
+        });
+        render(<div>
         test
-        <UserPic
-          userId="123"
-          width={100}
-          height={100}
-          isNeedBoxTransform={false}
-        />
-      </div>
-    );
-    var defaultUserPic = screen
-      .getByText('test')
-      .querySelector('.userPicImage');
-    expect(defaultUserPic).toBeInTheDocument();
-  });
-  test('renders loading skeleton when loading', function () {
-    useFetchUserpic.mockReturnValueOnce({
-      load: jest.fn(),
-      userPic: null,
-      loading: true,
-      data: {},
-      refetch: jest.fn(),
-      error: undefined,
+        <UserPic userId="123" width={100} height={100} isNeedBoxTransform={false}/>
+      </div>);
+        var defaultUserPic = screen
+            .getByText('test')
+            .querySelector('.userPicImage');
+        expect(defaultUserPic).toBeInTheDocument();
     });
-    render(
-      <div>
+    test('renders loading skeleton when loading', function () {
+        useFetchUserpic.mockReturnValueOnce({
+            load: jest.fn(),
+            userPic: null,
+            loading: true,
+            data: {},
+            refetch: jest.fn(),
+            error: undefined,
+        });
+        render(<div>
         test
-        <UserPic
-          userId="123"
-          width={100}
-          height={100}
-          isNeedBoxTransform={false}
-        />
-      </div>
-    );
-    var skeleton = screen
-      .getByText('test')
-      .querySelector('.react-loading-skeleton');
-    expect(skeleton).toBeInTheDocument();
-  });
+        <UserPic userId="123" width={100} height={100} isNeedBoxTransform={false}/>
+      </div>);
+        var skeleton = screen
+            .getByText('test')
+            .querySelector('.react-loading-skeleton');
+        expect(skeleton).toBeInTheDocument();
+    });
 });