Question

在测试中，我创建了一个名为postData的函数，该函数通过Promise返回模拟的json数据。我用它来测试urlValidation函数，该函数使用postData函数将json数据添加到DOM中。我还在测试中也添加了DOM。

testUrl.spec.js


import { urlValidation } from '../client/js/urlValidation';
import { printData } from '../client/js/checkStatement';


test('Testing url Validation', () => {

 document.body.innerHTML = `
 <body>

 <header>
     <div class="logo">
         Logo
     </div>
     <div class="title">
         Title
     </div>
     <div class="menu">
         <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Contact</a></li>
             <li> <a href="#">Body</a></li>
             <li><a href="#">Footer</a></li>
         </ul>
     </div>
 </header>

 <main>
     <section class="form-section">
         <form class="blog-entry-text" onsubmit="return Client.checkStatement(event)">
             <input id="text-input" type="text" name="input" value="" placeholder="Enter Text">            
             <button onclick="return Client.checkInput(event)">SubmitInput</button>
         </form>
         <form class="blog-entry-url">
             <input id="text-url" type="text" name="input" value="" placeholder="Enter Text">            
             <button onclick="return Client.checkUrl(event)">SubmitURL</button>
         </form>
     <section>

     <section class="form-results">
         <strong>Form Results:</strong>
         <div id="results"></div>
     </section>
 </main>

 <footer>
     <p>This is a footer</p>
 </footer>
</body>`

  const postData = (input1, input2) => { return Promise.resolve({
     text: 'Hello',
     language: 'en',
     categories: [
         {
         label: 'religious festival or holiday - easter',
         code: '12014002',
         confidence: 0.54
         }
     ]
     })
 };
 
 urlValidation('What is going on', postData);
 expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>`)
});

urlValidation函数将一个函数作为参数，然后从promise返回的json数据中将值添加到DOM。

urlValidations.js

const urlValidation = (inputText, callback) => {
    const inputData = {input: inputText};
    callback("http://localhost:8080/classify-url", inputData).then(data =>{
        console.log(data);
        printData(inputData, data);
    });
};

print Data函数操纵DOM并将数据添加到网页。

printData.js

function printData(dataObj, data) {
    console.log(`Data: ${data} DataObj: ${dataObj}`);
    const results = document.getElementById('results');
    const languageSystem = document.createDocumentFragment();
    const p = document.createElement('p');
    p.innerHTML = `Text Data: ${dataObj.input}`;
    languageSystem.appendChild(p);
    if (data.categories.length == 0) {
        const label = document.createElement('p');
        label.innerHTML = `Label: None`;
        languageSystem.appendChild(label);
    } else {
        data.categories.forEach(element => {
            console.log(element);
            const label = document.createElement('p');
            label.innerHTML = `Label: ${element.label}`;
            languageSystem.appendChild(label);
            console.log(`Label: ${languageSystem.innerHTML}`);
        });
    }

    console.log(data);
    console.log(`Results: ${languageSystem.innerHTML}`);
    results.appendChild(languageSystem);

}

运行测试时，我会得到以下结果：

Expected: "<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>"
    Received: ""

      68 |     
      69 |     urlValidation('What is going on', postData);
    > 70 |     expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>`)
         |                                                          ^
      71 |   });

      at Object.toEqual (src/__tests__/testUrl.spec.js:70:58)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        4.036 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

奇怪的是，自从我进行了一次测试之后，我便能够将json数据直接添加到printData函数中，并且该测试工作正常。

我还做了一堆console.log，以查看json数据是否正确地传递给了printData函数，看来这就是结果。

    console.log
      Label: religious festival or holiday - easter

      at log (src/client/js/checkStatement.js:45:21)
          at Array.forEach (<anonymous>)

    console.log
      {
        text: 'Hello',
        language: 'en',
        categories: [
          {
            label: 'religious festival or holiday - easter',
            code: '12014002',
            confidence: 0.54
          }
        ]
      }

      at log (src/client/js/checkStatement.js:49:13)

我很确定做错了什么，但是我不知道该怎么办。

Answer 1

存在竞态条件是因为存在没有被链接的承诺。

urlValidation应该返回一个承诺：

return callback("http://localhost:8080/classify-url", inputData).then(...);

然后可以在测试中或需要按顺序执行它的任何其他地方等待它：

await urlValidation('What is going on', postData);
expect(...)

Answer 2

信用归于Estus Flask，因为他是帮助我了解这是比赛条件的人。

所以我要做的就是将测试更改为异步测试。

test('Testing url Validation', async () => {
....

并添加等待以等待结果，然后再运行预期的测试

await urlValidation('What is going on', postData);
expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: What is going on</p><p>Label: religious festival or holiday - easter</p>`)

再次感谢Estus Flask，感谢您的帮助！

测试功能时，玩笑测试未更新DOM

2 个答案: