Спецификация таблицы угловых материалов

У меня есть компонент, который отображает таблицу с использованием Angular Material mat-table. Он работает нормально, но в моем спецификационном файле таблица не отображает элементы тела (td и tr), поэтому тест не проходит. Кажется, я правильно инициализирую текст, я импортирую MatTableModule, а также инициализирую источник данных для mat-table.

Компонент получает ввод, который поступает в источник данных, он не асинхронный, и я вызываю fixture.detectChanges() после инициализации ввода.

Теги table и body отображаются, но тег body пуст. Любые предложения, почему данные table не отображаются?

Спасибо

вот пример тестового кода:

let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
const dataSource: DataSource[] = [{id: 1, name: 'a'}];

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations:[MyComponent],
        imports: [MatTableModule],
}));

beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement
});

it('should display results', () => {
    component.myDataSource = dataSource;
    fixture.detectChanges();
    
    console.info(debugElement.nativeElement); //here I see that the body is empty

    const elements = debugElement.queryAll(By.css('td'));
    expect(elements.length).toBe(2); // I get 0
});

я отредактировал пост

gad 06.02.2019 13:21

Кстати, он работает нормально и только тест проваливается? Я имею в виду, что это отображается, когда вы локально отлаживаете свое приложение?

Kristóf Tóth 06.02.2019 13:53
Тестирование функциональных 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
2
2 354
1

Ответы 1

Попробуйте импортировать MatTableDataSource, объявить таблицу, содержащую массив объектов, инициализировать с помощью new MatTableDataSource<type>(array) и не забудьте проверить определения столбцов, потому что таблица не отображается, если определения вызывают ошибку (например, она не находит какой-то столбец и т. д.)

Есть ли шанс показать нам источник тестового примера?

Kristóf Tóth 06.02.2019 13:08

Разве объявление источника данных не должно выглядеть примерно так: component.myDataSource= new MatTableDataSource(someArray); Таким образом, создается привязка.

Kristóf Tóth 06.02.2019 13:28

не в соответствии с первым примером здесь: material.angular.io/components/table/examples

gad 06.02.2019 13:33

До того, как я перешел к таблице материалов, мой тест был зеленым

gad 06.02.2019 13:38

Извини за это. Если вы покажете нам код своих компонентов, это может немного помочь. Правильно ли отображается таблица при тестировании?

Kristóf Tóth 06.02.2019 14:03

Да, в dev так и есть.

gad 06.02.2019 14:11

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