testing - 编写 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");
});