Issues when resizing browser (Angular1)

[andrewconnell]

Issue description or question

Angular 1 specific issue... but can't figure out why Wallaby is acting differently from when running the tests in the console. All tests pass in the console, but one test always fails in Wallaby.js

To reproduce, get our project, get all modules & run the tests in the console & in Wallaby:

git clone https://github.com/ngOfficeUIFabric/ng-officeuifabric.git
npm install
# compile & run tests in console
npm run test

Now run the tests in wallaby... the issue for this test specifically is that the browser is not getting resized on this line as the results from wallaby are backward from what should be present: https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/breadcrumb/breadcrumbDirective.spec.ts#L178

Is there something in the config that's messing this up? Since the only thing that's different is that we're running the test within Wallaby, I figure there must be something related to it that's causing the issue.

Wallaby.js configuration file

"use strict";
var build_1 = require("./build/config/build");
var webpack_1 = require("./build/config/webpack");
var WallabyConfig = (function () {
    function WallabyConfig(wallaby) {
        this.wallaby = wallaby;
        this.files = [
            { instrument: false, pattern: build_1.BuildConfig.NODE_MODULES + '/angular/angular.js' },
            { instrument: false, pattern: build_1.BuildConfig.NODE_MODULES + '/angular-mocks/angular-mocks.js' },
            { instrument: false, pattern: build_1.BuildConfig.NODE_MODULES + '/jquery/dist/jquery.min.js' },
            { instrument: false, pattern: build_1.BuildConfig.NODE_MODULES + '/pickadate/lib/picker.js' },
            { instrument: false, pattern: build_1.BuildConfig.NODE_MODULES + '/pickadate/lib/picker.date.js' },
            { instrument: false, pattern: build_1.BuildConfig.NODE_MODULES + '/jasmine-jquery/lib/jasmine-jquery.js' },
            { instrument: false, pattern: 'src/core/jquery.phantomjs.fix.js' },
            { load: false, pattern: 'src/**/*.ts' },
            { ignore: true, pattern: 'src/**/*.spec.ts' }
        ];
        this.tests = [
            { load: false, pattern: 'src/**/*.spec.ts' }
        ];
        this.compilers = {
            'src/**/*.ts': this.wallaby.compilers.typeScript()
        };
        this.env = {
            params: { runner: '--web-security=false' },
            runner: require('phantomjs2-ext').path
        };
        this.setup = function () {
            var moduleBundle = '__moduleBundler';
            window[moduleBundle].loadTests();
        };
        this.configPostProcessor();
    }
    WallabyConfig.prototype.configPostProcessor = function () {
        var webpackConfig = new webpack_1.WebPackConfig();
        this.postprocessor = require('wallaby-webpack')({
            entryPatterns: [
                'src/core/components.js',
                'src/core/core.js',
                'src/**/*.spec.js'
            ],
            externals: webpackConfig.externals,
            resolve: {
                extensions: ['', '.js', '.ts'],
                root: webpackConfig.resolve.root
            }
        });
    };
    return WallabyConfig;
}());
module.exports = function (wallaby) {
    return new WallabyConfig(wallaby);
};

Code editor or IDE name and version

Visual Studio Code v1.8.1

OS name and version

OSX v10.12.1

[ArtemGovorov]

Thanks for providing the detailed issue description.

Wallaby.js is using 800x600 test page viewport size by default (search for viewportSize), your test needs it to be a bit smaller. If you set the test page width to say 600px, it should work for you:

  public env: IWallabyEnvironment = <IWallabyEnvironment>{
    params: { runner: '--web-security=false' },
    runner: require('phantomjs2-ext').path,
    viewportSize: {width: 600} // <---
  };

[andrewconnell]

But... how do you do that on a specific test rather than all tests? We're testing for responsiveness in the underlying library.

[ArtemGovorov]

The test page is created for all tests, the same happens in karma. If your tests pass via npm run test (which runs karma), then they should pass in wallaby with the changed default viewport size. I tried the solution I have suggested on your repo, and all of your tests are passing.

[ArtemGovorov]

The issue was that wallaby changes the default PhantomJs viewport size to 800x600, while karma doesn't, so your tests pass in the console. I'm not exactly sure what's the default value that karma is using, but setting it to 600 works. Hope it makes sense.