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 {css, LitElement, PropertyValues} from "@lion/core";
import '../Et2Image/Et2Image'; import '../Et2Image/Et2Image';
import shoelace from "../Styles/shoelace"; import shoelace from "../Styles/shoelace";
import {Et2Button} from "./Et2Button";
type Constructor<T = LitElement> = new (...args : any[]) => T; type Constructor<T = LitElement> = new (...args : any[]) => T;
export const ButtonMixin = <T extends Constructor>(superclass : T) => class extends superclass 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 {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import '../Et2Image/Et2Image'; import '../Et2Image/Et2Image';
import {SlButton} from "@shoelace-style/shoelace"; import {SlButton} from "@shoelace-style/shoelace";
import {ButtonMixin} from "./ButtonMixin";
import {PropertyValues} from "@lion/core";
export class Et2Button extends ButtonMixin(Et2InputWidget(SlButton)) 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 {assert, fixture, html} from '@open-wc/testing';
import {Et2Button} from "../Et2Button"; import {Et2Button} from "../Et2Button";
import type {Et2Widget} from "../../Et2Widget/Et2Widget";
import * as sinon from 'sinon'; import * as sinon from 'sinon';
describe("Button widget", () => 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, ...super.slots,
input: () => input: () =>
{ {
if(egwIsMobile()) if(typeof egwIsMobile == "function" && egwIsMobile())
{ {
// Plain input for mobile // Plain input for mobile
const text = document.createElement('input'); const text = document.createElement('input');
@ -434,7 +434,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
async init() async init()
{ {
// Plain input for mobile // Plain input for mobile
if(egwIsMobile()) if(typeof egwIsMobile == "function" && egwIsMobile())
{ {
return; return;
} }
@ -602,7 +602,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
} }
// Handle timezone offset, flatpickr uses local time // Handle timezone offset, flatpickr uses local time
let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000); let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
if(egwIsMobile()) if(typeof egwIsMobile == "function" && egwIsMobile())
{ {
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {
@ -928,7 +928,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
protected _incrementButtonTemplate() protected _incrementButtonTemplate()
{ {
// No increment buttons on mobile // No increment buttons on mobile
if(egwIsMobile()) if(typeof egwIsMobile == "function" && egwIsMobile())
{ {
return ''; return '';
} }

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

@ -10,6 +10,9 @@ let element : Et2Date;
async function before() async function before()
{ {
// Stub global function
sinon.stub(window, "egwIsMobile").returns(false);
// Create an element to test with, and wait until it's ready // Create an element to test with, and wait until it's ready
// @ts-ignore // @ts-ignore
element = await fixture<Et2Date>(html` 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 // Setup run before each test
beforeEach(async() => 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() // Stub egw()
sinon.stub(element, "egw").returns({ sinon.stub(element, "egw").returns({
tooltipUnbind: () => {}, tooltipUnbind: () => {},
preference: () => null, preference: () => null,
// Image always give check mark. Use data URL to avoid having to serve an actual image // 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 // Stub global egw for preference
// @ts-ignore // @ts-ignore
window.egw = { 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); this._handleClick = this._handleClick.bind(this);
// make all sizable widgets large by default on mobile template // make all sizable widgets large by default on mobile template
if (egwIsMobile()) if(typeof egwIsMobile == "function" && egwIsMobile())
{ {
this.size = "large"; this.size = "large";
} }
@ -1478,7 +1478,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
} }
break; break;
case Function: 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) (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, :root,
:host, :host,
.sl-theme-light { .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-small: 24px; --sl-input-height-medium: 32px;
--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-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-input-help-text-font-size-medium: var(--sl-font-size-medium); --sl-spacing-small: 0.1rem;
--sl-spacing-small: 0.1rem; --sl-spacing-medium: 0.5rem;
--sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px;
--sl-input-border-radius-small: 2px; --sl-input-border-radius-medium: 3px;
--sl-input-border-radius-medium: 3px; --sl-input-border-color-focus: #E6E6E6;
--sl-input-border-color-focus: #E6E6E6; --indicator-color: #696969;
--indicator-color: #696969; --sl-input-focus-ring-color: #26537C;
--sl-input-focus-ring-color: #26537C; --sl-focus-ring-width: 2px;
--sl-focus-ring-width: 2px;
--sl-color-gray-150: #f0f0f0; --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 {playwrightLauncher} from '@web/test-runner-playwright';
import {esbuildPlugin} from '@web/dev-server-esbuild'; 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/ // Add any test files in app/js/test/
const appJS = fs.readdirSync('.') const appJS = fs.readdirSync('.')
.filter( .filter(
@ -50,13 +43,12 @@ export default {
//playwrightLauncher({ product: 'webkit' }), //playwrightLauncher({ product: 'webkit' }),
], ],
groups: groups:
webComponents.map(pkg => [
{ {
return { name: 'api',
name: `${pkg}`, files: 'api/js/etemplate/**/test/*.test.js'
files: `${pkg}/*.test.ts` }
}; ].concat(
}).concat(
appJS.map(app => appJS.map(app =>
{ {
return { return {
@ -65,8 +57,7 @@ export default {
} }
} }
) )
) ),
,
plugins: [ plugins: [
// Handles typescript // Handles typescript