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

Question

一段时间以来，我一直在努力在我的 Controller 中测试一个简单的 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 中，我必须将视口(viewport)添加到框架并在插件中要求包。

我的 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)变量声明:

declare const viewport: any;

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

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