Angular 7 : Unit test Jasmine automate window size on mobile and web

Question

我需要编写一个自动化测试用例( Jasmine 测试)，它将在 chrome 中运行，针对移动和 Web View 具有不同的分辨率 例如，它应该自动调整窗口大小 在 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来完成

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

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

// 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');
  });