add jest to test galaxyproject#19841

Author: ahmedhamidawan

client/src/components/Form/Elements/FormDirectory.test.js

@@ -14,6 +14,28 @@ jest.mock("app");
 
 const { server, http } = useServerMock();
 
+async function init(wrapper, data) {
+    // the file dialog modal should exist
+    const filesDialogComponent = wrapper.findComponent(FilesDialog);
+    expect(filesDialogComponent.exists()).toBe(true);
+    filesDialogComponent.vm.callback({ url: data.url });
+    // HACK to avoid https://github.com/facebook/jest/issues/2549 (URL implementation is not the same as global node)
+    wrapper.vm.pathChunks = data.pathChunks;
+    await flushPromises();
+    await validateLatestEmittedPath(wrapper, data.url);
+}
+
+async function validateLatestEmittedPath(wrapper, expectedPath) {
+    const latestEmitIndex = wrapper.emitted()["input"].length - 1;
+    const latestPath = wrapper.emitted()["input"][latestEmitIndex][0];
+    expect(latestPath).toBe(expectedPath);
+
+    // also manually change prop value to be able to test the value being displayed
+    await wrapper.setProps({ value: latestPath });
+    const fullPathDisplayed = wrapper.find("[data-description='directory full path']");
+    expect(fullPathDisplayed.text()).toBe(`Directory Path: ${expectedPath}`);
+}
+
 describe("DirectoryPathEditableBreadcrumb", () => {
     let wrapper;
     let spyOnUrlSet;
@@ -29,6 +51,11 @@ describe("DirectoryPathEditableBreadcrumb", () => {
     const validPath = "validpath";
     const invalidPath = "./];";
 
+    const testingDataWithSpecialChars = {
+        url: "gxfiles://directory/sub directory/with%20percent",
+        pathChunks: [{ pathChunk: "directory" }, { pathChunk: "sub%20directory" }, { pathChunk: "with%2520percent" }],
+    };
+
     const saveNewChunk = async (path) => {
         // enter a new path chunk
         const input = wrapper.find("#path-input-breadcrumb");
@@ -38,15 +65,6 @@ describe("DirectoryPathEditableBreadcrumb", () => {
         input.trigger("keyup.enter");
         return input;
     };
-    const init = async () => {
-        // the file dialog modal should exist
-        const filesDialogComponent = wrapper.findComponent(FilesDialog);
-        expect(filesDialogComponent.exists()).toBe(true);
-        filesDialogComponent.vm.callback({ url: testingData.url });
-        // HACK to avoid https://github.com/facebook/jest/issues/2549 (URL implementation is not the same as global node)
-        wrapper.vm.pathChunks = testingData.pathChunks;
-        await flushPromises();
-    };
 
     beforeEach(async () => {
         spyOnUrlSet = jest.spyOn(FormDirectory.methods, "setUrl");
@@ -67,13 +85,12 @@ describe("DirectoryPathEditableBreadcrumb", () => {
 
         wrapper = mount(FormDirectory, {
             propsData: {
-                callback: () => {},
+                value: null,
             },
             localVue: localVue,
             pinia,
         });
         await flushPromises();
-        await init();
     });
     afterEach(async () => {
         if (wrapper) {
@@ -83,6 +100,7 @@ describe("DirectoryPathEditableBreadcrumb", () => {
     });
 
     it("should render Breadcrumb", async () => {
+        await init(wrapper, testingData);
         // after initial folder is chosen, setUrl() should be called and modal disappear
         expect(spyOnUrlSet).toHaveBeenCalled();
         expect(wrapper.findComponent(FilesDialog).exists()).toBe(false);
@@ -107,6 +125,7 @@ describe("DirectoryPathEditableBreadcrumb", () => {
     });
 
     it("should prevent invalid Paths", async () => {
+        await init(wrapper, testingData);
         // enter a new path chunk
         const input = await saveNewChunk(invalidPath);
         await flushPromises();
@@ -117,6 +136,7 @@ describe("DirectoryPathEditableBreadcrumb", () => {
     });
 
     it("should save and remove new Paths", async () => {
+        await init(wrapper, testingData);
         // enter a new path chunk
         const input = await saveNewChunk(validPath);
 
@@ -129,19 +149,31 @@ describe("DirectoryPathEditableBreadcrumb", () => {
         expect(wrapper.findAll("li.breadcrumb-item").length).toBe(testingData.expectedNumberOfPaths + 1);
         // find newly added chunk
         const addedChunk = wrapper.findAll("li.breadcrumb-item button").wrappers.find((e) => e.text() === validPath);
+
+        await validateLatestEmittedPath(wrapper, `${testingData.url}/${validPath}`);
+
         // remove chunk from the path
         await addedChunk.trigger("click");
         await flushPromises();
         // number of elements should be the same again
         expect(wrapper.findAll("li.breadcrumb-item").length).toBe(testingData.expectedNumberOfPaths);
+
+        await validateLatestEmittedPath(wrapper, testingData.url);
     });
 
     it("should update new path", async () => {
+        await init(wrapper, testingData);
         // enter a new path chunk
         expect(spyOnUpdateURL).toHaveBeenCalled();
         await saveNewChunk(validPath);
         await flushPromises();
 
         expect(spyOnUpdateURL).toHaveBeenCalled();
     });
+
+    it("should retain special characters in path", async () => {
+        // the init function itself validates that the emits and path display
+        // retain special characters in the url
+        await init(wrapper, testingDataWithSpecialChars);
+    });
 });

client/src/components/Form/Elements/FormDirectory.vue

@@ -39,7 +39,7 @@
             </b-breadcrumb-item>
         </b-breadcrumb>
 
-        <div v-if="value" class="px-2">
+        <div v-if="value" class="px-2" data-description="directory full path">
             <span v-localize>Directory Path:</span>
             <code>{{ value }}</code>
         </div>