- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试为一个指令编写一个测试,该指令在其构造函数中接收一个窗口对象
指令代码:
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from
'@angular/core';
import { Inject } from '@angular/core';
import { Observable, Subscription } from 'rxjs/Rx';
@Directive({
selector: '[appFixToViewport]'
})
export class FixToViewportDirective implements OnChanges, OnDestroy, OnInit {
@Input('appFixToViewport') appFixToViewport: boolean;
@Input('outerMargin') outerMargin: number = 15; // defaults to 15px margin
private windowResize$: Subscription;
constructor(private element: ElementRef,
@Inject('$window') private $window: any) {}
ngOnInit() {
this.windowResize$ = Observable.fromEvent(this.$window, 'resize')
.debounceTime(500)
.subscribe((event) => {
this.fixDropdownToViewPort();
});
}
ngOnChanges(changes) {
if (changes.appFixToViewport.currentValue) {
this.fixDropdownToViewPort();
}
}
ngOnDestroy() {
if (this.windowResize$ !== undefined) {
this.windowResize$.unsubscribe();
}
}
/**
* Name: fixDropdownToViewPort
* Purpose: put div element inside the view port
* Returns: void
*/
fixDropdownToViewPort() {
this.$window.requestAnimationFrame(() => {
this.element.nativeElement.style.transform = ''; // reset transform
let winWidth = this.$window.innerWidth;
// Attempt obtaining a more accurate width (excluding scrollbars)
if (this.$window.document && this.$window.document.body.clientWidth) {
winWidth = this.$window.document.body.clientWidth;
}
let elementWidth = this.element.nativeElement.offsetWidth; // div width
// div right border absolute position
let elementRight = this.element.nativeElement.getBoundingClientRect().right;
// div left border absolute position
let elementLeft = this.element.nativeElement.getBoundingClientRect().left;
let delta = 0;
if (elementRight > winWidth && winWidth > elementWidth) { // calc if the div is overflow right
delta = elementRight - winWidth + this.outerMargin;
}
else if (winWidth < elementWidth) { // calc if the div is bigger then the view port
delta = elementLeft - this.outerMargin;
}
this.element.nativeElement.style.transform = `translateX(${-delta}px)`;
});
}
}
当我尝试初始化模板中使用指令的测试组件时,我收到注入(inject)错误
这是测试规范文件:
import {Component, ElementRef, DebugElement} from '@angular/core';
import {TestBed, async, ComponentFixture} from '@angular/core/testing';
import {FixToViewportDirective} from './fixToViewport.directive';
import {createInjector} from "@angular/core/src/view/refs";
import {By} from "@angular/platform-browser";
@Component({
selector: 'app-test-fixtoviewport',
template:'<div appFixToViewport="isOpenFlag" ></div>'
})
class TestFixToViewPort {}
describe('Directive: FixToViewportDirective',()=>{
let component :TestFixToViewPort
let fixture : ComponentFixture<TestFixToViewPort>;
let inputEl: DebugElement;
const $window= Window;
beforeEach((()=>{
TestBed.configureTestingModule({
declarations: [
TestFixToViewPort,
FixToViewportDirective
]});
fixture = TestBed.createComponent(TestFixToViewPort);
component= fixture.componentInstance;
inputEl= fixture.debugElement.query(By.css('div'));
}));
it('should have a defined component', () => {
expect(component).toBeDefined();
});
})
和错误跟踪:
指令:FixToViewportDirective
× should have a defined component
Error
at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1232:0 <- src/test.ts:1511:86) [angular]
at noProviderError (webpack:///~/@angular/core/@angular/core.es5.js:1270:0 <- src/test.ts:1549:12) [angular]
at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/@angular/core.es5.js:2771:0 <- src/test.ts:3050:19) [angular]
at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/@angular/core.es5.js:2810:0 <- src/test.ts:3089:25) [angular]
Expected undefined to be defined.
at Object.<anonymous> (webpack:///src/app/shared/fixViewport/fixToViewportTester.component.spec.ts:42:7 <- src/test.ts:144444:27) [ProxyZone]
at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:80:0 <- src/test.ts:114788:39) [ProxyZone]
at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:105:9 <- src/test.ts:114487:34) [<root>]
Chrome 59.0.3071 (Windows 10 0.0.0) Directive: FixToViewportDirective should have a defined component FAILED
Error
at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1232:0 <- src/test.ts:1511:86) [angular]
at noProviderError (webpack:///~/@angular/core/@angular/core.es5.js:1270:0 <- src/test.ts:1549:12) [angular]
at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/@angular/core.es5.js:2771:0 <- src/test.ts:3050:19) [angular]
at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/@angular/core.es5.js:2810:0 <- src/test.ts:3089:25) [angular]
at ReflectiveInjector_._getByKey (webpack:///~/@angular/core/@angular/core.es5.js:2742:0 <- src/test.ts:3021:25) [angular]
at ReflectiveInjector_.get (webpack:///~/@angular/core/@angular/core.es5.js:2611:0 <- src/test.ts:2890:21) [angular]
at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/@angular/core.es5.js:3579:0 <- src/test.ts:3858:52) [angular]
at resolveDep (webpack:///~/@angular/core/@angular/core.es5.js:11040:0 <- src/test.ts:11319:45) [angular]
at createClass (webpack:///~/@angular/core/@angular/core.es5.js:10896:0 <- src/test.ts:11175:91) [angular]
at createDirectiveInstance (webpack:///~/@angular/core/@angular/core.es5.js:10724:0 <- src/test.ts:11003:37) [angular]
at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12087:29 <- src/test.ts:12366:49) [angular]
at callViewAction (webpack:///~/@angular/core/@angular/core.es5.js:12531:0 <- src/test.ts:12810:13) [angular]
at execComponentViewsAction (webpack:///~/@angular/core/@angular/core.es5.js:12440:0 <- src/test.ts:12719:13) [angular]
at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12114:0 <- src/test.ts:12393:5) [angular]
Expected undefined to be defined.
at Object.<anonymous> (webpack:///src/app/shared/fixViewport/fixToViewportTester.component.spec.ts:42:7 <- src/test.ts:144444:27) [ProxyZone]
at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:80:0 <- src/test.ts:114788:39) [ProxyZone]
at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:105:9 <- src/test.ts:114487:34) [<root>]
Chrome 59.0.3071 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (1.053 secs / 0.076 secs)
我如何将它搜索的窗口对象注入(inject)指令?
最佳答案
尝试将 ElementRef
添加到您的测试模块:
TestBed.configureTestingModule({
declarations: [
TestFixToViewPort,
FixToViewportDirective
],
imports: [ ElementRef ]
});
关于Angular 2+ Unitest 提供带有窗口注入(inject)对象的指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45185747/
我开发了一个具有基本安全性的 Spring Boot 应用程序。我有两个具有相同路径和不同 http 方法的端点。当我使用默认密码/使用 application.yml 中给出的密码包含基本安全性时,
我的代码是这样的: 或者,像这样: 如果我首先列出 webm 源,Firefox 4 会播放它,但 Firefox 3.6 也会尝试播放它(但会失败,因为它不支持 webm)。
我希望提供一个泛型类型作为类型参数而不首先将其解析为具体类型。换句话说,我正在寻找一种方法来指定从基类继承时可以使用的类型映射函数。 示例(不正确的)语法,希望比我能解释得更好: abstract c
我在 .NET 中编写了一些桌面应用程序,它们既提供了用于正常使用的前端 GUI,也提供了用于其他需求(例如扩展、调度、自动化、高级使用等)的命令行界面。命名两个可执行文件的最佳做法是什么,因为它们构
我最近在这里思考了很多关于屏幕抓取以及它可能是一项什么样的任务。所以我提出以下问题。 作为网站开发人员,您是否会公开简单的 API 以防止用户抓取屏幕,例如 JSON 结果? 然后这些结果可以实现缓存
我正在为一个项目使用 Dojo 1.9,但我不明白 dojo.provide 的正确替代方案与传统风格相比,AMD 风格。我正在阅读 this文档页面。 很明显,这就是旧语法映射到新语法的方式: 旧
我正在开发一个 Angular 应用程序。当我使用 ng serve 正常运行它时,它运行没有任何错误.但是,当我运行 ng build --prod ,它给出了以下错误。 ERROR in Ille
我有一个 Mac 应用程序。在我的 Mac 应用程序中,我的屏幕之一有一个包含文本字段的 scrollView。在同一屏幕上,我有一个需要提供打印选项的按钮。可以打印文本字段的文本。打印按钮应调用 M
我已经成功地为普通媒体文件提供媒体文件,但是当我尝试提供管理媒体文件时,我失败了。请帮我找出问题所在,因为我已经尝试解决问题几个小时但没有运气(也一直在谷歌搜索并阅读有关提供静态文件的 django
我正在尝试创建一个简单的错误处理项目,它会在收到错误(例如 404、422 或 500)后为 JSON 提供错误数据。我使用来自 this 的代码网站,但它不适合我。 我实际上有这两个类: 基本 Co
假设我有一个名为 Number 的类(class),我打算对 Number 进行大量相等比较对象。我担心通用 Number::equals(Object o) 的“开销”(类比较等...)方法。在这种
假定以下情况: 对等方A只希望将音频流发送给对等方B 对等B只希望将视频流发送给对等A 从而, 与创建报价 var sdpConstraints = { “必填”:{ 'OfferToReceiveA
因为我有一些角度,所以我想检查角度模数 360°: double angle = 0; double expectedAngle = 360; angle.Should().B
这是我的程序中构建的 monad 堆栈: type Px a = ReaderT PConf (State PState) a 其中 PConf 和 PState 是保存应用程序的配置和状态的任意数据
因为我有一些角度,所以我想检查角度模数 360°: double angle = 0; double expectedAngle = 360; angle.Should().B
我有一个小程序需要以某些权限运行,这意味着加载时会显示一条警告消息。如果用户拒绝警告消息,我想重定向到错误页面并解释发生了什么。有什么办法可以做到这一点吗? 我研究过让计时器运行并在特定时间段后重定向
从我可以从 Firebase 文档中推断出,似乎需要服务器来提供静态内容(html和 javascript),所以你需要有一台托管机器和一个静态内容服务器在某处启动并运行,或某些服务托管静态站点。 对
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 3 年前。 Improv
我的项目根目录的静态文件夹中有一个文本文件。 我想提供它,所以我创建了: @csrf_exempt def display_text(request): content = retur
我目前正在研究指针,为了进一步理解我正在尝试使用指针将两个数值数组连接成一个。代码如下所示。 #include void concat(int **pa,int **pb,int **pc) {
我是一名优秀的程序员,十分优秀!