如何使用 karma 和 jasmine 测试 screen.width 条件

Question

现在有一段时间我正在努力在我的控制器中测试一个简单的 if 语句。

if (screen.width <= 768) {
                $location.hash('map');
                $anchorScroll();
            }

我找到了一种用不同大小生成浏览器的方法，但它不起作用，screen.width总是保持不变。有没有办法覆盖那部分代码？

Answer 1

我正在使用 Angular 8。我使用了 karma-viewport 插件来模拟屏幕大小，它对我来说效果很好。

该软件包可在https://www.npmjs.com/package/karma-viewport 获得。

在 karma.conf.js 中，我必须将视口添加到框架并需要插件中的包。

我的 karma.conf.js：

frameworks: ['jasmine', '@angular-devkit/build-angular', 'viewport'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-junit-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-viewport')
    ],

在我的 .spec.ts 文件中，我添加了视口 var 声明：

declare const viewport: any;

在“it”函数中更改大小，调用我的方法，根据屏幕大小并检查结果后更改变量。在我的例子中，当屏幕尺寸小于 700px 时，组件的属性宽度应该是 240：

it('test xyz', () => {
    viewport.set(320, 240);
    component.changeHeightByScreenSize();
    expect(component.width).toEqual(240);
  });

Answer 2

是的，有办法。

您必须替换screen.width为$window.screen.width，并且可以window在茉莉花中模拟对象。

然后，您可以使用以下代码模拟窗口：

var window = {
  screen : {
      width : 500
     }
};

现在在您的规范文件中：在 beforeEach 块中

$controller('controllerName', {$window : window});