e2e 量角器测试无法检测多层角度路由器中的角度分量

Question

我有一个 angular 应用程序，我需要在这个项目中实现 e2e 测试。

angular pack: 4.6.6
protractor: 5.3.0

此外，我的项目中有一个多层路由器，它将路由器出口包装在每一层的另一个组件中。

当我需要导航到测试环境中的低层路由之一（例如/notification/groups时，程序无法从页面获取响应并返回错误：

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds.
This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

此外，当我在测试环境中导航到登录页面时，它会毫无问题地通过，因为它位于路由器的最高层。

所以问题在于 angular 无法检测到用路由器插座包装到其他组件中的组件。

我该如何解决这个问题

这是我的路由器配置：

[
{
        path: "",
        component: ThemeComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: "",
                component: DefaultComponent,
                children: [
                    {
                        path: "modbus-devices",
                        component: DeviceListComponent,
                        data: { deviceType: 'modbus' }
                    },
                    {
                        path: "snmp-devices",
                        component: DeviceListComponent,
                        data: { deviceType: 'snmp' }
                    },
                    {
                        path: "add-modbus-device",
                        component: ModbusAddDeviceComponent
                    },
                    {
                        path: "edit-modbus-device/:id",
                        component: ModbusEditDeviceComponent
                    },
                    {
                        path: "add-snmp-device",
                        component: SnmpAddDeviceComponent
                    },
                    {
                        path: "edit-snmp-device/:id",
                        component: SnmpEditDeviceComponent
                    },
                    {
                        path: "notification/groups",
                        component: NotificationGroupListComponent
                    },
                    {
                        path: "notification/setting",
                        component: NotificationPrioritySettingComponent
                    },
                    {
                        path: "notification/groups/add",
                        component: NotificationGroupAddComponent,
                        data: { edit: false }
                    },
                    {
                        path: "notification/groups/edit/:id",
                        component: NotificationGroupAddComponent,
                        data: { edit: true }
                    }
                ]
            }
        ],
    }, {
        path: 'login',
        component: AuthComponent
    },
    {
        path: 'logout',
        component: LogoutComponent
    }
]

Answer 1

您收到的错误：

失败：等待异步 Angular 任务在 11 秒后完成超时。 这可能是因为当前页面不是 Angular 应用程序。 有关更多详细信息，请参阅常见问题解答： https : //github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

...发生是因为您在 Angular 区域内运行了长期存在的异步代码。

例如，如果您尝试在其上运行 e2e 测试，这行代码将导致上述错误：

export class MyComponent implements OnInit {
    ngOnInit() {
        // Do something in a while
        setTimeout(() => {}, 1000000);
    }
}

要修复上述代码中的错误，您需要在 Angular 之外运行该setTimeout ，以免一切都挂起。

export class MyComponent implements OnInit {
    constructor(private zone: NgZone) {}

    ngOnInit() {
        this.zone.runOutsideAngular(() => {
            // Do something in a while
            setTimeout(() => {}, 1000000);
        });
    }
}

很多人确定您的代码或您使用的第三方库的代码没有任何长期存在的异步代码，如果有，那么您应该在 Angular 之外运行它们，您的问题应该会消失。 如果您不在 Angular 之外运行它们，Angular 将等待它们完成，如果超时（在这种情况下为 11 秒），它会给您收到的错误。