Log in to start a topic

Jest tests integration for SpreadJS Designer component

Posted by: achort on 30 November 2021, 1:13 pm EST

  • achort

    • Post Options:
    • Link
      Copy

    Posted 30 November 2021, 1:13 pm EST

    Hi,

    I have a project built using the Create React App tool and I’m integrating SpreadJS libraries into my app through HTML script tags (not using the NPM packages). This works perfectly.

    What I’m having trouble is when trying to create tests of my components that internally create an instance of the SpreadJS Designer component. I’m trying to add tests to my app but having trouble loading the SpreadJS Designer component into the Jest environment.

    This is what I’m doing:

    • Relevant code in setupTests.js
    
import 'jest-canvas-mock';
window.GC = require('@grapecity/spread-sheets');
require('../public/Content/js/spreadjs/gc.spread.sheets.designer.resource.en.14.2.0.min.js');
require('../public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.min.js');
    • Relevant parts of package.json
    
"jest": {
      "moduleNameMapper": {
      "@grapecity/spread-sheets-charts(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.sheets.charts.14.2.0.min.js",
      "@grapecity/spread-sheets-languagepackages(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.calcengine.languagepackages.14.2.0.min.js",
      "@grapecity/spread-sheets-shapes(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.sheets.shapes.14.2.0.min.js",
      "@grapecity/spread-sheets-print(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.sheets.print.14.2.0.min.js",
      "@grapecity/spread-sheets-barcode(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.sheets.barcode.14.2.0.min.js",
      "@grapecity/spread-sheets-pdf(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.sheets.pdf.14.2.0.min.js",
      "@grapecity/spread-sheets-pivot-addon(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.pivot.pivottables.14.2.0.min.js",
      "@grapecity/spread-sheets(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.sheets.all.14.2.0.min.js",
      "@grapecity/spread-excelio(.*)": "<rootDir>/public/Content/js/spreadjs/gc.spread.excelio.14.2.0.min.js"
    },
}

    This is the error that is printed out when running a test that creates a Designer instance:

    
Error: Uncaught [TypeError: Cannot read property 'length' of undefined]
at f.updateGroupLayout (

    From inspecting the unminified version of file gc.spread.sheets.designer.all.14.2.0.min.js I think the error is thrown somewhere in this piece of code. For some reason this._panelGroupRenders ends up being undefined.

    
(f.prototype.updateGroupLayout = function (e) {
    if (0 < this._panelGroupRenders.length) {
      var t = document.body.clientWidth;
      this.root && 0 < this.root.clientWidth && (t = this.root.clientWidth),
        this._panelGroupRenders[this._activePanelGroupIndex].updateGroupLayout(t, e);
    }
  }),

    Do you know what might be going wrong with my setup?

    Thank you,

    Andres

  • sharad.tomer

    Posted 1 December 2021, 7:34 am EST

    Hi Andres,

    Have you tried adding the spread-sheets module using script files too? Is there any particular reason why you are using npm for spread-sheets module and script files for designer?

    Is a valid distribution key set in the application?

    Also please provide a stipped-down version of the sample that replicates the issue so that we could thoroughly investigate the root cause of the issue.

    Thank you

    Sharad

  • achort

    Posted 1 December 2021, 9:14 am EST

    Hi!

    It’s actually all using script files. The moduleNameMapper configuration maps module names to script files.

    So this ```

    require(‘@grapecity/spread-sheets’);

    
I haven't set a valid license in the jest environment, wouldn't expect that to be required but I'll try it out.
I'll also setup a sample project to reproduce the issue.

Yesterday after adding this bit of code the error changed:

    jest.spyOn(document.body, ‘clientWidth’, ‘get’).mockImplementation(() => 1024);

    
After executing this:

    new GC.Spread.Sheets.Designer.Designer(node, config);

    
This is the error thrown:

    TypeError: Cannot read property 'replace' of undefined

  92879 |               if (((e = m.getElementsByClassName('gcsj-func-gray-formula')), e.length > 0)) return '';
  92880 |               (d = u ? g.Ul.Woa(m) : m.innerText),
> 92881 |                 (d = d.replace(/\r\n?/g, '\n')),
        |                        ^
  92882 |                 d.indexOf(z) >= 0 && (d = g.Ul.Ika(d, z, ' '));
  92883 |             }
  92884 |             return d;

  at a.text (public/Content/js/spreadjs/gc.spread.sheets.all.14.2.0.js:92881:24)
  at a.text (public/Content/js/spreadjs/gc.spread.sheets.all.14.2.0.js:92887:21)
  at a.j1 (public/Content/js/spreadjs/gc.spread.sheets.all.14.2.0.js:93138:31)
  at a.workbook (public/Content/js/spreadjs/gc.spread.sheets.all.14.2.0.js:92938:95)
  at public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:38468:19
  at Object.InternalInit (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:38459:15)
  at e.setConfig (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:192958:19)
  at m (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:186557:19)
  at o (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:186760:27)
  at l (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:186994:32)
  at Object._validate (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:186732:17)
  at Object.sd (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:186807:13)
  at new e (public/Content/js/spreadjs/gc.spread.sheets.designer.all.14.2.0.js:192786:41)

  • achort

    Posted 1 December 2021, 10:06 am EST

    Hi,

    Here is a small sample project with the issue. https://github.com/andreschort/spreadjs-jest

    To reproduce it run this:

    npm test

    Output can be long so I like to run it like this:

    npm test 2>&1 > test_run.log

    There is a sample output in file test_run.log https://github.com/andreschort/spreadjs-jest/blob/main/test_run.log

  • achort

    Posted 1 December 2021, 2:28 pm EST

    Hi,

    I was reviewing the failing code and noticed an odd thing.

    (d = u ? g.Ul.Woa(m) : m.innerText)

    Why is it doing d = u with a conditional operator? Should that be a comparison instead of an assignment?

  • sharad.tomer

    Posted 3 December 2021, 4:59 am EST

    Thank you for sharing the sample, we are able to replicate the issue at our end, it seems like canvas mock is creating some issues. For further investigation, I 've shared the sample with the concerned team(SJS-11139) and will notify you one when I get an update.

    Why is it doing d = u with a conditional operator?

    SpreadJS production build goes throw optimization, minification and obscurification process which changes the final code. The shared code is the result of this optimization/minification process, d = u is not the wrong code, it simply assigns the value of u variable to d variable and then uses that value as a condition for the ternary operator.

  • achort

    Posted 10 December 2021, 4:15 pm EST

    Hi,

    Is there any update on running SpreadJs inside a Jest test?

    Thank you.

    Andres

  • avinash.pathak

    Posted 13 December 2021, 12:42 am EST

    Hi Andres,

    The issue is arising because the default jest working environment is the node. then the jest will use a dummy DOM wrapper to simulate the real browser environment, but when accessing the DOM element innerText. it returns an undefined which makes the designer init fail.

    Please refer to the following workaround for this issue.

    Regards

    Avinash

    spreadjs-jest-update.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.