Cannot find name 'viewport'

Question

I am using karma viewport npm package to set the viewport for chrome browser via jasmine test spec. I am following the guidelines from the link provided above. It's quite simple, but somehow I am not able to get it work.

Here is my karma.conf.js.

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli', 'viewport'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-remap-istanbul'),
            require('@angular/cli/plugins/karma'),
            require('karma-viewport')
        ],
        files: [
            { pattern: './src/test.ts', watched: false }
        ],
        preprocessors: {
            './src/test.ts': ['@angular/cli']
        },
        mime: {
            'text/x-typescript': ['ts','tsx']
        },
        remapIstanbulReporter: {
            reports: {
                html: 'coverage',
                lcovonly: './coverage/coverage.lcov'
            }
        },
        angularCli: {
            config: './angular-cli.json',
            environment: 'dev'
        },
        reporters: config.angularCli && config.angularCli.codeCoverage
            ? ['progress', 'karma-remap-istanbul']
            : ['progress'],

        htmlReporter: {
            outputFile: 'unit_test/report.html',

            //Optional
            pageTitle: 'Unit Tests',
            subPageTitle: 'This file includes all unit test cases segmented according to their suites.',
            groupSuites: true
        },

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
};

Test spec where I am trying to set the viewport

it('In mobile view, there should be three separate tabs to show daily, monthly and yearly savings', fakeAsync(() => {

        component.scrollToCalc();
        // approximate time required to load the calculator with animation
        tick(1000);
        fixture.detectChanges();
        viewport.set(200, 300);        // viewport variable throws error
        fixture.detectChanges();
    }));

Error shown by the compiler.

Cannot find name 'viewport'.

I don't think I have to make any additional changes within TestBed configuration to get this working. Some how viewport variable is not exposed within my spec file.

Cocci

Answer 1

Your karma.conf looks good - you have the framework listed & the require in your plugins. Try declaring viewport at the beginning of your spec:

declare const viewport;
describe('My Test', () => {
...
});

I believe the reason you are having issues is because, the karma-viewport framework is written in pure javascript and the typescript compiler doesn't have any knowledge of it.

By declaring it at the top of your spec file you are essentially telling the typescript compiler "trust me, this exists and is available".

Cranmer

Does not work using this method. viewport is not defined. – Taejon

Kind of funny how people will build an entire npm package but not include the most basic setup in the readme... – Winding

import { Viewport } from 'karma-viewport/dist/adapter/viewport'; declare const viewport: Viewport; – Benisch

Answer 2

As explained in this subject https://github.com/squidfunk/karma-viewport/issues/35 the documentation is incomplete. The following configuration worked for me (avoiding to add declare const viewport;):

• in karma.conf.js you need to add 'viewport' in frameworks and 'require('karma-viewport')' in plugins
• in tsconfig.spec.json you need to add 'karma-viewport' in types

// karma.conf.js

config.set({
    ...
    frameworks: [
        ... 
        'viewport'
    ],
    plugins: [
        ...
        require('karma-viewport')
    ],
   ...
});

// tsconfig.spec.js

{
    ...
    "compilerOptions": {
        ...
        "types": [
            ...
            "karma-viewport"
        ]
    }
    ...
}

Murton