From 6b307525621b05d1c6909d4ce23e3f01aaab96b8 Mon Sep 17 00:00:00 2001
From: bugy <buggygm@gmail.com>
Date: Fri, 1 Nov 2019 21:45:53 +0100
Subject: [PATCH] #127 fixed replacement of parameter object on adding new
 field

---
 samples/configs/parameterized.json            |   3 +-
 .../js/admin/scripts-config/ParamListItem.vue |   2 +-
 .../scripts-config/ParameterConfigForm.vue    |  27 +-
 .../admin/scripts-config/ScriptParamList.vue  |   9 +-
 .../scripts-config/script-config-module.js    |  31 +-
 web-src/js/common.js                          |   4 +-
 .../tests/admin/ParameterConfigForm_test.js   | 356 +++++++++---------
 web-src/tests/admin/ParameterList_test.js     |  95 +++++
 8 files changed, 333 insertions(+), 194 deletions(-)
 create mode 100644 web-src/tests/admin/ParameterList_test.js

diff --git a/samples/configs/parameterized.json b/samples/configs/parameterized.json
index ff87b63b..53975df1 100644
--- a/samples/configs/parameterized.json
+++ b/samples/configs/parameterized.json
@@ -11,8 +11,7 @@
     {
       "name": "Simple Int",
       "param": "--simple_int",
-      "type": "int",
-      "max": ""
+      "type": "int"
     },
     {
       "name": "Simple Boolean",
diff --git a/web-src/js/admin/scripts-config/ParamListItem.vue b/web-src/js/admin/scripts-config/ParamListItem.vue
index be3d9fe6..446206f8 100644
--- a/web-src/js/admin/scripts-config/ParamListItem.vue
+++ b/web-src/js/admin/scripts-config/ParamListItem.vue
@@ -27,7 +27,7 @@
     import ParameterConfigForm from './ParameterConfigForm';
 
     export default {
-        name: 'ParamHeader',
+        name: 'ParamListItem',
         components: {ParameterConfigForm},
 
         props: {
diff --git a/web-src/js/admin/scripts-config/ParameterConfigForm.vue b/web-src/js/admin/scripts-config/ParameterConfigForm.vue
index 42cd2dbf..a03f32bf 100644
--- a/web-src/js/admin/scripts-config/ParameterConfigForm.vue
+++ b/web-src/js/admin/scripts-config/ParameterConfigForm.vue
@@ -64,7 +64,7 @@
 
 <script>
     import Vue from 'vue';
-    import {forEachKeyValue, isEmptyArray, isEmptyString} from '../../common';
+    import {forEachKeyValue, isEmptyString} from '../../common';
     import Checkbox from '../../components/checkbox';
     import Combobox from '../../components/combobox';
     import TextArea from '../../components/TextArea';
@@ -91,6 +91,13 @@
         typeField
     } from './parameter-fields';
 
+    function updateValue(value, configField, newValue) {
+        if (!value.hasOwnProperty(configField)) {
+            Object.assign(value, {[configField]: newValue});
+        }
+        Vue.set(value, configField, newValue);
+    }
+
     export default {
         name: 'ParameterConfigForm',
         components: {ChipsList, TextArea, Checkbox, Combobox, Textfield},
@@ -121,7 +128,7 @@
             };
 
             forEachKeyValue(simpleFields, (vmField, configField) => {
-                this.$watch(vmField, (newValue) => Vue.set(this.value, configField, newValue));
+                this.$watch(vmField, (newValue) => updateValue(this.value, configField, newValue));
             });
 
             for (const child of this.$children) {
@@ -247,11 +254,7 @@
                 }
             },
             fileExtensions(fileExtensions) {
-                if (isEmptyArray(fileExtensions)) {
-                    Vue.delete(this.value, 'file_extensions');
-                } else {
-                    Vue.set(this.value, 'file_extensions', fileExtensions);
-                }
+                updateValue(this.value, 'file_extensions', fileExtensions);
             },
             allowedValuesFromScript() {
                 this.updateAllowedValues();
@@ -264,15 +267,15 @@
             },
             defaultValue() {
                 if (this.selectedType === 'multiselect') {
-                    Vue.set(this.value, 'default', this.defaultValue.split(',').filter(s => !isEmptyString(s)));
+                    updateValue(this.value, 'default', this.defaultValue.split(',').filter(s => !isEmptyString(s)));
                 } else if (this.isRecursiveFile()) {
                     let path = this.defaultValue.split('/').filter(s => !isEmptyString(s));
                     if (this.defaultValue.startsWith('/')) {
                         path = ['/', ...path];
                     }
-                    Vue.set(this.value, 'default', path);
+                    updateValue(this.value, 'default', path);
                 } else {
-                    Vue.set(this.value, 'default', this.defaultValue);
+                    updateValue(this.value, 'default', this.defaultValue);
                 }
             }
         },
@@ -294,9 +297,9 @@
         methods: {
             updateAllowedValues() {
                 if (this.allowedValuesFromScript) {
-                    Vue.set(this.value, 'values', {script: this.allowedValuesScript});
+                    updateValue(this.value, 'values', {script: this.allowedValuesScript});
                 } else {
-                    Vue.set(this.value, 'values', this.allowedValues);
+                    updateValue(this.value, 'values', this.allowedValues);
                 }
             },
             isRecursiveFile() {
diff --git a/web-src/js/admin/scripts-config/ScriptParamList.vue b/web-src/js/admin/scripts-config/ScriptParamList.vue
index d9f5042a..8e61f720 100644
--- a/web-src/js/admin/scripts-config/ScriptParamList.vue
+++ b/web-src/js/admin/scripts-config/ScriptParamList.vue
@@ -194,9 +194,12 @@
                 }, 40);
             },
 
-            parameters(parameters) {
-                for (const parameter of parameters) {
-                    this.setParameterKey(parameter);
+            parameters :{
+                immediate: true,
+                handler(parameters) {
+                    for (const parameter of parameters) {
+                        this.setParameterKey(parameter);
+                    }
                 }
             }
         }
diff --git a/web-src/js/admin/scripts-config/script-config-module.js b/web-src/js/admin/scripts-config/script-config-module.js
index bc551ca5..22676b7f 100644
--- a/web-src/js/admin/scripts-config/script-config-module.js
+++ b/web-src/js/admin/scripts-config/script-config-module.js
@@ -1,4 +1,24 @@
 import axios from 'axios';
+import {contains, forEachKeyValue, isEmptyValue} from '../../common';
+
+const allowedEmptyValuesInParam = ['name'];
+
+function removeEmptyValues(config) {
+    for (const parameter of config.parameters) {
+        let emptyValueKeys = [];
+        forEachKeyValue(parameter, (key, value) => {
+            if (contains(allowedEmptyValuesInParam, key)) {
+                return;
+            }
+
+            if (isEmptyValue(value)) {
+                emptyValueKeys.push(key);
+            }
+        });
+
+        emptyValueKeys.forEach(key => delete parameter[key]);
+    }
+}
 
 export default {
     state: {
@@ -21,11 +41,16 @@ export default {
                 });
         },
 
-        save({state}) {
+        save({dispatch, state}) {
+            const config = $.extend({}, state.scriptConfig);
+
+            removeEmptyValues(config);
+
             return axios.put('admin/scripts', {
-                config: state.scriptConfig,
+                config,
                 filename: state.scriptFilename
-            });
+            })
+                .then(dispatch('init', config.name));
         }
     },
     mutations: {
diff --git a/web-src/js/common.js b/web-src/js/common.js
index 22abbdb6..1c435507 100644
--- a/web-src/js/common.js
+++ b/web-src/js/common.js
@@ -34,7 +34,7 @@ export function isEmptyArray(value) {
     return isNull(value) || value.length === 0;
 }
 
-function isEmptyValue(value) {
+export function isEmptyValue(value) {
     if (isNull(value)) {
         return true;
     }
@@ -46,6 +46,8 @@ function isEmptyValue(value) {
     if (typeof value === 'object') {
         return isEmptyObject(value);
     }
+
+    return false;
 }
 
 export function isEmptyObject(obj) {
diff --git a/web-src/tests/admin/ParameterConfigForm_test.js b/web-src/tests/admin/ParameterConfigForm_test.js
index 151ee475..3ed8e943 100644
--- a/web-src/tests/admin/ParameterConfigForm_test.js
+++ b/web-src/tests/admin/ParameterConfigForm_test.js
@@ -11,9 +11,59 @@ import {setChipListValue, vueTicks} from '../test_utils';
 
 chaiConfig.truncateThreshold = 0;
 
+export async function setValueByUser(form, parameterName, value) {
+    const childComponent = findField(form, parameterName);
+
+    if (childComponent.$options._componentTag === ChipsList.name) {
+        setChipListValue(childComponent, value);
+        return;
+    }
+
+    const inputField = findFieldInputElement(form, parameterName);
+
+    setInputValue(inputField, value, true);
+
+    await vueTicks();
+}
+
+const findField = (form, expectedName, failOnMissing = true) => {
+    for (const child of form.$children) {
+        let fieldName;
+        if (child.$options._componentTag === ChipsList.name) {
+            fieldName = child.title;
+        } else {
+            fieldName = child.$props.config.name;
+        }
+
+        if (fieldName.toLowerCase() === expectedName.toLowerCase()) {
+            return child;
+        }
+    }
+
+    if (failOnMissing) {
+        assert.fail('Failed to find field: ' + expectedName);
+    }
+};
+
+const findFieldInputElement = (form, expectedName) => {
+    const field = findField(form, expectedName);
+
+    let elementType;
+    if (field.$options._componentTag === TextArea.name) {
+        elementType = 'textarea';
+    } else if (field.$options._componentTag === Combobox.name) {
+        elementType = 'select';
+    } else {
+        elementType = 'input';
+    }
+
+    return $(field.$el).find(elementType).get(0);
+};
+
+
 describe('Test ParameterConfigForm', function () {
-    let form;
     let errors;
+    let form;
 
     beforeEach(async function () {
         errors = [];
@@ -46,54 +96,16 @@ describe('Test ParameterConfigForm', function () {
         form.destroy();
     });
 
-    const findField = (expectedName, failOnMissing = true) => {
-
-        for (const child of form.vm.$children) {
-            let fieldName;
-            if (child.$options._componentTag === ChipsList.name) {
-                fieldName = child.title;
-            } else {
-                fieldName = child.$props.config.name;
-            }
-
-            if (fieldName.toLowerCase() === expectedName.toLowerCase()) {
-                return child;
-            }
-        }
-
-        if (failOnMissing) {
-            assert.fail('Failed to find field: ' + expectedName);
-        }
+    const _findField = (expectedName, failOnMissing = true) => {
+        return findField(form.vm, expectedName, failOnMissing);
     };
 
-    const findFieldInputElement = (expectedName) => {
-        const field = findField(expectedName);
-
-        let elementType;
-        if (field.$options._componentTag === TextArea.name) {
-            elementType = 'textarea';
-        } else if (field.$options._componentTag === Combobox.name) {
-            elementType = 'select';
-        } else {
-            elementType = 'input';
-        }
-
-        return $(field.$el).find(elementType).get(0);
+    const _findFieldInputElement = (expectedName) => {
+        return findFieldInputElement(form.vm, expectedName);
     };
 
-    async function setValueByUser(parameterName, value) {
-        const childComponent = findField(parameterName);
-
-        if (childComponent.$options._componentTag === ChipsList.name) {
-            setChipListValue(childComponent, value);
-            return;
-        }
-
-        const inputField = findFieldInputElement(parameterName);
-
-        setInputValue(inputField, value, true);
-
-        await vueTicks();
+    async function _setValueByUser(parameterName, value) {
+        await setValueByUser(form.vm, parameterName, value);
     }
 
     async function setPropsField(fieldName, value) {
@@ -130,7 +142,7 @@ describe('Test ParameterConfigForm', function () {
     describe('Test initial values', function () {
 
         it('Test initial name', function () {
-            const nameField = findField('Name');
+            const nameField = _findField('Name');
 
             assert.equal('param 1', nameField.value);
         });
@@ -151,14 +163,14 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('param X', findField('name').value);
-            assert.equal('my desc', findField('description').value);
-            assert.equal('-x', findField('arg').value);
-            assert.equal('int', findField('type').value);
-            assert.equal(true, findField('without value').value);
-            assert.equal(true, findField('required').value);
-            assert.equal(false, findField('constant').value);
-            assert.equal(true, findField('secret value').value);
+            assert.equal('param X', _findField('name').value);
+            assert.equal('my desc', _findField('description').value);
+            assert.equal('-x', _findField('arg').value);
+            assert.equal('int', _findField('type').value);
+            assert.equal(true, _findField('without value').value);
+            assert.equal(true, _findField('required').value);
+            assert.equal(false, _findField('constant').value);
+            assert.equal(true, _findField('secret value').value);
         });
 
         it('Test simple parameters when int', async function () {
@@ -172,9 +184,9 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('int', findField('type').value);
-            assert.equal(-5, findField('min').value);
-            assert.equal(1000, findField('max').value);
+            assert.equal('int', _findField('type').value);
+            assert.equal(-5, _findField('min').value);
+            assert.equal(1000, _findField('max').value);
         });
 
         it('Test simple parameters when multiselect', async function () {
@@ -188,9 +200,9 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('multiselect', findField('type').value);
-            assert.equal(true, findField('as multiple arguments').value);
-            assert.equal('.', findField('separator').value);
+            assert.equal('multiselect', _findField('type').value);
+            assert.equal(true, _findField('as multiple arguments').value);
+            assert.equal('.', _findField('separator').value);
         });
 
         it('Test simple parameters when server file', async function () {
@@ -206,11 +218,11 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('server_file', findField('type').value);
-            assert.equal('/tmp/', findField('file directory').value);
-            assert.equal(true, findField('recursive').value);
-            assert.equal('dir', findField('file type').value);
-            assert.deepEqual(['txt', 'png'], findField('allowed file extensions').value);
+            assert.equal('server_file', _findField('type').value);
+            assert.equal('/tmp/', _findField('file directory').value);
+            assert.equal(true, _findField('recursive').value);
+            assert.equal('dir', _findField('file type').value);
+            assert.deepEqual(['txt', 'png'], _findField('allowed file extensions').value);
         });
 
         it('Test default value when int', async function () {
@@ -223,7 +235,7 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal(5, findField('default value').value);
+            assert.equal(5, _findField('default value').value);
         });
 
         it('Test default value when recursive file and default array', async function () {
@@ -237,7 +249,7 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('some/path/value', findField('default value').value);
+            assert.equal('some/path/value', _findField('default value').value);
         });
 
         it('Test default value when recursive file and default array with absolute path', async function () {
@@ -251,7 +263,7 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('/some/path/value', findField('default value').value);
+            assert.equal('/some/path/value', _findField('default value').value);
         });
 
         it('Test default value when recursive file and default string', async function () {
@@ -265,7 +277,7 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('/tmp/script-server/files', findField('default value').value);
+            assert.equal('/tmp/script-server/files', _findField('default value').value);
         });
 
         it('Test allowed values when array', async function () {
@@ -278,9 +290,9 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.isUndefined(findField('script', false));
-            assert.deepEqual(['abc', '123', 'xyz'], findField('allowed values').value);
-            assert.isFalse(findField('load from script').value);
+            assert.isUndefined(_findField('script', false));
+            assert.deepEqual(['abc', '123', 'xyz'], _findField('allowed values').value);
+            assert.isFalse(_findField('load from script').value);
         });
 
         it('Test allowed values when script', async function () {
@@ -293,183 +305,183 @@ describe('Test ParameterConfigForm', function () {
 
             await vueTicks();
 
-            assert.equal('ls ~/', findField('script').value);
-            assert.isUndefined(findField('allowed values', false));
-            assert.isTrue(findField('load from script').value);
+            assert.equal('ls ~/', _findField('script').value);
+            assert.isUndefined(_findField('allowed values', false));
+            assert.isTrue(_findField('load from script').value);
         });
     });
 
     describe('Test update values in form', function () {
 
         it('Test update name', async function () {
-            await setValueByUser('Name', 'abcde');
+            await _setValueByUser('Name', 'abcde');
 
             assertOutputValue('name', 'abcde');
         });
 
         it('Test update description', async function () {
-            await setValueByUser('Description', 'some new description');
+            await _setValueByUser('Description', 'some new description');
 
             assertOutputValue('description', 'some new description');
         });
 
         it('Test update param', async function () {
-            await setValueByUser('Arg', '-p');
+            await _setValueByUser('Arg', '-p');
 
             assertOutputValue('param', '-p');
         });
 
         it('Test update type to int', async function () {
-            await setValueByUser('Type', 'int');
+            await _setValueByUser('Type', 'int');
 
             assertOutputValue('type', 'int');
         });
 
         it('Test update type to list', async function () {
-            await setValueByUser('Type', 'list');
+            await _setValueByUser('Type', 'list');
 
             assertOutputValue('type', 'list');
         });
 
         it('Test update no_value', async function () {
-            await setValueByUser('Without value', true);
+            await _setValueByUser('Without value', true);
 
             assertOutputValue('no_value', true);
         });
 
         it('Test update required', async function () {
-            await setValueByUser('Required', true);
+            await _setValueByUser('Required', true);
 
             assertOutputValue('required', true);
         });
 
         it('Test update allowed values', async function () {
-            await setValueByUser('Type', 'list');
+            await _setValueByUser('Type', 'list');
 
-            await setValueByUser('Allowed values', ['abc', '123', 'xyz']);
+            await _setValueByUser('Allowed values', ['abc', '123', 'xyz']);
 
             assertOutputValue('values', ['abc', '123', 'xyz']);
         });
 
         it('Test update allowed values to script', async function () {
-            await setValueByUser('Type', 'list');
-            await setValueByUser('Load from script', true);
+            await _setValueByUser('Type', 'list');
+            await _setValueByUser('Load from script', true);
 
-            await setValueByUser('Script', 'ls ~/');
+            await _setValueByUser('Script', 'ls ~/');
 
             assertOutputValue('values', {'script': 'ls ~/'});
         });
 
         it('Test update allowed values to script and back', async function () {
-            await setValueByUser('Type', 'list');
+            await _setValueByUser('Type', 'list');
 
-            await setValueByUser('Allowed values', ['abc', '123', 'xyz']);
+            await _setValueByUser('Allowed values', ['abc', '123', 'xyz']);
 
-            await setValueByUser('Load from script', true);
+            await _setValueByUser('Load from script', true);
 
-            await setValueByUser('Script', 'ls ~/');
+            await _setValueByUser('Script', 'ls ~/');
 
-            await setValueByUser('Load from script', false);
+            await _setValueByUser('Load from script', false);
 
             assertOutputValue('values', ['abc', '123', 'xyz']);
         });
 
         it('Test update default when string', async function () {
-            await setValueByUser('Default value', 'xyz');
+            await _setValueByUser('Default value', 'xyz');
 
 
             assertOutputValue('default', 'xyz');
         });
 
         it('Test update default when multiselect', async function () {
-            await setValueByUser('Type', 'multiselect');
+            await _setValueByUser('Type', 'multiselect');
 
-            await setValueByUser('Default value', 'abc,123,xyz');
+            await _setValueByUser('Default value', 'abc,123,xyz');
 
             assertOutputValue('default', ['abc', '123', 'xyz']);
         });
 
         it('Test update default when recursive file', async function () {
-            await setValueByUser('Type', 'server_file');
-            await setValueByUser('Recursive', true);
+            await _setValueByUser('Type', 'server_file');
+            await _setValueByUser('Recursive', true);
 
-            await setValueByUser('Default value', '/some/path/log.txt');
+            await _setValueByUser('Default value', '/some/path/log.txt');
 
             assertOutputValue('default', ['/', 'some', 'path', 'log.txt']);
         });
 
         it('Test update min', async function () {
-            await setValueByUser('Type', 'int');
+            await _setValueByUser('Type', 'int');
 
-            await setValueByUser('Min', 5);
+            await _setValueByUser('Min', 5);
 
             assertOutputValue('min', "5");
         });
 
         it('Test update max', async function () {
-            await setValueByUser('Type', 'int');
+            await _setValueByUser('Type', 'int');
 
-            await setValueByUser('Max', 5);
+            await _setValueByUser('Max', 5);
 
             assertOutputValue('max', "5");
         });
 
         it('Test update constant', async function () {
-            await setValueByUser('Constant', true);
+            await _setValueByUser('Constant', true);
 
             assertOutputValue('constant', true);
         });
 
         it('Test update secure', async function () {
-            await setValueByUser('Secret value', true);
+            await _setValueByUser('Secret value', true);
 
             assertOutputValue('secure', true);
         });
 
         it('Test update multiple_arguments', async function () {
-            await setValueByUser('Type', 'multiselect');
+            await _setValueByUser('Type', 'multiselect');
 
-            await setValueByUser('As multiple arguments', true);
+            await _setValueByUser('As multiple arguments', true);
 
             assertOutputValue('multiple_arguments', true);
         });
 
         it('Test update separator', async function () {
-            await setValueByUser('Type', 'multiselect');
+            await _setValueByUser('Type', 'multiselect');
 
-            await setValueByUser('Separator', '.');
+            await _setValueByUser('Separator', '.');
 
             assertOutputValue('separator', '.');
         });
 
         it('Test update file_dir', async function () {
-            await setValueByUser('Type', 'server_file');
+            await _setValueByUser('Type', 'server_file');
 
-            await setValueByUser('File directory', '/tmp/logs');
+            await _setValueByUser('File directory', '/tmp/logs');
 
             assertOutputValue('file_dir', '/tmp/logs');
         });
 
         it('Test update file_extensions', async function () {
-            await setValueByUser('Type', 'server_file');
+            await _setValueByUser('Type', 'server_file');
 
-            await setValueByUser('Allowed file extensions', ['png', '.txt']);
+            await _setValueByUser('Allowed file extensions', ['png', '.txt']);
 
             assertOutputValue('file_extensions', ['png', '.txt']);
         });
 
         it('Test update file_extensions to empty', async function () {
-            await setValueByUser('Type', 'server_file');
+            await _setValueByUser('Type', 'server_file');
 
-            await setValueByUser('Allowed file extensions', []);
+            await _setValueByUser('Allowed file extensions', []);
 
             assertOutputValue('file_extensions', undefined);
         });
 
         it('Test update file_recursive', async function () {
-            await setValueByUser('Type', 'server_file');
+            await _setValueByUser('Type', 'server_file');
 
-            await setValueByUser('Recursive', true);
+            await _setValueByUser('Recursive', true);
 
             assertOutputValue('file_recursive', true);
         });
@@ -478,137 +490,137 @@ describe('Test ParameterConfigForm', function () {
     describe('Test parameter dependencies', function () {
 
         it('Test type enabled when no_value false', async function () {
-            const inputField = findFieldInputElement('Type');
+            const inputField = _findFieldInputElement('Type');
             assert.isFalse(inputField.disabled);
         });
 
         it('Test type disabled when no_value set by props', async function () {
             await setPropsField('no_value', true);
 
-            const inputField = findFieldInputElement('Type');
+            const inputField = _findFieldInputElement('Type');
             assert.isTrue(inputField.disabled);
         });
 
         it('Test type disabled when no_value set by user', async function () {
-            await setValueByUser('Without value', true);
+            await _setValueByUser('Without value', true);
 
-            const inputField = findFieldInputElement('Type');
+            const inputField = _findFieldInputElement('Type');
             assert.isTrue(inputField.disabled);
         });
 
         it('Test no constant and default when file_upload set via props', async function () {
             await setPropsField('type', 'file_upload');
 
-            assert.isUndefined(findField('Default value', false));
-            assert.isUndefined(findField('Constant', false));
+            assert.isUndefined(_findField('Default value', false));
+            assert.isUndefined(_findField('Constant', false));
         });
 
         it('Test no constant and default when file_upload set by user', async function () {
-            await setValueByUser('Type', 'file_upload');
+            await _setValueByUser('Type', 'file_upload');
 
-            assert.isUndefined(findField('Default value', false));
-            assert.isUndefined(findField('Constant', false));
+            assert.isUndefined(_findField('Default value', false));
+            assert.isUndefined(_findField('Constant', false));
         });
 
         it('Test no description when constant set via props', async function () {
             await setPropsField('constant', true);
 
-            assert.isUndefined(findField('Description', false));
+            assert.isUndefined(_findField('Description', false));
         });
 
         it('Test no description when constant set by user', async function () {
-            await setValueByUser('Constant', true);
+            await _setValueByUser('Constant', true);
 
-            assert.isUndefined(findField('Description', false));
+            assert.isUndefined(_findField('Description', false));
         });
 
         it('Test min max when type int set via props', async function () {
             await setPropsField('type', 'int');
 
-            assert.isDefined(findField('Min'));
-            assert.isDefined(findField('Max'));
+            assert.isDefined(_findField('Min'));
+            assert.isDefined(_findField('Max'));
         });
 
         it('Test min max when type int set by user', async function () {
-            await setValueByUser('Type', 'int');
+            await _setValueByUser('Type', 'int');
 
-            assert.isDefined(findField('Min'));
-            assert.isDefined(findField('Max'));
+            assert.isDefined(_findField('Min'));
+            assert.isDefined(_findField('Max'));
         });
 
         it('Test min max when type int and no_value set vie props', async function () {
             await setPropsField('type', 'int');
             await setPropsField('no_value', true);
 
-            assert.isUndefined(findField('Min', false));
-            assert.isUndefined(findField('Max', false));
+            assert.isUndefined(_findField('Min', false));
+            assert.isUndefined(_findField('Max', false));
         });
 
         it('Test min max when type int and no_value set by user', async function () {
-            await setValueByUser('Type', 'int');
-            await setValueByUser('Without value', true);
+            await _setValueByUser('Type', 'int');
+            await _setValueByUser('Without value', true);
 
-            assert.isUndefined(findField('Min', false));
-            assert.isUndefined(findField('Max', false));
+            assert.isUndefined(_findField('Min', false));
+            assert.isUndefined(_findField('Max', false));
         });
 
         it('Test multiselect fields when type multiselect set via props', async function () {
             await setPropsField('type', 'multiselect');
 
-            assert.isDefined(findField('As multiple arguments'));
-            assert.isDefined(findField('Separator'));
+            assert.isDefined(_findField('As multiple arguments'));
+            assert.isDefined(_findField('Separator'));
         });
 
         it('Test multiselect fields when type multiselect set by user', async function () {
-            await setValueByUser('Type', 'multiselect');
+            await _setValueByUser('Type', 'multiselect');
 
-            assert.isDefined(findField('As multiple arguments'));
-            assert.isDefined(findField('Separator'));
+            assert.isDefined(_findField('As multiple arguments'));
+            assert.isDefined(_findField('Separator'));
         });
 
         it('Test server_file fields when type multiselect set via props', async function () {
-            await setValueByUser('type', 'server_file');
+            await _setValueByUser('type', 'server_file');
 
-            assert.isDefined(findField('File directory'));
-            assert.isDefined(findField('Recursive'));
-            assert.isDefined(findField('File type'));
-            assert.isDefined(findField('Allowed file extensions'));
+            assert.isDefined(_findField('File directory'));
+            assert.isDefined(_findField('Recursive'));
+            assert.isDefined(_findField('File type'));
+            assert.isDefined(_findField('Allowed file extensions'));
         });
 
         it('Test server_file fields when type multiselect set by user', async function () {
-            await setValueByUser('Type', 'server_file');
+            await _setValueByUser('Type', 'server_file');
 
-            assert.isDefined(findField('File directory'));
-            assert.isDefined(findField('Recursive'));
-            assert.isDefined(findField('File type'));
-            assert.isDefined(findField('Allowed file extensions'));
+            assert.isDefined(_findField('File directory'));
+            assert.isDefined(_findField('Recursive'));
+            assert.isDefined(_findField('File type'));
+            assert.isDefined(_findField('Allowed file extensions'));
         });
 
         it('Test "arg" required when no_value set via props', async function () {
             await setPropsField('no_value', true);
 
-            const argField = findFieldInputElement('Arg');
+            const argField = _findFieldInputElement('Arg');
             assert.isTrue(argField.required);
         });
 
         it('Test "arg" required when no_value set by user', async function () {
-            await setValueByUser('Without value', true);
+            await _setValueByUser('Without value', true);
 
-            const argField = findFieldInputElement('Arg');
+            const argField = _findFieldInputElement('Arg');
             assert.isTrue(argField.required);
         });
 
         it('Test "default" field when constant set via props', async function () {
             await setPropsField('constant', true);
 
-            const argField = findFieldInputElement('Constant value');
+            const argField = _findFieldInputElement('Constant value');
             assert.isTrue(argField.required);
         });
 
         it('Test "default" field when constant set by user', async function () {
-            await setValueByUser('Constant', true);
+            await _setValueByUser('Constant', true);
 
-            const argField = findFieldInputElement('Constant value');
+            const argField = _findFieldInputElement('Constant value');
             assert.isTrue(argField.required);
         });
 
@@ -616,15 +628,15 @@ describe('Test ParameterConfigForm', function () {
             await setPropsField('type', 'int');
             await setPropsField('min', 5);
 
-            await setValueByUser('Max', 4);
+            await _setValueByUser('Max', 4);
             assertLastError('Max', 'min: 5');
         });
 
         it('Test "max" field when min set by user', async function () {
-            await setValueByUser('Type', 'int');
-            await setValueByUser('Min', 5);
+            await _setValueByUser('Type', 'int');
+            await _setValueByUser('Min', 5);
 
-            await setValueByUser('Max', 4);
+            await _setValueByUser('Max', 4);
             assertLastError('Max', 'min: 5');
         });
     });
@@ -632,30 +644,30 @@ describe('Test ParameterConfigForm', function () {
     describe('Test errors', function () {
 
         it('Test name required when empty', async function () {
-            await setValueByUser('Name', '');
+            await _setValueByUser('Name', '');
 
             assertLastError('Name', 'required');
         });
 
         it('Test name required when value', async function () {
-            await setValueByUser('Name', '');
-            await setValueByUser('Name', 'some script');
+            await _setValueByUser('Name', '');
+            await _setValueByUser('Name', 'some script');
 
             assertLastError('Name', '');
         });
 
         it('Test allowed values from script required when empty', async function () {
             await setPropsField('type', 'list');
-            await setValueByUser('Load from script', true);
+            await _setValueByUser('Load from script', true);
 
             assertLastError('Script', 'required');
         });
 
         it('Test allowed values from script required when value', async function () {
             await setPropsField('type', 'list');
-            await setValueByUser('Load from script', true);
+            await _setValueByUser('Load from script', true);
 
-            await setValueByUser('Script', 'ls ~/');
+            await _setValueByUser('Script', 'ls ~/');
 
             assertLastError('Script', '');
         });
@@ -669,7 +681,7 @@ describe('Test ParameterConfigForm', function () {
         it('Test Arg field required when no_value and value set', async function () {
             await setPropsField('no_value', true);
 
-            await setValueByUser('Arg', '--flag');
+            await _setValueByUser('Arg', '--flag');
 
             assertLastError('Arg', '');
         });
@@ -683,7 +695,7 @@ describe('Test ParameterConfigForm', function () {
         it('Test Default field required when constant and value set', async function () {
             await setPropsField('constant', true);
 
-            await setValueByUser('Constant value', 'abcde');
+            await _setValueByUser('Constant value', 'abcde');
 
             assertLastError('Constant value', '');
         });
diff --git a/web-src/tests/admin/ParameterList_test.js b/web-src/tests/admin/ParameterList_test.js
new file mode 100644
index 00000000..81d0b29e
--- /dev/null
+++ b/web-src/tests/admin/ParameterList_test.js
@@ -0,0 +1,95 @@
+'use strict';
+
+import {mount} from '@vue/test-utils';
+import {assert, config as chaiConfig} from 'chai';
+import ParamListItem from '../../js/admin/scripts-config/ParamListItem';
+import ScriptParamList from '../../js/admin/scripts-config/ScriptParamList';
+import {hasClass} from '../../js/common';
+import {vueTicks} from '../test_utils';
+import {setValueByUser} from './ParameterConfigForm_test';
+
+chaiConfig.truncateThreshold = 0;
+
+describe('Test ScriptParamList', function () {
+    let list;
+    let errors;
+
+    beforeEach(async function () {
+        errors = [];
+
+        list = mount(ScriptParamList, {
+            attachToDocument: true,
+            sync: false,
+            propsData: {
+                parameters: [
+                    {
+                        'name': 'param 1',
+                        'description': 'some description'
+                    },
+                    {
+                        'name': 'param 2'
+                    }]
+            }
+        });
+        list.vm.$parent.$forceUpdate();
+        await list.vm.$nextTick();
+    });
+
+    afterEach(async function () {
+        await vueTicks();
+
+        list.destroy();
+    });
+
+    function findParamItem(paramName) {
+        let foundChild = null;
+        for (const child of list.vm.$children) {
+            if (!child.$options || (child.$options._componentTag !== ParamListItem.name)) {
+                continue;
+            }
+
+            const currentParamName = child.$props.param.name;
+            if (currentParamName === paramName) {
+                foundChild = child;
+                break;
+            }
+        }
+        return foundChild;
+    }
+
+    function clickOnParam(paramName) {
+        let paramItem = findParamItem(paramName);
+        assert.isNotNull(paramItem);
+
+        const index = list.vm.$children.indexOf(paramItem);
+        M.Collapsible.getInstance(list.vm.$el).open(index);
+    }
+
+    function assertOpen(paramName) {
+        let paramItem = findParamItem(paramName);
+        assert.isNotNull(paramItem);
+
+        assert.isTrue(hasClass(paramItem.$el, 'active'));
+    }
+
+    async function setValue(paramName, fieldName, value) {
+        let paramItem = findParamItem(paramName);
+        assert.isNotNull(paramItem);
+
+        const paramForm = paramItem.$children[0];
+        await setValueByUser(paramForm, fieldName, value)
+    }
+
+    describe('Test edit parameter', function () {
+
+        it('Test set missing value', async function () {
+            clickOnParam('param 1');
+            assertOpen('param 1');
+
+            await setValue('param 1', 'type', 'int');
+            assertOpen('param 1');
+            assert.equal(list.vm.$props.parameters[0].type, 'int');
+        });
+    });
+
+});
\ No newline at end of file