Angular Spectator setInput not working for non-string input

问题

I've successfully converted my project to use Jest in place of Karma/Jasmine and I have lots of tests that are working just fine. I'm trying to do what should be a very simple test using Spectator (^5.2.1) but it's not working.

I'm trying to test a library component that uses mat-table to render a table. Inputs are

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

The component works fine, and all my other tests work, up until I tried using setInput to replace my populated mockDataSource with an empty one.

Here's the setup:

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);

For some reason setInput on 'title' works but setInput on 'dataSource' doesn't (with either BehaviourSubject or simple array inputs).

来源：https://stackoverflow.com/questions/60571144/angular-spectator-setinput-not-working-for-non-string-input

标签

angular

testing

jestjs

ts-jest

angular-spectator