Как смоделировать шаг выбора файлов в Cypress, чтобы проверить оставшиеся шаги

Question

У меня проблемы с тестированием сценария загрузки файла в Cypress в приложении Angular. Это шаги:

1. Пользователь выбирает файл, нажимает «Выбрать», и открывается модальное окно с формой.

2. Пользователь заполняет форму и нажимает ОК.

3. Файл загружен, а значения формы отправлены на сервер.

Cypress не поддерживает средство выбора файлов. Но мне нужно проверить другие шаги, которые пользователь делает, когда файл был выбран. Как в Cypress я могу вызвать функцию, которая открывает всплывающее окно, если в приложении эта функция вызывается событием изменения ввода файла? Может быть, можно вызвать функцию прямо в тесте (аналогично модульным тестам, т.е. component.setSelectedFiles ()) и вообще обойти средство выбора файлов?

App.component.html

<label class="btn" (click)="$event.stopPropagation()">
  Upload
  <input type="file" multiple (change)="setSelectedFiles($event.target.files)"> 

</label>

App.component.ts

setSelectedFiles(fileArray) { // This function is triggered when user selects a file
  this.files = fileArray
  this.showModal = true    // this step opens a modal pop up.
}

Answer 1

Это довольно часто обсуждается в Cypress выпуске . Ответ с большим количеством голосов выше приведен ниже, я делаю нечто похожее в наших тестах. Если это не сработает, прочитайте эту проблему, и, возможно, для вас найдется обходной путь.

cy.fixture('path/to/image.png').as('logo')
  .get('input[type=file]').then(function(el) {
    return Cypress.Blob.base64StringToBlob(this.logo, 'image/png')
      .then(blob => {
        el[0].files[0] = blob
        el[0].dispatchEvent(new Event('change', {bubbles: true}))
      })
  })