From 40278c882759b2346524129fdb90bb692fe40f13 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 4 Jan 2023 12:00:25 -0700 Subject: [PATCH] Get our WebComponent tests running again Made a lot of "failed to construct htmlelement" errors go away, avoid a bunch of egwIsMobile is undefined errors --- api/js/etemplate/Et2Button/ButtonMixin.ts | 1 - api/js/etemplate/Et2Button/Et2Button.ts | 2 -- .../Et2Button/test/Et2Button.test.ts | 1 - api/js/etemplate/Et2Date/Et2Date.ts | 8 ++--- api/js/etemplate/Et2Date/test/Et2Date.test.ts | 3 ++ .../Et2Date/test/Et2DateTime.test.ts | 15 +++++----- api/js/etemplate/Et2Widget/Et2Widget.ts | 4 +-- api/js/etemplate/Styles/shoelace.ts | 29 +++++++++---------- web-test-runner.config.mjs | 23 +++++---------- 9 files changed, 38 insertions(+), 48 deletions(-) diff --git a/api/js/etemplate/Et2Button/ButtonMixin.ts b/api/js/etemplate/Et2Button/ButtonMixin.ts index ec24314e9f..575bd3847e 100644 --- a/api/js/etemplate/Et2Button/ButtonMixin.ts +++ b/api/js/etemplate/Et2Button/ButtonMixin.ts @@ -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 = new (...args : any[]) => T; export const ButtonMixin = (superclass : T) => class extends superclass diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts index 9dedabb978..b0dea154e6 100644 --- a/api/js/etemplate/Et2Button/Et2Button.ts +++ b/api/js/etemplate/Et2Button/Et2Button.ts @@ -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)) diff --git a/api/js/etemplate/Et2Button/test/Et2Button.test.ts b/api/js/etemplate/Et2Button/test/Et2Button.test.ts index 3734fd606c..b05726053d 100644 --- a/api/js/etemplate/Et2Button/test/Et2Button.test.ts +++ b/api/js/etemplate/Et2Button/test/Et2Button.test.ts @@ -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", () => diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts index 955e342af0..d8530399fa 100644 --- a/api/js/etemplate/Et2Date/Et2Date.ts +++ b/api/js/etemplate/Et2Date/Et2Date.ts @@ -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 ''; } diff --git a/api/js/etemplate/Et2Date/test/Et2Date.test.ts b/api/js/etemplate/Et2Date/test/Et2Date.test.ts index d5473cc0a9..65ae44d9dd 100644 --- a/api/js/etemplate/Et2Date/test/Et2Date.test.ts +++ b/api/js/etemplate/Et2Date/test/Et2Date.test.ts @@ -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(html` diff --git a/api/js/etemplate/Et2Date/test/Et2DateTime.test.ts b/api/js/etemplate/Et2Date/test/Et2DateTime.test.ts index 0cbab6b336..5d427d0d60 100644 --- a/api/js/etemplate/Et2Date/test/Et2DateTime.test.ts +++ b/api/js/etemplate/Et2Date/test/Et2DateTime.test.ts @@ -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(html` - - `); - // 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(html` + + `); + // Stub global egw for preference // @ts-ignore window.egw = { diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts index 8caf425e98..12ae24f93e 100644 --- a/api/js/etemplate/Et2Widget/Et2Widget.ts +++ b/api/js/etemplate/Et2Widget/Et2Widget.ts @@ -228,7 +228,7 @@ const Et2WidgetMixin = (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) ) { diff --git a/api/js/etemplate/Styles/shoelace.ts b/api/js/etemplate/Styles/shoelace.ts index 3023b22dbe..a4e8276ad4 100644 --- a/api/js/etemplate/Styles/shoelace.ts +++ b/api/js/etemplate/Styles/shoelace.ts @@ -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; } diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index 44a2489941..23108a08eb 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -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