如何使用 Polymer Iron-ajax 编写 API 测试答案

【问题标题】：How to write an API test with Polymer iron-ajax如何使用 Polymer Iron-ajax 编写 API 测试
【发布时间】：2019-06-27 16:37:25
【问题描述】：

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

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

无法读取未定义上下文的属性“generateRequest”。在 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 请求并处理响应？

【问题讨论】：

标签： polymer mocha.js chai sinon

【解决方案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>

【讨论】：

这太棒了。谢谢！！
将两个thens链接在一起的目的是什么？
不只是我的编码风格：-D
是的，我愿意。我想更好的是使用 finally 而不是 then 作为最后一个 then 这样即使 ajax 失败，测试也会结束。另外我会在第一个然后阻止像检查http状态代码以及结果是否符合我的预期
我明白了。感谢您的小费！我是编写测试的新手，所以很高兴能得到这样的反馈:)。