ag-grid-testing-library's Introduction

07357b611a62f735a7b5df5168cfb36ba96300bc

See also https://stackoverflow.com/q/63969843/1691

Help me fix this problem

npm install
npm run test

There are 2 passing and 3 failing tests in App.test.js.

 FAIL  src/App.test.js
  the tests
    headers
      ✕ renders all the headers (175ms)
    data
      ✓ renders field for make (54ms)
      ✓ renders field for model (49ms)
      ✕ renders field for price (50ms)
      ✕ renders field for color (51ms)

I can't figure out anything beyond the 2nd column isn't rendered for react-testing-library.

Other info

npm run start will show you what the table looks like.
Here is more info on masterDetail option in ag-grid https://www.ag-grid.com/javascript-grid-master-detail/
What I thought at first was a loading/timing thing is clearly not, because the test can always find data for the first 2 columns
Branch onGridReady tries to wait until the grid is ready similar to how it is described here https://www.ag-grid.com/javascript-grid-testing-react/

Screenshot

Nothing fancy!

ag-grid-testing-library's People

Contributors

Watchers

ag-grid-testing-library's Issues

how to test ag-grid with Jest/Enzyme when server side

The ag-grid onGridReady will not called when rowModelType is server-side, so when I run test code can not find agGridReact api, the error is "TypeError: Cannot read property 'getDisplayedRowCount' of undefined"

this is my test code (index.test.js)

let component = null;
let agGridReact = null;

const ensureGridApiHasBeenSet = async (componentRef) => {
  await act(async () => {
    await new Promise(function (resolve, reject) {
      (function waitForGridReady() {
        if (componentRef.current.getApi()) {
          return resolve();
        }
        setTimeout(waitForGridReady, 10);
      })();
    });
  });
};

beforeEach(async () => {
  const ref = React.createRef();
  component = mount(<SymbolMetadata ref={ref} />);
  agGridReact = component.find(AgGridReact).instance();
  await ensureGridApiHasBeenSet(ref);
});

afterEach(() => {
  component.unmount();
  agGridReact = null;
});

describe('metadata', () => {
  it('metadata  should have correct columns', () => {
    console.info('agGridReact.api.getDisplayedRowCount());
  });
});

this is ag-grid (index.js)

 const onGridReady = async (params: GridReadyEvent) => {
    gridOptionsApi.current = params.api;
    columnApiRef.current = params.columnApi;
  };
  <AgGridReact
      animateRows
      suppressColumnVirtualisation
      serverSideFilteringAlwaysResets
      rowModelType={'serverSide'}
      rowHeight={32}
      rowSelection={'single'}
      defaultColDef={{
         menuTabs: ['filterMenuTab'],
         resizable: true,
         filter: true,
      }}
      serverSideStoreType={ServerSideStoreType.Partial}
      pagination
      localeText={{
          noRowsToShow: 'No Data',
       }}
      paginationPageSize={pageSize}
      cacheBlockSize={pageSize}
      headerHeight={24}
      gridOptions={gridOptions}
      onGridReady={onGridReady}
     />

Recommend Projects