71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import { Box } from '../../classes/display/box.js';
|
|
// import { Document } from '../../classes/display/document.js';
|
|
import { Scene } from '../../classes/display/scene.js';
|
|
import { mochaRun } from '../../util/helpers.js';
|
|
|
|
const rootElement = document.getElementById('scene');
|
|
const rootBox = new Box('rootBox', rootElement).flex();
|
|
const scene = window.scene = new Scene('Input test', rootBox);
|
|
|
|
scene.withDocument();
|
|
|
|
describe('Document > Form > TextField', () => {
|
|
before(() => {
|
|
scene.withDocument('Document 1', (d) => d.form());
|
|
});
|
|
it('can accept input and call value update callback', () => {
|
|
const doc = scene.lastDocument;
|
|
const form = doc.lastElement;
|
|
/**
|
|
* Handler callback for form element value updates.
|
|
* In this case we use a collection of DisplayValues as a straightforward way to render the form element values.
|
|
*/
|
|
const dvMap = new Map();
|
|
const updateFieldValueDisplay = ({ id, name, value }) => {
|
|
const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
|
|
dvMap.set(id, dv);
|
|
dv.set(value);
|
|
};
|
|
|
|
form.textField({
|
|
id: 'input1',
|
|
name: 'Input 1',
|
|
cb: updateFieldValueDisplay,
|
|
cbEventTypes: ['keydown', 'keyup'],
|
|
cbOnInit: true,
|
|
});
|
|
doc.remark('Hmm...!');
|
|
});
|
|
// it('can exist within a graph', () => {
|
|
// scene.withAdditionalFlowchart({ id: 'flowchart', name: 'Graph' });
|
|
// const graph = scene.lastFlowchart();
|
|
// });
|
|
});
|
|
|
|
describe('Document > Form > Button', () => {
|
|
before(() => {
|
|
scene.withDocument('Document 2', (d) => d.form());
|
|
});
|
|
it('calls a callback when clicked', () => {
|
|
const doc = scene.lastDocument;
|
|
const form = doc.lastElement;
|
|
const dvMap = new Map();
|
|
let clicks = 0;
|
|
const handleClick = ({ id, name }, { initializing }) => {
|
|
const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
|
|
dvMap.set(id, dv);
|
|
if (!initializing) {
|
|
clicks++;
|
|
dv.set(`clicked ${clicks} time${clicks !== 1 ? 's' : ''}`);
|
|
}
|
|
};
|
|
|
|
doc.remark('<br/>');
|
|
doc.remark('Button:');
|
|
form.button({ id: 'button1', name: 'Button 1', cb: handleClick });
|
|
doc.remark('Yeah?');
|
|
});
|
|
});
|
|
|
|
mochaRun();
|