如何使用 Polymer iron-ajax 编写 API 测试

Question

我正在尝试使用 Mocha 测试套件生成 iron-ajax 请求和运行对其在 Polymer 2.x 中的响应的测试。

但是，当运行进行此测试时，我收到以下错误：

Cannot read property 'generateRequest' of undefined Context. at my-test.html:25

<!doctype html>

<html> 
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>shop-catalogs</title>

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

  <!-- Import the element(s) to test -->
  <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
  <script src="/bower_components/mocha/mocha.js"></script>

</head>
<body>

  <test-fixture id="ajax">
    <template>
      <iron-ajax
        handle-as="json" 
        headers$='{"Authorization": "Bearer api_access_token"}'
        method="get"
        url="https://api.com/test/endpoint">
      </iron-ajax>
    </template>
  </test-fixture>

  <script>
    suite('shop-catalogs tests', () => {
      var ajax;

      test('checking for AJAX response', () => {

        let request = ajax.generateRequest();
        request.completes.then(response => {
          console.log(response);
        })

      });

    });
  </script>

</body>
</html>

如何在此框架中发出 AJAX 请求并处理响应？

Answer 1

我建议为此使用 fetch。它还将发送一个 ajax 调用，并且是您浏览器的本地调用。


<html> 
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>shop-catalogs</title>

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

  <!-- Import the element(s) to test -->
  <script src="/bower_components/mocha/mocha.js"></script>

</head>
<body>
  <script>
    suite('shop-catalogs tests', () => {
      test('checking for AJAX response', (done) => {
        fetch("https://api.com/test/endpoint", {
            headers: {"Authorization": "Bearer api_access_token"}
        }).then(res => {
            assert.equal(res.status, 200)
            return res.json()
        })
        .finally(res=>{ 
            console.log(res)
            done()//async test needs to tell when done 
        })
      });

    });
  </script>

</body>
</html>

如何使用 Polymer iron-ajax 编写 API 测试

How to write an API test with Polymer iron-ajax

polymer

mocha.js

chai

sinon