找不到名称“视口”

Question

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

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

编译器显示的错误。

找不到名称“视口”。

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

Answer 1

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

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

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

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