Question

我有一个指令，它根据窗口宽度的计算有条件地将CSS类应用于渲染的HTML。该指令工作正常......如果您在此页面上调整窗口大小，您可以看到项目如何放入溢出下拉列表中：http://ngofficeuifabric.com/demos/uifBreadcrumb。指令控制器的代码位于：https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/breadcrumb/breadcrumbDirective.ts#L119-L164。

我们面临的挑战是编写可靠的测试。在测试中，我们要验证是否根据窗口的大小调整添加/删除了溢出类。我们已经尝试了很多方法，但没有运气...似乎调整大小事件将会触发，但我们将在测试后进行评估。我们确实通过设置window.innerWidth属性的值来实现这一点，但这应该是readonly。

我们尝试在所有测试之前设置值作为起点：

beforeAll(() => {
  originalWidth = jQuery(document.body).css('width');
  jQuery(document.body).css('width', '800px');
  jQuery(window).trigger('resize');
});

然后尝试这样的测试：

it('should not have is-overflow class', () => {
  expect(element).not.toHaveClass('is-overflow');
});

这是失败的，因为PhantomJS从width = 400px开始，因此添加了类，但是在beforeAll()中我们将其设置为800px ...调整大小事件处理程序在此测试运行后很好地启动＆amp;这个，抛出一个错误。即使用setTimeout()添加延迟也无济于事（也不可取）。

在其他测试中，我们需要多次调整浏览器大小以确保根据需要更新内容。

it('should change breadcrumb count on resize', inject(($window: ng.IWindowService) => {
  let startingWidth: string = jQuery(document.body).css('width');

  let visibleLinks: JQuery = element.find('.ms-Breadcrumb-list li');
  expect(visibleLinks.length).toBe(4);

  let overflowLinks: JQuery = element.find('.ms-ContextualMenu li');
  expect(overflowLinks.length).toBe(2);

  // narrow down window
  jQuery(document.body).css('width', '620px'); // must be less than break point
  jQuery(window).trigger('resize');

  visibleLinks = element.find('.ms-Breadcrumb-list li');
  expect(visibleLinks.length).toBe(2);

  overflowLinks = element.find('.ms-ContextualMenu li');
  expect(overflowLinks.length).toBe(4);

  // back to normal
  jQuery(document.body).css('width', startingWidth);
  jQuery(window).trigger('resize');

  visibleLinks = element.find('.ms-Breadcrumb-list li');
  expect(visibleLinks.length).toBe(4);

  overflowLinks = element.find('.ms-ContextualMenu li');
  expect(overflowLinks.length).toBe(2);
}));

手动测试该指令显示它完全符合我们的要求，但在添加了大量console.log()语句之后，很明显当我们尝试调用它时，调整大小事件不会立即触发...而是延迟到在测试运行之后运行。

是否有一种可靠的方法可以从测试中触发resize事件的运行和完成？

Answer 1

我认为调整大小和滚动不在单元测试的范围内。在集成测试中检查那些事件是很容易的（即用量角器）。

例如，我必须在我的一个项目中开发一个滚动到顶部的东西，并且测试它的唯一方法是使用集成测试。

Angular 1 - 测试

1 个答案: