angular - 如何在 Angular 中测试延迟加载路由的存在？

Question

我的问题类似于 this question .我正在尝试编写一个测试来检查 Angular 中路由的存在。链接问题的主要区别在于我使用的是延迟加载模块而不是组件。

我有一个包含路由的文件 app.routes.ts:

import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('./main/main.module').then(m => m.MainModule)
    }
];

在测试文件 app.routes.spec.ts 中，我希望这条路线存在:

import { routes } from './app.routes';

describe('app.routes', () => {
    it('should contain a route for /', () => {
        expect(routes).toContain({
            path: '',
            loadChildren: () => import('./main/main.module').then(m => m.MainModule)
        });
    });
});

当我运行它时，测试没有通过。

Expected [ Object({ path: '', loadChildren: Function }) ] to contain Object({ path: '', loadChildren: Function }). Error: Expected [ Object({ path: '', loadChildren: Function }) ] to contain Object({ path: '', loadChildren: Function }). at at UserContext. (http://localhost:9876/_karma_webpack_/src/app/app.routes.spec.ts:5:24) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1) at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)

如何修复此单元测试，并确保可以测试延迟加载路由的存在？谢谢!

免责声明:我知道有些人不认为这应该是单元测试的一部分，应该在 e2e 测试中测试路由。我个人喜欢检查我的所有路线是否存在的想法，并且没有错别字。如果有人出于某种原因将一条路线注释掉而忘记撤消它，而自动化测试发现了这一点，这种想法让我感到有点安全。

Answer 1

根据 Aakash Garg 的回答，我为我的问题找到了一个通用的解决方案来测试延迟加载的路由。
我正在分享我的解决方案，以防它可能对遇到相同问题的人有所帮助。这个解决方案对我有用，但我并不是说这是做到这一点的完美方式。
基本上，我为 jasmine 添加了一个自定义匹配器来测试路由的相等性。
源代码文件equal-route-matcher.ts:

import MatchersUtil = jasmine.MatchersUtil;
import CustomMatcherFactories = jasmine.CustomMatcherFactories;
import CustomEqualityTester = jasmine.CustomEqualityTester;
import CustomMatcher = jasmine.CustomMatcher;
import CustomMatcherResult = jasmine.CustomMatcherResult;

function replacer(key: any, value: any) {
    if (typeof value === 'function') {
        value = value.toString();
    }
    return value;
  }

export const EqualRouteMatcher: CustomMatcherFactories = {
    toEqualRoute: (util: MatchersUtil, customEqualityTester: CustomEqualityTester[]): CustomMatcher => {
        return {
            compare: (actual: any, expected: any): CustomMatcherResult => {
                let actualstring: string, expectedstring: string;
                actualstring = JSON.stringify(actual, replacer).replace(/(\\t|\\n)/g,'');
                expectedstring = JSON.stringify(expected, replacer).replace(/(\\t|\\n)/g,'');
                if (actualstring === expectedstring) {
                    return {
                        pass: true,
                        message: 'Routes are equal'
                    };
                } else {
                    return {
                        pass: false,
                        message: 'Expected route ' + actualstring + ' to equal route ' + expectedstring
                    };
                }
            }
        };
    }
};

类型定义文件equal-route-matcher-type.d.ts:

declare namespace jasmine {
    interface Matchers<T> {
        toEqualRoute(expected: any, expectationFailOutput?: any): boolean;
    }
}

最后，您可以在单元测试文件中导入自定义匹配器，并像这样使用它:

import { routes } from './app.routes';
import { EqualRouteMatcher } from './equal-route-matcher.ts';

describe('app.routes', () => {
    beforeEach(() => {
        jasmine.addMatchers(EqualRouteMatcher);
    });

    it('should contain a route for /', () => {
      expect(routes.length).toEqual(1);
      expect(routes[0]).toEqualRoute({path: '',loadChildren: () => import('./main/main.module').then(m => m.MainModule)});
    });
});