如何使用业力和茉莉花测试 screen.width 条件答案

【问题标题】：How to test screen.width condition using karma and jasmine如何使用业力和茉莉花测试 screen.width 条件
【发布时间】：2017-10-23 00:52:57
【问题描述】：

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

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

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

【问题讨论】：

标签： angularjs testing jasmine width screen

【解决方案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 文件中，我添加了 viewport var 声明：

declare const viewport: any;

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

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

【讨论】：

【解决方案2】：

Angular 4 与 TypeScript 在这里：

(<any>window).screen = { width: 300 };

将window 转换为any 应该可以在单元测试期间工作。

【讨论】：

【解决方案3】：

是的，有办法。

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

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

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

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

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

【讨论】：