Существует ограниченное готовое решение для тестирования веб-компонентов, например wct. Однако мне удалось создать гораздо более простую настройку с помощью lit-html , open-wc, karma. Вот как выглядит мой package.json
Шаг 1. Настройка кармы
Karma необходимо обновить с помощью загрузчиков файлов для обработки модулей es6. karma.conf.js войдет в корень вашей папки
2. Тестовый код
а) Тестирование функциональных компонентов: функциональные компоненты используются только для представления и не управляют собственным внутренним состоянием.
Например, давайте протестируем эту видеокарту
Он включает в себя изображение, заголовок, рейтинги и дату.
поэтому мой ввод будет объектом json с вышеупомянутыми свойствами. Код веб-компонента для карты фильма выглядит следующим образом
Изображения поступают с tmdb ui.
Давайте создадим наш файл movie-card.test.ts.
Сначала импортируйте все необходимые зависимости
import { html, fixture, expect,} from '@open-wc/testing'; import './movie-card.js';
Вот наш пример ввода
Давайте начнем наши модульные тесты, мы будем использовать mocha для тестового языка и фикстуру из open-wc для рендеринга компонента. Мы также будем использовать синон для заглушек и подделок.
Как видите, я создал псевдо-рендерер внутри ‘el’.
Перейдем к реальным тестам
- Проверьте, имеет ли карточка правильный рейтинг фильма
Мы будем тестировать следующую строку с заданным вводом
<div class="movie__rating">${movie.vote_average}</div>
Наш тестовый пример выглядит следующим образом
- Получите элемент или shadowRoot из средства визуализации приспособления. Я в основном тестирую теневой рендерер
- проверить, содержит ли элемент ожидаемый вывод
it('has a proper movie rating', async () => { //const el = await fixture('<movie-card></movie-card>'); el.movie = MOVIE_INPUT; const movieRating = el.shadowRoot.querySelector('.movie__rating'); expect(movieRating.innerHTML).to.equal('7.2'); });
Таким образом, мы ожидаем, что рейтинг фильма будет 7,2, поэтому, согласно нашим данным, тестовый пример должен быть успешным. Вы можете попробовать, предоставив другой ввод.
Теперь запустите npm run test
, чтобы проверить покрытие.
2. Проверьте правильность названия фильма
<h3 class="movie__title">${movie.title}</h3> it('has a proper movie title', async () => { el.movie = MOVIE_INPUT; const title = el.shadowRoot.querySelector('.movie__title'); expect(title.innerHTML).to.equal('Aladdin'); });
3. Проверьте, есть ли правильный постер фильма
<img src="${posterUrl}" alt="${movie.title}"> it('has a proper movie poster', async () => { el.movie = MOVIE_INPUT; const poster = el.shadowRoot.querySelector('.movie__poster > img'); expect(poster.src).to.equal('https://image.tmdb.org/t/p/w500/3iYQTLGoy7QnjcUYRJy4YrAgGvp.jpg'); });
4. Минус: в чеке нет афиши фильма
<img src="${posterUrl}" alt="${movie.title}"> it('has a NO movie poster', async () => { delete MOVIE_INPUT.poster_path; el.movie = MOVIE_INPUT; const title = el.shadowRoot.querySelector('.movie__poster > img'); expect(title.src).to.contain('no-poster.png'); });
Итак, мы подошли к концу, чтобы протестировать наш веб-компонент презентации, в следующей части мы перейдем к тестированию компонентов с отслеживанием состояния и, что наиболее важно, к тестированию пользовательских событий.
Вот наш окончательный код
Перейти ко второй части серии
Вы можете проверить полный код здесь по адресу https://github.com/inms-adarsh/movie-app-webc, а демо — по адресу https://movie-app-892c6.firebaseapp.com/.