Testing 在发出获取请求后，编写Testcafe测试以断言加载微调器是可见的

我有以下情况：

• 加载页
• 预期微调器是隐藏的
• 键入用户名并单击搜索
• 预期微调器显示
• 延迟几秒钟后，期望微调器隐藏
• 断言将显示正确的用户详细信息

这是工作演示

我在测试规范中模拟了网络请求，但我无法理解如何在单击搜索按钮后断言spinner是可见的

这是我的测试规范：

    import {Selector, RequestMock} from "testcafe";
   import mockUser from "../mocks/mockUser.json";

var apiMocks = RequestMock()
  .onRequestTo(/\/api\/users/)
  .respond(mockUser, 200, {
    'access-control-allow-credentials': "*",
    'access-control-allow-origin': "*"
  })
fixture `When a user is searched`
  .page(`http://localhost:3000/`)
  .requestHooks(apiMocks);

test("Should fetch user details", async t => {
  const spinnerEl = Selector("[data-test-id='spinner']");

  await t.expect(spinnerEl.exists).notOk();

  await t
    .typeText("[data-test-id='txt-search']", "foo")
    .click("[data-test-id='btn-search']");
   // This line does not work
  // await t.expect(spinnerEl.exists).ok();
  await t.expect(Selector("[data-test-id='username']").innerText).eql("Foo Bar");
  await t.expect(Selector("[data-test-id='userid']").innerText).eql("foo");
})

我是新来TestCafe的，有人能帮我吗

---

谢谢

由于以下原因，很难检查所述微调器元件是否显示：

它仅在短时间内显示。这不允许TestCafe及时检查它。使用模拟会使微调器仅显示毫秒

TestCafe等待所有请求，在XHR请求完成之前不执行任何操作。这意味着断言在您的请求完成之前不会启动

然而，仍然有可能解决这个问题。 您可以使用和TestCafe机制

可以使用ClientFunction创建元素观察者。观察者将观察

app

元素的变化。如果出现

微调器

元素，将通知观察者并设置

窗口。微调器已显示

变量为

true

单击按钮后，您可以检查

windows.spinnerwasshow

变量是否设置为

true

以下是完整的示例：

import { Selector, RequestMock, ClientFunction } from "testcafe";
import mockUser from "../mocks/mockUser.json";

var apiMocks = RequestMock()
    .onRequestTo(/\/api.github.com\/users/)
    .respond(mockUser, 200, {
        'access-control-allow-credentials': "*",
        'access-control-allow-origin':      "*"
    });

fixture`When a user is searched`
    .page(`http://localhost:3000/`)
    .requestHooks(apiMocks);


const spinnerWasShown = ClientFunction(() => window.spinnerWasShown);


const observeSpinner = ClientFunction(() => {
    var appEl = document.querySelector('.app');

    const config = { attributes: true, childList: true };

    const callback = function(mutationsList) {
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                for (var i =0; i < mutation.addedNodes.length; i++ )
                    window.spinnerWasShown = window.spinnerWasShown || mutation.addedNodes[i].className.indexOf('spinner') > -1;
            }
        }
    };

    const observer = new MutationObserver(callback);

    observer.observe(appEl, config);
});

test("Should fetch user details", async t => {
    const spinnerEl = Selector("[data-test-id='spinner']");

    await t.expect(spinnerEl.exists).notOk();

    await t.typeText("[data-test-id='txt-search']", "foo");

    await observeSpinner();

    await t.click("[data-test-id='btn-search']");

    await t.expect(spinnerWasShown()).eql(true);

    await t.expect(spinnerEl.exists).notOk();

    await t.expect(Selector("[data-test-id='username']").innerText).eql("Foo Bar");
    await t.expect(Selector("[data-test-id='userid']").innerText).eql("foo");
});

从“testcafe”导入{Selector，RequestMock，ClientFunction}；
从“./mocks/mockUser.json”导入mockUser；
var apiMocks=RequestMock（）
.onRequestTo（/\/api.github.com\/users/）
.响应（模拟用户，200{
“访问控制允许凭据”：“*”，
“访问控制允许来源”：“*”
});
fixture`搜索用户时`
.第页(`http://localhost:3000/`)
.请求钩子（APIMOCK）；
常量SpinnerwasShowed=ClientFunction（（）=>window.SpinnerwasShowed）；
const observeSpinner=ClientFunction（（）=>{
var appEl=document.querySelector（'.app'）；
const config={attributes:true，childList:true}；
常量回调=函数（mutationsList）{
for（让突变列表突变）{
if（mutation.type==='childList'）{
对于（var i=0；i-1；
}
}
};
const observer=新的MutationObserver（回调）；
observer.observe（appEl，config）；
});
测试（“应获取用户详细信息”，异步t=>{
常量微调器=选择器（“[data test id='spinner']”）；
wait t.expect（spinnerEl.exists）.notOk（）；
等待t.typeText（“[data test id='txt-search']”，即“foo”）；
等待观察内部（）；
等待t。单击（“[data test id='btn-search']”）；
wait t.expect（SpinnerwasShowed（））.eql（true）；
wait t.expect（spinnerEl.exists）.notOk（）；
wait t.expect（选择器（“[datatestid='username']”）.innerText.eql（“foobar”）；
wait t.expect（选择器（“[datatestid='userid']”）。innerText.eql（“foo”）；
});

能否请您提供一个应用程序示例，我可以用它运行提供的测试代码？@mlosev感谢您的回复。我展示了这个代码笔演示来演示我想要测试的功能：您可以在搜索框中键入任何有效的github用户ID，然后点击GetUser按钮查看加载微调器。谢谢你的帮助。请让我知道我是否还需要其他任何东西。@Nikhil-该url不允许自动化，因为它需要验证码。。。。您还可以提供“../mocks/mockUser.json”文件吗？或者编辑上面的代码以允许定义mockUser？@TallKU我的道歉。这是一个GitHub repo，带有演示应用程序和示例脚本文件：如果还需要我的帮助，请告诉我。谢谢你的推荐，Alex。