Skip to content
Snippets Groups Projects
Verified Commit 757d35eb authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: doc, little bugs and tidy

parent b835d2da
No related branches found
No related tags found
No related merge requests found
......@@ -81,7 +81,7 @@ class Dom extends Datasource {
/**
*
* @return {Monster.Components.Form.Form}
* @return {void}
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
......
......@@ -191,8 +191,7 @@ class Rest extends Datasource {
}
/**
*
* @return {Monster.Components.Form.Form}
* @return {void}
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
......@@ -478,6 +477,7 @@ function handleIntersectionObserver(json, response, filterControl) {
* @private
*/
function initAutoInit() {
const autoInit = this.getOption("features.autoInit");
validateBoolean(autoInit);
......
......@@ -304,7 +304,7 @@ function initEventHandler() {
);
})
.catch((error) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
});
});
}, 1);
......
......@@ -77,6 +77,14 @@ slot {
}
::slotted(monster-button),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
grid-column: 2;
}
@container form-set (max-width: 500px) {
slot {
grid-template-columns: 1fr;
......@@ -98,5 +106,15 @@ slot {
padding-top: 1rem;
border-bottom: none;
}
::slotted(monster-button),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
grid-column: 1;
}
}
......@@ -4,3 +4,9 @@
@import "../../style/typography.pcss";
@import "../../style/control.pcss";
.invalid {
background-color: red;
}
This diff is collapsed.
This diff is collapsed.
......@@ -189,11 +189,11 @@ function fetchData(init, key, callback) {
.then((resp) => {
response = resp;
const acceptedStatus = this.getOption(`${key}.acceptedStatus`, [200]);
const acceptedStatus = this.getOption(`${key}.acceptedStatus`, [200]).map(Number);
if (acceptedStatus.indexOf(resp.status) === -1) {
throw new DataFetchError(
`the response does not contain a accepted status (actual: ${resp.status}).`,
`the response does not contain an accepted status (actual: ${resp.status}).`,
response,
);
}
......@@ -223,5 +223,7 @@ function fetchData(init, key, callback) {
}
return response;
}).catch((e) => {
throw e;
});
}
......@@ -44,7 +44,7 @@ import { findDocumentTemplate } from "./template.mjs";
export { Updater, addObjectWithUpdaterToElement };
/**
* The updater class connects an object with the dom. In this way, structures and contents in the DOM can be
* The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
* programmatically adapted via attributes.
*
* For example, to include a string from an object, the attribute `data-monster-replace` can be used.
......
......@@ -12,8 +12,8 @@
* SPDX-License-Identifier: AGPL-3.0
*/
import { isIterable, isString } from "../types/is.mjs";
import { validateFunction, validateString } from "../types/validate.mjs";
import { isIterable, isString } from "./is.mjs";
import { validateFunction, validateString } from "./validate.mjs";
import { Base } from "./base.mjs";
export { TokenList };
......
......@@ -10,13 +10,12 @@ import {storageObjectSymbol} from "../../../../source/data/datasource/storage.mj
let expect = chai.expect;
chai.use(chaiDom);
const global = getGlobal();
let html1 = `
<div id="test1">
<monster-form id="form1"></monster-form>
</div>
`;
let html2 = `
<div id="test2">
<monster-form id="form2"
......@@ -37,27 +36,6 @@ let html2 = `
</monster-form>
</div>
`;
let html3 = `
<div id="test3">
<monster-form id="form3">
<div>
<div>
<input name="control1"
id="control1"
data-monster-attributes="value path:a"
data-monster-bind="path:a">
</div>
</div>
<div>
<input name="control2"
data-monster-attributes="value path:b"
data-monster-bind="path:b">
</div>
<button id="button1" data-monster-datasource-handler="write">Button</button>
</monster-form>
</div>
`;
describe('Form', function () {
......@@ -81,165 +59,6 @@ describe('Form', function () {
localStorage.removeItem('test-key')
})
describe("register own datasources", function () {
const sym = Symbol.for('@schukai/monster/data/datasource/@@data');
let test3Datasource = class extends Datasource {
constructor() {
super();
}
read() {
this[sym].setSubject({a: "test3", b: "test3"})
return Promise.resolve();
}
get() {
const self = this;
return self[sym].getRealSubject();
}
}
beforeEach(() => {
let mocks = document.getElementById('mocks');
mocks.innerHTML = html3;
// register own datasource, after the form is loaded
// because in the wild, the form is parsed before the datasource is registered
form.registerDatasource('test3', test3Datasource);
});
it("should be able to register own datasources", function (done) {
let m = form.getDatasources('test3')
expect(m.get('test3')).is.a.equal(test3Datasource);
const testDatasource = new test3Datasource();
const formElement = document.getElementById('form3');
formElement.setOption("datasource", testDatasource);
formElement.refresh().then(() => {
const v = formElement.getValues()
expect(v).is.deep.equal({a: "test3", b: "test3"})
done();
}).catch(e => done(e))
})
})
describe("register and unregister datasources", function () {
const TestDatasource = class extends Datasource {
constructor() {
super();
}
}
it("should register new datasource", function () {
form.registerDatasource('test', TestDatasource);
let m = form.getDatasources('test')
expect(m.get('test')).is.a.equal(TestDatasource);
form.unregisterDatasource('test');
m = form.getDatasources('test')
expect(m.get('test')).to.be.undefined;
})
})
describe("example4-doc", function () {
it("should init button with click event", function (done) {
class MockDatasource extends Datasource {
constructor() {
super();
}
read() {
return Promise.resolve({});
}
write(data) {
// done();
}
[storageObjectSymbol]() {
return localStorage;
}
}
const form4 = document.createElement('monster-form');
const datasource4 = new MockDatasource();
expect(datasource4 instanceof Datasource).is.true;
form4.setOption('datasource', datasource4)
const input4 = document.createElement('input')
input4.setAttribute('name', 'field');
input4.setAttribute('data-monster-attributes', 'value path:headers.Host');
input4.setAttribute('data-monster-bind', 'path:headers.Host');
form4.appendChild(input4);
const button4 = document.createElement('monster-state-button');
button4.setOption('labels.button', 'click!')
button4.setAttribute('data-monster-datasource-handler', 'write')
button4.setOption('actions.click', () => {
})
form4.appendChild(button4);
document.getElementById('mocks').appendChild(form4);
new Processing().add(() => {
button4.click();
}
).run().then(() => {
done();
}).catch(e => done(e))
})
}
)
describe('document.createElement()', function () {
it('should contain objectlink', function (done) {
let mocks = document.getElementById('mocks');
const formControl = document.createElement('monster-form');
mocks.appendChild(formControl);
setTimeout(() => {
try {
expect(document.getElementById('mocks')).contain.html('<monster-form style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>')
done();
} catch (e) {
return done(e);
}
}, 0)
});
});
describe('HTML-Templates', function () {
describe('create from template html1', function () {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment