Angular 7：单元测试 Jasmine 在移动和 Web 上自动调整窗口大小

Question

我需要编写一个自动化测试用例（茉莉花测试），它将在不同分辨率的 chrome 中运行，用于移动和网络视图 例如，当它在 jasmine 中运行时，它应该自动将窗口大小调整为 W: 375 H: 678 不幸的是，我无法找到解决方案来做到这一点

it('It should set sizes according to mobile', async(() => {

     //below code is not working
     //browser.manage().window().setSize(375, 678);
     let innerHeight = window.innerHeight;
     neither it won't work following code
     window.resizeTo(375, 678);

  }));

Answer 1

最后我找到了答案

它可以通过安装来完成 npm install karma-viewport

这将向测试公开全局变量视口，从而允许设置视口的尺寸

需要在 karma.conf.js 中配置视口大小如下

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ["viewport"]

    // Viewport configuration
    viewport: {
      breakpoints: [
        {
          name: "mobile",
          size: {
            width: 320,
            height: 480
          }
        },
        {
          name: "tablet",
          size: {
            width: 768,
            height: 1024
          }
        },
        {
          name: "screen",
          size: {
            width: 1440,
            height: 900
          }
        }
      ]
    }
  })
}

然后在规范文件中，您可以访问屏幕尺寸

 it('should load the mobile view ', () => {
     viewport.set('mobile');
  });