@bytebrand/fe-ui-core 4.2.94 → 4.2.96

package/.gitlab-ci.yml

@@ -1,34 +1,62 @@
 stages:
-  # - build
+  - build
   - test
+  - deploy
 
 image: node:16.13.2-buster
 
-# ui-core-build:
-#   stage: build
-#   script:
-#     - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN_VALUE" >> .npmrc
-#     - sed -i s/npm_token_value/${NPM_TOKEN_VALUE}/ ./.npmrc
-#     - cat .npmrc
-#     - yarn install
-#     - yarn build:lib
-#   # only:
-#   #   - master
-#   tags:
-#     - 01gitlab-runner-gcloud
+before_script:
+  - "[[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh"
+  - source ~/.bashrc
+  - nvm use 16
 
-
-ui-core-test:
-  stage: test
+build:
+  stage: build
   script:
-    - "[[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh"
-    - source ~/.bashrc
-    - nvm use 16
     - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN_VALUE" >> .npmrc
     - sed -i s/npm_token_value/${NPM_TOKEN_VALUE}/ ./.npmrc
-    - yarn install
+    - yarn
+  cache:
+    paths:
+      - node_modules/
+  artifacts:
+    expire_in: 1 days
+    when: on_success
+    paths:
+      - node_modules/
+
+test:
+  stage: test
+  script:
     - yarn test:ci
-  only:
-    - master
+  cache:
+    paths:
+      - coverage/
+  artifacts:
+    paths:
+      - coverage/
+    when: always
+    reports:
+      junit:
+        - junit.xml
+      coverage_report:
+        coverage_format: cobertura
+        path: coverage/cobertura-coverage.xml
+  # only:
+  #   - master
   tags:
     - 01gitlab-runner-gcloud
+
+pages:
+  stage: deploy
+  dependencies:
+    - test
+  script:
+    - mkdir .public
+    - cp -r coverage/cobertura-coverage.xml .public/cobertura-coverage.xml
+    - mv .public public
+  artifacts:
+    paths:
+      - public
+  only:
+    - master

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

@@ -69,45 +69,46 @@ const mockProps = {
   requestedCars,
   getSupportedImageFormat: jest.fn(),
   redirectToCar: jest.fn(),
-  initHotjar: jest.fn()
+  // tslint:disable-next-line:object-shorthand-properties-first
+  initHotjar: () => {}
 };
 
 describe('RequestedCarsSection', () => {
   it('renders correctly', () => {
-    const { container } = render(<RequestedCarsSection {...mockProps} />);
+    const { container } = render(<RequestedCarsSection {...mockProps as any} />);
     expect(container).toBeInTheDocument();
   });
 
   it('should display correct car data', () => {
-    const { container } = render(<RequestedCarsSection {...mockProps} />);
+    const { container } = render(<RequestedCarsSection {...mockProps as any} />);
     const requestedCars = mockProps.requestedCars;
     requestedCars.forEach((element) => {
       expect(container).toHaveTextContent(element.buyingType);
     });
   });
   it('should display correct car make and model', () => {
-    const { getByText } = render(<RequestedCarsSection {...mockProps} />);
+    const { getByText } = render(<RequestedCarsSection {...mockProps as any} />);
     const requestedCars = mockProps.requestedCars;
     requestedCars.forEach((element) => {
       expect(getByText(`${element.car.mainData.make} ${element.car.mainData.model}`)).toBeInTheDocument();
     });
   });
   it('should display correct car subModel', () => {
-    const { getByText } = render(<RequestedCarsSection {...mockProps} />);
+    const { getByText } = render(<RequestedCarsSection {...mockProps as any} />);
     const requestedCars = mockProps.requestedCars;
     requestedCars.forEach((element) => {
       expect(getByText(`${element.car.mainData.subModel}`)).toBeInTheDocument();
     });
   });
   it('should display correct car request number', () => {
-    const { getByText } = render(<RequestedCarsSection {...mockProps} />);
+    const { getByText } = render(<RequestedCarsSection {...mockProps as any} />);
     const requestedCars = mockProps.requestedCars;
     requestedCars.forEach((element) => {
       expect(getByText(`${element.request}`)).toBeInTheDocument();
     });
   });
   it('calls redirectToCar with car ID on button click', () => {
-    const { getByTestId } = render(<RequestedCarsSection {...mockProps} />);
+    const { getByTestId } = render(<RequestedCarsSection {...mockProps as any} />);
     const carWrapper = getByTestId(mockProps.requestedCars[0].car._id);
     fireEvent.click(carWrapper);
     expect(mockProps.redirectToCar).toHaveBeenCalledTimes(1);

package/jest.config.js

@@ -40,4 +40,5 @@ module.exports = {
   "coverageDirectory": "__tests__/__snapshots__",
 
   "setupFilesAfterEnv": ["<rootDir>/setupTests.js"],
+  "coverageReporters": ["html", "text", "text-summary", "cobertura"],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.94",
+  "version": "4.2.96",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -89,6 +89,7 @@
     "babel-plugin-minify-dead-code-elimination": "^0.5.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "css-loader": "^3.2.0",
+    "jest-junit": "^15.0.0",
     "lodash": "^4.17.15",
     "mobx": "4.6.0",
     "mobx-react": "5.4.3",
@@ -116,7 +117,7 @@
     "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
     "build:story": "build-storybook",
     "test": "jest --watch",
-    "test:ci": "jest",
+    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
     "test:coverage": "yarn run test -- --coverage --watchAll=false || exit 0"
   },
   "author": "Maks Okhmatenko",

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

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

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

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

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -78,6 +78,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
   };
 
   componentDidUpdate(prevProps: IProps) {
+    console.log('VehicleDetailedSlider-works!');
     if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
       this.setState(() => ({
         largeLoaded: false,

package/source/components/_common/Modal/CookieModal.tsx

@@ -3,7 +3,12 @@ import useModal from '../../../framework/hooks/useModal';
 import { updateCookieList } from '../../../framework/utils/CommonUtils';
 import Modal from './Modal';
 
-const CookieModal = () => {
+
+export interface ICookieModal {
+  handleSentryInit?: () => void;
+}
+
+const CookieModal = ({ handleSentryInit }: ICookieModal) => {
   const { isVisible, toggleModal } = useModal();
   const [modal, setModal] = useState('');
 
@@ -13,7 +18,7 @@ const CookieModal = () => {
       if (!cookieConfig) {
         setModal('PREVIEW_COOKIE_MODAL');
         toggleModal();
-      } else setTimeout(() => { updateCookieList(); }, 3000);
+      } else setTimeout(() => { updateCookieList(handleSentryInit); }, 3000);
     },
     []
   );
@@ -30,6 +35,7 @@ const CookieModal = () => {
   return isVisible
     ? <Modal
         isVisible={isVisible}
+        handleSentryInit={handleSentryInit}
         toggleModal={toggleModal}
         name={modal}
         modalProps={modalProps}
@@ -37,4 +43,9 @@ const CookieModal = () => {
     : <></>;
 };
 
+
+CookieModal.defaultProps = {
+  handleSentryInit: () => {},
+};
+
 export default CookieModal;

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

@@ -6,11 +6,12 @@ import { BaseModalWrapper } from './Modal.styled';
 interface IBasicModal {
   isVisible: boolean;
   toggleModal: () => void;
+  handleSentryInit?: () => void;
   name: string;
   modalProps?: any;
 }
 
-const BasicModal = ({ isVisible, toggleModal, name, modalProps }: IBasicModal) => {
+const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
   const { onClearModalState } = modalProps;
   return (
     <Modal open={isVisible} onClose={() => {
@@ -18,7 +19,7 @@ const BasicModal = ({ isVisible, toggleModal, name, modalProps }: IBasicModal) =
       // onClearModalState();
     }}>
       <BaseModalWrapper>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal })}
+        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
       </BaseModalWrapper>
     </Modal>
   );

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

@@ -11,7 +11,12 @@ import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
 
 import styles from './ManageCookieModal.styl';
 
-const ManageCookieModal = ({ toggleModal }) => {
+interface IManageCookieModal {
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+}
+
+const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModal) => {
   const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
   const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
   const [analyticsSwitches, setAnalyticsSwitches] = useState({});
@@ -61,7 +66,7 @@ const ManageCookieModal = ({ toggleModal }) => {
       analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []
     };
     localStorage.setItem('cookieConfig', JSON.stringify(cookieConfig));
-    updateCookieList();
+    updateCookieList(handleSentryInit);
     toggleModal();
   };
 

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

@@ -2,19 +2,19 @@ import React from 'react';
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import styles from './PreviewCookieModal.styl';
-import classNames from 'classnames';
 import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
 
 interface IPreviewCookieModal {
   toggleModal: () => void;
+  handleSentryInit?: () => void;
   setModal: (value: string) => void;
 }
 
-const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
+const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPreviewCookieModal) => {
   const environment = window.location.origin;
   const onAcceptAll = () => {
     localStorage.setItem('cookieConfig', JSON.stringify({}));
-    updateCookieList();
+    updateCookieList(handleSentryInit);
     toggleModal();
   };
 

package/source/framework/constants/common.ts

@@ -40,6 +40,7 @@ export const COOKIE_SCHEMA = {
     _clsk: { name: 'Clarity' },
     _uetsid: { name: 'Microsoft-Werbeausrichtung' },
     _uetvid: { name: 'Microsoft-Werbeausrichtung' },
+    sentry: { name: 'Sentry' },
     ...GOOGLE_BUNDLE_COOKIES
   },
   marketing: {

package/source/framework/utils/CommonUtils.ts

@@ -21,6 +21,7 @@ declare global {
     grantCookieConsentClarity?: () => void;
     grantCookieConsentMicrosoft?: () => void;
     grantCookieConsentFacebook?: () => void;
+    grantCookieConsentSentry?: () => void;
     grantCookieConsent?: (list: string[]) => void;
     allowGoogle?: () => void;
   }
@@ -545,12 +546,13 @@ export function setUtmParameters() {
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${domain};path=/`;
 }
 
-export const updateCookieList = () => {
+export const updateCookieList = (handleSentryInit: () => void) => {
   let cookieConsentList = Object.keys(GOOGLE_BUNDLE_COOKIES);
   let isHomeGoogleGranted = true; // home page google cookie
   let isMicrosoftGranted = true; // Microsoft _uetvid _uetsid
   let isMicrosoftClarity = true; // Microsoft Clarity _clck _clsk
   let isFacebookGranted = true; // Facebook Clarity _fbp _f
+  let isSentryGranted = true; // Sentry
   let isHotjarGranted = true;
   const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
 
@@ -569,6 +571,7 @@ export const updateCookieList = () => {
       else if (cookie === '_uetvid' || cookie === '_uetsid') isMicrosoftGranted = false;
       else if (cookie === '_clck' || cookie === '_clsk') isMicrosoftClarity = false;
       else if (cookie === '_fbp') isFacebookGranted = false;
+      else if (cookie === 'sentry') isSentryGranted = false;
     });
   });
 
@@ -600,6 +603,12 @@ export const updateCookieList = () => {
   if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') {
     window.grantHotjarCookieConsent();
   }
+
+  // grant Sentry cookies
+  if (isSentryGranted) {
+    handleSentryInit();
+  }
+
 };
 
 // function returns decimal part of number with 2 digits