- Sort out some type issues to reduce warnings/duplication

- Some tests for textbox
This commit is contained in:
nathan 2021-08-26 12:59:13 -06:00
parent 181b1c03ae
commit 4218b132f9
9 changed files with 136 additions and 31 deletions

View File

@ -15,7 +15,7 @@ import {SlotMixin} from "../../../../node_modules/@lion/core/src/SlotMixin.js";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {Et2Widget} from "../Et2Widget/Et2Widget";
export class Et2Button extends Et2InputWidget(Et2Widget(SlotMixin(LionButton)))
export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{
protected _created_icon_node : HTMLImageElement;
protected clicked : boolean = false;
@ -146,7 +146,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(SlotMixin(LionButton)))
get _iconNode() : HTMLImageElement
{
return <HTMLImageElement>(Array.from(this.children)).find(
el => el.slot === "icon",
el => (<HTMLElement>el).slot === "icon",
);
}

View File

@ -122,7 +122,7 @@ export function formatDate(date: Date, options): string
return _value;
}
export class Et2Date extends Et2InputWidget(Et2Widget(LionInputDatepicker))
export class Et2Date extends Et2InputWidget(LionInputDatepicker)
{
static get styles()
{

View File

@ -1,4 +1,6 @@
import {et2_IInput, et2_IInputNode} from "../et2_core_interfaces";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {dedupeMixin} from "../../../../node_modules/@lion/core/index.js";
/**
* This mixin will allow any LitElement to become an Et2InputWidget
@ -7,10 +9,9 @@ import {et2_IInput, et2_IInputNode} from "../et2_core_interfaces";
* export class Et2Button extends Et2InputWidget(Et2Widget(LitWidget)) {...}
*/
type Constructor<T = {}> = new (...args : any[]) => T;
export const Et2InputWidget = <T extends Constructor>(superClass : T) =>
{
class Et2InputWidgetClass extends superClass implements et2_IInput, et2_IInputNode
const Et2InputWidgetClass = superclass =>
class extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode
{
label : string = '';
@ -31,9 +32,9 @@ export const Et2InputWidget = <T extends Constructor>(superClass : T) =>
};
}
constructor()
constructor(...args : any[])
{
super();
super(...args);
}
@ -67,7 +68,7 @@ export const Et2InputWidget = <T extends Constructor>(superClass : T) =>
switch(typeof this._oldValue)
{
case "object":
if(typeof this._oldValue.length !== "undefined" &&
if(Array.isArray(this._oldValue) &&
this._oldValue.length !== value.length
)
{
@ -111,5 +112,5 @@ export const Et2InputWidget = <T extends Constructor>(superClass : T) =>
return this._inputNode;
}
};
return Et2InputWidgetClass as unknown as Constructor<et2_IInput> & T;
}
export const Et2InputWidget = dedupeMixin(Et2InputWidgetClass);

View File

@ -0,0 +1,39 @@
/**
* Common base for easily running some standard tests on all input widgets
*
* This file should not get run on its own, extend it
*
* TODO: Not sure exactly how to make this happen yet. Maybe:
* https://github.com/mochajs/mocha/wiki/Shared-Behaviours
* <code>
* shared:
* exports.shouldBehaveLikeAUser = function() {
* it('should have .name.first', function() {
* this.user.name.first.should.equal('tobi');
* })
*
* it('should have .name.last', function() {
* this.user.name.last.should.equal('holowaychuk');
* })
*
* describe('.fullname()', function() {
* it('should return the full name', function() {
* this.user.fullname().should.equal('tobi holowaychuk');
* })
* })
* };
* test.js:
*
* var User = require('./user').User
* , Admin = require('./user').Admin
* , shared = require('./shared');
*
* describe('User', function() {
* beforeEach(function() {
* this.user = new User('tobi', 'holowaychuk');
* })
*
* shared.shouldBehaveLikeAUser();
* })
* </code>
*/

View File

@ -15,7 +15,7 @@ import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {Et2Widget} from "../Et2Widget/Et2Widget";
export class Et2Textarea extends Et2InputWidget(Et2Widget(LionTextarea))
export class Et2Textarea extends Et2InputWidget(LionTextarea)
{
static get styles()
{

View File

@ -12,9 +12,8 @@
import {css, html} from "../../../../node_modules/@lion/core/index.js"
import {LionInput} from "../../../../node_modules/@lion/input/index.js"
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {Et2Widget} from "../Et2Widget/Et2Widget";
export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
export class Et2Textbox extends Et2InputWidget(LionInput)
{
static get styles()
@ -35,9 +34,9 @@ export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
}
}
constructor()
constructor(...args : any[])
{
super();
super(...args);
}
connectedCallback()

View File

@ -0,0 +1,32 @@
/**
* Test file for Etemplate webComponent Textbox
*/
import {assert, fixture} from '@open-wc/testing';
import {Et2Textbox} from "../Et2Textbox";
import {html} from "lit-element";
describe("Textbox widget", () =>
{
// Reference to component under test
let element : Et2Textbox;
// Setup run before each test
beforeEach(async() =>
{
// Create an element to test with, and wait until it's ready
element = await fixture<Et2Textbox>(html`
<et2-textbox></et2-textbox>
`);
});
it('is defined', () =>
{
assert.instanceOf(element, Et2Textbox);
});
it('has a label', () =>
{
element.set_label("Yay label");
assert.isEmpty(element.shadowRoot.querySelectorAll('.et2_label'));
})
});

View File

@ -0,0 +1,34 @@
/**
* Testing Et2Textbox input / values
*/
import {assert, fixture} from "@open-wc/testing";
import {html} from "lit-html";
import {Et2Textbox} from "../Et2Textbox";
describe("Textbox input / values", () =>
{
// Reference to component under test
let element : Et2Textbox;
// Setup run before each test
beforeEach(async() =>
{
// Create an element to test with, and wait until it's ready
element = await fixture<Et2Textbox>(html`
<et2-textbox></et2-textbox>
`);
});
it("Takes a value", () =>
{
/*
Complains about set_value() being missing?
let test_value = "test value";
debugger;
element.set_value(test_value);
assert(document.querySelector('input').should.have.text(test_value))
*/
})
});

View File

@ -7,7 +7,7 @@ import {et2_cloneObject, et2_csvSplit} from "../et2_core_common";
// @ts-ignore
import type {IegwAppLocal} from "../../jsapi/egw_global";
import {ClassWithAttributes, ClassWithInterfaces} from "../et2_core_inheritance";
import {LitElement} from "@lion/core";
import {LitElement} from "../../../../node_modules/@lion/core/index.js";
import type {et2_container} from "../et2_core_baseWidget";
/**
@ -21,6 +21,19 @@ import type {et2_container} from "../et2_core_baseWidget";
*
* @see Mixin explanation https://lit.dev/docs/composition/mixins/
*/
function applyMixins(derivedCtor : any, baseCtors : any[])
{
baseCtors.forEach(baseCtor =>
{
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name =>
{
if(name !== 'constructor')
{
derivedCtor.prototype[name] = baseCtor.prototype[name];
}
});
});
}
type Constructor<T = {}> = new (...args : any[]) => T;
export const Et2Widget = <T extends Constructor<LitElement>>(superClass : T) =>
@ -778,19 +791,6 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass : T) =>
}
};
function applyMixins(derivedCtor : any, baseCtors : any[])
{
baseCtors.forEach(baseCtor =>
{
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name =>
{
if(name !== 'constructor')
{
derivedCtor.prototype[name] = baseCtor.prototype[name];
}
});
});
}
// Add some more stuff in
applyMixins(Et2WidgetClass, [ClassWithInterfaces]);