找不到名字'viewport‘

Question

我使用业力视口 npm软件包通过jasmine测试规范为chrome浏览器设置jasmine。我正在遵循上述链接的指导方针。这很简单，但不知怎么的，我无法使它发挥作用。

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

编译器显示的错误。

无法找到名称“viewport”。

我不认为我需要在TestBed配置中进行任何额外的更改才能使其正常工作。在我的viewport文件中没有公开spec变量的一些方式。

Answer 1

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

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’)。
• 在tsconfig.spec.json中，您需要在类型中添加“业力-视图”。

// karma.conf.js

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

// tsconfig.spec.js

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