Angular 2 用于 TypeScript 应用程序测试 - 规范在 jasmine 中出现多次

Question

我按照本教程测试了 Angular 2 应用程序：https://angular.io/docs/ts/latest/guide/testing.html

完成 First app test 部分并转到 unit-tests.html 我看到我的规格报告多次出现：

虽然我没有对教程代码做任何更改，但为了快速参考这里是我的单元-tests.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Ng App Unit Tests</title>

    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">

    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
    // #2. Configure systemjs to use the .js extension
    //     for imports from the app folder
    System.config({
        packages: {
            'app': {defaultExtension: 'js'}
        }
    });

    // #3. Import the spec file explicitly
    System.import('app/hero.spec')

    // #4. wait for all imports to load ...
    //     then re-execute `window.onload` which
    //     triggers the Jasmine test-runner start
    //     or explain what went wrong.
            .then(window.onload)
            .catch(console.error.bind(console));
</script>
</body>

</html>

hero.spec.ts

import {Hero} from './hero';

describe('Hero', () => {
    it('has name', () => {
        let hero:Hero = {id: 1, name: 'Super Cat'};
        expect(hero.name).toEqual('Super Cat');
    });
    it('has id', () => {
        let hero:Hero = {id: 1, name: 'Super Cat'};
        expect(hero.id).toEqual(1);
    });
});

知道哪里出了问题吗？

Answer 1

我无法重现您的问题。看到这个 plunkr：https://plnkr.co/edit/viMSZD?p=preview.

我看到的唯一区别是我在 Jasmine 库文件之前包含了 SystemJS 库文件：

<script src="https://code.angularjs.org/tools/system-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>

Answer 2

我有完全相同的问题（测试用例出现 3 次而不是 1 次）。

为了修复它，我删除了对 System.import('app/hero.spec') Promise 的 .then(window.onload) 调用。

似乎 SystemJS 模块能够在浏览器引发 window 加载事件之前加载 hero.spec.js。这将使对 window.onload 函数的后续调用过时。

Answer 3

如果我使用 lite-server，我可以重现这种奇怪的行为。如果您按照 angular2 站点上的示例进行操作，您会发现他们正在使用 live-server（注意“v”而不是“t”）。使用 live-server jasmine 可以正确呈现我的测试。也许 browser-sync 魔法被注入 html 有一些问题？

Answer 4

由于我之前的评论被标记为已删除，我写下我的最终解决方案以驱逐问题。这个解决方案有效，唯一的问题是它第一次显示带有文本 "No specs found" 的 HTML 页面，但是当加载所有模块时，它显示所有规格及其结果。

此解决方案被 Manning 早期访问计划的书 "Angular 2 Development with TypeScript v7 MEAP" 采用：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Unit Tests</title>
    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
    <!-- #1. Polyfills -->
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <!-- #2. Zone.js dependencies -->
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/zone.js/dist/async-test.js"></script>
    <script src="node_modules/zone.js/dist/fake-async-test.js"></script>
    <!-- #3. Add specs dependencies -->
    <script src="app/treeNode.spec.ts"></script>
    <script src="app/template.spec.ts"></script>
    <script src="app/services/tree.side.service.spec.ts"></script>
    <script src="app/services/tree.service.spec.ts"></script>
    <!-- #4. Add Jasmine dependencies -->
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
    <script src="node_modules/jasmine-expect/dist/jasmine-matchers.js"></script>
    <!-- #5. Add the system.js library -->
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script>System.packageWithIndex = true;</script>
    <script src="systemjs.config.js"></script>

    <script>
        // #6. Configure SystemJS to use the .js extension for imports from the app folder
        System.config({
            packages: {
                'app': {defaultExtension: 'js'}
            }
        });

        var SPEC_MODULES = [
            'app/treeNode.spec',
            'app/template.spec',
            'app/services/tree.side.service.spec',
            'app/services/tree.service.spec'
        ];

        /**
         * #7. Import the spec files explicitly
         */
        Promise.all([
            System.import('@angular/core/testing'),
            System.import('@angular/platform-browser-dynamic/testing')
        ])
        .then(function (modules) {
            var testing = modules[0];
            var testingBrowser = modules[1];
            testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule, testingBrowser.platformBrowserDynamicTesting());
            return Promise.all(SPEC_MODULES.map(function (module) {
                return System.import(module);
            }));
        })
        .then(window.onload)
        .catch(console.error.bind(console));
    </script>
</head>
<body>
</body>
</html>

希望此解决方案对您有用。

Answer 5

我遇到了同样的问题，导入核心 shim 库后问题消失了。还要确保将其作为第一个脚本导入。

 <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

Angular 2 用于 TypeScript 应用程序测试 - 规范在 jasmine 中出现多次

Angular 2 for TypeScript app testing - specs appear multiple times in jasmine

jasmine

typescript

systemjs

angular