Angular 1 - 在测试中触发窗口调整大小事件

Question

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

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

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

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 ...... resize 事件处理程序在这个测试运行后很好地启动，并且抛出一个错误。即使使用 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

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

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