Компоненты используются для удобного рендеринга и управления многократно используемыми элементами DOM. В этом уроке мы проверим несколько свойств CSS и DOM NumberPickerComponent.
Тестовый случай 1, 2
Сначала мы проверим, правильно ли настроены классы CSS для элемента #parentDiv относительно переменной isValueValid. Чтобы получить список классов для элемента div, мы использовали базовый метод Javascript. Причина проверки обоих условий isValueValid состоит в том, чтобы увеличить покрытие кода и надежность.
Тестовый пример 3, 4
Помимо проверки класса CSS, иногда нам нужно убедиться, что само свойство CSS настроено правильно. Чтобы проверить свойство CSS элемента DOM, нам нужно вызвать fixture.debugElement, чтобы запросить элемент с идентификацией. Для составления запроса воспользуемся методом By.css() из angular/platform-browser. Он принимает селекторы CSS в качестве параметра и возвращает DebugElement(s). Если вы выбираете элементы по имени класса или атрибута, вам нужно использовать метод queryAll(), если только по идентификатору, query().
Тестовый случай 5, 6
В конце мы смоделируем действие события для элемента input и проверим количество элементов DOM для листинга. В следующем примере моделирования событий можно применять все виды триггеров событий — click, keyup, keydown и т. д.
Как упоминалось в предыдущих тестовых примерах, мы будем использовать By.css()query для выбора элементов DOM по имени класса и проверки их количества.
Для детального анализа полный исходный код проекта находится на Github.
Комментарии и предложения приветствуются.
