Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    How to use "isc" variable inside test environment

    Hello everyone.

    I am using SmartClient vanilla JavaScript components in my project and I created some custom isc components with specific behaviors that I want to test, but I am not sure how can I use isc in my test environment.


    So, I created a new vanilla Javascript project with Vite
    Code:
    npm create vite@latest my-project -- --template vanilla
    . I installed SmartClient with
    Code:
    npm i smartclient-lgpl
    and vitest with
    Code:
    npm install --save-dev jsdom vitest
    I created a test.html file with all isc files and created a custom component based on Grid component:

    Code:
    export default function defineCustomResultsGrid() {
      isc.defineClass("CustomResultsGrid", isc.ListGrid);
      isc.CustomResultsGrid.addProperties({
        initWidget: function () {
          this.setFields([
            { name: "id", title: "ID", width: 50 },
            { name: "name", title: "Name", width: 150 },
            { name: "age", title: "Age", width: 100 },
          ]);
          this.redraw();
        },
        eventTarget: new EventTarget(),
        addEventListener: function (type, listener, options) {
          this.eventTarget.addEventListener(type, listener, options);
        },
        removeEventListener: function (type, listener, options) {
          this.eventTarget.removeEventListener(tyep, listener, options);
        },
        recordDoubleClick(
          record
        ) {
          this.eventTarget.dispatchEvent(
            new CustomEvent("recordDoubleClick", { detail: record })
          );
          return true;
        },
      });
    }
    And when I try to test the behavior using vitest and JSDOM isc is not defined and I cannot use it:

    Code:
    import { describe, it, expect, beforeEach, afterEach, beforeAll } from "vitest";
    import fs from "fs";
    import path from "path";
    import { JSDOM } from "jsdom";
    import defineCustomResultsGrid from "./CustomResultsGrid.js";
    describe("Testing the Custom Results Grid Behavior", () => {
      let customResultsGrid;
      let dom;
      beforeAll(async () => {
        const html = fs.readFileSync(path.resolve("./", "test.html"), "utf-8");
        dom = new JSDOM(html, { runScripts: "dangerously", resources: "usable" });
        global.document = dom.window.document;
        global.window = dom.window;
        defineCustomResultsGrid();
        customResultsGrid = isc.CustomResultsGrid.create({
          objectType: "test",
        });
        customResultsPanel.draw();
      });
    
    // tests
    I tried:
    • async imports but the usage of "with()" is not compatible with the ES6
    • require() like the solution in React library, but it doesn't work because I am not in a node env
    • running the script in the HTML using Jsdom as shown in the code snippet above
    Do you have any ideas of what I can test and how?

    #2
    It's not clear whether you have imports on your CustomResultsGrid.js file and just didn't include them in your code snippet above, or not, but you must import our framework files per the documentation, like this (we show importing the skin as well):
    Code:
    import 'smartclient-eval/release';
    import 'smartclient-eval/skins/Tahoe';
    The SmartClient modules are not ES6 modules - instead the classes are simply added to the isc namespace. So you may need to declare isc like this if using VSCode, webpack, etc.
    Code:
    let isc = window.isc;
    React apps rely on npm, so you may be able to see further details by looking through our React support documentation.


    Comment


      #3
      This is not a React Environment. It is a vanilla javascript. If I try this approach the
      Code:
      npm run dev
      command breaks:

      Click image for larger version

Name:	image-2024-09-03-16-19-18-159.png
Views:	69
Size:	13.1 KB
ID:	273494

      and the
      Code:
      npm run test
      still doesn't work because of this error:

      Click image for larger version

Name:	image-2024-09-03-14-42-11-230.png
Views:	34
Size:	53.6 KB
ID:	273495

      Comment


        #4
        I am using Vite to bundle my project

        Comment

        Working...
        X