Commit c0762f71 authored by Ahmed Awan's avatar Ahmed Awan
Browse files

add jest to test https://github.com/galaxyproject/galaxy/pull/19841

parent 937c8489

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

+43 −11
Original line number Diff line number Diff line
@@ -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,14 +149,20 @@ 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);
@@ -144,4 +170,10 @@ describe("DirectoryPathEditableBreadcrumb", () => { 


        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

+1 −1
Original line number Diff line number Diff line
@@ -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>