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

Question

我有以下场景：

• 加载页面
• 期望微调器是隐藏的
• 输入用户名点击搜索
• 期待微调显示
• 延迟几秒钟后，预计微调器会隐藏
• 断言显示正确的用户详细信息

这是工作演示

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

这是我的测试规范：

    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 的新手，有人可以帮我解决这个问题。

谢谢！

Answer 1

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

1. 它仅在短时间内显示。这不允许TestCafe及时检查。使用模拟使旋转器仅出现几毫秒。
2. TestCafe 等待所有请求，并且在 XHR 请求完成之前不执行任何操作。这意味着在您的请求完成之前断言不会开始。

但是，仍然可以解决该问题。您可以使用MutationObserver和 TestCafe ClientFunctions机制。

您可以使用 ClientFunction 创建元素观察器。观察者将观察app元素的变化。如果该spinner元素出现，观察者将收到通知并将window.spinnerWasShown变量设置为true。

单击按钮后，您可以检查windows.spinnerWasShown变量是否设置为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");
});