[解決済み] Angular ui ルータのユニットテスト(ステートからURLへ)
2023-08-20 09:08:16
質問
Angular uiルータで構築された私のアプリケーションのルータをユニットテストするのに苦労しています。私がテストしたいのは、状態の遷移が適切にURLを変更するかどうかです (後でもっと複雑なテストがありますが、これは私が始めているところです)。
以下は、私のアプリケーションのコードの関連する部分です。
angular.module('scrapbooks')
.config( function($stateProvider){
$stateProvider.state('splash', {
url: "/splash/",
templateUrl: "/app/splash/splash.tpl.html",
controller: "SplashCtrl"
})
})
そして、テスト用のコード。
it("should change to the splash state", function(){
inject(function($state, $rootScope){
$rootScope.$apply(function(){
$state.go("splash");
});
expect($state.current.name).to.equal("splash");
})
})
Stackoverflowの同様の質問(および公式のuiルータのテストコード)では、$state.goの呼び出しを$applyでラップすれば十分であることが示唆されています。しかし、私はそれを行い、状態はまだ更新されません。$state.current.nameは空のままです。
どのように解決するのですか?
私もこの問題に直面していましたが、ようやく方法がわかりました。
以下は状態のサンプルです。
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('myState', {
url: '/state/:id',
templateUrl: 'template.html',
controller: 'MyCtrl',
resolve: {
data: ['myService', function(service) {
return service.findAll();
}]
}
});
}]);
以下のユニットテストは、URLとパラメータをテストし、それ自身の依存性を注入するリゾルブを実行することをカバーします。
describe('myApp/myState', function() {
var $rootScope, $state, $injector, myServiceMock, state = 'myState';
beforeEach(function() {
module('myApp', function($provide) {
$provide.value('myService', myServiceMock = {});
});
inject(function(_$rootScope_, _$state_, _$injector_, $templateCache) {
$rootScope = _$rootScope_;
$state = _$state_;
$injector = _$injector_;
// We need add the template entry into the templateCache if we ever
// specify a templateUrl
$templateCache.put('template.html', '');
})
});
it('should respond to URL', function() {
expect($state.href(state, { id: 1 })).toEqual('#/state/1');
});
it('should resolve data', function() {
myServiceMock.findAll = jasmine.createSpy('findAll').and.returnValue('findAll');
// earlier than jasmine 2.0, replace "and.returnValue" with "andReturn"
$state.go(state);
$rootScope.$digest();
expect($state.current.name).toBe(state);
// Call invoke to inject dependencies and run function
expect($injector.invoke($state.current.resolve.data)).toBe('findAll');
});
});
関連
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] TDDのためのJavaScriptユニットテストツール
-
[解決済み] C# "internal "アクセス修飾子でユニットテストを行う場合
-
[解決済み】AngularJS ui-router ログイン認証
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?