Angular Зритель setInput не работает для нестрокового ввода - PullRequest
Новая
       28

Angular Зритель setInput не работает для нестрокового ввода

2 голосов
/ 06 марта 2020

Я успешно преобразовал свой проект для использования Jest вместо Karma / Jasmine, и у меня есть множество тестов, которые работают просто отлично. Я пытаюсь сделать то, что должно быть очень простым тестом, используя Spectator (^ 5.2.1), но он не работает.

Я пытаюсь протестировать компонент библиотеки, который использует mat-table для рендеринга таблицы. Входные данные 

title:string,
columns: BehaviorSubject<MyColumnDefType> | MyColumnDefType[],
dataSource: MyDataSource | any[]

Компонент работает нормально, и все остальные мои тесты работают, пока я не попытался использовать setInput для замены моего заполненного mockDataSource на пустой.

Вот настройки: 

import {SpectatorHost, createHostFactory} from '@ngneat/spectator/jest';
...OTHER IMPORTS...

describe('MyTableComponent', () => {
  let spectator: SpectatorHost<MyTableComponent>;

  const createHost = createHostFactory({
    component: MyTableComponent,
    declarations: [MyTableComponent, MyTableHeaderComponent],
    imports: [
      BrowserAnimationsModule,
      MyMaterialModule,
      FlexLayoutModule,
      RouterTestingModule
    ],
    mocks: [
      MyMaterialModule,
      FlexLayoutModule,
      BrowserAnimationsModule,
      RouterTestingModule
    ]
  });

  beforeAll(() => {
    Object.defineProperty(window, 'matchMedia', {
      value: jest.fn(() => {
        return {
          matches: true,
          addEventListener: jest.fn(),
          removeEventListener: jest.fn()
        };
      })
    });
  });

  const template = `
    <my-table
            title="TEST TABLE"
            [columns]="columns$"
            [dataSource]="mockDataSource$">
    </my-table>`;

  beforeEach( () => {
    spectator = createHost(template, {
      hostProps: {
        columns$: new BehaviorSubject(mockColumns),
        mockDataSource$: new MockDataSource(mockData)
      }
    });
  });
...
  // THIS TEST PASSES SO CREATEHOST CALL ABOVE WORKS. TABLE CREATED WITH EXPECT # OF CELLS
  it ('should all table cells', () => {
    expect(
      spectator.queryAll('.mat-cell').length
    ).toEqual(mockData.length * mockColumns.length);
  });
...
  // THIS IS WHERE IT GOES SOUTH...
  it ('should handle empty results', () => {
    spectator.setInput('dataSource', new MockDataSource([]));
    spectator.setInput('title', 'A NEW TITLE');
    spectator.detectChanges();

    // THIS TEST WORKS
    expect(
      spectator.query('.table-title').innerHTML
    ).toContain('A NEW TITLE');

    // THIS TEST FAILS, queryAll STILL RETURNS ORIGINAL VALUE
    expect(
      spectator.queryAll('.mat-cell').length
    ).toEqual(0);

По какой-то причине setInput для 'title' работает, а setInput для 'dataSource' - нет (с BehaviourSubject или с простыми входами в массив).

...