2017-05-28 14 views
2

私はポリマーアプリを書いており、ポリマーの要素によって使用されるサービスを持っています。私はこのサービスをテストしたいのですが、どのように考え出すことはできません。ポリマーでサービスをテストするにはどうすればよいですか?

は、ここで私はサービスに持っているものです。

<script src="../../webcomponentsjs/webcomponents-lite.js"></script> 
<script src="../../web-component-tester/browser.js"></script> 

<link rel="import" href="../test-service.html"> 

<script> 
define('test-service',() => { 
    class TestService { 
    constructor(componentA, componentB) { 
     this.componentA = componentA; 
     this.componentB = componentB; 
    } 
    } 
    return TestService; 
}); 
</script> 

は、どのように私はこれをテストすることができますか?単純に.htmlファイルを含めると、TestServiceにアクセスすることはできません。

+0

'web-component-tester'を試したことがありますか? – a1626

+0

うん、それは私が使っているもので、私のトラブルはどこから来ているのか。それに応じて問題の説明を更新しました。 – horstwilhelm

答えて

0

最終的にわかりました。それはすべて、ポリマーのIMDと依存性注入と関係していました。テストスイートを定義すると、それと異なって見える:

define('test-service-test', ['test-service'], (TestService) => { 
    let testServiceInstance = new TestService(1, 2); 

    test('basic test', function(){ 
     assert.equal(testServiceInstance.componentA, 1); 
     assert.equal(testServiceInstance.componentB, 2); 
    }) 
}); 
0

これはサンプルテストの完全なhtmlです。基本的には、test-fixtureを介してテストサービスタグを追加し、それが適切に機能するかどうかを確認します。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 

    <title>test-service test</title> 

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 
    <script src="../../web-component-tester/browser.js"></script> 

    <link rel="import" href="../test-service.html"> 
</head> 
<body> 

<test-fixture id="BasicTestFixture"> 
    <template> 
     <test-service></test-service> 
    </template> 
</test-fixture> 

<script> 
    suite('test-service', function() { 

     test('instantiating the element with default properties works', function() { 
      let testService = fixture('BasicTestFixture'); 
      assert.equal(testService.apiUrl, 'http://myapi.domain.com'); 
      // possible something like 
      // let addResult = testService.addElement(...); 
      // assert.equals(addResult, '{"result": "success"}'); 
     }); 

    }); 
</script> 

</body> 
</html> 
関連する問題