extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-17 19:01:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Better failure handling and tests for that

Browse Source
This commit is contained in:
nathan 2024-11-22 11:38:30 -07:00
parent 5a67e7bcfb
commit 5c646cc269
3 changed files with 138 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
api/js/etemplate/Et2Template/Et2Template.ts
View File

@ -6,7 +6,7 @@
* @link https://www.egroupware.org
* @author Nathan Gray
*/
import {html, LitElement, nothing, PropertyValues} from "lit";
import {html, LitElement, nothing, PropertyValues, render} from "lit";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import shoelace from "../Styles/shoelace";
import styles from "./Et2Template.styles";
@ -102,10 +102,6 @@ export class Et2Template extends Et2Widget(LitElement)
{
this.load();
}
else
{
console.info("Not loading template, missing info", this);
}
}
disconnectedCallback() : void
@ -230,6 +226,7 @@ export class Et2Template extends Et2Widget(LitElement)
* Set the value for a child widget, specified by the given ID
*
* @param id string The ID you're searching for
* @param value new value to set
* @throws Error If the widget cannot be found, or it does not have a set_value() function
*/
setDisabledById(id : string, value : boolean)
@ -270,11 +267,18 @@ export class Et2Template extends Et2Widget(LitElement)
* node and goes through it, creating widgets. This is normally called automatically when the
* template is added to the DOM, but if you want to re-load or not put it in the DOM you need to call load() yourself.
*
* If you need to set more than just content (select options, readonly or modifications), set it in the array manager
* before calling load:
* ```
* template.setArrayMgr("readonlys", template.getArrayMgr("readonlys").openPerspective(template, newReadonlys));
* ```
*
* @returns {Promise<void>}
* @protected
*/
public async load(newContent? : object)
{
// @ts-ignore can't find disabled, it's in Et2Widget
if(this.disabled)
{
this.loading = Promise.resolve();
@ -293,7 +297,16 @@ export class Et2Template extends Et2Widget(LitElement)
this.clear();
// Get template XML
let xml = await this.findTemplate();
let xml : Element;
try
{
xml = await this.findTemplate();
}
catch(e)
{
reject(e);
return;
}
// Read the XML structure of the requested template
if(typeof xml != 'undefined')
{
@ -330,6 +343,9 @@ export class Et2Template extends Et2Widget(LitElement)
composed: true,
detail: this
}));
}).catch(reason =>
{
this.loadFailed(reason);
});
return this.loading;
}
@ -366,18 +382,31 @@ export class Et2Template extends Et2Widget(LitElement)
// Ask the server for the template
if(!xml)
{
let templates = await this.loadFromFile(this.getUrl());
const url = this.getUrl();
let templates = <Element>{};
try
{
templates = await this.loadFromFile(url);
if(!templates)
{
throw new Error("No templates found in template file " + url);
}
}
catch(e)
{
throw new Error("Could not load template file " + url);
}
// Scan the file for templates and store them
let fallback;
for(let i = 0; i < templates.childNodes.length; i++)
for(let i = 0; i < templates.childNodes?.length; i++)
{
const template = templates.childNodes[i];
const template = <Element>templates.childNodes[i];
if(!["template", "et2-template"].includes(template.nodeName.toLowerCase()))
{
continue;
}
Et2Template.templateCache[template.getAttribute("id")] = template;
Et2Template.templateCache[template.getAttribute("id")] = <Element>template;
if(template.getAttribute("id") == template_name)
{
xml = template;
@ -404,7 +433,7 @@ export class Et2Template extends Et2Widget(LitElement)
*/
protected loadFromFile(path)
{
return et2_loadXMLFromURL(path, null, this, this.loadFailed);
return et2_loadXMLFromURL(path, null, this);
}
/**
* The template has been loaded, wait for child widgets to be complete.
@ -457,7 +486,9 @@ export class Et2Template extends Et2Widget(LitElement)
loadFailed(reason? : any)
{
this.egw().debug("error", "Loading failed '" + (this.templateName) + "' @ " + this.getUrl() + (reason ? " \n" + reason : ""));
const message = (this.templateName) + " @ " + this.getUrl() + (reason ? " \n" + reason : "");
render(this.errorTemplate(message), this);
this.egw().debug("warn", "Loading failed: " + message);
}
protected getUrl()
@ -561,6 +592,16 @@ export class Et2Template extends Et2Widget(LitElement)
<div class="template--loading">${loading}</div>`;
}
errorTemplate(errorMessage = "")
{
return html`
<sl-alert variant="warning" open>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Loading failed</strong><br/>
${errorMessage}
</sl-alert>`
}
render()
{
const classes = {

86
api/js/etemplate/Et2Template/test/Load.test.ts
View File

@ -1,6 +1,7 @@
import {assert, elementUpdated, fixture, html, oneEvent} from "@open-wc/testing";
import {assert, elementUpdated, fixture, html, nextFrame, oneEvent} from "@open-wc/testing";
import * as sinon from "sinon";
import {Et2Template} from "../Et2Template";
import {Et2Description} from "../../Et2Description/Et2Description";
/**
* Test file for Template webComponent
@ -10,6 +11,7 @@ import {Et2Template} from "../Et2Template";
// Stub global egw
// @ts-ignore
window.egw = {
debug: () => {},
image: () => "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjk2OTY5IiBkPSJNNi45NDMsMjguNDUzDQoJYzAuOTA2LDAuNzY1LDIuMDk3LDEuMTI3LDMuMjg2LDEuMTA5YzAuNDMsMC4wMTQsMC44NTItMC4wNjgsMS4yNjUtMC4yMDdjMC42NzktMC4xOCwxLjMyOC0wLjQ1LDEuODY2LTAuOTAyTDI5LjQwMywxNC45DQoJYzEuNzcyLTEuNDk4LDEuNzcyLTMuOTI1LDAtNS40MjJjLTEuNzcyLTEuNDk3LTQuNjQ2LTEuNDk3LTYuNDE4LDBMMTAuMTE5LDIwLjM0OWwtMi4zODktMi40MjRjLTEuNDQtMS40NTctMy43NzItMS40NTctNS4yMTIsMA0KCWMtMS40MzgsMS40Ni0xLjQzOCwzLjgyNSwwLDUuMjgxQzIuNTE4LDIzLjIwNiw1LjQ3NCwyNi45NDcsNi45NDMsMjguNDUzeiIvPg0KPC9zdmc+DQo=",
lang: i => i + "*",
link: i => i,
@ -17,6 +19,7 @@ window.egw = {
webserverUrl: ""
};
let element : Et2Template;
let keepImport : Et2Description = new Et2Description();
async function before()
{
@ -39,15 +42,21 @@ function fakedTemplate(template_text)
}
const SIMPLE_EMPTY = `<overlay><template id="simple.empty"></template></overlay>`;
const SIMPLE = `<overlay><template id="simple">
<et2-description id="static" value="Static value"></et2-description>
<et2-description id="test"></et2-description>
</template></overlay>`;
const TEMPLATE_ATTRIBUTES = `<overlay><template id="attributes" class="gotClass" slot="gotSlot"></template></overlay>`;
const MULTIPLE = `<overlay>
<template id="multiple.one" class="one"/>
<template id="multiple.two" class="two"/>
<template id="multiple" class="multiple"></template>
</overlay>`;
const INVALID = `<overlay><template id="invalid"><overlay>`;
// Pre-fill cache
Et2Template.templateCache["simple.empty"] = <Element>fakedTemplate(SIMPLE_EMPTY).childNodes.item(0);
Et2Template.templateCache["simple"] = <Element>fakedTemplate(SIMPLE).childNodes.item(0);
Et2Template.templateCache["attributes"] = <Element>fakedTemplate(TEMPLATE_ATTRIBUTES).childNodes.item(0);
describe("Template widget basics", () =>
@ -89,7 +98,6 @@ describe("Loading", () =>
it("loads from cache", async() =>
{
// Cache was pre-filled above
const listener = oneEvent(element, "load");
// Set the template to start load
@ -132,7 +140,7 @@ describe("Loading", () =>
assert.isTrue(element.hasAttribute("slot"), "Did not get slot from template");
assert.equal(element.getAttribute("slot"), "gotSlot", "Did not get slot from template");
});
it("loads last template in file when it has no template", async() =>
it("loads last template in file when it has no template otherwise", async() =>
{
// Stub the url to point to the fixture
let xml = fakedTemplate(MULTIPLE);
@ -140,16 +148,78 @@ describe("Loading", () =>
// @ts-ignore
sinon.stub(element, "loadFromFile").returns(xml);
const listener = oneEvent(element, "load");
// We don't set the template, just give the URL
element.url = "load a file that has several template"
// Wait for load & load event
// Wait for load
await element.updateComplete;
const loadEvent = await listener;
assert.exists(loadEvent);
assert.isTrue(element.classList.contains("multiple"));
});
it("shows loader while loading", async() =>
{
// @ts-ignore
sinon.stub(element, "findTemplate").returns(new Promise((resolve) =>
{
// It's not good to wait in the test, but...
setTimeout(() => resolve(Et2Template.templateCache["simple.empty"]), 100);
}));
// Set the template to start load
element.template = "simple.empty";
// Wait for load to start
await nextFrame();
// Check for loader
let loader = element.shadowRoot.querySelector(".template--loading");
assert.isNotNull(loader, "Loader (shown while loading) not found")
// Wait for load, check the loader is gone
await element.updateComplete;
loader = element.shadowRoot.querySelector(".template--loading");
assert.isNull(loader, "Loader still there after load");
});
it("actually creates children", async() =>
{
// Set the template to start load
element.template = "simple";
// Wait for load
await element.updateComplete;
// Should be not be empty
assert.isNotEmpty(element.querySelectorAll("*"));
assert.isNotNull(element.querySelector("#static"), "Missing template element");
assert.isNotNull(element.querySelector("#test"), "Missing template element");
})
it("does not load when disabled", async() =>
{
// Disable
// @ts-ignore can't find disabled attribute, though it's inherited from Et2Widget
element.disabled = true;
// Set the template to start load
element.template = "simple";
// Wait for load
await element.updateComplete;
// Should be empty
assert.isEmpty(element.querySelectorAll("*"));
});
it("shows a message when it can't find the template", async() =>
{
// Set the template to start load
element.template = "fail";
// Wait for load
await element.updateComplete;
// Should be not be empty, it has some error text
assert.isNotEmpty(element.querySelectorAll("*"));
assert.isTrue(element.innerText.includes("failed"));
})
});

14
api/js/etemplate/Et2Template/test/Namespace.test.ts
View File

@ -53,7 +53,7 @@ describe("Namespaces", () =>
{
// Setup run before each test
beforeEach(before);
it("Does not create a namespace with no 'content'", async() =>
it("Does not create a namespace with no 'content' attribute", async() =>
{
const listener = oneEvent(element, "load");
element.setArrayMgr("content", new et2_arrayMgr({
@ -67,12 +67,12 @@ describe("Namespaces", () =>
await element.updateComplete;
const loadEvent = await listener;
const staticElement = element.querySelector(":scope > *:first-of-type");
const staticElement : HTMLElement = element.querySelector(":scope > *:first-of-type");
assert.isNotNull(staticElement, "Did not find test element");
assert.equal(staticElement.getAttribute("id"), "static", "Static child ID was wrong");
assert.equal(staticElement.innerText, "Static value");
const dynamicElement = element.querySelector(":scope > *:last-of-type");
const dynamicElement : HTMLElement = element.querySelector(":scope > *:last-of-type");
assert.isNotNull(dynamicElement, "Did not find test element");
assert.equal(dynamicElement.getAttribute("id"), "test", "Dynamic child ID was wrong");
assert.equal(dynamicElement.innerText, "Test");
@ -101,12 +101,12 @@ describe("Namespaces", () =>
await element.updateComplete;
const loadEvent = await listener;
const staticElement = element.querySelector(":scope > *:first-of-type");
const staticElement : HTMLElement = element.querySelector(":scope > *:first-of-type");
assert.isNotNull(staticElement, "Did not find test element");
assert.equal(staticElement.getAttribute("id"), "sub_static", "Child ID was not namespaced");
assert.equal(staticElement.innerText, "Static value");
const dynamicElement = element.querySelector(":scope > *:last-of-type");
const dynamicElement : HTMLElement = element.querySelector(":scope > *:last-of-type");
assert.isNotNull(dynamicElement, "Did not find test element");
assert.notEqual(dynamicElement.getAttribute("id"), "Top level");
assert.equal(dynamicElement.innerText, "Namespaced");
@ -126,11 +126,11 @@ describe("Namespaces", () =>
await element.updateComplete;
const loadEvent = await listener;
const staticElement = element.querySelector(":scope > *:first-of-type");
const staticElement : HTMLElement = element.querySelector(":scope > *:first-of-type");
assert.isNotNull(staticElement, "Did not find test element");
assert.equal(staticElement.innerText, "Static value");
let dynamicElement = element.querySelector(":scope > *:last-of-type");
let dynamicElement : HTMLElement = element.querySelector(":scope > *:last-of-type");
assert.isNotNull(dynamicElement, "Did not find test element");
assert.equal(dynamicElement.innerText, "Test");