Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[24.0] Fix history filters taking up space in GridList #17652

Merged
merged 5 commits into from
Mar 21, 2024
Merged

[24.0] Fix history filters taking up space in GridList #17652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8522a01
[24.0] Fix history filters taking up space in `GridList`
ahmedhamidawan Mar 8, 2024
e8fc803
trim `filterText` before validating it
ahmedhamidawan Mar 20, 2024
7996b03
shorten placeholders for grid boolean `is` filters
ahmedhamidawan Mar 20, 2024
008b652
add a `compact` version of `FilterMenu`; no collapse on search
ahmedhamidawan Mar 20, 2024
20e4422
fix seleniums and add jest for `compact` `FilterMenu`s
ahmedhamidawan Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 41 additions & 15 deletions client/src/components/Common/FilterMenu.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { createTestingPinia } from "@pinia/testing";
import { getLocalVue } from "@tests/jest/helpers";
import { mount, Wrapper } from "@vue/test-utils";

import { HistoryFilters } from "@/components/History/HistoryFilters";
import { WorkflowFilters } from "@/components/Workflow/WorkflowFilters";
import Filtering, { compare, contains, equals, toBool, toDate } from "@/utils/filtering";

import FilterMenu from "./FilterMenu.vue";
Expand Down Expand Up @@ -80,6 +82,7 @@ describe("FilterMenu", () => {
stubs: {
icon: { template: "<div></div>" },
},
pinia: createTestingPinia(),
});
}

Expand All @@ -89,11 +92,13 @@ describe("FilterMenu", () => {
await searchButton.trigger("click");
}

async function expectCorrectEmits(showAdvanced: boolean, filterText: string, filterClass: Filtering<unknown>) {
async function expectCorrectEmits(filterText: string, filterClass: Filtering<unknown>, showAdvanced?: boolean) {
if (showAdvanced !== undefined) {
const toggleEmit = (wrapper.emitted()?.["update:show-advanced"]?.length ?? 0) - 1;
expect(wrapper.emitted()["update:show-advanced"]?.[toggleEmit]?.[0]).toEqual(showAdvanced);
await wrapper.setProps({ showAdvanced: wrapper.emitted()["update:show-advanced"]?.[toggleEmit]?.[0] });
}
const filterEmit = (wrapper.emitted()["update:filter-text"]?.length ?? 0) - 1;
const toggleEmit = (wrapper.emitted()?.["update:show-advanced"]?.length ?? 0) - 1;
expect(wrapper.emitted()["update:show-advanced"]?.[toggleEmit]?.[0]).toEqual(showAdvanced);
await wrapper.setProps({ showAdvanced: wrapper.emitted()["update:show-advanced"]?.[toggleEmit]?.[0] });
const receivedText = wrapper.emitted()["update:filter-text"]?.[filterEmit]?.[0];
const receivedDict = filterClass.getQueryDict(receivedText);
const parsedDict = filterClass.getQueryDict(filterText);
Expand Down Expand Up @@ -185,11 +190,11 @@ describe("FilterMenu", () => {
// perform search
await performSearch();
await expectCorrectEmits(
false,
"create_time>'January 1, 2022' create_time<'January 1, 2023' " +
"filter_key:item-filter has_help:has-help-filter list_item:1234 " +
"number>1234 number<5678 name:name-filter radio:true bool_def:true",
TestFilters
TestFilters,
false
);
});

Expand All @@ -209,17 +214,17 @@ describe("FilterMenu", () => {
// -------- Test keyup.enter key: ---------
// toggles view out and performs a search
await filterName.trigger("keyup.enter");
await expectCorrectEmits(false, "name:'sample name'", TestFilters);
await expectCorrectEmits("name:'sample name'", TestFilters, false);

// Test: clearing the filterText
const clearButton = wrapper.find("[data-description='reset query']");
await clearButton.trigger("click");
await expectCorrectEmits(false, "", TestFilters);
await expectCorrectEmits("", TestFilters, false);

// Test: toggling view back in
const toggleButton = wrapper.find("[data-description='toggle advanced search']");
await toggleButton.trigger("click");
await expectCorrectEmits(true, "", TestFilters);
await expectCorrectEmits("", TestFilters, true);

// -------- Test keyup.esc key: ---------
// toggles view out only (doesn't cause a new search / doesn't emulate enter)
Expand All @@ -232,7 +237,7 @@ describe("FilterMenu", () => {

// press esc key from name field (should not change emitted filterText unlike enter key)
await filterName.trigger("keyup.esc");
await expectCorrectEmits(false, "", TestFilters);
await expectCorrectEmits("", TestFilters, false);
});

/**
Expand Down Expand Up @@ -260,13 +265,13 @@ describe("FilterMenu", () => {

// expect "deleted = any" filter to be applied
await performSearch();
await expectCorrectEmits(false, "visible:true", HistoryFilters);
await expectCorrectEmits("visible:true", HistoryFilters, false);

// -------- Testing visible filter now: ---------

const toggleButton = wrapper.find("[data-description='toggle advanced search']");
await toggleButton.trigger("click");
await expectCorrectEmits(true, "visible:true", HistoryFilters);
await expectCorrectEmits("visible:true", HistoryFilters, true);
const visibleFilterBtnGrp = wrapper.find("[data-description='filter visible']");
const visibleFilterAnyBtn = visibleFilterBtnGrp.find(".btn-secondary");
expect(visibleFilterAnyBtn.text()).toBe("Any");
Expand All @@ -283,13 +288,34 @@ describe("FilterMenu", () => {

// expect "visible = any" filter to be applied
await performSearch();
await expectCorrectEmits(false, "deleted:any visible:any", HistoryFilters);
await expectCorrectEmits("deleted:any visible:any", HistoryFilters, false);

// -------- Testing repeated search if it prevents bug: ---------
// (bug reported here: https://github.com/galaxyproject/galaxy/issues/16211)
await toggleButton.trigger("click");
await expectCorrectEmits(true, "deleted:any visible:any", HistoryFilters);
await expectCorrectEmits("deleted:any visible:any", HistoryFilters, true);
await performSearch();
await expectCorrectEmits(false, "deleted:any visible:any", HistoryFilters);
await expectCorrectEmits("deleted:any visible:any", HistoryFilters, false);
});

/**
* Testing the default values of the filters defined in the HistoryFilters: Filtering
* class, ensuring the default values are reflected in the radio-group buttons
*/
it("test compact menu with checkbox filters on WorkflowFilters", async () => {
const myWorkflowFilters = WorkflowFilters("my");
setUpWrapper("Workflows", "search workflows", myWorkflowFilters);
// a compact `FilterMenu` only needs to be opened once (doesn't toggle out automatically)
await wrapper.setProps({ showAdvanced: true, view: "compact" });

// -------- Testing auto search on value change: ---------
const nameFilterInput = wrapper.find("#workflows-advanced-filter-name");
await nameFilterInput.setValue("myworkflow");
await expectCorrectEmits("name:myworkflow", myWorkflowFilters);

// -------- Testing deleted filter first: ---------
const deletedFilterCheckbox = wrapper.find("[data-description='filter deleted'] input");
await deletedFilterCheckbox.setChecked();
await expectCorrectEmits("name:myworkflow is:deleted", myWorkflowFilters);
});
});
Loading
Loading