Создание заглушки класса после перехвата вызовов загрузки происходит.

Содержание

Вопрос или проблема
Ответ или решение
Стобирование класса после загрузки: Как изменить порядок событий в Cypress
Текущая структура событий
Необходимые изменения
Измененный код
Описание изменений
Заключение

Вопрос или проблема

Я хочу, чтобы когда GET-запрос к нужному файлу заканчивается успешно, этот класс был заглушен.

В настоящее время происходит следующее: я открываю страницу index.html, загружаются все файлы, включая MyCustomClass.js через “GET”, “http://127.0.0.1:9002/services/managers/MyCustomClass.js”, и после загрузки всех файлов бэкенд продолжает с вызовом MyCustomClass.myMethod(). Теперь я хочу, чтобы как только GET-запрос к MyCustomClass.js завершится, заглушить возвращаемое значение MyCustomClass.myMethod() как “123”, а затем продолжить с загрузкой всех остальных файлов, которые делает приложение.

Текущий порядок событий:

Все файлы загружаются с помощью GET-запросов, и перехват @loadMyCustomClass зарегистрирован
бэкенд вызывает MyCustomClass.myMethod() с оригинальным значением
cy.wait(“@loadMyCustomClass”, { timeout: 7200000 }).then(() => что заглушает

Я хочу поменять местами 2 и 3.

  open(): MainPage {
    clock.execAsOn(() => {
      cy.intercept("GET", "http://127.0.0.1:9002/services/managers/MyCustomClass.js").as(
        "loadMyCustomClass"
      );

      cy.visit("index.html");

      // Ждем сетевой запрос, который загружает MyCustomClass
      cy.wait("@loadMyCustomClass", { timeout: 7200000 }).then(() => {
        // Ждем, пока MyCustomClass будет прикреплен к объекту window
        // Заглушаем статический метод, как только MyCustomClass становится доступным
        cy.window().then((win) => {
          cy.stub(win.MyCustomClass, "myMethod").returns("123");
          console.log("MyCustomClass.myMethod заглушен");
        });
      });

класс :

// MyCustomClass.ts
class MyCustomClass {
  // Определяем статический метод
  public static myMethod(): string {
    return "Значение myMethod класса MyCustomClass";
  }

  // Определяем метод экземпляра
  public anotherMethod(): string {
    return "Значение anotherMethod класса MyCustomClass";
  }
}

console.log("Класс загружен");
console.log(window.MyCustomClass);
if (typeof window !== "undefined") {
  (window as any).MyCustomClass = MyCustomClass; // Присоединяем к объекту window
}
console.log(window.MyCustomClass);
export default MyCustomClass;

Ответ или решение

Стобирование класса после загрузки: Как изменить порядок событий в Cypress

Когда вы работаете с тестированием фронтенда в Cypress, история загрузки классов и их взаимодействие с бекендом могут создать специфические проблемы, особенно если требуется подменить результаты метода после загрузки определенного файла. В данном случае вы хотите изменить порядок событий, чтобы стобирование метода myMethod происходило сразу после успешной загрузки класса MyCustomClass.js, что избавит ваш тест от ожидания вызова метода с оригинальным значением.

Текущая структура событий

Сейчас порядок событий выглядит так:

Все файлы загружаются через GET-запросы, и интерсептор для loadMyCustomClass регистрируется.
Бекенд вызывает MyCustomClass.myMethod() с оригинальным значением.
Вы ожидаете завершения загрузки с помощью cy.wait("@loadMyCustomClass") и затем выполняете стабы.

Необходимые изменения

Для того чтобы поменять местами шаги 2 и 3, вам нужно гарантировать, что метод myMethod() будет подменён сразу после успешной загрузки MyCustomClass.js. Один из способов сделать это – использовать cy.intercept() для создания интерсептора и стобировать метод до его вызова.

Измененный код

Вот как можно модифицировать ваш код:

open(): MainPage {
    clock.execAsOn(() => {
        // Регистрируем интерсептор для загрузки MyCustomClass.js
        cy.intercept("GET", "http://127.0.0.1:9002/services/managers/MyCustomClass.js").as("loadMyCustomClass");

        // Загружаем индексную страницу
        cy.visit("index.html");

        // Ожидаем завершения загрузки MyCustomClass.js
        cy.wait("@loadMyCustomClass", { timeout: 7200000 }).then(() => {
            // Wait until MyCustomClass is attached to the window object
            cy.window().then((win) => {
                // Стобируем метод сразу после загрузки
                cy.stub(win.MyCustomClass, "myMethod").returns("123");
                console.log("MyCustomClass.myMethod is stubbed");

                // Здесь можно вызвать метод, чтобы протестировать подмену
                // Например: win.MyCustomClass.myMethod();
            });
        });

        // Здесь можно поместить логику, которая должна быть выполнена после стобирования
    });
}

Описание изменений

Стобирование в then-блоке: Теперь метод myMethod подменяется сразу после завершения загрузки файла MyCustomClass.js. Это гарантирует, что при вызове метода со стороны бекенда он вернет подмененное значение "123".
Консольный вывод: Вы добавили сообщение в консоль, сигнализирующее о том, что метод стобирован, что может помочь в отладке.
Логика после стобирования: После стобирования метода вы можете добавить вызов, чтобы удостовериться, что подменённое значение будет использоваться в дальнейшем.

Заключение

Изменение порядка вызовов в вашем тесте Cypress позволяет более эффективно контролировать выполнение методов и обеспечивает корректное покрытие тестами. Теперь при вызове MyCustomClass.myMethod() будет возвращаться подмененное значение "123", что позволит вашему тесту работать без ошибок, связанных с оригинальным значением. Это изменение улучшает стабильность ваших тестов и упрощает их поддержку в будущем.