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
. I installed SmartClient with
and vitest with
I created a test.html file with all isc files and created a custom component based on Grid component:
And when I try to test the behavior using vitest and JSDOM isc is not defined and I cannot use it:
I tried:
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
Code:
npm i smartclient-lgpl
Code:
npm install --save-dev jsdom vitest
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; }, }); }
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
- 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
Comment