Задать вопрос

camelCaseVlad

Ответы

  • Как выбрать e2e & unit testing framework для приложения на React?

    @camelCaseVlad
    Хай! Вчера весь день писал юнит тесты после рефакторинга и поэтому внесу свой вклад.

    Для юнит тестов используем Jest, создание снапшотов заметно упрощают тестирование UI.

    е2е выполнен в Сайпресс. У нас в команде е2е тесты пишет тестер, и он и остальные тестеры в компании не нарадуются им.
    Ответ написан
    3 комментария
    3 комментария

  • Передача анонимной функции в компонент?

    @camelCaseVlad
    Две копейки от себя. По моему мнению, написанная вами функция в правильном исполнении должна выглядеть следующим образом:

    const YourComponent = ({ changeOrder }) => (
   <Input
     onChange={(event) => changeOrder(prop1, event)
     // остальной код
 />
)

const mapStateToProps = () => {
  return {
    // нужный стейт
  }
} 

const mapDispatchToProps = (dispatch) => {
  return {
    changeOrder = (prop1, prop2) => dispatch(changeOrder(prop1, prop2)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);
    Ответ написан
    1 комментарий
    1 комментарий

  • Отключить плагин на мобильном?

    @camelCaseVlad
    Можно использовать данный код, отсюда

    function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};


    Я быстренько проверил его на десктопе (Firefox 68.0.1 iOs) и на мобильном (Safari iOs), и все работает.

    Браузер на десктопе
    5d46bcc154250845165913.png

    Браузер на мобильном
    5d46bd1024a42318289643.png
    Ответ написан
    Комментировать
    Комментировать

  • Как поднять вверх svg иконку?

    @camelCaseVlad
    Привет, один из вариантов решения проблемы, это обернуть параграф и СВГ в div и добавить на него display: flex

    <div class="step-info__item">
  <div class="info-contaner">
    <div class="state-duty" style="display: flex">
          <p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">Госпошлина</p> 
    <svg class="info-icon" style="margin-right: 5px;margin-left: 7px!important;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
      <defs>
           <path id="nto3a" d="M1092.17 807.4a8.58 8.58 0 1 1-17.16 0 8.58 8.58 0 0 1 17.16 0zm-6.65 4.12a2.52 2.52 0 0 1-.82.19c-.29 0-.49-.05-.6-.14-.12-.1-.18-.27-.18-.53a5.66 5.66 0 0 1 .17-.99l.56-1.95a5.68 5.68 0 0 0 .14-1.04c0-.4-.15-.74-.43-1a1.8 1.8 0 0 0-1.23-.38c-.3 0-.6.05-.94.16-.33.1-.68.23-1.04.38l-.14.6.38-.13c.15-.04.3-.06.44-.06.3 0 .49.05.6.14.1.1.14.28.14.52 0 .14-.01.3-.04.46l-.13.54-.55 1.95a6.1 6.1 0 0 0-.14 1.03c0 .4.15.73.44 1 .3.25.72.38 1.25.38.35 0 .65-.04.92-.14.26-.09.61-.22 1.05-.4zm.14-8.17c0-.34-.13-.63-.38-.87a1.3 1.3 0 0 0-.93-.36c-.36 0-.67.12-.93.36s-.39.53-.39.87c0 .34.13.63.39.87.26.23.57.35.93.35.36 0 .67-.12.93-.35.25-.24.38-.53.38-.87z"></path>
      </defs>
       <g>
        <g transform="translate(-1075 -798)">
             <use fill="#dadada" xlink:href="#nto3a"></use>
        </g>
      </g>
    </svg>
    </div>
    <div class="info-window">
Текст подсказки
     </div>
                 </div>
<p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">-</p> 
<span class="costs-p__strong costs-p--gos" onchange="handleChange(this)">  4 000 ₽</span></div>


    https://jsbin.com/baguhinaqu/edit?html,output
    Ответ написан
    Комментировать
    Комментировать