angle config incでグローバル変数を正しく使用する方法。テスト

Question

私はワードプレスサイトの角度のテーマを書こうとしています、そして、私は、一般的なwordpress/angular 'パターン'のように、functions.phpを使ってviews/partialsフォルダを指すグローバル変数を定義していますしたがって、それは経路によって参照されることができる。 functions.phpで

：

wp_localize_script('appJs', 'localized', 
    array (
     'partials' => get_stylesheet_directory_uri() . '/views' 
    ) 
); 

そして、私の角度設定クラス：実行時に

function AngularConfig($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
      templateUrl: localized.partials + '/home.html', 
      controller: 'HomeController' 
     }) 
     .when('/projects/', { 
      templateUrl: localized.partials + '/projects.html', 
      controller: 'ProjectsController' 
     }) 
     .when('/contact/', { 
      templateUrl: localized.partials + '/contact.html', 
      controller: 'ContactController' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
} 

export default AngularConfig; 

localizedがグローバルであるので、これはpartialsのプロパティで、動作します。しかし、私のテスト（カルマ、ジャスミン、ファントム）は、グローバルが環境に定義されていないため失敗します。 （また、このようにグローバル変数を直接参照することは厄介であり、DIの動きなどに逆らっています）

私はconfigクラスに `windowProvider 'を注入してそこから変数を取得したいと思います。このような何か：

function AngularConfig($routeProvider, $locationProvider, $windowProvider) { 
    $locationProvider.html5Mode(true); 

    let partialsRoot = $windowProvider.$get().localized.partials; 

    $routeProvider 
     .when('/', { 
      templateUrl: partialsRoot + '/home.html', 
      controller: 'HomeController' 
     }) 
     .when('/projects/', { 
      templateUrl: partialsRoot + '/projects.html', 
      controller: 'ProjectsController' 
     }) 
     .when('/contact/', { 
      templateUrl: partialsRoot + '/contact.html', 
      controller: 'ContactController' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
} 

export default AngularConfig; 

しかし、私はテストがモジュールを起動する前にwindow/windowProviderを変更する方法を考え出すことはできません。
私はこれを試してみた：私は、Configクラスで.localized.partialsを参照しない場合を除き

beforeEach(module(MODULE_NAME, function ($windowProvider) { 
    let $window = $windowProvider.$get(); 
    $window.localized = { 
     partials: 'some-path/' 
    }; 
    console.log("WINDOW:", $window); 
})); 

しかし、console.logは実行されません - 私は、モジュール（および設定）を思わせるその前にインスタンス化されています変更する機能window

これに関するヘルプや説明は、非常に高く評価されます。
おかげ

Answer 1

$windowサービスは、それが嘲笑/スタブできることがあるので、サービスはそれを汚染した場合、実際のwindowを取り壊すする必要はありません理由。

オリジナル$windowサービスは、どのような方法をwindowを指し、同様に$windowProvider.$get()ので、彼らはwindowと交換可能に使用することができます。

角度サービスはシングルトンなので、$windowサービスを注入する利点は、アプリケーション全体で嘲笑されて使用され、同じ模擬対象を参照できることです。通常$windowは角度DIが$windowProvider.$get()で虐待を受けているとき、これは真実ではありません。この

// module order matters 
module(($provide) => { 
    $provide.factory('$window',() => {}); 
}, 'app'); 

のように嘲笑することができます。このように呼び出されると、$windowを模倣するのではなく、別のオブジェクトを参照するため、呼び出された関数スコープ以外のどこからでもこのオブジェクトにアクセスすることはできません。

• $windowProviderが前に嘲笑され、この方法は、アプリconfigブロック内に注入される

  beforeEach(() => { 
      module({ $window: {} }, 'app'); 
      ... 
  

• $windowProvider.$getと$windowが参照：

  この現象は、そのような$windowをモックすることによって固定することができます。同じ{}オブジェクトはサービス定義で作成され、wrappされていないため工場機能で編集された

• フレッシュ{}各仕様のオブジェクトが再発行されます。

---

しかし、これを行うための適切な方法は、単にconstantを使用することです：

app.constant('localized', window.localized); 

それは、そのため正確にあります。 DIを通してグローバル定数を取り除き、設定フェーズと実行フェーズでそれらを使用する。他のサービスのように嘲笑することができます

module(($provide) => { 
    $provide.constant('localized', {}); 
}, 'app');