@bytebrand/fe-ui-core 4.2.54 → 4.2.56

package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCard.test.tsx

@@ -25,7 +25,6 @@ describe('OrderStatusCard', () => {
         description={description}
       />
     );
-    debug();
     const cardTitle = getByText(title);
     expect(cardTitle).toBeInTheDocument();
     const cardDescription = getByText(description);
@@ -43,7 +42,6 @@ describe('OrderStatusCard', () => {
         isDisabled={true}
       />
     );
-    debug();
     const cardTitle = getByTestId('cardTitle');
     expect(cardTitle).toHaveClass('notReachedTitle');
   });
@@ -57,7 +55,6 @@ describe('OrderStatusCard', () => {
         isDone={true}
       />
     );
-    debug();
     const cardTitle = getByTestId('cardTitle');
     expect(cardTitle).toHaveClass('isDoneTitle');
   });
@@ -71,7 +68,6 @@ describe('OrderStatusCard', () => {
         isActive={true}
       />
     );
-    debug();
     const orderStatusCard = getByTestId('orderStatusCard');
     expect(orderStatusCard).toHaveClass('cardInProgress');
   });

package/__tests__/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, cleanup, screen } from '@testing-library/react';
+import VehicleFormattedPrice, { IVehiclePriceProps } from '../../../../source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
+import FormattedNumber from '../../../../source/components/FormattedNumber/FormattedNumber';
+
+const mockPropsForFormattedNumber = {
+  value: 99,
+  toRound: false,
+  disableFormatting: false,
+  numbersAfterDot: 0,
+  className: '',
+  afterCommaClassName: '',
+  beforeCommaClassName: ''
+};
+
+const VehicleFormattedPriceProps: IVehiclePriceProps = {
+  price: 1234.56,
+};
+
+describe('VehicleFormattedPrice', () => {
+  it('render VehicleFormattedPrice component', () => {
+    const { container } = render(<FormattedNumber {...mockPropsForFormattedNumber} />);
+    expect(container.firstChild).toBeTruthy();
+  });
+// TODO:value incorrect
+  // it('renders the formatted number correctly', () => {
+  //   render(<VehicleFormattedPrice {...VehicleFormattedPriceProps} price={1234.56} />);
+  //   const formattedNumber = screen.getByText('1234.56');
+  //   expect(formattedNumber).toBeInTheDocument();
+  // });
+
+
+  it('renders the unit correctly when provided', () => {
+    render(<VehicleFormattedPrice {...VehicleFormattedPriceProps} unit="USD" />);
+    const unit = screen.getByText('USD');
+    expect(unit).toBeInTheDocument();
+  });
+
+  it('renders the postfix correctly when provided', () => {
+    render(<VehicleFormattedPrice {...VehicleFormattedPriceProps} postfix="1,3" />);
+    const postfix = screen.getByText('1,3');
+    expect(postfix).toBeInTheDocument();
+  });
+
+  it('renders the unit monthly correctly when provided', () => {
+    render(<VehicleFormattedPrice {...VehicleFormattedPriceProps} unit="€" monthly="mtl" />);
+    const unit = screen.getByText('€');
+    const monthly = screen.getByText('/mtl');
+    expect(unit).toBeInTheDocument();
+    expect(monthly).toBeInTheDocument();
+  });
+
+  it('renders the sub correctly when provided', () => {
+    render(<VehicleFormattedPrice {...VehicleFormattedPriceProps} sub="VAT included" />);
+    const sub = screen.getByText('VAT included');
+    expect(sub).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import ImageComponent from '../../../../source/components/_common/Image/Image';
+import styles from '../../../../source/components/_common/Image/Image.styl';
+
+const mockProps = {
+  src: 'https://via.placeholder.com/300',
+  srcSmall: 'https://via.placeholder.com/15',
+  srcLarge: 'https://via.placeholder.com/1500',
+};
+
+
+describe('ImageComponent', () => {
+
+  it('loads the image correctly', async () => {
+    const { container } = render(
+      <ImageComponent src={mockProps.src} />,
+    );
+    const imgElement = container.querySelector('img') as HTMLImageElement;
+    expect(imgElement).toBeInTheDocument();
+    await expect(imgElement).toHaveProperty('src', mockProps.src);
+  });
+
+  it('ImageComponent renders correctly', () => {
+    const { getByRole, container } = render(<ImageComponent src={mockProps.src} />);
+    
+    const imgElem = getByRole('img');
+    const divContainer = container.firstChild;
+  
+    expect(imgElem).toBeInTheDocument();
+    expect(divContainer).toHaveClass('container')
+  });
+
+  it('renders without errors', async () => {
+    const { container } = render(<ImageComponent {...mockProps} />);
+
+    expect(container).toBeInTheDocument();
+
+    // Wait for the image to load
+    const imgEl = await waitFor(() => container.querySelector('img'));
+    expect(imgEl).toBeInTheDocument();
+  });
+
+  it('shows the loader before image is loaded', () => {
+    const { getByText } = render(
+      <ImageComponent src={mockProps.src} withLoader />,
+    );
+
+    getByText(/loading/i);
+  });
+
+  it('calls onClick handler when image is clicked', async () => {
+    const handleClick = jest.fn();
+    const { container } = render(<ImageComponent {...mockProps} onClick={handleClick} />);
+
+    // Wait for the image to load
+    const imgEl = await waitFor(() => container.querySelector('img'));
+    fireEvent.click(imgEl);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets height and width correctly', () => {
+    const { container } = render(<ImageComponent src={mockProps.src} width={100} height={100} />);
+
+    expect(container.firstChild).toHaveStyle('width: 100px;');
+    expect(container.firstChild).toHaveStyle('height: 100px;');
+  });
+
+  it('ImageComponent state works correctly', () => {
+    const { getByRole } = render(
+      <ImageComponent src={mockProps.src} />
+    );
+  
+    const imgElem = getByRole('img');
+  
+    expect(imgElem).not.toHaveClass(styles.loaded);
+    fireEvent.load(imgElem);
+    expect(imgElem).toHaveClass(styles.loaded);
+  });
+
+});

package/__tests__/utils/CommonUtils/addPrefixToKeys.test.ts

@@ -0,0 +1,18 @@
+import { addPrefixToKeys } from '../../../source/framework/utils/CommonUtils';
+
+describe('addPrefixToKeys', () => {
+  it('should return an empty object when given an empty object', () => {
+    const obj = {};
+    const prefix = 'test';
+    const result = addPrefixToKeys(obj, prefix);
+    expect(result).toEqual({});
+  });
+
+  it('should add the prefix to each key in the object', () => {
+    const obj = { a: 1, b: 2, c: 3 };
+    const prefix = 'test';
+    const result = addPrefixToKeys(obj, prefix);
+    const expected = { test_a: 1, test_b: 2, test_c: 3 };
+    expect(result).toEqual(expected);
+  });
+});

package/__tests__/utils/CommonUtils/arrToObj.test.js

@@ -0,0 +1,32 @@
+import { arrToObj } from '../../../source/framework/utils/CommonUtils';
+
+const mockArr = ['first', 'second', 'third'];
+
+describe('arrToObj', () => {
+  it('should return an empty object when passed a non-array value', () => {
+    expect(arrToObj(null)).toEqual({});
+    expect(arrToObj(undefined)).toEqual({});
+    expect(arrToObj('')).toEqual({});
+    expect(arrToObj(42)).toEqual({});
+    expect(arrToObj({})).toEqual({});
+  });
+
+  it('should convert an array of strings to an object where each string is a key with a value of true', () => {
+    const obj = arrToObj(mockArr);
+    expect(obj).toMatchObject({ first: true, second: true, third: true });
+    expect(Object.keys(obj)).toHaveLength(mockArr.length);
+    mockArr.forEach((val) => {
+      expect(obj[val]).toBe(true);
+    });
+  });
+
+  it('should not modify the original array', () => {
+    const originalArr = [...mockArr];
+    arrToObj(mockArr);
+    expect(mockArr).toEqual(originalArr);
+  });
+
+  it('should return an empty object when passed an empty array', () => {
+    expect(arrToObj([])).toEqual({});
+  });
+});

package/__tests__/utils/CommonUtils/checkRangeValuesOnEqual.test.ts

@@ -0,0 +1,17 @@
+import { checkRangeValuesOnEqual } from '../../../source/framework/utils/CommonUtils';
+
+describe('checkRangeValuesOnEqual', () => {
+  it('returns true when defaultValues and filterValues have exactly the same values', () => {
+    const defaultValues = { from: 1000, to: 2000 };
+    const filterValues = { from: 1000, to: 2000 };
+    const result = checkRangeValuesOnEqual(defaultValues, filterValues);
+    expect(result).toEqual(true);
+  });
+
+  it('returns false when defaultValues and filterValues have different values', () => {
+    const defaultValues = { from: 1000, to: 2000 };
+    const filterValues = { from: 500, to: 2000 };
+    const result = checkRangeValuesOnEqual(defaultValues, filterValues);
+    expect(result).toEqual(false);
+  });
+});

package/__tests__/utils/CommonUtils/formatMileage.test.ts

@@ -0,0 +1,8 @@
+import { formatMileage } from '../../../source/framework/utils/CommonUtils';
+
+describe('formatMileage', () => {
+  it('should correctly format millage when passed as number', () => {
+    const result = formatMileage(123456789);
+    expect(result).toEqual('123.456.789');
+  });
+});

package/__tests__/utils/CommonUtils/getFormattedNumber.test.ts

@@ -0,0 +1,19 @@
+import { getFormattedNumber } from '../../../source/framework/utils/CommonUtils';
+
+describe('getFormattedNumber', () => {
+  it('should format a number with German locale', () => {
+    const formattedNumber = getFormattedNumber(123456789.5);
+    expect(formattedNumber).toBe('123.456.789,5');
+  });
+
+  it('should return null if input is not finite number', () => {
+    const formattedNumber = getFormattedNumber(NaN);
+    expect(formattedNumber).toBeNull();
+
+    const formattedNumber2 = getFormattedNumber(undefined);
+    expect(formattedNumber2).toBeNull();
+
+    const formattedNumber3 = getFormattedNumber('invalidNumber' as any);
+    expect(formattedNumber3).toBeNull();
+  });
+});

package/__tests__/utils/CommonUtils/getFormattedPrice.test.ts

@@ -0,0 +1,19 @@
+import { getFormattedPrice } from '../../../source/framework/utils/CommonUtils';
+
+describe('getFormattedPrice', () => {
+  it('should format the given price correctly with default parameters', () => {
+    const result = getFormattedPrice(1234567890);
+    expect(result).toEqual('1.234.567.890');
+  });
+
+  it('should format the given price correctly with custom format and currency', () => {
+    const result = getFormattedPrice(1990.75, '$.2f', 'USD');
+    expect(result).toEqual('1990,75USD');
+  });
+
+  it('should return "-" if price is not finite number or null/undefined', () => {
+    expect(getFormattedPrice(undefined)).toEqual('-');
+    expect(getFormattedPrice(null)).toEqual('-');
+    expect(getFormattedPrice(NaN)).toEqual('-');
+  });
+});

package/__tests__/utils/CommonUtils/getGroupValuesForQuery.test.ts

@@ -0,0 +1,51 @@
+import { getGroupValuesForQuery } from '../../../source/framework/utils/CommonUtils';
+
+describe('getGroupValuesForQuery', () => {
+  it('should return array of objects, each containing key/value pairs for all properties with truthy values', () => {
+    const filterObj = [
+      {
+        MANUFACTURER: {
+            field: 'mainData_make',
+            value: 'Audi',
+            isAbsolute: true
+        },
+        MODEL: {
+            field: 'mainData_model',
+            value: 'A5',
+            isAbsolute: true
+        },
+        SUB_MODEL: {
+            field: 'mainData_subModel',
+            value: 'sportback',
+            isAbsolute: true
+        },
+        SERIES: {
+            field: 'mainData_series',
+            value: 'series',
+            isAbsolute: true
+        }
+    }
+    ];
+
+    const result = getGroupValuesForQuery(filterObj);
+
+    const expectedResult = [
+      {
+        MANUFACTURER: 'Audi',
+        MODEL: 'A5',
+        SUB_MODEL: 'sportback',
+        SERIES: 'series'
+      }
+    ]
+
+    expect(result).toEqual(expectedResult);
+  });
+
+  it('should return empty array if argument is an empty array', () => {
+    const groups: any[] = [];
+
+    const result = getGroupValuesForQuery(groups);
+
+    expect(result).toEqual([]);
+  });
+});

package/__tests__/utils/CommonUtils/getPriceRating.test.ts

@@ -0,0 +1,26 @@
+import { getPriceRating } from "../../../utils";
+
+describe('getPriceRating', () => {
+  it('should return 0 when input price is undefined or null', () => {
+    expect(getPriceRating(undefined, undefined)).toBe(0);
+    expect(getPriceRating(null, null)).toBe(0);
+  });
+
+  it('should return 1 when current price match the highest price in ratingConfig', () => {
+    const currentSalesPrice = 3800;
+    const predictablePrice = 3000;
+    expect(getPriceRating(currentSalesPrice, predictablePrice)).toBe(1);
+  });
+
+  it('should return topPrice index in priceRatings when current sales price less than or equals to range of topPrice', () => {
+    const currentSalesPrice = 1000;
+    const predictablePrice = 10000;
+    expect(getPriceRating(currentSalesPrice, predictablePrice)).toBe(5);
+  });
+
+  it('should return correct price rating index based on currentSalesPrice and predictablePrice', () => {
+    const currentSalesPrice = 9600;
+    const predictablePrice = 10000;
+    expect(getPriceRating(currentSalesPrice, predictablePrice)).toBe(3); // fairPrice index in priceRatings array
+  });
+});

package/__tests__/utils/CommonUtils/getPriceRatingConfig.test.ts

@@ -0,0 +1,35 @@
+import { getPriceRatingConfig } from '../../../utils';
+
+describe('getPriceRatingConfig', () => {
+  it('should generate the pricing config correctly', () => {
+    const currentPrice = 5000
+    const pricePredicted = 4000
+
+    const expectedOutput = {
+      topPrice: { min: 3000, max: 3600 },
+      goodPrice: { min: 3600, max: 3800 },
+      fairPrice: { min: 3800, max: 4200 },
+      increasedPrice: { min: 4200, max: 4700 },
+      highPrice: { min: 4700, max: 5000 }
+    }
+
+    console.log(getPriceRatingConfig(currentPrice, pricePredicted))
+
+    expect(getPriceRatingConfig(currentPrice, pricePredicted)).toEqual(expectedOutput)
+  })
+
+  it('should return "???" for invalid predicted prices', () => {
+    const currentPrice = 5000
+    const pricePredicted = NaN
+
+    const expectedOutput = {
+      topPrice: { min: '???', max: '???' },
+      goodPrice: { min: '???', max: '???' },
+      fairPrice: { min: '???', max: '???' },
+      increasedPrice: { min: '???', max: '???' },
+      highPrice: { min: '???', max: '???' }
+    }
+
+    expect(getPriceRatingConfig(currentPrice, pricePredicted)).toEqual(expectedOutput)
+  })
+})

package/__tests__/utils/CommonUtils/preloadNearbyImages.test.ts

@@ -0,0 +1,9 @@
+import { preloadNearbyImages } from '../../../source/framework/utils/CommonUtils';
+
+describe('preloadNearbyImages', () => {
+  it('should not break when no images provided', () => {
+    preloadNearbyImages([], 0, 'imageUrlMedium');
+
+    expect(document.images).toHaveLength(0);
+  });
+});

package/__tests__/utils/CommonUtils/sliceLessThan.test.ts

@@ -0,0 +1,23 @@
+import { sliceLessThan } from '../../../source/framework/utils/CommonUtils';
+
+describe('sliceLessThan', () => {
+  it('returns empty array if returned value of `to` is not valid', () => {
+    const expected: number[] = [];
+
+    expect(sliceLessThan([], null)).toEqual(expected);
+    expect(sliceLessThan([], undefined)).toEqual(expected);
+    expect(sliceLessThan([], {} as any)).toEqual(expected);
+    expect(sliceLessThan([], [] as any)).toEqual(expected);
+    expect(sliceLessThan([], '')).toEqual(expected);
+    expect(sliceLessThan([], 'string')).toEqual(expected);
+    expect(sliceLessThan([], NaN)).toEqual(expected);
+    expect(sliceLessThan([], Infinity)).toEqual(expected);
+    expect(sliceLessThan([], -Infinity)).toEqual(expected);
+  });
+  
+  it('returns slice of original array containing only numbers less than `to`', () => {
+    const arr: number[] = [5,6,7,8];
+    const expected: number[] = [5,6];
+    expect(sliceLessThan(arr, 6)).toEqual(expected);
+  });
+});

package/__tests__/utils/CommonUtils/sliceMoreThan.test.ts

@@ -0,0 +1,23 @@
+import { sliceMoreThan } from '../../../source/framework/utils/CommonUtils';
+
+describe('sliceMoreThan', () => {
+  const myArray = [1, 2, 3, 4, 5];
+
+  it('returns empty array if returned value of `from` is not valid', () => {
+    const expected: number[] = [];
+
+    expect(sliceMoreThan([], null)).toEqual(expected);
+    expect(sliceMoreThan([], undefined)).toEqual(expected);
+    expect(sliceMoreThan([], {} as any)).toEqual(expected);
+    expect(sliceMoreThan([], [] as any)).toEqual(expected);
+    expect(sliceMoreThan([], '')).toEqual(expected);
+    expect(sliceMoreThan([], 'string')).toEqual(expected);
+    expect(sliceMoreThan([], NaN)).toEqual(expected);
+    expect(sliceMoreThan([], Infinity)).toEqual(expected);
+    expect(sliceMoreThan([], -Infinity)).toEqual(expected);
+  });
+
+  it('should return [4, 5] when filtering with 4', () => {
+    expect(sliceMoreThan(myArray, 4)).toEqual([4, 5]);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.54",
+  "version": "4.2.56",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import styles from './VehicleFormattedPrice.styl';
 
-interface IVehiclePriceProps {
+export interface IVehiclePriceProps {
   price: number;
   unit?: string;
   postfix?: string;

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -12,7 +12,7 @@ interface IPreviewCookieModal {
 
 const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
   const onAcceptAll = () => {
-    localStorage.setItem('cookieConfig', JSON.stringify([]));
+  localStorage.setItem('cookieConfig', JSON.stringify({}));
     updateCookieList();
     toggleModal();
   };

package/source/framework/utils/CommonUtils.ts

@@ -37,10 +37,6 @@ export const numberWithDot = (value: number | string) => {
       return value;
     default: return getFormattedNumber(+value);
   }
-  // if (value === 'any' || value === 'beliebig') {
-  //   return value;
-  // }
-  return getFormattedNumber(+value);
 };
 
 export const arrToObj = (arr: string[]): { [key: string]: boolean } => {
@@ -316,7 +312,7 @@ export const sliceMoreThan = (array: number[], from: any): number[] => {
     : array;
 };
 
-export const getFormattedPrice = (price: any, format = '$,.0f', currency = ''): string => {
+export const getFormattedPrice = (price: number, format = '$,.0f', currency = ''): string => {
   if (!Number.isFinite(price)) return '-';
   const groupingNum = 3;
   return d3formatLocale({
@@ -327,6 +323,24 @@ export const getFormattedPrice = (price: any, format = '$,.0f', currency = ''):
   }).format(format)(price);
 };
 
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
 export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
   const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
   const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
@@ -346,23 +360,6 @@ export const getPriceRating = (currentSalesPrice: number, predictablePrice: numb
   return 0;
 };
 
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
 export const fixNumber = (num: number | string) => {
   const isNum = typeof num === 'number' ? num : parseFloat(num);
   return Math.round(isNum * HUNDRED) / HUNDRED;