У нас есть библиотека разработки пользовательского интерфейса, состоящая из виджетов, построенных на основе Angular JS.Давайте в качестве примера выберем «header-widget» - контейнер заголовков, созданный с помощью Angular JS, но с особыми функциональными возможностями, если он есть.
Скажем, HTML-код этого виджета будет выглядеть так:
<header class="my-header">
<div ng-if="configuration.hasTitle">
<h1 class="my-header-title-text">
<span class="my-header-title-text">This is a main title</span>
<span class="my-header-subtitle-text">This is a subtitle</span>
</h1>
</div>
</header>
Я могу создать юнит / интеграционный тест, используя Karma, т.е. в один момент у меня будет что-то вроде этого:
element = angular.element("<header config=\"config\"></header>");
$compile(element)(myScope);
myScope.$digest();
expect(element.find(".my-header-title-text").text().trim()).toBe("This is a main title");
, и я могу создать сквозной тест с использованием Protractor, т.е. в одной точкеУ меня будет что-то вроде этого:
describe('Some end to end spec', function () {
it('should have the right title', function () {
let title = element(by.css(".my-header .my-header-title-text"));
expect(title.getText()).toMatch("This is a main title");
});
});
Предположим, разработчики меняют заголовок, и новый класс для заголовка становится "my-header-MAIN-title-text".Я должен был бы пойти во все места в модульных / интеграционных тестах, а также в сквозных тестах, чтобы исправить это.
(Ради этого примера изменение тривиально и теоретически может быть заключено в капсулуимея селекторы в отдельных файлах, но на практике я говорю о более значительных изменениях в структуре DOM этих виджетов и т. д.)
Я хочу построить тестовую библиотеку - как тестовый API - поверх виджетов,Слой инкапсуляции, который будет предлагать мне такие вещи, как header.getTitle () и header.getSubtitle () - которые я могу использовать как в юнитах / интеграциях (Карма), так и в сквозном мире (Protractor).Таким образом, если произойдет изменение, подобное упомянутому выше, я должен пойти в одном месте, исправить реализацию "header.getTitle", и ни один из тестов не должен заботиться.
Для этого, Я создал что-то вроде этого (с использованием TypeScript):
import $ from "jquery";
export class MyHeaderImpl implements MyHeadear {
private selector;
constructor(element) {
this.selector = $(element);
}
getTitle(): string {
return this.selector.find(".my-header-title-text").text().trim();
}
getSubtitle(): string {
return this.selector.find(".my-header-subtitle-text").text().trim();
}
}
Он отлично работает для моих юнит / интеграционных тестов (Карма):
element = angular.element("<header config=\"config\"></header>");
$compile(element)(myScope);
myScope.$digest();
const header = ComponentFactory.createHeader(element);
expect(header.getTitle()).toBe("This is a main title");
Однако он не будет работать наТранспортир:
describe('Some end to end spec', function () {
it('should have the right title', function () {
let element = element(by.css(".my-header .my-header-title-text"));
const header = ComponentFactory.createHeader(element);
expect(title.getText()).toMatch("This is a main title");
});
});
Выдает следующее исключение
Failed: jquery_1.default is not a function
Я использую TypeScript в библиотеке тестов, а также в моих тестах Транспортир.
Я могузамените jQuery $ на элемент Protractor в моей библиотеке тестов, но тогда я заставлю модульные / интеграционные тесты запускаться в браузере, что лишит их стремления быть быстрыми.
Кто-нибудь знает, как я могу создатьтакая библиотека API тестов, которая может использоваться как в тестах Karma, так и в тестах Protractor?
Одно из лучших описаний, которое я мог найти здесь, в Переполнении стека , но это не такansweМой вопрос.