如何修复“模块不可用！”在单元测试Hybrid Angular应用时

Question

我有一个混合的角度应用程序，并使用Karma-Jasmine进行了单元测试，但是遇到了一个小问题。我有一个工厂和组件，它们被降级为AngularJS应用程序：

angular
    .module('app.admin.branding')
    .factory('brandingFactory', downgradeInjectable(BrandingFactory));

angular
    .module('app.admin.branding')
    .directive('BrandNameComponent', downgradeComponent({
        component: BrandNameComponent
    }));

但是在运行Module 'app.admin.branding' is not available!时会返回ng test

所以解决方案是加括号。

angular
    .module('app.admin.branding', [])

对于组件和工厂。它可以工作并且可以运行单元测试，但是当在浏览器上运行并导航到使用该组件的页面时，会发生未知错误并重定向到主页。

因此我们只删除了两个类的括号，因为这影响了我们的生产应用程序。我们该如何解决单元测试错误Module 'app.admin.branding' is not available或方括号方法是否有任何解决方法，以便它不会重定向？

Answer 1

简短答案；

不太确定您的设置，可能有很多问题。首先尝试使用angular.mock.module，就像这样；

beforeEach(() => TestBed.configureTestingModule({}));
beforeEach(angular.mock.module('app.admin.branding'));

请参阅文档here

希望这就是您所需要的

更长的答案；

您的“导入链”也可能有问题。

您已经注意到执行angular.module('app.admin.branding', [])时会创建angularJS模块。当您向该模块附加服务，指令等时，您将在不带括号的情况下引用它。

在创建混合应用程序时，在创建“导入链”（即将您的应用程序链接在一起的导入语句链）时需要小心。

下面是使用angular-cli创建的工作角度混合动力车的结构。

app-ajs文件夹包含angularJS应用，该目录下的每个文件夹包含一个index.ts文件，该文件将所有指令，服务等导入该文件夹内。

我们应用程序中的第一个index.ts文件如下所示：

// Vendor dependencies;
import './../../node_modules/adal-angular/dist/adal-angular.min';
import './../../node_modules/angular-cookies/angular-cookies.min';
// ...etc.

// App dependencies...
import './app.module';
import './appDependencies.module';
import './subfolder1';  // In reality this is an app area, just to show the idea!
import './subfolder2';

子文件夹下的index.ts可能看起来像这样；

import './some.module';
import './some.service';
import './some.directive';

在这种情况下，该文件夹中将有一个名为some.module.ts的文件，其中包含用于注册模块的调用（即angular.module('some.module', [])）

创建此导入链有点繁琐，但是一旦安装到位，就可以通过这样的导入方式在main.ts和test.ts中使用它：

import "./app-ajs";

这可确保您在生产环境中运行与测试中相同的代码。

希望这会有所帮助。

Answer 2

从Angular 8开始，有match <- c("2234436803329252","460696711422302") url <- c("https://business.facebook.com/460696711422302/", "https://twitter.com/status/1192745040302477312") sapply(url, function(x) any(str_detect(x, match))) https://business.facebook.com/460696711422302/ https://twitter.com/status/1192745040302477312 TRUE FALSE 。有关示例，请参见https://angular.io/api/upgrade/static/testing/createAngularJSTestingModule。