Cannot find stylesheet.

This old problem with webkit. Looking at the code I have a question. Why is loop on the document.styleSheets ?

slick.grid.js

function getColumnCssRules(idx) {
      if (!stylesheet) {
-        var sheets = document.styleSheets;
-        for (var i = 0; i < sheets.length; i++) {
-          if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
-            stylesheet = sheets[i];
-            break;
-          }
-        }

        if (!stylesheet) {
          throw new Error("Cannot find stylesheet.");
        }
...

that if we replace on

function getColumnCssRules(idx) {
      if (!stylesheet) {
 +        stylesheet = $style[0].sheet || $style[0].styleSheet;
        if (!stylesheet) {
          throw new Error("Cannot find stylesheet.");
        }
...

Thanks in advance!!!

[ghiscoding]

You’re right in saying that you shouldn’t test the table, you should mock it and you’re not. For my unit tests, I do something like below, the only real thing I use is the Slick Event because I often have to subscribe/notify some events but everything else is and should be mocked.

const dataViewStub = {
  collapseAllGroups: jest.fn(),
  expandAllGroups: jest.fn(),
  setGrouping: jest.fn(),
}

const getEditorLockMock = {
  commitCurrentEdit: jest.fn(),
};

const gridStub = {
  getCellNode: jest.fn(),
  getCellFromEvent: jest.fn(),
  getColumns: jest.fn(),
  getHeaderColumn: jest.fn(),
  getOptions: jest.fn(),
  getPreHeaderPanel: jest.fn(),
  getData: () => dataViewStub,
  getEditorLock: () => getEditorLockMock,
  getUID: () => GRID_UID,
  invalidate: jest.fn(),
  registerPlugin: jest.fn(),
  updateColumnHeader: jest.fn(),
  onColumnsReordered: new Slick.Event(),
  onHeaderCellRendered: new Slick.Event(),
  onHeaderMouseEnter: new Slick.Event(),
  onMouseEnter: new Slick.Event(),
} as unknown as SlickGrid;

[AlexandrChazov]

My app is created by CRA. I receive this error when try to test by Jest a page that contains a SlickGrid table. Actually I don’t want to test a table itself but Jest renders a table and encounters the error. Could you please suggest me how can I get rid of this error to continue writing tests? I tried to setup Jest to manage styles as it described on official site but it doesn’t help me ((

Error: Cannot find stylesheet.
    at getColumnCssRules (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1015:15)
    at applyColumnWidths (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1190:14)
    at updateCanvasWidth (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:476:7)
    at updateRowCount (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1827:5)
    at resizeCanvas (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:1749:5)
    at finishInitialization (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:314:7)
    at init (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:281:7)
    at new SlickGrid (C:\work\writeup\node_modules\slickgrid-es6\dist\webpack:\src\slick.grid.js:3643:3)