Gon*_*bia 38 javascript async-await angularjs angular-ui-router
我一直在试图使本相关的状态和成分一定的样板文章
在我在dev-server下运行的项目中,一切正常,当我执行$state.go("home")组件模板时,我的预期是如何加载的,但是当我在测试环境中执行此操作时,这不起作用.
之前,在测试中,当我使用"模板"而不是"组件"与ui-router使用"旧方式"时,执行$rootScope.$digest()就足以在其中添加模板,<div ui-view></div>但是使用这种新方式,这不再起作用了.
我究竟做错了什么？
编辑:我一直在努力深入了解问题,我发现问题与已完成的HTTP请求有关.也许它与我的承诺使用async/await解析回调的方式有关.请检查服务:
服务
export class TodoService {
constructor($http, BASE_URL) {
this.http = $http;
this.url = `${BASE_URL}/todos`
}
async getTodos() {
const apiResponse = await this.http.get(this.url)
return apiResponse.data.todos
}
}路由器
import '@uirouter/angularjs'
export function routes($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: true,
})
$stateProvider
.state("home", {
url: "/",
component: "todoList",
resolve: {
todosList: TodoService => TodoService.getTodos()
}
})
}测试
import { routes } from "routes"
import { TodoListComponent } from "components/todoList.component"
import { TodoService } from "services/todo.service"
describe("TodoListComponent rendering and interaction on '/' base path", () => {
let componentDOMelement
let stateService
beforeAll(() => {
angular
.module("Test", [
"ui.router"
])
.config(routes)
.constant("BASE_URL", "http://localhost:5000/api")
.component("todoList", TodoListComponent)
.service("TodoService", TodoService)
//I enable this for better logs about the problem
.run(['$rootScope','$trace', function($rootScope, $trace) {
$trace.enable("TRANSITION")
}])
})
beforeEach(angular.mock.module("Test"))
beforeEach(inject(($rootScope, $compile, $state, $httpBackend) => {
//build the scene
//1st render the root element of scene: We needs a router view for load the base path
let scope = $rootScope.$new()
componentDOMelement = angular.element("<div ui-view></div>")
$compile(componentDOMelement)(scope)
scope.$digest()
document.body.appendChild(componentDOMelement[0]) //This is a hack for jsdom before the $rootScope.$digest() call
//2nd let's create a fake server for intercept the http requests and fake the responses
const todosResponse = require(`${__dirname}/../../stubs/todos_get.json`)
$httpBackend
.whenGET(/.+\/todos/)
.respond((method, url, data, headers, params) => {
return [200, todosResponse]
})
//3rd Let's generate the basic scenario: Go at home state ("/" path)
$state.go("home")
$rootScope.$digest()
$httpBackend.flush()
}))
it("Should be render a list", () => {
console.log("HTML rendered")
console.log(document.querySelectorAll("html")[0].outerHTML)
})
})不呈现的HTML结果
<html>
<head>
<style type="text/css">
@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate) {
display:none !important;
}
ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{
position:absolute;
}
</style>
</head>
<body><!-- uiView: -->
</body>
</html>另外,我在HTML之前跟踪stateChange:
console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1276
Transition #0-0: Started -> "Transition#0( ''{} -> 'home'{} )"
console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1282
Transition #1-0: Ignored <> "Transition#1( ''{} -> 'home'{} )"
console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1313
Transition #1-0: <- Rejected "Transition#1( ''{} -> 'home'{} )", reason: Transition Rejection($id: 0 type: 5, message: The transition was ignored, detail: "undefined")
我看到转型中存在问题,但没有给出任何理由.
================================================== ======================
编辑2
最后我们发现了问题,但我无法弄清楚真正的问题.我在我的项目中创建了一个分支来显示问题.这与async/awaitjavascript功能有关:
export class TodoService {
constructor($http, BASE_URL) {
this.http = $http;
this.url = `${BASE_URL}/todos`
}
//Interchange the comment on the getTodos method and run `npm run tdd` for see the problem:
//When async/await doesn't used, the html associated to the resolve in the
// "/" route that used this service, the promise was resolved that expected.
//The idea for this branch it's research about the problem and propose a way
//for we can use async/await on the production code and on the testing environment
async getTodos() {
const apiResponse = await this.http.get(this.url)
return apiResponse.data.todos
}
// getTodos() {
// return this.http.get(this.url).then(res => res.data.todos)
// }
}
所以我的新问题是:
编辑3角度UI路由器存储库中报告 的问题3522
这只是基于我对resolve员工工作方式和ngMock作用的理解的有根据的猜测。在您的第一个示例中，您的resolvefor在承诺解决getTodos之前不会返回$http，此时您从响应中提取值并将其返回。然而，resolve人们期望一个$q.Promise值作为哨兵来保存路由器的渲染，直到它解析为止。在您的代码中，根据其转译方式，awaitandreturn调用可能不会产生正确的哨兵值，因此它被视为同步响应。
一种测试方法是resolve在控制器中请求todolist组件的 -er 并检查该值。我敢打赌它不是a $q.Promise，尽管它可能是原生的 Promise 。
不过，当使用时resolve，只需通过添加 a 来链接 Promisethen并返回它。路由器将处理其余的事情。
或者更好的是，切换到 Observables！（/我鸭子进来的西红柿）
| 归档时间： |
|
| 查看次数： |
1559 次 |
| 最近记录： |