Тестирование

Тестирование позволяет убедиться, что код работает так, как задумано, и избавляет от утомительной отладки.

См. документацию Стартовые наборы: в ней описан простой способ настроить полностью готовую среду тестирования, которая отлично подходит для тестирования компонентов Lit.

Lit — это стандартная современная библиотека JavaScript, и для тестирования кода Lit можно использовать практически любой фреймворк для тестирования JavaScript. Существует множество популярных вариантов, в том числе Jest, Karma, Mocha, Jasmine, WebdriverIO и Web Test Runner.

Чтобы эффективно тестировать код Lit, убедитесь, что ваша среда тестирования поддерживает несколько важных возможностей.

Компоненты Lit предназначены для работы в браузере, поэтому тестирование следует проводить в браузерной среде. Инструменты, специально предназначенные для тестирования кода Node.js, могут не подойти.

Используемая вами среда тестирования должна поддерживать современный JavaScript, в том числе модули с голыми спецификаторами модулей, либо корректно преобразовывать современный JavaScript в более старый синтаксис. Подробнее см. в документации Требования для устаревших браузеров.

Для тестирования в старых браузерах среде тестирования потребуется загружать несколько полифилов, включая полифилы веб-компонентов и модуль polyfill-support из Lit. Подробнее см. в документации Полифилы.

Web Test Runner специально разработан для тестирования современных веб-библиотек, таких как Lit, с использованием современных веб-возможностей, например пользовательских элементов и Shadow DOM. Инструкции по началу работы см. в документации Начало работы с Web Test Runner.

Чтобы обеспечить поддержку старых браузеров, настройте Web Test Runner следующим образом:

Установите @web/dev-server-legacy:

npm i @web/dev-server-legacy --save-dev

Настройте web-test-runner.config.js:

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  /* ... */
  plugins: [
    // make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

WebdriverIO — хороший вариант для тестирования компонентов или сквозного тестирования. Он обладает рядом важных преимуществ, например поддержкой мокирования и создания отчётов о покрытии кода.

Настроить WebdriverIO в проекте можно с помощью команды:

npm init wdio@latest ./

Запустится мастер настройки, который задаст вам несколько вопросов. Убедитесь, что выбраны следующие варианты:

• Какой тип тестирования вы хотите выполнять?
  Тестирование компонентов или модульное тестирование — в браузере
• Какой фреймворк вы используете для создания компонентов?
  Lit

На остальные вопросы можно ответить по своему усмотрению.

Чтобы протестировать компонент, перед началом теста необходимо отобразить его на тестовой странице, а после теста — убедиться, что он удалён:

import { expect, $ } from '@wdio/globals'

// Component.ts contains the <simple-greeting> component implemented the same as:
// https://lit.dev/docs/components/overview/
import './components/Component.ts'

describe('Lit Component testing', () => {
    let elem: HTMLElement

    beforeEach(() => {
        elem = document.createElement('simple-greeting')
    })

    it('should render component', async () => {
        elem.setAttribute('name', 'WebdriverIO')
        document.body.appendChild(elem)
        await expect($(elem)).toHaveText('Hello, WebdriverIO!')
    })

    afterEach(() => {
        elem.remove()
    })
})

Дополнительную информацию о проверках элементов, поиске элементов в Shadow DOM и других возможностях см. в документации WebdriverIO.

Изменить эту страницу