From 7e2a6b11bf0897b4177ce539ee2db817863ac251 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 13 Oct 2021 22:04:20 -0400
Subject: [PATCH 01/10] Reduce flickering by removing the spinning card icon
 and increasing background opacity

---
 client/src/components/Tool/ToolCard.vue | 6 ++----
 client/src/style/scss/ui.scss           | 3 +--
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index c39cbb66a55..fe675d9eab7 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -80,8 +80,7 @@
                     </b-button>
                 </div>
                 <div class="portlet-title">
-                    <font-awesome-icon v-if="disabled" icon="spinner" class="portlet-title-icon fa-fw mr-1" spin />
-                    <font-awesome-icon v-else icon="wrench" class="portlet-title-icon fa-fw mr-1" />
+                    <font-awesome-icon icon="wrench" class="portlet-title-icon fa-fw mr-1" />
                     <span class="portlet-title-text">
                         <b itemprop="name">{{ title }}</b> <span itemprop="description">{{ description }}</span> (Galaxy
                         Version {{ version }})
@@ -119,9 +118,8 @@ import Webhooks from "mvc/webhooks";
 import { addFavorite, removeFavorite } from "components/Tool/services";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSpinner, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faSpinner);
 library.add(faWrench);
 
 export default {
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 6118d7ae713..7d30380ccab 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -228,11 +228,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
         display: none;
         z-index: 10;
         position: absolute;
+        opacity: 0;
         top: 0px;
         width: 100%;
         height: 100%;
-        opacity: 0.15;
-        background: $white;
         cursor: wait;
     }
 }

From 11ece208ef91a67674a450a7801d07cbf1dcfe16 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 13 Oct 2021 23:18:02 -0400
Subject: [PATCH 02/10] Use paused state background for info alerts

---
 client/src/style/scss/dataset.scss    | 2 +-
 client/src/style/scss/overrides.scss  | 4 ++++
 client/src/style/scss/theme/blue.scss | 3 +--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/style/scss/dataset.scss b/client/src/style/scss/dataset.scss
index bb195270d72..3bd1768e70a 100644
--- a/client/src/style/scss/dataset.scss
+++ b/client/src/style/scss/dataset.scss
@@ -132,7 +132,7 @@
     }
 
     &.state-paused {
-        background: $state-paused-bg;
+        background: $state-info-bg;
         .state-icon {
             &:before {
                 content: fa-content($fa-var-pause);
diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index 637584c2382..41f3f3b71e8 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -162,6 +162,10 @@ table.info_data_table th:nth-child(1) {
     border-color: transparent;
 }
 
+.alert-info {
+    background: $state-info-bg !important;
+}
+
 // increase visibility of dropdown menu section headers
 .dropdown-header {
     font-size: 1rem;
diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index 89defbd4183..3e0c3282cbf 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -72,7 +72,7 @@ $state-danger-bg: theme-color-level("danger", $alert-bg-level);
 $state-danger-border: theme-color-level("danger", $alert-border-level);
 
 $state-info-text: theme-color-level("info", $alert-color-level);
-$state-info-bg: theme-color-level("info", $alert-bg-level);
+$state-info-bg: lighten($brand-info, 50%);
 $state-info-border: theme-color-level("info", $alert-border-level);
 
 $state-success-text: theme-color-level("success", $alert-color-level);
@@ -145,7 +145,6 @@ $table-border-color: transparent;
 // Additional state colors
 $state-default-bg: $gray-200;
 $state-default-border: $border-color;
-$state-paused-bg: lighten($brand-info, 50%);
 $state-running-bg: lighten($brand-warning, 40%);
 $state-running-border: $border-color;
 

From f5921df8a99313f171301dae1c7b72a4346442c2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 00:21:41 -0400
Subject: [PATCH 03/10] Add a non-jquery promise queue to reduce form update
 requests (particularly useful for sliders in the workflow forms)

---
 .../src/components/Workflow/Editor/Index.vue  |  4 +-
 client/src/utils/promise-queue.js             | 42 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 client/src/utils/promise-queue.js

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index e73139f019f..fc59880a8c2 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -175,6 +175,7 @@
 </template>
 
 <script>
+import { LastQueue } from "utils/promise-queue";
 import { getDatatypesMapper } from "components/Datatypes";
 import { fromSimple } from "./modules/model";
 import { getModule, getVersions, saveWorkflow, loadWorkflow } from "./modules/services";
@@ -287,6 +288,7 @@ export default {
         },
     },
     created() {
+        this.lastQueue = new LastQueue();
         getDatatypesMapper().then((mapper) => {
             this.datatypesMapper = mapper;
             this.datatypes = mapper.datatypes;
@@ -470,7 +472,7 @@ export default {
         },
         onSetData(nodeId, newData) {
             const node = this.nodes[nodeId];
-            getModule(newData).then((data) => {
+            this.lastQueue.enqueue(getModule, newData).then((data) => {
                 node.setData(data);
             });
         },
diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
new file mode 100644
index 00000000000..8548549fcf1
--- /dev/null
+++ b/client/src/utils/promise-queue.js
@@ -0,0 +1,42 @@
+/**
+ * This queue waits until the current promise is resolved and only executes the last enqueued
+ * promise. Promises added between the last and the currently executing promise are skipped.
+ * This is useful when earlier enqueued promises become obselete.
+ * See: https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
+ */
+export class LastQueue {
+    constructor() {
+        this._nextPromise = null;
+        this._pendingPromise = false;
+    }
+
+    enqueue(action, payload) {
+        return new Promise((resolve, reject) => {
+            this._nextPromise = { action, payload, resolve, reject };
+            this.dequeue();
+        });
+    }
+
+    async dequeue() {
+        if (this._pendingPromise) {
+            return false;
+        }
+        if (this._nextPromise) {
+            let item = this._nextPromise;
+            this._nextPromise = null;
+            try {
+                this._pendingPromise = true;
+                let payload = await item.action(item.payload);
+                this._pendingPromise = false;
+                item.resolve(payload);
+            } catch (e) {
+                this._pendingPromise = false;
+                item.reject(e);
+            } finally {
+                this.dequeue();
+            }
+            return true;
+        }
+        return false;
+    }
+}

From 1b22fa50464260010b4f7fce9082c12ec6e9c1f4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 00:37:35 -0400
Subject: [PATCH 04/10] Throttle number of workflow editor form requests to one
 per second

---
 client/src/utils/promise-queue.js | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
index 8548549fcf1..51a9668dfa0 100644
--- a/client/src/utils/promise-queue.js
+++ b/client/src/utils/promise-queue.js
@@ -5,38 +5,35 @@
  * See: https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
  */
 export class LastQueue {
-    constructor() {
-        this._nextPromise = null;
-        this._pendingPromise = false;
+    constructor(throttlePeriod = 1000) {
+        this.throttlePeriod = throttlePeriod;
+        this.nextPromise = null;
+        this.pendingPromise = false;
     }
 
     enqueue(action, payload) {
         return new Promise((resolve, reject) => {
-            this._nextPromise = { action, payload, resolve, reject };
+            this.nextPromise = { action, payload, resolve, reject };
             this.dequeue();
         });
     }
 
     async dequeue() {
-        if (this._pendingPromise) {
-            return false;
-        }
-        if (this._nextPromise) {
-            let item = this._nextPromise;
-            this._nextPromise = null;
+        if (!this.pendingPromise && this.nextPromise) {
+            let item = this.nextPromise;
+            this.nextPromise = null;
+            this.pendingPromise = true;
             try {
-                this._pendingPromise = true;
                 let payload = await item.action(item.payload);
-                this._pendingPromise = false;
                 item.resolve(payload);
             } catch (e) {
-                this._pendingPromise = false;
                 item.reject(e);
             } finally {
-                this.dequeue();
+                setTimeout(() => {
+                    this.pendingPromise = false;
+                    this.dequeue();
+                }, this.throttlePeriod);
             }
-            return true;
         }
-        return false;
     }
 }

From 184956875446181eec71d4d7595aa04ba2cd11e2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 00:57:45 -0400
Subject: [PATCH 05/10] Enable multiple arguments in promise queue

---
 client/src/utils/promise-queue.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
index 51a9668dfa0..b3da10d792f 100644
--- a/client/src/utils/promise-queue.js
+++ b/client/src/utils/promise-queue.js
@@ -11,9 +11,9 @@ export class LastQueue {
         this.pendingPromise = false;
     }
 
-    enqueue(action, payload) {
+    enqueue(action, ...args) {
         return new Promise((resolve, reject) => {
-            this.nextPromise = { action, payload, resolve, reject };
+            this.nextPromise = { action, args, resolve, reject };
             this.dequeue();
         });
     }
@@ -24,7 +24,7 @@ export class LastQueue {
             this.nextPromise = null;
             this.pendingPromise = true;
             try {
-                let payload = await item.action(item.payload);
+                let payload = await item.action(...item.args);
                 item.resolve(payload);
             } catch (e) {
                 item.reject(e);

From 88dcba87af2d9e45c99826611be15f8c9a501ccf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 01:14:01 -0400
Subject: [PATCH 06/10] Adjust selenium and jest tests

---
 client/src/components/Tool/ToolCard.test.js      | 6 ++++--
 client/src/utils/promise-queue.js                | 8 ++++----
 lib/galaxy_test/selenium/test_workflow_editor.py | 4 ++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.test.js b/client/src/components/Tool/ToolCard.test.js
index 9c1e043746d..b9e0607ba2b 100644
--- a/client/src/components/Tool/ToolCard.test.js
+++ b/client/src/components/Tool/ToolCard.test.js
@@ -47,8 +47,10 @@ describe("ToolCard", () => {
         expect(dropdownHeader.attributes("title")).toBe("Options");
         const dropdownItems = wrapper.findAll(".dropdown-item");
         expect(dropdownItems.length).toBe(4);
+        const backdrop = wrapper.findAll(".portlet-backdrop");
+        expect(backdrop.length).toBe(0);
         await wrapper.setProps({ disabled: true });
-        const iconSpinner = wrapper.find(".portlet-title-icon");
-        expect(iconSpinner.classes()).toContain("fa-spin");
+        const backdropActive = wrapper.findAll(".portlet-backdrop");
+        expect(backdropActive.length).toBe(1);
     });
 });
diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
index b3da10d792f..3c36e9972f9 100644
--- a/client/src/utils/promise-queue.js
+++ b/client/src/utils/promise-queue.js
@@ -1,8 +1,8 @@
 /**
  * This queue waits until the current promise is resolved and only executes the last enqueued
  * promise. Promises added between the last and the currently executing promise are skipped.
- * This is useful when earlier enqueued promises become obselete.
- * See: https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
+ * This is useful when earlier enqueued promises become obsolete.
+ * See also: https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
  */
 export class LastQueue {
     constructor(throttlePeriod = 1000) {
@@ -20,11 +20,11 @@ export class LastQueue {
 
     async dequeue() {
         if (!this.pendingPromise && this.nextPromise) {
-            let item = this.nextPromise;
+            const item = this.nextPromise;
             this.nextPromise = null;
             this.pendingPromise = true;
             try {
-                let payload = await item.action(...item.args);
+                const payload = await item.action(...item.args);
                 item.resolve(payload);
             } catch (e) {
                 item.reject(e);
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 80a1aaa9336..cf6da34bc5c 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -196,6 +196,7 @@ steps:
         textarea_column_names = column_names.wait_for_visible()
         assert textarea_column_names.get_attribute('value') == 'a\nb\nc\n'
         self.set_text_element(columns, '4\n5\n6\n')
+        self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
         self.sleep_for(self.wait_types.UX_RENDER)
         self.driver.refresh()
@@ -304,6 +305,7 @@ steps:
         self.assert_not_connected("input1#output", "first_cat#input1")
         self.workflow_editor_connect("input1#output", "first_cat#input1")
         self.assert_connected("input1#output", "first_cat#input1")
+        self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open_with_name(name)
@@ -426,6 +428,7 @@ steps:
         editor.tool_version_button.wait_for_and_click()
         assert self.select_dropdown_item('Switch to 0.2'), 'Switch to tool version dropdown item not found'
         self.screenshot("workflow_editor_version_update")
+        self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
         self.sleep_for(self.wait_types.UX_RENDER)
         workflow = self.workflow_populator.download_workflow(workflow_id)
@@ -501,6 +504,7 @@ steps:
         editor.select_datatype(datatype='bam').wait_for_and_click()
         self.set_text_element(editor.add_tags, '#crazynewtag')
         self.set_text_element(editor.remove_tags, '#oldboringtag')
+        self.sleep_for(self.wait_types.UX_RENDER)
         cat_node.clone.wait_for_and_click()
         editor.label_input.wait_for_and_send_keys('cloned label')
         output_label = editor.label_output(output='out_file1')

From a8701a34023b73f8f10de2b695b4c11bea827b73 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 06:50:40 -0400
Subject: [PATCH 07/10] Consolidate render wait calls in workflow editor tests

---
 lib/galaxy_test/selenium/test_workflow_editor.py | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index cf6da34bc5c..a1fc0942728 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -72,7 +72,6 @@ class WorkflowEditorTestCase(SeleniumTestCase):
         new_annotation = 'look new annotation'
         edit_annotation.wait_for_and_send_keys(new_annotation)
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open_with_name(name)
         self.assert_wf_annotation_is(new_annotation)
 
@@ -86,7 +85,6 @@ class WorkflowEditorTestCase(SeleniumTestCase):
         edit_name.wait_for_and_send_keys(new_name)
 
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open_with_name(new_name)
         self.assert_wf_name_is(name)
 
@@ -107,21 +105,18 @@ class WorkflowEditorTestCase(SeleniumTestCase):
         self.components.tool_form.parameter_input(parameter='select_single').wait_for_and_send_keys('e')
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow['steps']['0']['tool_state'])
         assert tool_state['select_single'] == 'parameter value'
         # Disable optional button, resets value to null
         self.components.tool_form.parameter_checkbox(parameter='select_single').wait_for_and_click()
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow['steps']['0']['tool_state'])
         assert tool_state['select_single'] is None
         # Enable button but don't provide a value
         self.components.tool_form.parameter_checkbox(parameter='select_single').wait_for_and_click()
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow['steps']['0']['tool_state'])
         assert tool_state['select_single'] == ""
@@ -198,7 +193,6 @@ steps:
         self.set_text_element(columns, '4\n5\n6\n')
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         self.driver.refresh()
         node.title.wait_for_and_click()
         textarea_columns = columns.wait_for_visible()
@@ -307,7 +301,6 @@ steps:
         self.assert_connected("input1#output", "first_cat#input1")
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open_with_name(name)
         self.assert_connected("input1#output", "first_cat#input1")
 
@@ -430,7 +423,6 @@ steps:
         self.screenshot("workflow_editor_version_update")
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         workflow = self.workflow_populator.download_workflow(workflow_id)
         assert workflow['steps']['0']['tool_version'] == '0.2'
 
@@ -492,10 +484,8 @@ steps:
         # Select node using new label, ensures labels are synced between side panel and node
         cat_node = editor.node._(label="source label")
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         editor.annotation_input.wait_for_and_send_keys("source annotation")
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         editor.configure_output(output='out_file1').wait_for_and_click()
         output_label = editor.label_output(output='out_file1')
         self.set_text_element(output_label, 'workflow output label')
@@ -510,7 +500,6 @@ steps:
         output_label = editor.label_output(output='out_file1')
         self.set_text_element(output_label, 'cloned output label')
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         edited_workflow = self.workflow_populator.download_workflow(workflow_id)
         source_step = next(iter(step for step in edited_workflow['steps'].values() if step['label'] == 'source label'))
         cloned_step = next(iter(step for step in edited_workflow['steps'].values() if step['label'] == 'cloned label'))
@@ -543,7 +532,6 @@ steps:
         editor.workflow_link(workflow_title=child_workflow_name).wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_has_changes_and_save()
-        self.sleep_for(self.wait_types.UX_RENDER)
         workflow = self.workflow_populator.download_workflow(parent_workflow_id)
         subworkflow_step = workflow['steps']['1']
         assert subworkflow_step['name'] == child_workflow_name
@@ -720,6 +708,7 @@ steps:
         save_button.wait_for_visible()
         assert not save_button.has_class("disabled")
         save_button.wait_for_and_click()
+        self.sleep_for(self.wait_types.UX_RENDER)
 
     @retry_assertion_during_transitions
     def assert_wf_name_is(self, expected_name):

From 3adbb84e797f57be16e2f030919fa9b745779d30 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 08:40:16 -0400
Subject: [PATCH 08/10] Refresh citation details if tool node changes, augment
 workflow loading alert.

---
 client/src/components/Tool/ToolFooter.vue     | 26 ++++++++++++-------
 .../components/Workflow/Run/WorkflowRun.vue   |  1 +
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Tool/ToolFooter.vue b/client/src/components/Tool/ToolFooter.vue
index 991b9788be3..c4ecbde5041 100644
--- a/client/src/components/Tool/ToolFooter.vue
+++ b/client/src/components/Tool/ToolFooter.vue
@@ -133,18 +133,26 @@ export default {
             citations: [],
         };
     },
+    watch: {
+        id() {
+            this.loadCitations();
+        },
+    },
     created() {
-        if (this.hasCitations) {
-            getCitations("tools", this.id)
-                .then((citations) => {
-                    this.citations = citations;
-                })
-                .catch((e) => {
-                    console.error(e);
-                });
-        }
+        this.loadCitations();
     },
     methods: {
+        loadCitations() {
+            if (this.hasCitations) {
+                getCitations("tools", this.id)
+                    .then((citations) => {
+                        this.citations = citations;
+                    })
+                    .catch((e) => {
+                        console.error(e);
+                    });
+            }
+        },
         copyBibtex() {
             var text = "";
             this.citations.forEach((citation) => {
diff --git a/client/src/components/Workflow/Run/WorkflowRun.vue b/client/src/components/Workflow/Run/WorkflowRun.vue
index 18d4e8f5e54..f7986e3500e 100644
--- a/client/src/components/Workflow/Run/WorkflowRun.vue
+++ b/client/src/components/Workflow/Run/WorkflowRun.vue
@@ -1,6 +1,7 @@
 <template>
     <span>
         <b-alert variant="danger" show v-if="error">
+            <h5>Workflow cannot be executed. Please resolve the following issue:</h5>
             {{ error }}
         </b-alert>
         <span v-else>

From dec3e5c89d22bb0dbcd9e6a15214f0386d65634c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 14:10:28 -0400
Subject: [PATCH 09/10] Add test case for promise queue

---
 client/src/utils/promise-queue.js      |  2 +-
 client/src/utils/promise-queue.test.js | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 client/src/utils/promise-queue.test.js

diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
index 3c36e9972f9..4fb3db7a709 100644
--- a/client/src/utils/promise-queue.js
+++ b/client/src/utils/promise-queue.js
@@ -11,7 +11,7 @@ export class LastQueue {
         this.pendingPromise = false;
     }
 
-    enqueue(action, ...args) {
+    async enqueue(action, ...args) {
         return new Promise((resolve, reject) => {
             this.nextPromise = { action, args, resolve, reject };
             this.dequeue();
diff --git a/client/src/utils/promise-queue.test.js b/client/src/utils/promise-queue.test.js
new file mode 100644
index 00000000000..69d8c1396a1
--- /dev/null
+++ b/client/src/utils/promise-queue.test.js
@@ -0,0 +1,22 @@
+import { LastQueue } from "./promise-queue";
+const x = 10;
+const lastQueue = new LastQueue(x);
+
+async function testPromise(args) {
+    return new Promise((resolve) => resolve(args));
+}
+
+describe("test last-queue", () => {
+    it("should only resolve the first and last promise", async () => {
+        const results = [];
+        for (let i = 0; i < x; i++) {
+            lastQueue.enqueue(testPromise, i).then((response) => {
+                results.push(response);
+            });
+        }
+        await lastQueue.enqueue(testPromise, x).then((response) => {
+            results.push(response);
+        });
+        expect(results).toEqual([0, x]);
+    });
+});

From 9e672c08054e1b73f943734df19de2f9b0265a57 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 14 Oct 2021 16:50:19 -0400
Subject: [PATCH 10/10] Add tool footer test to verify proper handling of
 citations

---
 client/src/components/Tool/ToolFooter.test.js | 57 +++++++++++++++++++
 client/src/utils/promise-queue.js             |  2 +-
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Tool/ToolFooter.test.js

diff --git a/client/src/components/Tool/ToolFooter.test.js b/client/src/components/Tool/ToolFooter.test.js
new file mode 100644
index 00000000000..971cd5f421c
--- /dev/null
+++ b/client/src/components/Tool/ToolFooter.test.js
@@ -0,0 +1,57 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import flushPromises from "flush-promises";
+import ToolFooter from "./ToolFooter";
+
+const localVue = getLocalVue();
+
+const citationsA = [{ format: "bibtex", content: "@misc{entry_a, year = {1111}}" }];
+const citationsB = [{ format: "bibtex", content: "@misc{entry_b, year = {2222}}" }];
+
+describe("ToolFooter", () => {
+    let wrapper;
+    let axiosMock;
+
+    beforeEach(() => {
+        axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(`/api/tools/tool_a/citations`).reply(200, citationsA);
+        axiosMock.onGet(`/api/tools/tool_b/citations`).reply(200, citationsB);
+
+        wrapper = mount(ToolFooter, {
+            propsData: {
+                id: "tool_a",
+                hasCitations: true,
+                xrefs: [],
+                license: "tool_license",
+                creators: [],
+                requirements: [],
+            },
+            localVue,
+            stubs: {
+                Citation: false,
+                License: true,
+                Creators: true,
+                FontAwesomeIcon: true,
+            },
+        });
+    });
+
+    afterEach(() => {
+        axiosMock.restore();
+        axiosMock.reset();
+    });
+
+    it("check props", async () => {
+        await flushPromises();
+        const referenceA = wrapper.find(".formatted-reference .csl-entry");
+        expect(referenceA.attributes()["data-csl-entry-id"]).toBe("entry_a");
+        expect(referenceA.text()).toContain("1111");
+        wrapper.setProps({ id: "tool_b" });
+        await flushPromises();
+        const referenceB = wrapper.find(".formatted-reference .csl-entry");
+        expect(referenceB.attributes()["data-csl-entry-id"]).toBe("entry_b");
+        expect(referenceB.text()).toContain("2222");
+    });
+});
diff --git a/client/src/utils/promise-queue.js b/client/src/utils/promise-queue.js
index 4fb3db7a709..01a7e36db4d 100644
--- a/client/src/utils/promise-queue.js
+++ b/client/src/utils/promise-queue.js
@@ -1,7 +1,7 @@
 /**
  * This queue waits until the current promise is resolved and only executes the last enqueued
  * promise. Promises added between the last and the currently executing promise are skipped.
- * This is useful when earlier enqueued promises become obsolete.
+ * This is useful when promises earlier enqueued become obsolete.
  * See also: https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
  */
 export class LastQueue {