Ace editor + Angular 2 => 量角器无法同步
Ace editor + Angular 2 => protractor cannot synchronize
我正在使用 Angular 2(2.0.0 版本)、angular-cli (1.0.0-beta.14) 开发应用程序。
我已经使用 Angular 2 指令集成了 Ace 编辑器,遵循 https://github.com/fxmontigny/ng2-ace-editor
Ace编辑器一实例化,量角器就不能同步了:
✗ should display app name
- Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md
While waiting for element with locator - Locator: By(css selector, app-root .navbar a.active)
Ace 编辑器实例化使用:
import { EventEmitter, Output, ElementRef, Input, Directive } from '@angular/core';
import 'brace';
import 'brace/theme/chrome';
import 'brace/mode/html';
declare var ace: any;
@Directive({
selector: '[aceEditor]'
})
export class AceEditorDirective {
editor: any;
constructor(elementRef: ElementRef) {
let el = elementRef.nativeElement;
this.editor = ace['edit'](el); // Comment this line and Protractor works again
}
}
任何提示是什么问题?
好的,终于找到问题了。
看起来 Angular 在 Ace 编辑器中丢失了跟踪更改,因此认为总是有持续的更改。所以
window.getAngularTestability($('app-root'))
.whenStable(function(){
console.log('stable')
})
实例化 Ace Editor 时不再return。
简单的解决方案:在区域外实例化 Ace 编辑器:
constructor(elementRef: ElementRef, zone: NgZone) {
let el = elementRef.nativeElement;
zone.runOutsideAngular(() => {
this.editor = ace['edit'](el);
});
}
我遇到了与上述相同的问题,而不是 运行 Angular 之外的 ace 编辑器,我宁愿在量角器中进行多个测试,这些测试将从上一个测试停止的地方继续。 Ace Editor 会导致浏览器无法完成同步,因此我的量角器测试会超时。
您可以进行如下测试:
it('Runs Tests for components with ace edit')
browser.ignoreSynchronization = true;
testAngularElements();
it('Runs the rest of the test in which the ace edit is not present')
browser.ignoreSynchronization = false;
remainingTests();
很遗憾,我还找不到替代方法。
我正在使用 Angular 2(2.0.0 版本)、angular-cli (1.0.0-beta.14) 开发应用程序。
我已经使用 Angular 2 指令集成了 Ace 编辑器,遵循 https://github.com/fxmontigny/ng2-ace-editor
Ace编辑器一实例化,量角器就不能同步了:
✗ should display app name
- Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md
While waiting for element with locator - Locator: By(css selector, app-root .navbar a.active)
Ace 编辑器实例化使用:
import { EventEmitter, Output, ElementRef, Input, Directive } from '@angular/core';
import 'brace';
import 'brace/theme/chrome';
import 'brace/mode/html';
declare var ace: any;
@Directive({
selector: '[aceEditor]'
})
export class AceEditorDirective {
editor: any;
constructor(elementRef: ElementRef) {
let el = elementRef.nativeElement;
this.editor = ace['edit'](el); // Comment this line and Protractor works again
}
}
任何提示是什么问题?
好的,终于找到问题了。 看起来 Angular 在 Ace 编辑器中丢失了跟踪更改,因此认为总是有持续的更改。所以
window.getAngularTestability($('app-root'))
.whenStable(function(){
console.log('stable')
})
实例化 Ace Editor 时不再return。
简单的解决方案:在区域外实例化 Ace 编辑器:
constructor(elementRef: ElementRef, zone: NgZone) {
let el = elementRef.nativeElement;
zone.runOutsideAngular(() => {
this.editor = ace['edit'](el);
});
}
我遇到了与上述相同的问题,而不是 运行 Angular 之外的 ace 编辑器,我宁愿在量角器中进行多个测试,这些测试将从上一个测试停止的地方继续。 Ace Editor 会导致浏览器无法完成同步,因此我的量角器测试会超时。
您可以进行如下测试:
it('Runs Tests for components with ace edit')
browser.ignoreSynchronization = true;
testAngularElements();
it('Runs the rest of the test in which the ace edit is not present')
browser.ignoreSynchronization = false;
remainingTests();
很遗憾,我还找不到替代方法。