@bytebrand/fe-ui-core 4.8.54 → 4.8.56

package/__tests__/components/UserDasboardPage/sections/FavoriteSection/FavoriteSection.test.tsx

@@ -0,0 +1,335 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FavoriteSection from '../../../../../source/components/UserDashboardPage/sections/FavoriteSection/FavoriteSection';
+import { observable } from 'mobx';
+import qs from 'qs';
+
+const t = (phrase: string | string[], options: object) => {
+  if (options) {
+    const value = Object.values(options).map((option) => option);
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+};
+
+interface IWithRouter {
+  children?: JSX.Element;
+  link?: string;
+}
+const LinkRouter = ({ children, link }: IWithRouter) => {
+  return (
+    <a href={link} >
+      {children}
+    </a>
+  );
+};
+const favoriteCars = [
+  {
+    parkedFor: 'N/A',
+    id: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+    mainImageId: ' ',
+    imagesCount: ' ',
+    hasInteriorExteriorPhoto: ' ',
+    title: {
+      make: 'Volkswagen',
+      model: 'Polo',
+      subModel: '1.0 TSI Style',
+      option: '',
+      to: ''
+    },
+    showNewLabel: false,
+    info: {
+      regDate: ' ',
+      mileage: 0,
+      gearbox: 'selector_gearbox_manualShift',
+      numberOfPreviousOwners: 0,
+      usageType: 'selector_unknown',
+      condition: 'selector_condition_new',
+      damaged: false,
+      driveType: 'selector_driveType_frontWheelDrive'
+    },
+    location: {
+      city: 't',
+      street: 't',
+      zipCode: 12345
+    },
+    consumption: {
+      fuel: 'selector_fuel_petrol',
+      consumptionCombined: 5.2,
+      consumptionPowerCombined: ' '
+    },
+    engineData: {
+      powerKW: 70,
+      powerPS: 70
+    },
+    environmentEmissions: {
+      co2: 118
+    },
+    offer: {
+      offerId: ' ',
+      autoDeOfferId: ' ',
+      offerFrom: 'selector_unknown',
+      offerSource: ' ',
+      offerAvailability: 'selector_unknown',
+      offerDescription: '',
+      deliveryDate: 1698969600,
+      deliveryPeriod: 'selector_deliveryPeriod_days270',
+      dealerHomepage: ' ',
+      closedDomain: ' ',
+      export: ' ',
+      commercial: ' ',
+      warranty: false,
+      rentingPossible: ' ',
+      newHuAu: true,
+      internalNumber: '118_92436S/3243',
+      availabilityMode: 'selector_availabilityMode_fromDate',
+      mobileDeOfferId: ' ',
+      as24DeOfferId: ' ',
+      elnOfferId: 'bd11b00a8d643e16b69c308360e5236b'
+    },
+    price: {
+      offerIndex: 0,
+      isStrike: false,
+      comparable: {
+        annualMileage: 10000,
+        firstInstallment: ' ',
+        paybackPeriod: 48,
+        withAddServices: ' ',
+        withTransportation: ' '
+      },
+      checkout: {
+        warrantyRates: [
+          0,
+          0,
+          0
+        ],
+        warrantyPackage: 0,
+        warrantyPeriod: 1,
+        admissionService: 0,
+        licensePlateFee: 0
+      },
+      common: {
+        firstRegistration: ' ',
+        mileage: 0,
+        currentSalesPrice: 30666,
+        highestPrice: 34232,
+        isStrikeShown: true,
+        isHybridOrElectric: false
+      },
+      financing: {
+        grossLoanAmountWithoutFinalInstallment: 0,
+        purchasePrice: 0,
+        hasPaymentProtection: false,
+        paymentProtectionInsurance: 0,
+        monthlyInstallment: 142,
+        oldMonthlyInstallment: 180,
+        annualMileage: 25000,
+        firstInstallment: 11900,
+        withTransportation: false,
+        withAddServices: true,
+        addServicesCostRaw: 799,
+        addServicesCost: 799,
+        transportationCostRaw: 499,
+        transportationCost: 499,
+        withFinalInstallment: true,
+        paybackPeriod: 72,
+        rawPaybackPeriod: 72,
+        nominalInterestRate: 3.92,
+        annualPercentageRate: 6.99,
+        financialInstitution: 'Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach',
+        periodInterestRate: [
+          {
+            duration: 12,
+            recommended: 70,
+            current: 88,
+            inEUR: ' ',
+            value: 18766,
+            highestValue: 30124.16
+          },
+          {
+            duration: 24,
+            recommended: 66,
+            current: 77,
+            inEUR: ' ',
+            value: 18766,
+            highestValue: 26358.64
+          },
+          {
+            duration: 36,
+            recommended: 60,
+            current: 66,
+            inEUR: ' ',
+            value: 18766,
+            highestValue: 22593.12
+          },
+          {
+            duration: 48,
+            recommended: 50,
+            current: 60,
+            inEUR: ' ',
+            value: 17920.2,
+            highestValue: 20539.2
+          },
+          {
+            duration: 60,
+            recommended: 40,
+            current: 50,
+            inEUR: ' ',
+            value: 14933.5,
+            highestValue: 17116
+          },
+          {
+            duration: 72,
+            recommended: 30,
+            current: 40,
+            inEUR: ' ',
+            value: 11946.8,
+            highestValue: 13692.8
+          },
+          {
+            duration: 84,
+            recommended: 20,
+            current: 30,
+            inEUR: ' ',
+            value: 8960.1,
+            highestValue: 10269.6
+          },
+          {
+            duration: 96,
+            recommended: 10,
+            current: 20,
+            inEUR: ' ',
+            value: 5973.4,
+            highestValue: 6846.4
+          }
+        ],
+        closingCosts: 0,
+        offersFinancing: true,
+        rateMode: 'dealer'
+      },
+      buy: {
+        withTransportation: false,
+        withAddServices: true,
+        withoutAddServices: true,
+        transportationCost: 499,
+        addServicesCost: 799,
+        currentSalesPriceExtra: 30666,
+        highestPriceExtra: 34232,
+        extraCost: 0
+      },
+      leasing: {
+        RWG: 7,
+        maxAge: 24,
+        maxMileage: 1000000,
+        isActive: true,
+        withTransportation: false,
+        withAddServices: false,
+        addServicesCostRaw: 799,
+        transportationCostRaw: 499,
+        addServicesCost: 799,
+        transportationCost: 499,
+        monthlyAddServices: 0,
+        monthlyTransportation: 0,
+        monthlyInstallment: 441,
+        oldMonthlyInstallment: 526,
+        firstInstallment: 20,
+        firstInstallmentMax: 2000,
+        annualMileage: 10000,
+        paybackPeriodRange: [
+          30,
+          36,
+          42,
+          48,
+          54,
+          60
+        ],
+        paybackPeriod: 48,
+        santanderPayBackMin: 250,
+        nominalInterestRate: 6.78,
+        financialInstitution: 'Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach',
+        grossLoanAmountWithoutFinalInstallment: 0,
+        hasPaymentProtection: false,
+        paymentProtectionInsurance: 1100,
+        leasingMode: 'default',
+        currentSalesPrice: 30666
+      },
+      abo: {
+        paybackPeriod: 6,
+        annualMileage: 10000
+      },
+      firstRegistration: ' ',
+      mileage: 0,
+      currentSalesPrice: 30666,
+      highestPrice: 34232,
+      isStrikeShown: true,
+      carId: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+      offerName: 'financing',
+      vehicleId: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+      vatRate: 19,
+      mlCurrentSalesPricePredicted: ' ',
+      historyPriceDifference: 3566,
+      historyPriceDifferencePerCent: 10,
+      margin: 30666,
+      toRound: false
+    },
+    internalNumber: '118_92436S/3243',
+    vin: '',
+    isOnline: true,
+    firstIsOnline: 1675668230,
+    url: '/search/vehicle/c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+    relativeScore: 0,
+    baseUrl: '',
+    offerSource: '',
+    crawledAt: '',
+    ownerName: 'Guardian of Auto.de',
+    modificationDate: '18.05.2023',
+    seoText: ''
+  }
+];
+const favoritesIDs = [
+  'b359d74f-bb96-4fca-9539-579792fe7c36'
+];
+const getFavoriteCarsMock = jest.fn();
+
+const aggStatsData = observable({
+  'b359d74f-bb96-4fca-9539-579792fe7c36': {
+    carId: 'b359d74f-bb96-4fca-9539-579792fe7c36',
+    totalFavCount: 3,
+    totalCarImpCount: 7399,
+    slidingCarImpCount: 10
+  },
+  get() {
+    return {
+      'b359d74f-bb96-4fca-9539-579792fe7c36': {
+        carId: 'b359d74f-bb96-4fca-9539-579792fe7c36',
+        totalFavCount: 3,
+        totalCarImpCount: 7399,
+        slidingCarImpCount: 10
+      }
+    };
+  }
+});
+const mockProps = {
+  t,
+  LinkRouter,
+  favoriteCars,
+  PLACEHOLDER_IMAGE_SMALL_URL: 'PLACEHOLDER_IMAGE_SMALL_URL',
+  favoriteStore: { favoriteCars, favoritesIDs, showList: true, getFavouriteCars: getFavoriteCarsMock, getFavoritesIDs: jest.fn() },
+  appStore: {},
+  carsStore: { aggStatsData, getAggStatsData: jest.fn() },
+  imagesStore: { getSupportedImageFormat: jest.fn() }
+};
+
+describe('FavoriteSection', () => {
+  test('calls getFavouriteCars when component is mounted', () => {
+    const { container } = render(<FavoriteSection {...mockProps as any} />);
+    expect(container).toBeInTheDocument();
+    // expect(mockProps.favoriteStore.getFavouriteCars).toHaveBeenCalledTimes(1);
+  });
+  test('should display correct car data', () => {
+    const { container } = render(<FavoriteSection {...mockProps as any} />);
+    mockProps.favoriteCars.forEach((element:any) => {
+      expect(container).toHaveTextContent(element.title.make);
+    });
+  });
+});

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render } from '@testing-library/react'
+import AdditionalOrderInfo from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo';
+import { getFormattedPrice } from '../../../../../source/framework/utils/CommonUtils';
+
+const t = (phrase: string | string[], options?: object): string | string[] => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+}
+
+const commonProps = {
+  t,
+  redirectToUrl: () => {},
+}
+
+const additionalOrderData = (buyingType: 'buy' | 'leasing' | 'financing', objectData: any) => {
+  const {
+    customerFirstname,
+    customerLastname,
+    currentSalesPrice,
+    preparationCost,
+    registrationCost,
+    licensePlateCost,
+    transportationCost,
+    monthlyInstallment,
+    paybackPeriod,
+    deposit
+  } = objectData;
+  return {
+    addressData: [
+      { label: 'Billing address:', value: `${customerFirstname} ${customerLastname}` },
+      { label: 'Vehicle delivery:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' }
+    ],
+    carPriceData: [
+      { label: 'Car price', value: getFormattedPrice(currentSalesPrice, '$,.2f', ' €') },
+      { label: 'Preparation cost', value: getFormattedPrice(preparationCost, '$,.2f', ' €')},
+      { label: 'vehicle registration', value: getFormattedPrice(registrationCost, '$,.2f', ' €') },
+      { label: 'license plates', value: getFormattedPrice(licensePlateCost, '$,.2f', ' €') },
+      { label: 'Delivery', value: getFormattedPrice(transportationCost, '$,.2f', ' €') },
+      ...(buyingType !== 'buy') ? [
+        { label: `${buyingType} rate`, value: `${getFormattedPrice(monthlyInstallment, '$,.2f', '', '€')} per month` },
+        { label: 'Running time (months)', value: `${paybackPeriod} months` },
+        { label: 'Deposit', value: getFormattedPrice(deposit, '$,.2f', ' €') }
+      ] : []
+    ],
+    overallRate: {
+      label: 'Your overall rate',
+      value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
+    }
+  };
+}
+
+describe('AdditionalOrderInfo', () => {
+  it('renders AdditionalOrderInfo component without error', () => {
+    const objectData = {
+      customerFirstname: 'firstName',
+      customerLastname: 'lastName',
+      currentSalesPrice: 12000,
+      preparationCost: 1200,
+      registrationCost: 1000,
+      licensePlateCost: 1200,
+      transportationCost: 3000,
+      monthlyInstallment: 1000,
+      paybackPeriod: 48,
+      deposit: 5000
+    }
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'leasing',
+      additionalOrderData: additionalOrderData('leasing', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders AdditionalOrderInfo component without some data', () => {
+    const objectData = {
+      customerFirstname: 'firstName',
+      customerLastname: 'lastName',
+      currentSalesPrice: 12000,
+      preparationCost: 1200,
+      registrationCost: 1000
+    }
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'leasing',
+      additionalOrderData: additionalOrderData('leasing', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders AdditionalOrderInfo component with "buy" buying type', () => {
+    const objectData = {
+      customerFirstname: 'firstName',
+      customerLastname: 'lastName',
+      currentSalesPrice: 12000,
+      preparationCost: 1200,
+      registrationCost: 1000
+    }
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'buy',
+      additionalOrderData: additionalOrderData('buy', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders AdditionalOrderInfo component without any data', () => {
+    const objectData = {};
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'leasing',
+      additionalOrderData: additionalOrderData('leasing', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import OrderStatusCar from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar';
+
+const t = (phrase: string | string[], options?: object): string | string[] => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+};
+
+const mockProps = {
+  t,
+  make: 'Test Make',
+  model: 'Test Model',
+  subModel: 'test car',
+  buyingType: 'buy',
+  imageUrl: 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
+  selfPickup: false,
+  paybackPeriod: 12,
+  monthlyInstallment: 2000,
+  status: 'selector_status_order_received',
+  request: '1234abcd',
+  registration: false,
+  currentSalesPrice: 30000,
+  onClick: jest.fn()
+};
+
+describe('OrderStatusCar', () => {
+  it('renders OrderStatusCar component without error', () => {
+    const { container } = render(<OrderStatusCar {...mockProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should display correct car make and model', () => {
+    const { getByText } = render(<OrderStatusCar {...mockProps} />);
+    expect(getByText(`${mockProps.make} ${mockProps.model}`)).toBeInTheDocument();
+  });
+
+  it('should display correct car characteristics', () => {
+    const { getByText } = render(<OrderStatusCar {...mockProps} />);
+    expect(getByText(mockProps.subModel)).toBeInTheDocument();
+  });
+
+  it('should display correct car image', () => {
+    const { getByTestId } = render(<OrderStatusCar {...mockProps}/>);
+    const carImage = getByTestId('car-image');
+    expect(carImage).toHaveAttribute('src', mockProps.imageUrl);
+  });
+
+  it('should call onClick function when user clicks on the car card', () => {
+    const { getByTestId } = render(<OrderStatusCar {...mockProps} />);
+    const carCard = getByTestId('car-card');
+    fireEvent.click(carCard);
+    expect(mockProps.onClick).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import OrderStatusCard from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCard';
+
+describe('OrderStatusCard', () => {
+  const icon = 'orderReceivedDashboard';
+  const title = 'Test title';
+  const description = 'Test description';
+  it('render container without errors', () => {
+    const { container } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+      />
+    );
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders a card with title, description, and icon', () => {
+    const { getByText, container, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+      />
+    );
+    const cardTitle = getByText(title);
+    expect(cardTitle).toBeInTheDocument();
+    const cardDescription = getByText(description);
+    expect(cardDescription).toBeInTheDocument();
+    const svgElement = container.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  it('adds "notReachedTitle" class for title when "isDisabled" prop is set', () => {
+    const { getByTestId, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+        isDisabled={true}
+      />
+    );
+    const cardTitle = getByTestId('cardTitle');
+    expect(cardTitle).toHaveClass('notReachedTitle');
+  });
+
+  it('adds "isDoneTitle" class for title when "isDone" prop is set', () => {
+    const { getByTestId, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+        isDone={true}
+      />
+    );
+    const cardTitle = getByTestId('cardTitle');
+    expect(cardTitle).toHaveClass('isDoneTitle');
+  });
+
+  it('adds "cardInProgress" class for card when "isActive" prop is set', () => {
+    const { getByTestId, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+        isActive={true}
+      />
+    );
+    const orderStatusCard = getByTestId('orderStatusCard');
+    expect(orderStatusCard).toHaveClass('cardInProgress');
+  });
+});

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render } from '@testing-library/react'
+import OrderStatusSection from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection';
+import { car } from '../../../../mockedData/mockedPendingRequestedCar';
+
+const t = (phrase: string | string[], options?: object): string | string[] => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+}
+const leasingCar = car;
+const financingCar = { ...car, buyingType: 'financing' };
+const buyCar = { ...car, buyingType: 'buy' };
+
+const commonProps = {
+  t,
+  isFetching: false,
+  getSupportedImageFormat: () => {
+    return 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp'
+  },
+  redirectToUrl: () => {},
+}
+
+describe('OrderStatusSection', () => {
+  it('renders OrderStatusSection component without error', () => {
+    const orderStatusSectionProps = {
+      ...commonProps,
+      orderedCars: [
+        leasingCar,
+        financingCar,
+        buyCar
+      ]
+    }
+    const { container } = render(<OrderStatusSection {...orderStatusSectionProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders OrderStatusSection component without cars', () => {
+    const orderStatusSectionProps = {
+      ...commonProps,
+      orderedCars: [] as any[]
+    }
+    const { container } = render(<OrderStatusSection {...orderStatusSectionProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders OrderStatusSection component with additional data', () => {
+    const orderStatusSectionProps = {
+      ...commonProps,
+      withAdditionalData: true,
+      orderedCars: [
+        leasingCar,
+        financingCar,
+        buyCar
+      ]
+    }
+    const { container } = render(<OrderStatusSection {...orderStatusSectionProps} />);
+    expect(container).toBeInTheDocument();
+  });
+});