В своей предыдущей статье я продемонстрировал, как поддерживать уникальный набор идентификаторов. Хотя это очень полезно, мы можем пойти дальше и включить TypeScript IntelliSense, чтобы повысить производительность написания тестов и снять часть стресса, связанного с подверженным ошибкам копированием и вставкой.

Использование «константных утверждений» в TypeScript

В TypeScript 3.4 константные утверждения были добавлены как новая динамическая функция, которая позволяет нам определять строковые литералы только для чтения из массива.

Используя этот новый синтаксис TypeScript (не забывайте as const), мы можем экспортировать строковый литерал, полученный из нашего массива. Что это означает? Проще говоря, если мы добавим тип CyId к строковому параметру, значения входных параметров будут ограничены только теми, которые указаны в массиве id, который мы определили. Когда мы используем тип CyId, мы можем использовать только значения my-button и my-other-button (или любые другие значения, которые мы добавляем в массив). В В следующем разделе я объясню, насколько это может быть полезно.

Пишите быстрее и с меньшим количеством ошибок - IntelliSense

В этом коде выше я создал простую функцию под названием «myExample», которая принимает CyId в качестве параметра. Когда я перейду к функции, VSCode IntelliSense будет знать, что CyId представляет собой строковый литерал, а предложит значения, которые вы можете использовать. Теперь вы можете использовать IntelliSense для поиска идентификатора, если вы не можете вспомнить точную строку, которую вы использовали.

Если я попытаюсь вызвать функцию со значением , которое отсутствует в массиве идентификаторов, TypeScript отметит это и сообщит мне, что у меня недопустимое значение . Таким образом, мы можем быть уверены, что ввели действительный идентификатор. Больше никаких опечаток при вводе тестовых идентификаторов 👍.

Связывание в кипарисе

Теперь, когда у нас установлен тип CyId, давайте посмотрим, как мы можем использовать его с Cypress.

Здесь я создал функцию-оболочку, которая позволяет нам ограничивать строковые вводы теми, что находятся в массиве id, используя тип CyId. Это также сделает наш код чище за счет рефакторинга шаблонного ‘[data-cy = $ {}]« из всех наших тестов.

Теперь, если мы находимся в тестовом файле, когда мы выбираем наш элемент с помощью Cypress, у нас будет замечательный IntelliSense, который поможет нам, когда нам нужно вспомнить наш тестовый идентификатор. Больше не нужно переключаться между файлами и поиском, TypeScript и VSCode сообщают вам об этом прямо сейчас!

Заключение

Можно сделать гораздо больше, чтобы писать тесты еще чище и быстрее, но я не хотел перегружать читателей в этом посте. По мере того, как я продолжаю создавать свой собственный набор Cypress Test, я буду продолжать делиться своими выводами.

Со всеми накладными расходами, которые TypeScript может добавить к проекту, приятно использовать его так, как он был задуман, и заставить его работать на нас! Удачного кодирования!

Дополнительную информацию можно найти на plainenglish.io