holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get our WebComponent tests running again

Browse Source 
Made a lot of "failed to construct htmlelement" errors go away, avoid a bunch of egwIsMobile is undefined errors
This commit is contained in:
nathan 2023-01-04 12:00:25 -07:00
parent 8ec106f22b
commit 40278c8827
9 changed files with 38 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
api/js/etemplate/Et2Button/ButtonMixin.ts
View File

@ -12,7 +12,6 @@
import {css, LitElement, PropertyValues} from "@lion/core";
import '../Et2Image/Et2Image';
import shoelace from "../Styles/shoelace";
import {Et2Button} from "./Et2Button";
type Constructor<T = LitElement> = new (...args : any[]) => T;
export const ButtonMixin = <T extends Constructor>(superclass : T) => class extends superclass

2
api/js/etemplate/Et2Button/Et2Button.ts
View File

@ -12,8 +12,6 @@
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import '../Et2Image/Et2Image';
import {SlButton} from "@shoelace-style/shoelace";
import {ButtonMixin} from "./ButtonMixin";
import {PropertyValues} from "@lion/core";
export class Et2Button extends ButtonMixin(Et2InputWidget(SlButton))

1
api/js/etemplate/Et2Button/test/Et2Button.test.ts
View File

@ -3,7 +3,6 @@
*/
import {assert, fixture, html} from '@open-wc/testing';
import {Et2Button} from "../Et2Button";
import type {Et2Widget} from "../../Et2Widget/Et2Widget";
import * as sinon from 'sinon';
describe("Button widget", () =>

8
api/js/etemplate/Et2Date/Et2Date.ts
View File

@ -383,7 +383,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
...super.slots,
input: () =>
{
if(egwIsMobile())
if(typeof egwIsMobile == "function" && egwIsMobile())
{
// Plain input for mobile
const text = document.createElement('input');
@ -434,7 +434,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
async init()
{
// Plain input for mobile
if(egwIsMobile())
if(typeof egwIsMobile == "function" && egwIsMobile())
{
return;
}
@ -602,7 +602,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
}
// Handle timezone offset, flatpickr uses local time
let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
if(egwIsMobile())
if(typeof egwIsMobile == "function" && egwIsMobile())
{
this.updateComplete.then(() =>
{
@ -928,7 +928,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
protected _incrementButtonTemplate()
{
// No increment buttons on mobile
if(egwIsMobile())
if(typeof egwIsMobile == "function" && egwIsMobile())
{
return '';
}

3
api/js/etemplate/Et2Date/test/Et2Date.test.ts
View File

@ -10,6 +10,9 @@ let element : Et2Date;
async function before()
{
// Stub global function
sinon.stub(window, "egwIsMobile").returns(false);
// Create an element to test with, and wait until it's ready
// @ts-ignore
element = await fixture<Et2Date>(html`

15
api/js/etemplate/Et2Date/test/Et2DateTime.test.ts
View File

@ -13,20 +13,21 @@ describe("DateTime widget", () =>
// Setup run before each test
beforeEach(async() =>
{
// Create an element to test with, and wait until it's ready
// @ts-ignore
element = await fixture<Et2DateTime>(html`
<et2-date-time label="I'm a date-time"></et2-date-time>
`);
// Stub egw()
sinon.stub(element, "egw").returns({
tooltipUnbind: () => {},
preference: () => null,
// Image always give check mark. Use data URL to avoid having to serve an actual image
image: i => "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjk2OTY5IiBkPSJNNi45NDMsMjguNDUzDQoJYzAuOTA2LDAuNzY1LDIuMDk3LDEuMTI3LDMuMjg2LDEuMTA5YzAuNDMsMC4wMTQsMC44NTItMC4wNjgsMS4yNjUtMC4yMDdjMC42NzktMC4xOCwxLjMyOC0wLjQ1LDEuODY2LTAuOTAyTDI5LjQwMywxNC45DQoJYzEuNzcyLTEuNDk4LDEuNzcyLTMuOTI1LDAtNS40MjJjLTEuNzcyLTEuNDk3LTQuNjQ2LTEuNDk3LTYuNDE4LDBMMTAuMTE5LDIwLjM0OWwtMi4zODktMi40MjRjLTEuNDQtMS40NTctMy43NzItMS40NTctNS4yMTIsMA0KCWMtMS40MzgsMS40Ni0xLjQzOCwzLjgyNSwwLDUuMjgxQzIuNTE4LDIzLjIwNiw1LjQ3NCwyNi45NDcsNi45NDMsMjguNDUzeiIvPg0KPC9zdmc+DQo="
image: i => "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjk2OTY5IiBkPSJNNi45NDMsMjguNDUzDQoJYzAuOTA2LDAuNzY1LDIuMDk3LDEuMTI3LDMuMjg2LDEuMTA5YzAuNDMsMC4wMTQsMC44NTItMC4wNjgsMS4yNjUtMC4yMDdjMC42NzktMC4xOCwxLjMyOC0wLjQ1LDEuODY2LTAuOTAyTDI5LjQwMywxNC45DQoJYzEuNzcyLTEuNDk4LDEuNzcyLTMuOTI1LDAtNS40MjJjLTEuNzcyLTEuNDk3LTQuNjQ2LTEuNDk3LTYuNDE4LDBMMTAuMTE5LDIwLjM0OWwtMi4zODktMi40MjRjLTEuNDQtMS40NTctMy43NzItMS40NTctNS4yMTIsMA0KCWMtMS40MzgsMS40Ni0xLjQzOCwzLjgyNSwwLDUuMjgxQzIuNTE4LDIzLjIwNiw1LjQ3NCwyNi45NDcsNi45NDMsMjguNDUzeiIvPg0KPC9zdmc+DQo=",
lang: i => i
});
// Create an element to test with, and wait until it's ready
// @ts-ignore
element = await fixture<Et2DateTime>(html`
<et2-date-time label="I'm a date-time"></et2-date-time>
`);
// Stub global egw for preference
// @ts-ignore
window.egw = {

4
api/js/etemplate/Et2Widget/Et2Widget.ts
View File

@ -228,7 +228,7 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
this._handleClick = this._handleClick.bind(this);
// make all sizable widgets large by default on mobile template
if (egwIsMobile())
if(typeof egwIsMobile == "function" && egwIsMobile())
{
this.size = "large";
}
@ -1478,7 +1478,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
}
break;
case Function:
if(typeof attrValue == "string" && mgr.getPerspectiveData().row == null &&
if(typeof attrValue == "string" && mgr && mgr.getPerspectiveData().row == null &&
(attrValue.indexOf("$row") > -1 || attrValue.indexOf("$row_cont") > -1)
)
{

29
api/js/etemplate/Styles/shoelace.ts
View File

@ -39,21 +39,20 @@ export default [sl_css, css`
:root,
:host,
.sl-theme-light {
--sl-font-size-medium: ${egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-input-height-small: 24px;
--sl-input-height-medium: 32px;
--sl-button-font-size-medium: ${egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
--sl-spacing-small: 0.1rem;
--sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px;
--sl-input-border-color-focus: #E6E6E6;
--indicator-color: #696969;
--sl-input-focus-ring-color: #26537C;
--sl-focus-ring-width: 2px;
--sl-input-height-small: 24px;
--sl-input-height-medium: 32px;
--sl-button-font-size-medium: ${typeof egw != "undefined" && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
--sl-spacing-small: 0.1rem;
--sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px;
--sl-input-border-color-focus: #E6E6E6;
--indicator-color: #696969;
--sl-input-focus-ring-color: #26537C;
--sl-focus-ring-width: 2px;
--sl-color-gray-150: #f0f0f0;
}

23
web-test-runner.config.mjs
View File

@ -12,13 +12,6 @@ import fs from 'fs';
import {playwrightLauncher} from '@web/test-runner-playwright';
import {esbuildPlugin} from '@web/dev-server-esbuild';
// Get tests for web components (in their own directory)
const webComponents = fs.readdirSync('api/js/etemplate')
.filter(
dir => fs.statSync(`api/js/etemplate/${dir}`).isDirectory() && fs.existsSync(`api/js/etemplate/${dir}/test`),
)
.map(dir => `api/js/etemplate/${dir}/test`);
// Add any test files in app/js/test/
const appJS = fs.readdirSync('.')
.filter(
@ -50,13 +43,12 @@ export default {
//playwrightLauncher({ product: 'webkit' }),
],
groups:
webComponents.map(pkg =>
{
return {
name: `${pkg}`,
files: `${pkg}/*.test.ts`
};
}).concat(
[
{
name: 'api',
files: 'api/js/etemplate/**/test/*.test.js'
}
].concat(
appJS.map(app =>
{
return {
@ -65,8 +57,7 @@ export default {
}
}
)
)
,
),
plugins: [
// Handles typescript