-
Notifications
You must be signed in to change notification settings - Fork 2
Test front end #32
Comments
@dhilt У меня пока что нет ни малейшего понимания как тестировать front end. Но я так понимаю главной целью будет протрясти все существующие actions и то, как должен выглядеть reducers после actions? Как тестировать внешний вид или какое-то пользовательское взаимодействие с UI - совсем не представляю. |
@dhilt И собственно где в файловой структуре должны будут писаться эти тесты. Возможно в самой верхней папке ./test по соседству c back end? Допустим, создадим папку ./test/frontend, далее создадим |
@dhilt Больше всего я пока что уверен только в том, что весь тестирующий код должен как-то запуститься именно в браузере. Как если бы написали весь этот код и просто за-inject'или в html-страничку. |
@bitden На сервере мы используем mocha+chai, на клиенте я бы посмотрел в сторону jest+chai. Надо брать готовую инфраструктуру, посмотри https://blog.logrocket.com/testing-react-applications-part-1-of-3-ebd8397917f3 например... |
@dhilt Пока что сделал только первый бессмысленный тест - bdfe2b7. Jest'а там пока нет, но двигался я по документации от этой библиотеки - http://facebook.github.io/jest/docs/en/tutorial-react.html#content. |
@dhilt Нужно как-нибудь в пределах frontend-тестов создавать store, чтобы можно было connect проводить к компонентам в тестах. |
@dhilt Кажется нашел подход к этому вопросу - http://redux.js.org/docs/recipes/WritingTests.html. |
@dhilt Сделал первый вроде бы вменяемый образец тестирования actions и отражения данных в redux - 803f89f. |
@bitden Я надеюсь сегодня-завтра добраться до кода, рад, что у тебя получается! главное, следовать устоявшимся практикам |
@dhilt Хотя с этим имитированием запроса запутался, может это и неверный сам по себе тест. В общем, тут нужно экспертное мнение :) |
@bitden Это все звучит очень обнадеживающе! я еще не смотрел эту часть, надеюсь, скоро добраться |
@dhilt Ну, лучше не торопитесь, еще есть некоторые нюансы которые надо доделать. Сейчас вот понял в чем была проблема о которой говорил. Жаловался на nock и якобы неправильное имитирование запроса на сервер, на самом деле я просто по глупости подсовывал пустой state в коде и функции, которые по идее берут данные внутри себя с помощью getState, оставались ни с чем. |
@dhilt Хотя вру, нужно еще кое-что сделать :) |
@dhilt Хотя нет, не врал, наверное все же сделал все что мог. |
@bitden Я начал смотреть тесты, работа проделана большая... Для того, чтобы запускаться под Win, я перевел работу с окружением на cross-env, это потребует npm install перед следующим запуском. Также подготовил global.window.localStorage для работы в тестовом окружении, пока через выставление объекта в _shared, который импортируется теперь всегда первым. У меня вопрос: как выставить последовательность выполнения спек (наподобие mocha.opts)? |
@dhilt Вроде как всю документацию просмотрел, погуглил, но ничего не нашел на этот счет. Нашел только ключ |
@dhilt Работа может и большая, но очень возможно по части имитации асинхронного запроса на сервера с помощью nock - совершенно бесполезная. |
@bitden Мне очень понравилась концепция тестирования actions, поскольку там сосредоточена бизнес-логика, и с этой позиции имитирование fetch'ей делает это полноценным: мы полностью проходим каждый отдельный action creator как независимую часть бизнес-логики приложения. |
@dhilt С самой концепцией тестирования все в порядке, я говорю о реализации. Есть пока что много сомнений насчет nock, правильно ли написан код, связанный с ним. Нужно наверное поподробнее эту библиотеку поизучать. |
@dhilt Насчет nock'а ошибался, проблемы были с созданием store.
После подобного кода ожидалось что в store отразятся новые данные после трех dispatch'ей, но там увы ничего не было. Но
|
@dhilt Это всё в общем означает что по части асинхронных actions все тесты какие есть написаны неверно и бессмысленно. Буду думать как бы иначе store инициализировать, чтобы после dispatch'ей все данные отражались в state. |
@dhilt Судя по всему библиотека |
@dhilt Значит у меня остается только один вопрос насчет тестов. Следующий код будет считаться подходящим?
|
@bitden Ты бы не мог в рамках этой задачи разобраться с Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs ? Я бы ввобще ликвилировал все эти проверки на PropTypes. И можно ли вынести конфигурацию jest в, скажем ./test/frontend/jest.config.js? |
@dhilt Да, с PropTypes конечно же попробую разобраться, это так и так было в планах, просто временно сосредоточился исключительно на тестах и забросил эти предупреждения. |
@bitden Можно, главное чтобы приложение работало так же, как раньше. Чем свежее stable версия используемого пакета, тем лучше. |
@dhilt Немного обновил версии библиотек - 6efde5e. И у меня зародилось ощущение, будто с каждым моим обновлением библиотек в package-lock.json добавляется куча Но проблемы с предупреждениями по PropTypes и createClass остались. И как я понял, проблема в библиотеке react-bootstrap (по крайней мере если проследить по стек-трейсу через браузерную консоль откуда сыпется ошибка, я оказывался в дебрях именно bootstrap'а. Ну, и если из components/App убрать компоненты, содержащие react-bootstrap, все становится здорово). Обновил react-bootstrap - предупреждения не пропали. Или возможно какая-то другая библиотека испольует необновленный bootstrap, надо еще пошерстить это все. |
@bitden Я знал, что дело в Бутстрапе и я рад, что тебе удалось разобраться с этим. С package-lock.json я поступаю периодически таким образом: удаляю node_modules и package-lock.json и выполняю npm install. Я пока еще не очень доверяю package-lock.json, и когда в package.json происходят хоть сколько-нибудь серьезные изменения, я полностью обновляю все зависимости. Сейчас я делаю то же самое и буду смотреть, как оно прижилось. |
@dhilt Я тут кстати вспомнил, что хотел весь сервер тщательно протрясти на предмет корректных reject/resolve (консоль ругалась что reject'ы не обрабатываются должным образом или что-то вроде того) еще после создания тестов на actions. И плюс мы хотели CRUD-методы организовать. Может стоит сейчас породить бранч |
@dhilt Ну и параллельно в бранче |
@bitden Я сделал мерж в мастер. До конца недели я планирую закончить review по функциональной части, не трогая тестирование. Ты можешь продолжать работу вне мастера. |
@dhilt Могу продолжать работу именно по тестированию, или по двум направлениям, которые описал? |
@bitden Это на твое усмотрение. Основные работы я считаю законченными, и мне надо привести это в порядок, хотя бы в собственной голове. |
@dhilt Мне кажется еще не хватает одной детали. Сейчас на клиенте только админ может менять описание/имя/язык у переводчика. Может стоит такие права дать и самому переводчику? |
@bitden Нет, этого делать надо. Все подобные изменения должны проходить через Админа. |
@dhilt Хорошо, не буду. |
@dhilt Так, вроде бы дописал все тесты для клиента. Только компоненты Login и Languages не до конца поддались тестированию. В Login'е не выходит нащупать по data-test-id все элементы из modal'а. Languages же не показывает функцию onSelected, чтобы отработать в тестах нажатие кнопки по смене языка. И возможно еще есть какие-то несущественные мелочи в других спеках, еще буду смотреть, проверять это все. Не хватает для полноты картины только тестирования роутов, и проверки на то, может ли текущий пользователь смотреть на роут |
@dhilt В общем почти дописал более внятную версию тестов для компонентов в бранче Сам проект собственно еще живой как таковой? Как вижу dharmadict.ru не работает, да и вы затаились) |
Спасибо за сообщение! Я отправил репорт владельцу хостинга с вопросом. Я
зашел в репозиторий и увидел
We found a potential security vulnerability in one of your dependencies.
The tar
<https://github.com/dhilt/dharmadict/blob/a560d34e409e19f9d429f6e1fe57a92df008d2b6/package-lock.json>
dependency
defined in package-lock.json
<https://github.com/dhilt/dharmadict/blob/a560d34e409e19f9d429f6e1fe57a92df008d2b6/package-lock.json>
has
a known moderate severity security vulnerability in version range < 2.0.0and
should be updated.
Покопав немного это дело, я увидел, что старый tar тянет за собой пакет
surge. Не мог бы ты разобраться, зачем он нужен и удалить его из проекта,
если он не нужен? или повысить версию, если это закроет проблемы с таром;
но лучше удалить, и вообще попробовать зачистить зависимости, убрать
неиспользующиеся.
Из новостей, я недавно выпустил angular-ui-scroll v1.7.0, в который входит
твоя работа по Webpack.
2017-12-11 9:39 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> В общем почти дописал более внятную
версию тестов для компонентов в бранче test-frontend-2, осталось только с
Login.spec.js разобраться и все будет готово.
Сам проект собственно еще живой как таковой? Как вижу dharmadict.ru не
работает, да и вы затаились)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#32 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXNFsNkWYBnXAfgmE5920KlDCF3-vks5s_M4IgaJpZM4Pzc1W>
.
--
Алексанов Д.И.
|
@dhilt Убрал зависимости, которые нигде не используются - 2c87a01. Насчет следующих двух пакетов не уверен, с их удалением возможно погорячился, но тем не менее сборка удалась и все работает.
|
@dhilt И поздравляю с новой версией angular-ui-scroll 👍 |
Отличная работа! На счет тестов, я ближайшие дни не смогу посмотреть. И у
меня вопрос, не хочешь ли посмотреть на порт скроллера для Angular 2+
https://github.com/dhilt/ui-scroll? Я набросал базовую имплементацию, она
работает в виде компонента. Но я хотел бы перевести это с компонента на
директиву с синтаксисом, близким к ngFor. Для этого я создал бранч 'dir',
сделал пару комитов (вот здесь
<https://stackoverflow.com/questions/47362119/angular-structural-directive-wrap-the-host-element-with-some-another-component>,
например, я исследовал вопрос, как можно директивой оборачивать
компоненты), но мне пришлось остановиться. В общем, я хочу, чтобы заработал
синтаксис
<div *uiScroll="let item of datasource">
<b>{{item.text}}</b>
</div>
(или нечто близкое к этому) вместо того, что сейчас в мастере. Бери код
сразу с 'dir', там обновлены зависимости, Ангуляр поднят до 5 версии...
2017-12-11 17:38 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Убрал зависимости, которые нигде не
используются - 2c87a01
<2c87a01>
.
Surge, как я понял, используется для деплоя на сервер, и если вы его не
использовали в этих целях, видимо он лишний в зависимостях.
Также убрал ava и ava-redux, которые по-видимому должны применяться для
тестирования как аналог mocha.
Пакет react-addons-test-utils должен был применяться при чистом
тестировании с помощью jest, но поскольку все тесты компонентов
выстроились на enzyme, тот пакет как бы лишний. Забыл его удалить похоже,
пока искал подходы и библиотеки для тестирования компонентов.
Пакеты snazzy и standard предназначены для красивого вывода в консоль, но
вроде как нигде их не применяли и не собирались.
Насчет следующих двух пакетов не уверен, с их удалением возможно
погорячился, но тем не менее сборка удалась и все работает.
1. Пакет bcryptjs похоже подразумевался для создания хешей и прочих
штук, связанных с шифрованием или чего-то в этом роде. Но у нас в проекте
вроде как есть passwordhash для таких дел. И почему этот пакет лежит
не в ./prod-директории...
2. Назначение пакета btoa, честно говоря, не до конца понимаю пока.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#32 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXP8ATLqEQ6jV1afVSShsLlHv7uP_ks5s_T5MgaJpZM4Pzc1W>
.
--
Алексанов Д.И.
|
@dhilt Конечно же хочу посмотреть. Завтра постараюсь разобраться в коде, что, где, и как. |
Ну да, сделай форк для начала, если будет толк и желание, я добавлю тебя в
коллабораторы. Посмотри сперва рабочий вариант с компонентом. Если в бранче
'dir' не получится запустить версию с компонентом (т.к. там сейчас игры с
директивой), то можно в мастере обновить зависимости, чтобы они
соответствовали 'dir' и смотреть, как работает компонент в мастере.
2017-12-11 20:02 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Конечно же хочу посмотреть. Завтра
постараюсь разобраться в коде, что, где, и как.
Мне значит делать форк, и там пытаться делать что-либо с кодом?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#32 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXJnaI03W8My7A0EsuxLZmufLJfFtks5s_WAygaJpZM4Pzc1W>
.
--
Алексанов Д.И.
|
@dhilt Желание то есть всегда, а вот насчет толка не шибко уверен. |
Давай обсуждать моменты вместе! это важный проект, но у меня сейчас нет на
него времени. Если удастся довести его до ума, скорее всего он будет
включен в angular-ui так же, как и предыдущая версия (angular-ui-scroll).
Сейчас главная задача: выработать правильную конвенцию по конечному
использованию, и я считаю, что это должно быть а-ля ngFor.
2017-12-12 11:32 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Желание то есть всегда, а вот насчет
толка не шибко уверен.
В любом случае сделал форк, еще нужно будет мне вспомнить все эти сущности
из angular'а и как они работают вместе и начну пытаться что-то сделать. И
думаю это может затянуться надолго.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#32 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXBaklD0O0uqhFNDqrpn7wJ7moPrtks5s_joxgaJpZM4Pzc1W>
.
--
Алексанов Д.И.
|
@dhilt Чтобы обсуждать всяческие моменты, нужно понимание всего процесса - с этим дела все еще плохи) |
Создай в своем форке issue, давай перенесем обсуждение туда. Я правильно
понимаю, что ты сейчас смотришь на мастер и пытаешься понять, как работает
исходный компонент (UiScrollComponent)?
2017-12-15 12:18 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Чтобы обсуждать всяческие моменты,
нужно понимание всего процесса - с этим дела все еще плохи)
Пока что думаю над надобностью тега <ng-content></ng-content> в template,
у ui-scroll.component.ts. Вроде как этот тег просто передает содержимое,
вложенное в тег с директивой *uiScroll (сейчас как я понимаю с ng-content
можно получить всего одну строку на ui-scroll.component.ts, а не массив с
данными, которые можно скроллить). А по затее, наверное, то что вложено в
тег с директивой, должно просто показывать как пользователь этой библиотеки
хочет отображать данные в одной строке из многих в скроллере. Ну и что-то
вроде *ngFor должно быть наверное на ui-scroll.component.ts, а не на
app.component.ts. Воот, это пока первые мысли, возможно не очень понятные.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#32 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXPyNFUu7h9cxEH6e67tdMCb0pWrQks5tAjlUgaJpZM4Pzc1W>
.
--
Алексанов Д.И.
|
@dhilt Issue создал - dyuvzhenko/ngx-ui-scroll#1. |
Обсуждение
The text was updated successfully, but these errors were encountered: