使用 Jest 和 Angular Cli 对 Ag Grid 的专栏 header 进行单元测试。无法从 columnDefs 中找到所有列

Question

我正在使用 Jest 和 Angular CLI 测试来验证列 headers。

试图模仿这个：https://www.ag-grid.com/javascript-grid-testing-angular/#testing-grid-contents

问题是，我只能从 querySelectorAll('className');

中找到 2/5 列

我尝试了各种方法，比如用不同的 header class 命名它们并根据它们进行选择，但我总是只有 2/5 列 headers.

我想这与渲染有关，但我可能错了。

这是所有相关文件。

Test.spec.ts


import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { TestGridComponent } from './test-grid.component';


describe('TestGridComponent', () => {
    let component: TestGridComponent ;
    let fixture: ComponentFixture<TestGridComponent >;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                AgGridModule.withComponents([TestGridComponent])
            ],
            declarations: [TestGridComponent],
            schemas: [NO_ERRORS_SCHEMA]
        }).compileComponents();

        fixture = TestBed.createComponent(TestGridComponent);
        component = fixture.componentInstance;

        fixture.detectChanges();
    }));

    // Works
    it('grid API is not available until  `detectChanges`', () => {
        expect(component.gridOptions.api).not.toBeTruthy();
    });

    // Fails with expect(received).toBeTruthy()  Received: undefined
    it('grid API is available after `detectChanges`', () => {
        fixture.detectChanges();
        expect(component.gridOptions.api).toBeTruthy();
    });


    // Able to get 'ID 'and 'Quantity' but not the rest of the header fields. I see them on the grid but not in the received.
    //
      output: expect(received).toEqual(expected) // deep equality

   // - Expected
   // + Received

    /*  Array [
    -   "ID",
    -   "Quantity",
    -   "someStuff1",
    -   "someStuff2",
    -   "someStuff3",
    +   "ID",
    +   "Quantity",
      ]
    */

    it('should display grid headers as expected', () => {        
        const elm = fixture.nativeElement;
        fixture.detectChanges();

        const grid = elm.querySelector('ag-grid-angular');
        // have also tried other classes as defined in my config.ts
    headerClass: 'testColumn' and searched querySelectorAll with that - same result.
        const headerCells = grid.querySelectorAll('.ag-header-cell-text');

        const headerTitles = Array.from(headerCells).map((cell: any) =>
            cell.textContent.trim()
        );        

        expect(headerTitles).toEqual(['ID', 'Quantity', 'someStuff1', 'someStuff2', 'someStuff3']);
    });   

});

test-grid.config.ts

export const defaultColDef = {
  filter: true,
  sortable: true,
  resizable: true,
  headerClass: 'testColumn'
};

export const columnDefs = [  
  {
    headerName: 'ID',
    headerTooltip: 'ID',
    field: 'id',
    cellStyle: colorSide,
    headerClass: 'header1'
  },  
  {
    headerName: 'Quantity',
    headerTooltip: 'Quantity',
    field: 'quantity',
    cellStyle: {'text-align': 'right'},    
    headerClass: 'header2'
  },  
  {
    headerName: 'SomeField1',
    field: 'SomeField1',
    headerTooltip: 'somefield1',
    cellStyle: {'text-align': 'right'},
    headerClass: 'header3'
  },
  {
    headerName: 'SomeField2',
    headerTooltip: 'SomeField2',
    field: 'someField2',
    cellStyle: {'text-align': 'left'},
    headerClass: 'header4'
  },
  {
    headerName: 'SomeField3',
    headerTooltip: 'SomeField3',
    field: 'SomeField3',
    cellStyle: {'text-align': 'left'},
    headerClass: 'header5'
  }
];

TestComponent-grid.ts

@Component({
  selector: 'web-client-app-common-grid',
  templateUrl: './test-grid.component.html'
})
export class TestGridComponent {
  // Data is coming from another container component, which was populated with the help of ngRx store.
  @Input() rowData;

  columnDefs: any;  
  defaultColDef: any;
  gridApi;
  gridColumnApi;
  gridOptions: GridOptions;  
  tooltipShowDelay;
  headerHeight: 48

  constructor() {
    this.columnDefs = columnDefs;
    this.defaultColDef = defaultColDef;
    this.tooltipShowDelay = 0;
  }

  onGridReady(gridOptions) {
    this.gridOptions= gridOptions;
    this.gridApi = gridOptions.api;
    this.gridColumnApi = gridOptions.columnApi;    
    this.gridOptions = <GridOptions>{
      headerHeight:75,   
    }  
  }

.html


<h1> Grid Works </h1>

<ag-grid-angular
  class="ag-vertical-lines"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered()"
  [tooltipShowDelay]="tooltipShowDelay"
  style=" height: 100%; width: 100%;"
></ag-grid-angular>

开玩笑。config.ts

module.exports = {
  name: 'test-web-client',
  preset: '../../jest.config.js',
  coverageDirectory: '../../target/coverage',
  reporters: [
    'default',
    ['jest-junit', { outputDirectory: './target/coverage' }]
  ],
  snapshotSerializers: [
    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
    'jest-preset-angular/build/AngularSnapshotSerializer.js',
    'jest-preset-angular/build/HTMLCommentSerializer.js'
  ],
  testEnvironment: 'jest-environment-jsdom-fourteen'
};
module.exports.globals = {
  'ts-jest': {
    tsConfig: 'tsconfig.spec.json',
    stringifyContentPathRegex: '\.html$',
    astTransformers: [require.resolve('jest-preset-angular/build/StripStylesTransformer')]
  }
};
module.exports.setupFilesAfterEnv = ['<rootDir>/src/test-setup.ts'];

我不确定哪里出错了，检查后我看到了选择器 classes.

如果您需要更多信息，请告诉我。

拜托，谢谢。

Answer 1

这是 Ag Grid 的一个持续问题 https://github.com/ag-grid/ag-grid/issues/2725

Answer 2

尝试在 ag-grid-angular 上将 suppressColumnVirtualisation 设置为 true:

<ag-grid-angular
    ...
    [suppressColumnVirtualisation]="true"
    ...
>
</ag-grid-angular>

现在应该可以了。

使用 Jest 和 Angular Cli 对 Ag Grid 的专栏 header 进行单元测试。无法从 columnDefs 中找到所有列

Unit Testing Ag Grid's column header with Jest and Angular Cli. Unable to find all columns from columnDefs

typescript

jestjs

angular

angular-observable

ag-grid-angular