From 6ae8c2a293255217a1d6a03c40d180534916b369 Mon Sep 17 00:00:00 2001 From: Vinicius Goulart Date: Mon, 26 Aug 2024 20:36:41 +0200 Subject: [PATCH] test: fix filepicker tests --- .../form-js-playground/test/spec/form.json | 275 ++---------------- .../components/form-fields/FilePicker.js | 5 +- .../components/form-fields/FilePicker.spec.js | 37 ++- 3 files changed, 66 insertions(+), 251 deletions(-) diff --git a/packages/form-js-playground/test/spec/form.json b/packages/form-js-playground/test/spec/form.json index 1dcf0f7c9..dfe5108fd 100644 --- a/packages/form-js-playground/test/spec/form.json +++ b/packages/form-js-playground/test/spec/form.json @@ -2,256 +2,37 @@ "$schema": "../../../form-json-schema/resources/schema.json", "components": [ { - "type": "expression", - "key": "expressionResult", - "expression": "= 3 + 4", - "computeOn": "change" - }, - { - "type": "text", - "text": "# Invoice\nLorem _ipsum_ __dolor__ `sit`.\n \n \nA list of BPMN symbols:\n* Start Event\n* Task\nLearn more about [forms](https://bpmn.io).\n \n \nThis [malicious link](javascript:throw onerror=alert,'some string',123,'haha') __should not work__.", - "layout": { - "row": "Row_1", - "columns": 8 - } - }, - { - "type": "html", - "content": "

My HTML

My styled HTML content

", - "layout": { - "row": "Row_1", - "columns": 8 - } - }, - { - "type": "iframe", - "label": "An example page rendered in an iframe", - "url": "https://example.com/" - }, - { - "type": "group", - "label": "Supplementary Information", - "path": "invoiceDetails", - "showOutline": true, "components": [ { - "id": "GroupTextfield_1", - "type": "textfield", - "key": "supplementaryInfo1", - "label": "Field 1" - }, - { - "id": "GroupTextfield_2", - "type": "textfield", - "key": "supplementaryInfo2", - "label": "Field 2" + "components": [ + { + "components": [ + { + "type": "filepicker", + "id": "Field_1lhao5l", + "key": "filepicker_1wk6n" + } + ], + "showOutline": false, + "isRepeating": true, + "allowAddRemove": true, + "defaultRepetitions": 1, + "label": "", + "type": "dynamiclist", + "id": "Field_1o05zdk", + "path": "list" + } + ], + "showOutline": false, + "type": "group", + "id": "Field_0a4g0u9", + "path": "bar" } - ] - }, - { - "type": "dynamiclist", - "label": "Clients", - "path": "clients", - "showOutline": true, - "isRepeating": true, - "defaultRepetitions": 2, - "allowAddRemove": true, - "components": [ - { - "id": "DynamicListTextField_1", - "type": "textfield", - "key": "clientSurname", - "label": "Surname" - }, - { - "id": "DynamicListTextField_2", - "type": "textfield", - "key": "clientName", - "label": "Name" - } - ] - }, - { - "key": "creditor", - "label": "Creditor", - "type": "textfield", - "validate": { - "required": true - } - }, - { - "description": "An invoice number in the format: C-123.", - "key": "invoiceNumber", - "label": "Invoice Number", - "type": "textfield", - "validate": { - "pattern": "^C-[0-9]+$" - } - }, - { - "key": "amount", - "label": "Amount", - "type": "number", - "validate": { - "min": 0, - "max": 1000 - } - }, - { - "key": "approved", - "label": "Approved", - "type": "checkbox" - }, - { - "key": "approvedBy", - "label": "Approved By", - "type": "textfield" - }, - { - "key": "approverComments", - "label": "Approver comments", - "type": "textarea" - }, - { - "type": "checkbox", - "label": "Checkbox", - "key": "isGood" - }, - { - "type": "separator" - }, - { - "type": "select", - "key": "selectMe", - "label": "Select me", - "valuesExpression": "=if isGood then [ \"good\" ] else [\"bad\"]" - }, - { - "key": "hobbies", - "label": "Hobbies", - "type": "taglist", - "valuesExpression": "=hobbies" - }, - { - "key": "mailto", - "label": "Email data to", - "type": "checklist", - "values": [ - { - "label": "Approver", - "value": "approver" - }, - { - "label": "Manager", - "value": "manager" - }, - { - "label": "Regional Manager", - "value": "regional-manager" - } - ] - }, - { - "key": "product", - "label": "Product", - "type": "radio", - "values": [ - { - "label": "Camunda Platform", - "value": "camunda-platform" - }, - { - "label": "Camunda Cloud", - "value": "camunda-cloud" - } - ] - }, - { - "key": "dri", - "label": "Assign DRI", - "type": "radio", - "valuesKey": "queriedDRIs" - }, - { - "key": "tags", - "label": "Taglist", - "type": "taglist", - "values": [ - { - "label": "Tag1", - "value": "tag1" - }, - { - "label": "Tag2", - "value": "tag2" - }, - { - "label": "Tag3", - "value": "tag3" - }, - { - "label": "Tag4", - "value": "tag4" - }, - { - "label": "Tag5", - "value": "tag5" - }, - { - "label": "Tag6", - "value": "tag6" - }, - { - "label": "Tag7", - "value": "tag7" - }, - { - "label": "Tag8", - "value": "tag8" - }, - { - "label": "Tag9", - "value": "tag9" - }, - { - "label": "Tag10", - "value": "tag10" - }, - { - "label": "Tag11", - "value": "tag11" - } - ] - }, - { - "key": "language", - "label": "Language", - "type": "select", - "values": [ - { - "label": "German", - "value": "german" - }, - { - "label": "English", - "value": "english" - } - ] - }, - { - "key": "conversation", - "type": "datetime", - "subtype": "datetime", - "dateLabel": "Date of conversation", - "timeLabel": "Time of conversation", - "timeSerializingFormat": "utc_normalized", - "timeInterval": 15, - "use24h": false - }, - { - "source": "=logo", - "alt": "The bpmn.io logo", - "type": "image" + ], + "showOutline": false, + "type": "group", + "id": "Field_1sy3xn3", + "path": "foo" }, { "label": "Submit", diff --git a/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js b/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js index c67d71f7a..ba006109b 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js +++ b/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js @@ -34,13 +34,14 @@ export function FilePicker(props) { const eventBus = useService('eventBus'); /** @type {import('../../FileRegistry').FileRegistry} */ const fileRegistry = useService('fileRegistry', false); - const { field, onChange, domId, errors = [], disabled, readonly, required } = props; + const { field, onChange, domId, errors = [], disabled, readonly, required, fieldInstance } = props; const { label, multiple = '', accept = '' } = field; + const { valuePath = [] } = fieldInstance; const evaluatedAccept = useSingleLineTemplateEvaluation(accept); const evaluatedMultiple = useSingleLineTemplateEvaluation(typeof multiple === 'string' ? multiple : multiple.toString()) === 'true'; const errorMessageId = `${domId}-error-message`; - const filesKey = `file::${calculateValuePath(props.fieldInstance.valuePath)}`; + const filesKey = `file::${calculateValuePath(valuePath)}`; const deleteFiles = useCallback(() => { if (fileRegistry) { fileRegistry.deleteFiles(filesKey); diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js index 7bacbb95d..84a5bff06 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js @@ -73,7 +73,7 @@ describe('FilePicker', function () { // then expect(screen.getByText('test.png')).to.exist; - expect(fileRegistry.setFiles).to.have.been.calledWith('Filepicker_1_value_key', [file]); + expect(fileRegistry.setFiles).to.have.been.calledWith('file::Filepicker_1', [file]); }); it('should change the label with multiple files selected', function () { @@ -100,7 +100,36 @@ describe('FilePicker', function () { // then expect(screen.getByText('2 files selected')).to.exist; - expect(fileRegistry.setFiles).to.have.been.calledWith('Filepicker_1_value_key', [file, file]); + expect(fileRegistry.setFiles).to.have.been.calledWith('file::Filepicker_1', [file, file]); + }); + + it('should files with nested filepickers', function () { + // given + const file = new File([''], 'test.png', { type: 'image/png' }); + const fileRegistry = getMockFileRegistry(); + const { container } = createFilePicker({ + field: { + id: 'Filepicker_1', + }, + fieldInstance: { + valuePath: ['foo', 'bar', 0, 'foo', 2, 'Filepicker_1'], + }, + services: { + fileRegistry, + }, + }); + + // when + + fireEvent.change(container.querySelector('input[type="file"]'), { + target: { + files: [file], + }, + }); + + // then + + expect(fileRegistry.setFiles).to.have.been.calledWith('file::foo.bar[0].foo[2].Filepicker_1', [file]); }); it('should accept multiple files and limit the file types', function () { @@ -230,6 +259,9 @@ function createFilePicker({ services, ...restOptions } = {}) { const options = { domId: 'test-filepicker', field: defaultField, + fieldInstance: { + valuePath: [defaultField.id], + }, onChange: () => {}, ...restOptions, }; @@ -245,6 +277,7 @@ function createFilePicker({ services, ...restOptions } = {}) { onChange={options.onChange} onBlur={options.onBlur} value={options.value} + fieldInstance={options.fieldInstance} /> , {