Add tool footer test to verify proper handling of citations

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");
+    });
+});

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 {