@coon-js/siesta-lib-helper
v0.2.0
Published
Collection of utility- and helper-methods when working with Siesta (https://bryntum.com) in an ExtJS-Browser environment.
Downloads
26
Maintainers
thorstensuckowReadme
@coon-js/siesta-lib-helper 
Easy setup for testing Ext JS with Siesta.
About
This npm-package provides a collection of utility- and helper-methods for Siesta and Ext JS.
Installation
To use this package with Ext JS-projects, include the package as a devDependency:
$ npm i --save-dev @coon-js/siesta-lib-helperA binary of @coon-js/siesta-lib-helper can then be called:
npx siesta-lib-helper
Usage
Using the BoilerPlate.js for setting up Ext JS Browser Environment
The BoilerPlate.js contains code that automatically creates an Ext JS-testing environment.
To use the BoilerPlate, it should be sufficient to copy the index.extjs-browser.html into the target directory
where your tests should run. Paths should be adjusted accordingly, if your testing environment does not
match the following structure:
(In this example, index.extjs-browser.html will be placed into tests)
./[MODULE_ROOT]
./node_modules
./testsTo simplify setting up your testing environment, siesta-lib-helper is available as a cli-programm that
will copy a tests.redirect.html- and a index.extjs-browser.html-file into your module:
$ npx siesta-lib-helper./tests/index.extjs-browser.html
./tests.redirect.htmlNote: tests.redirect.html serves as a redirect in case your local web server requires a file being specified as the index of the
document-root. It is not require to properly create the Ext JS-Testing-Browser.
getPaths()
The following example shows how to use a test.config.js for configuring the tested environment to be used with Siesta.Harness.Browser.ExtJS. The corresponding builds and paths for the Ext JS-library were automatically created with @coon-js/extjs-link.
index.html
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="../node_modules/siesta-lite/resources/css/siesta-all.css">
<script type="text/javascript" src="../node_modules/siesta-lite/siesta-all.js"></script>
<script type="module" src="index.js"></script>
</head>
<body>
</body>
</html>
index.js contains the instantiation of the browser-class and configures the Siesta-Browser with the required options:
index.js:
import groups from "./groups.config.js"; // contains test-structure
import testConfig from "./tests.config.js";
import {getPaths} from "../node_modules/@coon-js/siesta-lib-helper/dist/siesta-lib-helper.runtime.esm.js";
const
browser = new Siesta.Harness.Browser.ExtJS(),
isModern = window.location.href.indexOf("toolkit=modern") !== -1,
paths = getPaths(testConfig, isModern);
browser.configure(Object.assign({
title: "example - " + (isModern ? "modern" : "classic"),
isEcmaModule: true,
disableCaching: true
}, paths));
browser.start(...groups);In this example, the configuration looks like this. While the loaderPath is most of the time depending
on the existing resources you want to include in your tests, the preload of the Ext JS-library is mandatory:
tests.config.js
export default {
loaderPath: {
"Ext.Package": "../node_modules/@coon-js/extjs-package-loader/packages/package-loader/src/Package.js",
"Ext.package": "../node_modules/@coon-js/extjs-package-loader/packages/package-loader/src/package",
"coon.core.overrides.core": "../overrides",
"coon.core.fixtures": "./fixtures",
"coon.core": "../src/",
"coon.test": "./src"
},
preload: {
css: {
modern: [
"./build/extjs-link/extjs/modern/theme-triton/resources/theme-triton-all-debug.css"
],
classic: [
"./build/extjs-link/extjs/classic/theme-triton/resources/theme-triton-all-debug.css"
]
},
js: ["../node_modules/@l8js/l8/dist/l8.runtime.umd.js", {
modern: "./build/extjs-link/extjs/modern/ext-modern-all-debug.js",
classic: "./build/extjs-link/extjs/classic/ext-all-debug.css"
}]
}
};
configureWithExtJsLinkPaths()
A helper method to inject the configuration generated by @coon-js/extjs-link
into a configuration as defined by a tests.config.js-file, then passing it to getPaths().
Basically, toolkit-groups defined in both files get merged.
index.html
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="../node_modules/siesta-lite/resources/css/siesta-all.css">
<script type="text/javascript" src="../node_modules/siesta-lite/siesta-all.js"></script>
<script type="module" src="index.js"></script>
</head>
<body>
</body>
</html>
index.js contains the instantiation of the browser-class and configures the Siesta-Browser with the required options:
index.js:
import testConfig from "./tests.config.js";
import groups from "./groups.config.js";
import {configureWithExtJsLinkPaths} from "../node_modules/@coon-js/siesta-lib-helper/dist/siesta-lib-helper.runtime.esm.js";
const
browser = new Siesta.Harness.Browser.ExtJS(),
isModern = window.location.href.indexOf("toolkit=modern") !== -1,
paths = await configureWithExtJsLinkPaths(testConfig, "../.extjs-link.conf.json", isModern);
console.log(paths);
browser.configure(Object.assign({
title: "extjs-lib-core - " + (isModern ? "modern" : "classic"),
isEcmaModule: true,
disableCaching: true
}, paths));
browser.start(...groups);.extjs-link.conf.json
{
"css": [{
"modern": [
"foo.css"
],
"classic": [
"bar.css"
]
}],
"js": {
"modern": "modern.js",
"classic": "classic.js"
}
}tests.config.js
export default {
loaderPath: {
"Ext.Package": "../node_modules/@coon-js/extjs-package-loader/packages/package-loader/src/Package.js",
"Ext.package": "../node_modules/@coon-js/extjs-package-loader/packages/package-loader/src/package",
"coon.core.overrides.core": "../overrides",
"coon.core.fixtures": "./fixtures",
"coon.core": "../src/",
"coon.test": "./src"
},
preload: {
css: {
modern: [
"./build/extjs-link/extjs/modern/theme-triton/resources/theme-triton-all-debug.css"
],
classic: [
"./build/extjs-link/extjs/classic/theme-triton/resources/theme-triton-all-debug.css"
]
},
js: ["../node_modules/@l8js/l8/dist/l8.runtime.umd.js", {
modern: "./build/extjs-link/extjs/modern/ext-modern-all-debug.js",
classic: "./build/extjs-link/extjs/classic/ext-all-debug.css"
}]
}
};
config produced by configureWithExtJsLinkPaths(testConfig, "../.extjs-link.conf.json", true)
{
"loaderPath": {
"Ext.Package": "../node_modules/@coon-js/extjs-package-loader/packages/package-loader/src/Package.js",
"Ext.package": "../node_modules/@coon-js/extjs-package-loader/packages/package-loader/src/package",
"coon.core.overrides.core": "../overrides",
"coon.core.fixtures": "./fixtures",
"coon.core": "../src/",
"coon.test": "./src"
},
"preload": [
"foo.css",
"modern.js",
"./build/extjs-link/extjs/modern/theme-triton/resources/theme-triton-all-debug.css",
"foo.css",
"../node_modules/@l8js/l8/dist/l8.runtime.umd.js",
"./build/extjs-link/extjs/modern/ext-modern-all-debug.js"
]
}
CI
tests
$ npm testbuilds
npm run build