找不到名称“视口”答案

【问题标题】：Cannot find name 'viewport'找不到名称“视口”
【发布时间】：2018-05-15 08:32:23
【问题描述】：

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

这是我的 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 配置中进行任何其他更改即可使其正常工作。我的spec 文件中没有公开viewport 变量。

【问题讨论】：

标签： angular jasmine karma-jasmine angular2-testing karma-viewport

【解决方案1】：

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

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

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

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

【讨论】：

使用此方法无效。视口未定义。

【解决方案2】：

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

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

// karma.conf.js

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

// tsconfig.spec.js

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

【讨论】：