How to use "isc" variable inside test environment

[mc_hatzlhoffer]

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

npm create vite@latest my-project -- --template vanilla

. I installed SmartClient with

npm i smartclient-lgpl

and vitest with

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:

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:

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?

[Isomorphic]

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):

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.

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.

[mc_hatzlhoffer]

This is not a React Environment. It is a vanilla javascript. If I try this approach the

npm run dev

command breaks:



and the

npm run test

still doesn't work because of this error:

[mc_hatzlhoffer]

I am using Vite to bundle my project