@bytebrand/fe-ui-core 4.2.92 → 4.2.94

package/__tests__/components/Checkout/RadioGroup.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, fireEvent, screen, prettyDOM, waitFor } from '@testing-library/react';
+import RadioGroup from '../../../source/components/_common/Radio/RadioGroup';
+import ServiceCardWrapper from '../../../source/components/Checkout/RadioCards/AdditionalServiceCard/ServiceCardWrapper';
+
+const onChangeMock = jest.fn();
+
+const children = [
+  <ServiceCardWrapper
+    key={1}
+    label={'additionalServices.warranty.label'}
+    infoContent={'warranty'}
+    footerText={'completeService'}
+    value={3}
+    warrantyCard={true}
+    price={897456123}
+    additionalOptions={['Alles aus Bronze Garantiepaket', 'Klima- & Kühlsysteme', 'Elektrische Anlagen']}
+    monthly={'additionalServices.monthly'}
+    className={'className'}
+    modalTitle={'title'}
+    modalContent={[
+      'Motor',
+      'Schalt- & Automatikgetriebe',
+      'Differenzial'
+    ]}
+    onCheckoutModalClick={() => {}}
+    isHybridOrElectric={false}
+    warrantyName={'name'}
+  />,
+  <ServiceCardWrapper
+    key={2}
+    label={'additionalServices.another.label'}
+    infoContent={'another'}
+    footerText={'completeService'}
+    value={2}
+    warrantyCard={true}
+    price={987654321}
+    additionalOptions={['Option 1', 'Option 2', 'Option 3']}
+    monthly={'additionalServices.monthly'}
+    className={'className'}
+    modalTitle={'title'}
+    modalContent={[
+      'Option 1',
+      'Option 2',
+      'Option 3'
+    ]}
+    onCheckoutModalClick={() => {}}
+    isHybridOrElectric={false}
+    warrantyName={'name'}
+    checked={false}
+  />
+];
+
+describe('RadioGroup', () => {
+  it('renders correctly with children', () => {
+    const { getByText } = render(
+      <RadioGroup
+        name='testRadioGroup'
+        value={1}
+        onChange={onChangeMock}
+        error={false}
+        containerClassName='containerClassName'
+        childClassName='childClassName'
+        wrapperClassname='wrapperClassname'
+        radioName='radioName'
+        onBlur={() => {}}
+      >
+        {children}
+      </RadioGroup>
+    );
+    expect(getByText('additionalServices.warranty.label')).toBeInTheDocument();
+    expect(getByText('additionalServices.another.label')).toBeInTheDocument();
+  });
+
+  it('calls onChange when a radio button is selected', () => {
+    const { getByRole, getByDisplayValue  } = render(
+      <RadioGroup
+        name='testRadioGroup'
+        value={1}
+        onChange={onChangeMock}
+        error={false}
+        containerClassName='containerClassName'
+        childClassName='childClassName'
+        wrapperClassname='wrapperClassname'
+        radioName='radioName'
+        onBlur={() => {}}
+      >
+        {children}
+      </RadioGroup>
+    );
+    const radioOption1 = getByRole('radio', { name: 'additionalServices.warranty.label 897.456.123 € /additionalServices.monthly warranty Alles aus Bronze Garantiepaket Klima- & Kühlsysteme Elektrische Anlagen' });
+    fireEvent.click(radioOption1);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+});

package/__tests__/components/Checkout/ServiceCardWrapper.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen, fireEvent, prettyDOM } from '@testing-library/react';
+import ServiceCardWrapper from '../../../source/components/Checkout/RadioCards/AdditionalServiceCard/ServiceCardWrapper';
+
+describe('ServiceCardWrapper', () => {
+  const defaultProps = {
+    value: '1',
+    checked: false,
+    onCheckoutModalClick: jest.fn()
+  };
+  const getWrapper = (props = {}) => {
+    return render(<ServiceCardWrapper {...defaultProps} {...props} />);
+  };
+
+  it('should render all elements properly', () => {
+    const { container } = getWrapper({
+      label: 'Test label',
+      price: 100,
+      checked: true,
+      footerText: 'Test footer text'
+    });
+
+    expect(screen.getByText('Test label')).toBeInTheDocument();
+    expect(screen.getByText('100')).toBeInTheDocument();
+    expect(screen.getByText('€')).toBeInTheDocument();
+    expect(container.querySelector('input[type="radio"]')).toBeInTheDocument();
+  });
+
+  it('should call onChange function with proper arguments on radio button click', () => {
+    const onChange = jest.fn();
+    const { container } = getWrapper({
+      value: '2',
+      onChange
+    });
+
+    fireEvent.click(container.querySelector('input[type="radio"]'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(expect.any(Object), true, '2');
+  });
+
+  it('should not call onChange function on radio button click if disabled', () => {
+    const onChange = jest.fn();
+    const { container } = getWrapper({
+      disabled: true,
+      onChange
+    });
+
+    fireEvent.click(container.querySelector('input[type="radio"]'));
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/__tests__/components/Checkout/Switcher.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Switcher from '../../../source/components/Checkout/Switcher/Switcher';
+
+describe('Switcher component', () => {
+  it('Should render options in Switcher', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const { getAllByRole } = render(
+          <Switcher options={options} value={1} />
+        );
+    const toggleButtons = getAllByRole('button');
+    expect(toggleButtons.length).toBe(options.length);
+    options.forEach((option, index) => {
+      expect(toggleButtons[index]).toHaveTextContent(option);
+    });
+  });
+
+  it('Should call onChange function when an option is selected', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const onChangeMock = jest.fn();
+    const { getAllByRole } = render(
+          <Switcher options={options} value={1} onChange={onChangeMock} />
+        );
+    const toggleButtons = getAllByRole('button');
+    fireEvent.click(toggleButtons[1]);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toHaveBeenCalledWith(expect.anything(), 2, undefined);
+  });
+
+  it('Should pass correct values to ToggleButton', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const value = 2;
+    const { getAllByRole } = render(
+          <Switcher options={options} value={value} />
+        );
+    const toggleButtons = getAllByRole('button');
+    options.forEach((option, index) => {
+      const toggleButton = toggleButtons[index];
+      expect(toggleButton).toHaveTextContent(option);
+      expect(toggleButton).toHaveAttribute('value', String(index + 1));
+    });
+  });
+});

package/package.json

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

package/source/components/Checkout/RadioCards/AdditionalServiceCard/ServiceCardWrapper.tsx

@@ -194,7 +194,7 @@ const ServiceCardWrapper = ({
             {deliveryCard && <VehicleDeliveryContent {...vehicleDeliveryContentProps} />}
           </label>
             {warrantyCard && warrantyName !== 'no-warranty' &&
-              <span className={styles.contentFooter}
+              <span className={styles.contentFooter} data-testid={'modal-button'}
                 onClick={() => onCheckoutModalClick(modalWarrantyProps)}>
                 {footerText}
                 <IconSVG className={styles.infoTransparent} name='infoIcon' customDimensions/>

package/source/components/Checkout/Switcher/Switcher.tsx

@@ -24,7 +24,7 @@ const Switcher = ({
 }: SwitcherProps) => {
 
   const onChangeSwitch = (event: React.SyntheticEvent) => {
-    onChange(event, +event.target.value, name);
+    onChange(event, +(event.target as HTMLInputElement).value, name);
   };
 
   return (

package/source/components/VehicleDetailedSidebar/partials/PriceContent.styl

@@ -110,4 +110,5 @@
   transform: rotate(180deg);
 
 .wrapper
-  padding-right: 15px;
+  +media-tablet-landscape-up()
+   padding-right: 15px;

package/source/components/VehicleDetailedSidebar/partials/PriceContent.tsx

@@ -94,7 +94,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
             </div>
           ) : null}
         </span>
-        <div>
+        <div className={styles.wrapper}>
           <PriceRating {...priceRatingProps} />
           <span className={styles.priceInfo}>
             <span className={styles.priceInfoLabel} onClick={onAdjustRateClick}>