Laravel Dusk: дождитесь окончания маски загрузки / наложения - PullRequest
Новая
       8

Laravel Dusk: дождитесь окончания маски загрузки / наложения

0 голосов
/ 03 января 2019

У меня возникают трудности с прохождением некоторых тестов из-за маски загрузки, которую я накладываю на весь экран во время вызовов AJAX (прозрачный черный с загрузочным gif в середине).

Я могу заставить его работатьесли я pause(2000) каждый раз, но количество вызовов AJAX в приложении делает это медленным решением.Я пытаюсь использовать waitUntilMissing, но он не работает.

  • У меня есть div с двумя классами: load-mask и loading.
  • load-mask всегда есть
  • loading класс, применяемый к div во время всех вызовов AJAX vue.js;это маска загрузки
  • Когда получен ответ AJAX, loading класс удален

Итак, в моем тесте я пытаюсь сделать это: 

$browser->loginAs($this->user)
    ->visit(new CustomInputPage)
    ->saveNarrative('Lorem ipsum dolor')
    ->visit(new CustomInputPage)
    ->waitUntilMissing('.load-mask')
    ->assertSee('Lorem ipsum dolor');
  • Загрузить страницу
  • Введите текст и нажмите Сохранить.
  • Перезагрузите страницу
  • Убедитесь, что текст все еще там

Я получил ошибкуна assertSee потому что, как только страница загружается, применяется loading, поскольку это делает вызов AJAX, поэтому он еще не загрузил текст.

Я предполагаю, что waitForMissing('.load-mask') проходит еще до того, как маска загрузки запускается, поэтому он пытается assertSee во время процесса загрузки, но это предположение.

Есть ли рабочее решение снаружипросто используя pause?

РЕДАКТИРОВАТЬ: В настоящее время я пытаюсь щелкнуть по странице, чтобы перезагрузить AJAX вместо полной загрузки страницы.Я все еще испытываю ту же проблему.

Теперь я пытаюсь сделать это вместо: 

$browser->loginAs($this->user)
    ->visit(new CustomInputPage)
    ->saveNarrative('Lorem ipsum dolor')
    ->clickLink('Tab 2')
    ->waitUntilMissing('.load-mask')
    ->assertSee('Lorem ipsum dolor');

Нажатие на вкладку загрузит вызов AJAX, на который я ссылаюсь.Я замечаю на скриншоте, что он всегда показывает мою .loading анимацию.

Итак ... Tab 2 должно быть пустым полем, но на снимке экрана показано, что текст еще не очищен, и маска загрузки все еще присутствует (происходит после получения ответа).

Поэтому я не могу определить время завершения вызова AJAX без использования pause.Должен ли я попробовать другой способ?

РЕДАКТИРОВАТЬ 2

Здесь моя маска загрузки вставляется.Библиотека vue.js axios. 

import store from '../store';

let numberOfAjaxCAllPending = 0;

axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  numberOfAjaxCAllPending++;
  store.commit('isLoading', true);
  return config;
}, function (error) {
  numberOfAjaxCAllPending = 0;
  store.commit('isLoading', false);
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {

  // Do something with response data
  numberOfAjaxCAllPending--;
  if (numberOfAjaxCAllPending === 0) {
    store.commit('isLoading', false);
  }
  return response;
}, function (error) {
  numberOfAjaxCAllPending = 0;
  store.commit('isLoading', false);
  // Do something with response error
  return Promise.reject(error);
});

И на каждом шаблоне лезвия Laravel я сначала пробовал это: 

<div :class="{ loading: $store.state.isLoading }" class="load-mask"></div>

Но сейчас я пытаюсь так, с классом загрузки всегдаприсутствует и просто переключается отображение нет / блок 

<div :style="{display: $store.getters.getLoadingDisplay }" class="loading"></div>

Та же проблема встречается и в этом случае.Маска загрузки присутствует, и я также замечаю, что текстовое поле не очищается при переключении вкладок в Laravel Dusk (вкладки хорошо очищаются в обычном браузере).

РЕДАКТИРОВАТЬ 3

Первое утверждение проходит, затем не удается при попытке ->press('Save').Я получаю эту ошибку: 

Facebook\WebDriver\Exception\UnknownServerException: unknown error: Element <button type="button" class="btn btn-sm mt-3 btn-primary" style="float: left;">...</button> is not clickable at point (440, 912). Other element would receive the click: <div class="loading" style="display: block;"></div>

Это тест, который я пытаюсь запустить.Как видите, у меня есть waitUntilMissing и assertMissing сразу после друг друга.Затем я нажимаю Save, и он говорит, что все еще есть маска загрузки.Если я подожду 2 секунды до оператора keys, он будет работать нормально.

$browser->loginAs($this->user)
  ->visit(new CustomInputPage)
  ->waitUntilMissing('.loading')
  ->assertMissing('.loading')
  ->keys('.ql-editor', 'Test Text')
  ->press('Save')
  ->waitUntilMissing('.loading');
...