123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- import { flushPromises } from "@vue/test-utils";
- import LongJobs from "@/components/LongJobs.vue";
- import FloatingBox from "@/components/FloatingBox.vue";
- import { getWrapper } from "@/tests/utils/utils";
- import { useLongJobsStore } from "@/stores/longJobs";
- import { useWebsocketsStore } from "@/stores/websockets";
- describe("LongJobs component", async () => {
- beforeEach(async context => {
- context.mockSocket = {
- data: {
- dispatch: {
- "users.getLongJobs": () => ({
- status: "success",
- data: {
- longJobs: [
- {
- id: "8704d336-660f-4d23-8c18-a7271c6656b5",
- name: "Bulk verifying songs",
- status: "success",
- message:
- "50 songs have been successfully verified"
- }
- ]
- }
- }),
- "users.getLongJob": id =>
- id === "bf3dc3aa-e7aa-4b69-bfd1-8e979fe7dfa5"
- ? {
- status: "success",
- data: {
- longJob: {
- id,
- name: "Bulk editing tags",
- status: "success",
- message: "Successfully edited tags."
- }
- }
- }
- : {
- status: "error",
- message: "Long job not found."
- },
- "users.removeLongJob": () => ({
- status: "success"
- })
- },
- progress: {
- "users.getLongJob": id =>
- id === "bf3dc3aa-e7aa-4b69-bfd1-8e979fe7dfa5"
- ? [
- {
- id,
- name: "Bulk editing tags",
- status: "started",
- message: "Updating tags."
- },
- {
- id,
- name: "Bulk editing tags",
- status: "update",
- message: "Updating tags in MongoDB."
- }
- ]
- : []
- },
- on: {
- "keep.event:longJob.added": {
- data: { jobId: "bf3dc3aa-e7aa-4b69-bfd1-8e979fe7dfa5" }
- },
- "keep.event:longJob.removed": {
- data: { jobId: "8704d336-660f-4d23-8c18-a7271c6656b5" }
- }
- }
- }
- };
- });
- test("component does not render if there are no jobs", async () => {
- const wrapper = await getWrapper(LongJobs, { mockSocket: true });
- expect(wrapper.findComponent(FloatingBox).exists()).toBeFalsy();
- });
- test("component and jobs render if jobs exists", async ({ mockSocket }) => {
- const wrapper = await getWrapper(LongJobs, {
- mockSocket,
- stubs: { FloatingBox },
- loginRequired: true
- });
- expect(wrapper.findComponent(FloatingBox).exists()).toBeTruthy();
- const activeJobs = wrapper.findAll(".active-jobs .active-job");
- const { longJobs } =
- mockSocket.data.dispatch["users.getLongJobs"]().data;
- expect(activeJobs.length).toBe(longJobs.length);
- });
- describe.each(["started", "update", "success", "error"])(
- "job with %s status",
- status => {
- const isRemoveable = status === "success" || status === "error";
- beforeEach(async context => {
- const getLongJobs =
- context.mockSocket.data.dispatch["users.getLongJobs"]();
- getLongJobs.data.longJobs[0].status = status;
- context.mockSocket.data.dispatch["users.getLongJobs"] = () =>
- getLongJobs;
- context.wrapper = await getWrapper(LongJobs, {
- mockSocket: context.mockSocket,
- stubs: { FloatingBox },
- loginRequired: true
- });
- });
- test("status icon, name and message render correctly", ({
- wrapper,
- mockSocket
- }) => {
- const activeJob = wrapper.find(".active-jobs .active-job");
- const job =
- mockSocket.data.dispatch["users.getLongJobs"]().data
- .longJobs[0];
- let icon;
- if (job.status === "success") icon = "Complete";
- else if (job.status === "error") icon = "Failed";
- else if (job.status === "started" || job.status === "update")
- icon = "In Progress";
- icon = `i[content="${icon}"]`;
- expect(activeJob.find(icon).exists()).toBeTruthy();
- expect(activeJob.find(".name").text()).toBe(job.name);
- (<any>(
- activeJob.find(".actions .message").element.parentElement
- ))._tippy.show();
- expect(
- document.body.querySelector(
- "body > [id^=tippy] .tippy-box .long-job-message"
- ).textContent
- ).toBe(`Latest Update:${job.message}`);
- });
- test(`job is ${
- isRemoveable ? "" : "not "
- }removed on click of clear icon`, async ({ wrapper }) => {
- await wrapper
- .find(".active-job .actions .clear")
- .trigger("click");
- await flushPromises();
- const longJobsStore = useLongJobsStore();
- expect(longJobsStore.removeJob).toBeCalledTimes(
- isRemoveable ? 1 : 0
- );
- expect(wrapper.findComponent(FloatingBox).exists()).not.toEqual(
- isRemoveable
- );
- });
- }
- );
- test("keep.event:longJob.added", async ({ mockSocket }) => {
- const wrapper = await getWrapper(LongJobs, {
- mockSocket,
- stubs: { FloatingBox },
- loginRequired: true
- });
- const websocketsStore = useWebsocketsStore();
- websocketsStore.socket.trigger("on", "keep.event:longJob.added");
- await flushPromises();
- const longJobsStore = useLongJobsStore();
- expect(longJobsStore.setJob).toBeCalledTimes(3);
- const activeJobs = wrapper.findAll(".active-jobs .active-job");
- const { longJobs } =
- mockSocket.data.dispatch["users.getLongJobs"]().data;
- expect(activeJobs.length).toBe(longJobs.length + 1);
- });
- test("keep.event:longJob.removed", async ({ mockSocket }) => {
- const wrapper = await getWrapper(LongJobs, {
- mockSocket,
- stubs: { FloatingBox },
- loginRequired: true
- });
- const websocketsStore = useWebsocketsStore();
- websocketsStore.socket.trigger("on", "keep.event:longJob.removed");
- await flushPromises();
- const longJobsStore = useLongJobsStore();
- expect(longJobsStore.removeJob).toBeCalledTimes(1);
- expect(wrapper.findComponent(FloatingBox).exists()).toBeFalsy();
- });
- });
|