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

Question

一段时间以来，我一直在努力在我的控制器中测试一个简单的 if 语句。

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

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

Answer 1

是的，有办法。

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

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

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

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

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

Answer 2

Angular 4 与 TypeScript 在这里：

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

将 window 转换为 any 应该在单元测试期间有效。

Answer 3

我正在使用 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 文件中，我添加了视口变量声明：

declare const viewport: any;

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

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

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

How to test screen.width condition using karma and jasmine

angularjs

testing

jasmine

width

screen