Как принудительно закрыть диалоговое окно mat в тесте Angular?

Сценарий:

  • У меня есть компонент, который является оболочкой для другого компонента, а компонент-оболочка вызывает this.dialog.open(otherComponent).
  • В тесте "он создает" для компонента-оболочки появляется диалоговое окно открываются в тестовом браузере и остаются там в течение всего набор тестов, скрывая все, что находится под ним, и даже сам тест Результаты.
    • Как мне заставить его закрыть?
    • Я пробовал dialog.close(), dialog.closeAll(), Я попытался создать фиктивный диалог и закрыть это, но, похоже, ничего не работает, потому что исходный компонент под тестирование не закрывает этот диалог.

Как я могу это решить?

Вы должны издеваться над этим, вы не должны полагаться на библиотеку при модульном тестировании своих компонентов. При тестировании интерфейса просто имитируйте щелчок на заднем фоне, кнопку закрытия или нажатие клавиши Esc.

user4676340 18.12.2018 13:56

Как я уже сказал, я пробовал издеваться над этим. Попробую esc.

Tanya Branagan 18.12.2018 15:48

Вы пробовали, но у вас все еще появляется диалоговое окно в ваших тестах. Так что не пытайтесь, получится!

user4676340 18.12.2018 16:15

Хорошо, я буду продолжать попытки! :)

Tanya Branagan 18.12.2018 16:16

Вы были правы, я издевался над MatDialogRef, а не над MatDialog!

Tanya Branagan 08.01.2019 18:57
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
5
1 819
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот функция, которую я создал для создания нового макета диалоговой службы, если вы хотите:

matDialogMock(): SpyObj<MatDialog> {
    return createSpyObj<MatDialog>('MatDialog', {
      open: {
        afterOpened: () => of(undefined),
        afterClosed: () => of(undefined),
      } as any
    });
  }

Позвонив

const mock = matDialogMock();

Вы создаете новый экземпляр макета и можете внедрить его в свои тесты.

Позвольте мне попробовать это и вернуться к вам.

Tanya Branagan 19.12.2018 16:20
Ответ принят как подходящий
 {provide: MatDialog, useValue: {}}

Я издевался над MatDialogRef таким образом, но не над MatDialog. Спасибо @trichetriche за указание на это.

Другие вопросы по теме