我正在尝试将单元测试添加到我的Angular 2应用程序中.在我的一个组件中,有一个带有(click)处理程序的按钮.当用户单击该按钮时,将调用在.ts类文件中定义的函数.该函数在console.log窗口中打印一条消息,说明该按钮已被按下.我目前的测试代码测试打印console.log消息:
describe('Component: ComponentToBeTested', () => {
var component: ComponentToBeTested;
beforeEach(() => {
component = new ComponentToBeTested();
spyOn(console, 'log');
});
it('should call onEditButtonClick() and print console.log', () => {
component.onEditButtonClick();
expect(console.log).toHaveBeenCalledWith('Edit button has been clicked!);
});
});
但是,这只测试控制器类,而不是HTML.我不只是想测试onEditButtonClick调用时发生的日志记录; 我还想测试onEditButtonClick当用户单击组件的HTML文件中定义的编辑按钮时调用.我怎样才能做到这一点？
我使用Angular-cli使用以下命令创建了Angular2项目:
ng new project-name
但是,我没有.angular-cli.json在项目的根文件夹中看到文件.我使用的angular-cli版本是1.0.2.我以前用cli创建了多个项目,从未遇到过这个问题.是因为最近的更新？如果是,我在哪里可以找到json文件？或者我需要手动创建它吗？
我为我正在测试的组件创建了一个测试(spec)文件.但是当我运行测试时,它给出了一个错误说法
Cannot read property 'subscribe' of undefined
TypeError: Cannot read property 'subscribe' of undefined
at ComponentUndertest.ngOnInit
这是显而易见的,因为我已经在ngOnInit()方法中订阅了某些内容,但是我可以在测试期间忽略订阅吗？或者我可以在测试期间伪造订阅吗？我已经搜索了很多关于这个问题但是找不到与angular2测试有关的任何内容.提前致谢.
我正在尝试在单击时禁用按钮.通过单击我正在调用一个函数,我想要使用该函数禁用该按钮.如何使用ElementRef访问按钮的属性并禁用它？我对如何使用ElementRef不是很熟悉.任何帮助将不胜感激!
我有一个hostListner在我的Angular2应用程序中监听scroll事件.我正在使用它来检查用户是否在页面底部滚动并在用户到达页面底部时执行方法.我已经按以下方式构建了hostlistner:
@HostListener('window:scroll', [])
onWindowScroll() {
const scrolledPercent = /* some logic to calculate the percentage scrolled */
if ( condition1 && condition2 .... )
{
// doing something here
}
}
但这会减慢我的应用程序速度,而不是以非常重要的方式,但页面上的滚动不再平滑.也许是因为hostlistner一直在寻找要滚动的页面,因此订阅会使整个滚动体验变得迟钝.我尝试删除hostListner,滚动再次平滑.有人注意到这种行为吗？如果没有,使用Angular2在页面上订阅滚动事件的最佳方法是什么？
我试图测试一个具有ngOnDestroy()方法的组件,该方法具有所有unsubscribe()方法调用.但是,在测试时,当我运行我的测试文件(spec文件)时,它给出了错误说:
cannot read property 'unsubscribe' of undefined
我在我的测试文件中完成了以下导入:
import { Subscription } from 'rxjs/Subscription';
所以我认为这应该足以获得Subscription中的所有方法,但仍然存在错误.此外,我尝试将"订阅"添加到测试文件的"导入","声明"和"提供者"列表中,但仍然存在错误.
以下是代码段:
//component
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {
NinjaService } from '../../../../ninja.service';
@Component({
selector: 'ninja-files',
templateUrl: './ninja-files.component.html',
styleUrls: ['./ninja-files.component.css']
})
export class ninjaFilesComponent implements OnInit, OnDestroy {
showNinjaFiles: boolean = true;
addFileSubscription: Subscription;
constructor(private ninjaService: NinjaService) {
........
}
ngOnInit() {
this.addFileSubscription = this.NinjaService.AddedFile$
.subscribe((fileFormat: FileFormat) => {
console.log('File being added: ' + fileFormat.fileName); } …我正在创建一个使用REST API来下载文件的应用程序。当您点击该文件时，API会立即返回该文件。因此，我使用以下逻辑来获取文件：
downloadFile(file) {
this.service.downloadFile(file.id).subscribe((fileData) => {
const a = document.createElement('a');
document.body.appendChild(a);
const blob = new Blob([data], { type: data.type });
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = file.name;
a.click();
window.URL.revokeObjectURL(url);
});
}
上面的代码工作完美。但是，当整个文件下载完毕后，它将在浏览器中下载文件，即，您不会在浏览器中看到文件下载的进度（通常在Chrome中下载文件时我们通常会看到的样子）。您可以在控制台的“网络”选项卡中看到其正在下载文件，但仅在下载整个文件后才会显示。谁能告诉我如何强制将其下载到浏览器中以显示进度？
我试图在当前路线改变时运行一个功能.例如,如果我们当前处于"..../user/user-details",那么用户详细信息是一个单独的组件.我想在路由更改时执行一个方法(如果路由从UI更改或直接从URL更改,则无关紧要).我在用户详细信息组件中做了一些事情:
constructor(private router: Router) {
router.events.subscribe(() => {
console.log('Route changed');
});
}
但是这种方法的问题是,它会在每次路由更改时运行(无论我们是否导航到用户详细信息页面或从用户详细信息页面导航).所以这是订阅app宽的路线.我只是希望它在我们远离用户详细信息组件时运行.他们是这样做的吗？
我创建了一个自定义ExceptionMapper，每次 API 中发生异常时我都会调用该自定义，以将其映射到合适的响应。以下是我的自定义异常类：
@Provider
public class ServiceExceptionMapper implements ExceptionMapper<Throwable> {
private Logger logging = LoggerFactory.getLogger(getClass());
@Override
public Response toResponse(Throwable throwable) {
log.error("There is an exception: ", throwable);
if (throwable instanceof IllegalArgumentException) {
return Response.status(Response.Status.BAD_REQUEST).entity(throwable.getMessage()).type (MediaType.TEXT_PLAIN).build();
}
if (throwable instanceof WebApplicationException) {
WebApplicationException we = (WebApplicationException) throwable;
return we.getResponse();
}
return Response.status(Response.Status.INTERNAL_SERVER_ERROR).entity(throwable.getMessage()).type(MediaType.TEXT_PLAIN).build();
}
}
现在，在我的资源类中，我有一个 try 和一个 catch 块。如果有异常，catch 块应该捕获它并调用自定义异常映射器类。抛出异常的常用方法如下：
catch (Exception e) {
throw new WebApplicationException(Response.status(Status.INTERNAL_SERVER_ERROR).entity("Internal Server Error").build());
}
我正在尝试通过以下方式调用异常映射器类：
catch (Exception e) {
exceptionMapper.toResponse(e);
}
exceptionMapper类的字段在哪里 …