Explicit html id based parsing for non-prod invironment

[dhilt]

1. Все инструкции вида wrapper.find('h3').text() должны быть заменены на поиск по id. Для этого нужно разбросать по разметке id-атрибуты вида id="dharmadict.test.TranslatorPage.name" (это конкретно пример для <h3>{translator.name}</h3> из компонента TranslatorPage).

2. Нужно дополнить prod-сборку процедурой по вырезанию из разметки всех id-атрибутов, начинающихся с "dharmadict.test."

[dyuvzhenko]

@dhilt Пока что никак не могу смекнуть как из prod-сборки из id убирать "dharmadict.test".

[dhilt]

@BitDen Посмотри https://stackoverflow.com/questions/43934210/remove-html-attribute-in-production-build и в частности https://www.npmjs.com/package/babel-plugin-react-remove-properties возможно наш случай.

Хотя, глядя на это более подробно, может быть имеет смысл переделать это с простого id на test-id. Тогда подойдет и https://www.npmjs.com/package/babel-plugin-react-remove-properties https://www.npmjs.com/package/babel-plugin-remove-object-properties. И значение будет проще:

  <h3 test-id="TranslatorPage.name">{translator.name}</h3>

[dyuvzhenko]

@dhilt Так, в общем начал пытаться применить вышеописанные библиотеки (что показывает возможно в корне неверный код в webpack-конфиге) и столкнулся собственно с тем, что при prod-сборке проекта тег test-id исчезает сам собой. Но в тестах, и при запуске dev-сервера консоль начинает бросать ошибки Unknown prop 'test-id' on <h1> tag (которые вроде не мешают приложению продолжать работать). Вероятно, эти библиотеки по удалению/изменению id не понадобятся? Сделал небольшой пример как это все выглядит с NotFound - https://github.com/dhilt/dharmadict/commit/199d25abfe8b22836e4e55d364bba2c46659a2e9.

[dyuvzhenko]

И пока что остается загадкой, как бы в отдельном порядке тестировать <FormattedMessage />. test-id ему передать не выходит, также как и обычный id.

[dhilt]

@BitDen Попробуй заменить на data-test-id. Атрибуты, начинающиеся с data-, должны считаться валидными. И из тестов нужно убрать привязку к тегу, оставить только атирибут, то есть [test-id="NotFound.headind"] вместо h1[test-id="NotFound.headind"]. Это возможно?

[dyuvzhenko]

@dhilt Заменил, все валидно и здорово - https://github.com/dhilt/dharmadict/commit/55aedc2d767b4dd8251272174084e397ea88b758. И может нет смысла писать в data-test-id название компонента? В тестах мы компонент загружаем по одному и путаницы с одинаковыми id с разных компонентов быть не должно. Писать [data-test-id="heading"] можно, и на примере TranslatorPage (https://github.com/dhilt/dharmadict/commit/55aedc2d767b4dd8251272174084e397ea88b758) можно без указания тега находить все нужные теги по data-test-id. Но такие дела почему-то не работают со ссылкой, тегом <a/>. Тесты заявляют что находят сразу два элемента, хотя в верстке data-test-id навешен только ссылке.

[dyuvzhenko]

@dhilt Ну и да, как я говорил, код в webpack'e оказался неверным, над этим предстоит еще поломать голову похоже.

[dhilt]

@BitDen Нужно исследовать, какие именно два находятся в тесте. Возможно это все же кусок дочернего компонента?

Кроме этого, я конечно не против сокращения значения data-test-id, если у нас тестирование идет покомпонентно. Я просто мыслил полноценным end-to-end, где движок ходит по сайту, полностью эмулируя действия пользователя. В этом случае без привязки к компоненту (экрану, либо другой "большой" сущности) может быть трудно.

Так а что у нас со сборкой не так? В чем это выражается?

@dhilt С webpack'ом дел пока не имел и не могу догадаться как библиотеку (https://www.npmjs.com/package/babel-plugin-react-remove-properties) корреткно использовать, чтобы data-test-id убрать из prod-сборки.

[dyuvzhenko]

@dhilt Если после отдельного покомпонентного тестирования еще будем делать и какое-то общее полноценное, разгуливающее по всему веб-приложению тестирование (так я пока что себе представляю end-to-end), то конечно переименую обратно.

[dhilt]

@BitDen Нет-нет, не будем. Там пока не по чему разгуливать! Меня торопят с выдачей админских доступов, это означает, что мы больше не сможем накатывать db-reset, все операции сохранения/восстановления будут только через снапшоты. Но перед этим я хочу еще потратить время и убедиться в достаточной безопасности для Системы в плане администрирования третьими лицами. Это мой план на ближайшее время. К этому моменту мы должны также завершить работу по тестированию front end хотя бы в первом приближении. Мне кажется, это конец следующей недели.

[dyuvzhenko]

@dhilt Покомпонентное тестирование, которое начал сейчас делать - можно пожалуй быстро за пару дней сделать, если собраться. Есть только две заминки. Первая, как я уже сказал - не могу догадаться как бы библиотеку по убиранию data-test-id в webpack вписать. И вторая заминка - не выходит импортировать в тесты компонент Home (и еще некоторые), из-за импорта внутри компонента вида:

import logoPath from '../styles/images/manjushri_175x226.jpg'

[dyuvzhenko]

@dhilt И нужно внимательно протрясти сервер на предмет корректного Promise. В некоторых местах сыпались ошибки вида Unhandled error ....

[dyuvzhenko]

@dhilt Решение проблемы с импортом картинок вроде как решил - https://github.com/dhilt/dharmadict/commit/bbb1bf7e25e8f0a53b3cbf1aa062408cca78c59c. Ошибки теперь не падают, но с другой стороны и проверки картинки в src пока нет.

[dyuvzhenko]

@dhilt Добавил убирание объекта 'data-test-id': https://github.com/dhilt/dharmadict/commit/44570674291fc088eb9a2369f316d1690683496e. Может стоит и при не prod-сборке убирать этот объект? Тесты все равно проводятся независимо от сборки через webpack.

[dhilt]

@BitDen Пусть будут! Спасибо.