Skip to content

Commit

Permalink
test: fix filepicker tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@vsgoulart
vsgoulart committed Aug 26, 2024
1 parent 169da94 commit 6ae8c2a
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 251 deletions.
275 changes: 28 additions & 247 deletions packages/form-js-playground/test/spec/form.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": "<h1>My HTML</h1><p style='color: green'>My styled HTML content</p>",
"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",
Expand Down
5 changes: 3 additions & 2 deletions packages/form-js-viewer/src/render/components/form-fields/FilePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
37 changes: 35 additions & 2 deletions packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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 () {
Expand Down Expand Up @@ -230,6 +259,9 @@ function createFilePicker({ services, ...restOptions } = {}) {
const options = {
domId: 'test-filepicker',
field: defaultField,
fieldInstance: {
valuePath: [defaultField.id],
},
onChange: () => {},
...restOptions,
};
Expand All @@ -245,6 +277,7 @@ function createFilePicker({ services, ...restOptions } = {}) {
onChange={options.onChange}
onBlur={options.onBlur}
value={options.value}
fieldInstance={options.fieldInstance}
/>
</MockFormContext>,
{
Expand Down

0 comments on commit 6ae8c2a

Please sign in to comment.