找不到名称 'viewport'

Question

我正在使用 karma viewport npm 包通过 jasmine 测试规范为 chrome 浏览器设置 viewport。我遵循上面提供的 link 中的指南。这很简单，但不知何故我无法让它工作。

这是我的 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
    });
};

我尝试设置视口的测试规范

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();
    }));

编译器显示的错误。

Cannot find name 'viewport'.

我不认为我必须在 TestBed 配置中进行任何其他更改才能使其正常工作。我的 spec 文件中未公开 viewport 变量的一些方式。

Answer 1

您的 karma.conf 看起来不错 - 您列出了框架和插件中的要求。尝试在规范的开头声明视口：

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

我认为您遇到问题的原因是，karma-viewport 框架是用纯 javascript 编写的，打字稿编译器对此一无所知。

通过在规范文件的顶部声明它，您实际上是在告诉打字稿编译器“相信我，它存在并且可用”。

Answer 2

如本主题所述https://github.com/squidfunk/karma-viewport/issues/35文档不完整。以下配置对我有用（避免添加 declare const viewport;）：

在 karma.conf.js 中，您需要在框架中添加 'viewport' 并在插件中添加 'require('karma-viewport')'
在tsconfig.spec.json中你需要在types

// karma.conf.js

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

// tsconfig.spec.js

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

找不到名称 'viewport'

Cannot find name 'viewport'

angular

jasmine

karma-jasmine

angular2-testing

karma-viewport