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

Question

I need to write an automated test case (jasmine test) which will run in chrome with different resolutions for mobile and web view For example, it should automatically adjust the window size to W: 375 H: 678 when it is run in jasmine Unfortunately, I wasn’t able to find a solution to do this

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

finally i was able to find an answer for this

it can be done by installing npm install karma-viewport

This will expose the global variable viewport to tests, which allows setting the dimensions of the viewport

need to config viewport sizes in karma.conf.js as follow

// 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
          }
        }
      ]
    }
  })
}

then in spec file you can access the screen sizes

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