From a686c636e434c364a94646d86e6a058707898b09 Mon Sep 17 00:00:00 2001
From: bugy <buggygm@gmail.com>
Date: Thu, 19 Dec 2019 21:21:08 +0100
Subject: [PATCH] #127 fixed open panel after moving/deletion of parameters +
 added some tests

---
 .../admin/scripts-config/ScriptParamList.vue  |  42 +--
 web-src/tests/admin/ParameterList_test.js     | 344 ++++++++++++++++--
 web-src/tests/test_utils.js                   |  23 +-
 3 files changed, 342 insertions(+), 67 deletions(-)

diff --git a/web-src/js/admin/scripts-config/ScriptParamList.vue b/web-src/js/admin/scripts-config/ScriptParamList.vue
index 8e61f720..5c1ee9dc 100644
--- a/web-src/js/admin/scripts-config/ScriptParamList.vue
+++ b/web-src/js/admin/scripts-config/ScriptParamList.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-    import {hasClass, guid} from '../../common'
+    import {guid} from '../../common'
     import ParamListItem from './ParamListItem';
 
     export default {
@@ -50,15 +50,6 @@
                     return;
                 }
 
-                let activeElementIndex = this.getActiveParamIndex();
-
-                const collapsible = M.Collapsible.getInstance(this.$refs.parametersPanel);
-                if (index === activeElementIndex) {
-                    collapsible.close(activeElementIndex);
-                } else if (activeElementIndex > index) {
-                    collapsible.open(activeElementIndex - 1);
-                }
-
                 this.$delete(this.parameters, index);
 
                 const toast = M.toast({
@@ -85,14 +76,6 @@
                 const prevParam = this.parameters[index - 1];
                 this.$set(this.parameters, index - 1, param);
                 this.$set(this.parameters, index, prevParam);
-
-                const collapsible = M.Collapsible.getInstance(this.$refs.parametersPanel);
-                const activeParamIndex = this.getActiveParamIndex();
-                if (activeParamIndex === index) {
-                    collapsible.open(index - 1);
-                } else if (activeParamIndex === (index - 1)) {
-                    collapsible.open(index);
-                }
             },
 
             moveDown(param) {
@@ -104,14 +87,6 @@
                 const nextParam = this.parameters[index + 1];
                 this.$set(this.parameters, index + 1, param);
                 this.$set(this.parameters, index, nextParam);
-
-                const collapsible = M.Collapsible.getInstance(this.$refs.parametersPanel);
-                const activeParamIndex = this.getActiveParamIndex();
-                if (activeParamIndex === index) {
-                    collapsible.open(index + 1);
-                } else if (activeParamIndex === (index + 1)) {
-                    collapsible.open(index);
-                }
             },
 
             addParam() {
@@ -148,19 +123,6 @@
                 });
             },
 
-            getActiveParamIndex() {
-                let activeElementIndex = -1;
-                for (let i = 0; i < this.$refs.parametersPanel.childNodes.length; i++) {
-                    const child = this.$refs.parametersPanel.childNodes[i];
-
-                    if (hasClass(child, 'active')) {
-                        activeElementIndex = i;
-                        break;
-                    }
-                }
-                return activeElementIndex;
-            },
-
             scrollToNewParam() {
                 const parameterElements = $(this.$refs.parametersPanel).children('li');
                 const newParamElement = parameterElements[parameterElements.length - 2];
@@ -194,7 +156,7 @@
                 }, 40);
             },
 
-            parameters :{
+            parameters: {
                 immediate: true,
                 handler(parameters) {
                     for (const parameter of parameters) {
diff --git a/web-src/tests/admin/ParameterList_test.js b/web-src/tests/admin/ParameterList_test.js
index 81d0b29e..bc50d6c1 100644
--- a/web-src/tests/admin/ParameterList_test.js
+++ b/web-src/tests/admin/ParameterList_test.js
@@ -1,49 +1,48 @@
 '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 {createVue, timeout, triggerSingleClick, vueTicks} from '../test_utils';
 import {setValueByUser} from './ParameterConfigForm_test';
 
+
 chaiConfig.truncateThreshold = 0;
 
-describe('Test ScriptParamList', function () {
+describe('Test ScriptParamList 2', 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 = createVue(ScriptParamList, {
+            parameters: [
+                {
+                    'name': 'param 1',
+                    'description': 'some description'
+                },
+                {
+                    'name': 'param 2'
+                },
+                {
+                    'name': 'param 3'
+                }]
         });
-        list.vm.$parent.$forceUpdate();
-        await list.vm.$nextTick();
+        await list.$nextTick();
     });
 
     afterEach(async function () {
         await vueTicks();
 
-        list.destroy();
+        list.$el.parentNode.removeChild(list.$el);
+        list.$destroy();
     });
 
     function findParamItem(paramName) {
         let foundChild = null;
-        for (const child of list.vm.$children) {
+        for (const child of list.$children) {
             if (!child.$options || (child.$options._componentTag !== ParamListItem.name)) {
                 continue;
             }
@@ -59,27 +58,285 @@ describe('Test ScriptParamList', function () {
 
     function clickOnParam(paramName) {
         let paramItem = findParamItem(paramName);
-        assert.isNotNull(paramItem);
+        assert.exists(paramItem);
 
-        const index = list.vm.$children.indexOf(paramItem);
-        M.Collapsible.getInstance(list.vm.$el).open(index);
+        const index = list.$children.indexOf(paramItem);
+        M.Collapsible.getInstance(list.$el).open(index);
     }
 
     function assertOpen(paramName) {
         let paramItem = findParamItem(paramName);
-        assert.isNotNull(paramItem);
+        assert.exists(paramItem);
 
         assert.isTrue(hasClass(paramItem.$el, 'active'));
     }
 
+    function getButton(item, buttonName) {
+        return $(item.$el).find('a:has(i:contains(' + buttonName + '))').get(0);
+    }
+
+    async function clickParamAction(paramName, action) {
+        const item = findParamItem(paramName);
+        const button = getButton(item, action);
+        triggerSingleClick(button);
+
+        await vueTicks();
+    }
+
+    function assertClosed(paramName) {
+        let paramItem = findParamItem(paramName);
+        assert.exists(paramItem);
+
+        assert.isFalse(hasClass(paramItem.$el, 'active'));
+    }
+
     async function setValue(paramName, fieldName, value) {
         let paramItem = findParamItem(paramName);
-        assert.isNotNull(paramItem);
+        assert.exists(paramItem);
 
         const paramForm = paramItem.$children[0];
         await setValueByUser(paramForm, fieldName, value)
     }
 
+    describe('Test visualisation', function () {
+        it('Test show parameters list', async function () {
+            assert.exists(findParamItem('param 1'));
+            assert.exists(findParamItem('param 2'));
+            assert.exists(findParamItem('param 3'));
+        });
+
+        it('Test show add param button', async function () {
+            const button = $(list.$el).find('li.add-param-item').get(0);
+            assert.exists(button);
+        });
+
+        it('Test expand parameter', async function () {
+            clickOnParam('param 1');
+
+            assertOpen('param 1');
+        });
+
+        it('Test expand another parameter', async function () {
+            clickOnParam('param 1');
+            clickOnParam('param 2');
+
+            assertOpen('param 2');
+            assertClosed('param 1');
+        });
+
+        it('Test parameter title after prop change', async function () {
+            list.$props.parameters[1].name = 'new name';
+
+            assert.exists(findParamItem('new name'));
+        });
+    });
+
+    describe('Test move parameters', function () {
+        it('Test move 2nd parameter up', async function () {
+            await clickParamAction('param 2', 'arrow_upward');
+
+            assert.equal(list.$props.parameters[0].name, 'param 2');
+        });
+
+        it('Test move 2nd parameter up twice', async function () {
+            await clickParamAction('param 2', 'arrow_upward');
+            await clickParamAction('param 2', 'arrow_upward');
+
+            assert.equal(list.$props.parameters[0].name, 'param 2');
+        });
+
+        it('Test move 2nd parameter up and then first', async function () {
+            await clickParamAction('param 2', 'arrow_upward');
+            await clickParamAction('param 1', 'arrow_upward');
+
+            assert.equal(list.$props.parameters[0].name, 'param 1');
+            assert.equal(list.$props.parameters[1].name, 'param 2');
+        });
+
+        it('Test move 3rd parameter up twice', async function () {
+            await clickParamAction('param 3', 'arrow_upward');
+            await clickParamAction('param 3', 'arrow_upward');
+
+            assert.equal(list.$props.parameters[0].name, 'param 3');
+            assert.equal(list.$props.parameters[1].name, 'param 1');
+            assert.equal(list.$props.parameters[2].name, 'param 2');
+        });
+
+        it('Test move 2nd parameter down', async function () {
+            await clickParamAction('param 2', 'arrow_downward');
+
+            assert.equal(list.$props.parameters[2].name, 'param 2');
+        });
+
+        it('Test move 2nd parameter down twice', async function () {
+            await clickParamAction('param 2', 'arrow_downward');
+            await clickParamAction('param 2', 'arrow_downward');
+
+            assert.equal(list.$props.parameters[2].name, 'param 2');
+        });
+
+        it('Test move 2nd parameter down and then last', async function () {
+            await clickParamAction('param 2', 'arrow_downward');
+            await clickParamAction('param 3', 'arrow_downward');
+
+            assert.equal(list.$props.parameters[1].name, 'param 2');
+            assert.equal(list.$props.parameters[2].name, 'param 3');
+        });
+
+        it('Test move first parameter down twice', async function () {
+            await clickParamAction('param 1', 'arrow_downward');
+            await clickParamAction('param 1', 'arrow_downward');
+
+            assert.equal(list.$props.parameters[0].name, 'param 2');
+            assert.equal(list.$props.parameters[1].name, 'param 3');
+            assert.equal(list.$props.parameters[2].name, 'param 1');
+        });
+
+        it('Test move open parameter up', async function () {
+            clickOnParam('param 2');
+
+            await clickParamAction('param 2', 'arrow_upward');
+
+            assertOpen('param 2');
+            assertClosed('param 1');
+        });
+
+        it('Test move open parameter down', async function () {
+            clickOnParam('param 2');
+            await clickParamAction('param 2', 'arrow_downward');
+
+            assertOpen('param 2');
+            assertClosed('param 3');
+        });
+
+        it('Test move closed parameter up to an open one', async function () {
+            clickOnParam('param 2');
+            await clickParamAction('param 3', 'arrow_upward');
+
+            assertOpen('param 2');
+            assertClosed('param 3');
+        });
+
+        it('Test move closed parameter down to an open one', async function () {
+            clickOnParam('param 2');
+            await clickParamAction('param 1', 'arrow_downward');
+
+            assertOpen('param 2');
+            assertClosed('param 1');
+        });
+    });
+
+    describe('Test delete parameters', function () {
+        it('Test delete parameter in the beginning', async function () {
+            await clickParamAction('param 1', 'delete');
+
+            await vueTicks();
+
+            assert.notExists(findParamItem('param 1'));
+            assert.exists(findParamItem('param 2'));
+            assert.exists(findParamItem('param 3'));
+        });
+
+        it('Test delete parameter in the middle', async function () {
+            await clickParamAction('param 2', 'delete');
+
+            assert.exists(findParamItem('param 1'));
+            assert.notExists(findParamItem('param 2'));
+            assert.exists(findParamItem('param 3'));
+        });
+
+        it('Test delete parameter in the end', async function () {
+            await clickParamAction('param 3', 'delete');
+
+            assert.exists(findParamItem('param 1'));
+            assert.exists(findParamItem('param 2'));
+            assert.notExists(findParamItem('param 3'));
+        });
+
+        it('Test delete open parameter', async function () {
+            clickOnParam('param 2');
+            await clickParamAction('param 2', 'delete');
+
+            assertClosed('param 1');
+            assertClosed('param 3');
+        });
+
+        it('Test delete parameter after opened', async function () {
+            clickOnParam('param 1');
+            await clickParamAction('param 2', 'delete');
+
+            assertOpen('param 1');
+            assertClosed('param 3');
+        });
+
+        it('Test delete parameter before opened', async function () {
+            clickOnParam('param 3');
+            await clickParamAction('param 2', 'delete');
+
+            assertClosed('param 1');
+            assertOpen('param 3');
+        });
+
+        it('Test open toast on delete', async function () {
+            $(list.$el.parentNode).find('div.toast').remove();
+
+            await clickParamAction('param 2', 'delete');
+
+            const toasts = $(list.$el.parentNode).find('div.toast');
+
+            assert.equal(toasts.length, 1);
+            assert.equal(toasts.find('span').text(), 'Deleted param 2');
+            assert.equal(toasts.find('button').text(), 'Undo');
+        });
+
+        it('Test open multiple toasts on delete', async function () {
+            $(list.$el.parentNode).find('div.toast').remove();
+
+            await clickParamAction('param 2', 'delete');
+            await clickParamAction('param 1', 'delete');
+            await clickParamAction('param 3', 'delete');
+
+            const toasts = $(list.$el.parentNode).find('div.toast');
+
+            assert.equal(toasts.length, 3);
+            assert.equal($(toasts.get(0)).find('span').text(), 'Deleted param 2');
+            assert.equal($(toasts.get(1)).find('span').text(), 'Deleted param 1');
+            assert.equal($(toasts.get(2)).find('span').text(), 'Deleted param 3');
+        });
+
+        it('Test undo button on toast', async function () {
+            $(list.$el.parentNode).find('div.toast').remove();
+
+            await clickParamAction('param 2', 'delete');
+
+            const undoButton = $(list.$el.parentNode).find('div.toast button').get(0);
+            triggerSingleClick(undoButton);
+
+            await vueTicks();
+
+            assert.exists(findParamItem('param 2'));
+            assert.equal(list.$props.parameters[0].name, 'param 1');
+            assert.equal(list.$props.parameters[1].name, 'param 2');
+            assert.equal(list.$props.parameters[2].name, 'param 3');
+        });
+
+        it('Test undo button on toast after everything deleted', async function () {
+            $(list.$el.parentNode).find('div.toast').remove();
+
+            await clickParamAction('param 2', 'delete');
+            await clickParamAction('param 1', 'delete');
+            await clickParamAction('param 3', 'delete');
+
+            const undoButton = $(list.$el.parentNode).find('div.toast button').get(0);
+            triggerSingleClick(undoButton);
+
+            await vueTicks();
+
+            assert.exists(findParamItem('param 2'));
+            assert.equal(list.$props.parameters[0].name, 'param 2');
+        });
+    });
+
     describe('Test edit parameter', function () {
 
         it('Test set missing value', async function () {
@@ -88,7 +345,42 @@ describe('Test ScriptParamList', function () {
 
             await setValue('param 1', 'type', 'int');
             assertOpen('param 1');
-            assert.equal(list.vm.$props.parameters[0].type, 'int');
+            assert.equal(list.$props.parameters[0].type, 'int');
+        });
+    });
+
+    describe('Test add parameter', function () {
+        const clickAddButton = () => {
+            const addParamButton = $(list.$el).find('li.add-param-item').get(0);
+            triggerSingleClick(addParamButton);
+        };
+
+        it('Test add parameter', async function () {
+            clickAddButton();
+
+            await vueTicks();
+
+            assert.equal(list.$props.parameters.length, 4);
+            assert.equal(list.$props.parameters[3].name, undefined);
+
+            list.openingNewParam = false;
+            await timeout(100);
+        });
+
+        it('Test add multiple parameters', async function () {
+            clickAddButton();
+            clickAddButton();
+            clickAddButton();
+
+            await vueTicks();
+
+            assert.equal(list.$props.parameters.length, 6);
+            assert.equal(list.$props.parameters[3].name, undefined);
+            assert.equal(list.$props.parameters[4].name, undefined);
+            assert.equal(list.$props.parameters[5].name, undefined);
+
+            list.openingNewParam = false;
+            await timeout(100);
         });
     });
 
diff --git a/web-src/tests/test_utils.js b/web-src/tests/test_utils.js
index 42f5e554..5796a462 100644
--- a/web-src/tests/test_utils.js
+++ b/web-src/tests/test_utils.js
@@ -75,4 +75,25 @@ export function setChipListValue(chipListComponent, value) {
     for (const valueElement of value) {
         chipList.addChip({'tag': valueElement});
     }
-}
\ No newline at end of file
+}
+
+export function createVue(component, properties) {
+    document.body.insertAdjacentHTML('afterbegin', '<div id="top-level-element"></div>');
+    const topLevelElement = document.getElementById('top-level-element');
+
+    const ComponentClass = Vue.extend(component);
+    const vm = new ComponentClass({
+        propsData: properties
+    }).$mount(topLevelElement);
+
+    vm.$on('input', function (value) {
+        vm.value = value
+    });
+
+    return vm;
+}
+
+export function destroy(component) {
+    component.$parent
+    component.destroy();
+}