Тестирование реагирует ag-grid с Jest / Enzyme - PullRequest
Новая
       12

Тестирование реагирует ag-grid с Jest / Enzyme

0 голосов
/ 06 июля 2018

Я создаю набор тестов в своем приложении React Typescript, используя Jest и Enzyme для модульного тестирования моих компонентов.

Однако мой основной компонент имеет встроенный компонент Ag-Grid и несколько кнопок действий. Кнопки действий, однако, привязаны к выбору сетки, поэтому, если вы нажмете «Утвердить», она сначала проверяет, что было выбрано в сетке, а затем отправляет записи в Redux с помощью действия диспетчеризации.

Я могу утверждать, что было передано обратному вызову диспетчерского действия, но проблема в том, что я не вижу, как я могу имитировать выделение, используя Jest и Enzyme. Похоже, что они визуализируют статический контент, используя shallow / mount, и я не понимаю, как вы можете сделать это интерактивным.

Возможно ли это вообще, или я должен использовать другой инструмент - или даже другой способ построения моего кода, чтобы он мог тестироваться модулем?

Пример 

interface IItemGridProps {
  signoffApprove : (entries:ItemEntity[]) => void,
  items: ItemEntity[]  
}

export class ItemGrid extends React.Component<IItemGridProps,IItemGridState> {
  private gridApi: GridApi;

  private doApprove()
  {
      if (this.gridApi.getSelectedNodes().length > 0)
      {
        this.props.signoffApprove(this.getSelectedEntries());
      }
  }

  private getSelectedEntries() {
    return this.gridApi.getSelectedNodes().map(s => s.data)
  }

  private onGridReady(params: any) {
    this.gridColumnApi = params.columnApi;
    this.gridApi = params.api;
  }

  public render() {
    <div className="ag-dark">
          <AgGridReact 
            gridOptions={this.props.gridOptions} 
            rowData={this.props.items}
            onGridReady={this.onGridReady}    
            onModelUpdated={this.initColumnSize}       
          />
        </div>
        <div class
  }
...