Added test for JobOutputs pagination (497862ff) · Commits · NDIP / Galaxy

client/src/components/JobInformation/JobOutputs.test.js

+46 −0

Original line number	Diff line number	Diff line
		@@ -46,4 +46,50 @@ describe("JobInformation/JobOutputs.vue", () => {
		// should contain 2 rows, header + 1 collection + 1 hda
		expect(rows.length).toBe(3);
		});

		it("displays a table with 15 visible job outputs (paginated)", async () => {
		const propsData = {
		jobOutputs: {
		a: [{ label: "a", value: { id: "1", src: "hda" } }],
		b: [{ label: "b", value: { id: "2", src: "hda" } }],
		c: [{ label: "c", value: { id: "3", src: "hda" } }],
		d: [{ label: "d", value: { id: "4", src: "hda" } }],
		e: [{ label: "e", value: { id: "5", src: "hda" } }],
		f: [{ label: "f", value: { id: "6", src: "hda" } }],
		g: [{ label: "g", value: { id: "7", src: "hda" } }],
		h: [{ label: "h", value: { id: "8", src: "hda" } }],
		i: [{ label: "i", value: { id: "9", src: "hda" } }],
		j: [{ label: "j", value: { id: "10", src: "hda" } }],
		k: [{ label: "k", value: { id: "11", src: "hda" } }],
		l: [{ label: "l", value: { id: "12", src: "hda" } }],
		m: [{ label: "m", value: { id: "13", src: "hda" } }],
		n: [{ label: "n", value: { id: "14", src: "hda" } }],
		o: [{ label: "o", value: { id: "15", src: "hda" } }],
		},
		title: "Job Outputs",
		paginate: true,
		};
		wrapper = shallowMount(JobOutputs, {
		propsData,
		});
		// ---- Before all remaining outputs are paginated: ----
		// heading should exist and include count (due to pagination)
		expect(wrapper.find("h3").text()).toContain("(showing 10 of " + Object.keys(propsData.jobOutputs).length + ")");
		jobOutputsTable = wrapper.find("#job-outputs");
		// table should exist
		expect(jobOutputsTable).toBeTruthy();
		let rows = jobOutputsTable.findAll("tr");
		// should initially contain a header and 11 rows (10 items + a button)
		expect(rows.length).toBe(12);
		// ---- Click button, remaining 5 outputs should be displayed ----
		expect(wrapper.find("#paginate-btn").exists()).toEqual(true);
		await wrapper.find("#paginate-btn").trigger("click");
		jobOutputsTable = wrapper.find("#job-outputs");
		rows = jobOutputsTable.findAll("tr");
		// should now contain a header and 15 rows (all 15 items and no button)
		expect(rows.length).toBe(16);
		expect(wrapper.find("#paginate-btn").exists()).toEqual(false);
		// heading reverts to original value of title (as all ouputs are paginated)
		expect(wrapper.find("h3").text()).toBe("Job Outputs");
		});
		});

client/src/components/JobInformation/JobOutputs.vue

+7 −10

Original line number	Diff line number	Diff line
		@@ -26,7 +26,7 @@
		</tr>
		<tr v-if="paginate && totalLength > firstN">
		<td colspan="2">
		<b-button block variant="secondary" @click="firstN += 10">
		<b-button id="paginate-btn" block variant="secondary" @click="firstN += 10">
		Show {{ totalLength - firstN >= 10 ? 10 : totalLength - firstN }} more outputs
		</b-button>
		</td>
		@@ -60,21 +60,18 @@ export default {
		};
		},
		computed: {
		entries() {
		return Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__"));
		},
		nonHiddenOutputs() {
		if (this.paginate) {
		return Object.fromEntries(
		Object.entries(this.jobOutputs)
		.filter(([key, value]) => !key.startsWith("__"))
		.slice(0, this.firstN)
		);
		return Object.fromEntries(this.entries.slice(0, this.firstN));
		} else {
		return Object.fromEntries(
		Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__"))
		);
		return Object.fromEntries(this.entries);
		}
		},
		totalLength() {
		return Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__")).length;
		return this.entries.length;
		},
		},
		};