diff --git a/cypress/tests/core/blocks/blocks-grid.js b/cypress/tests/core/blocks/blocks-grid.js index 27c9190c4f..b598940ca4 100644 --- a/cypress/tests/core/blocks/blocks-grid.js +++ b/cypress/tests/core/blocks/blocks-grid.js @@ -44,6 +44,7 @@ context('Blocks Acceptance Tests', () => { cy.get('button[aria-label="Add block in position 1"]').click(); cy.get('.blocks-chooser [aria-label="Unfold Text blocks"]').click(); + cy.wait(200); cy.get('.blocks-chooser .text .button.slate').click(); cy.getSlateEditorSelectorAndType( '.block.gridBlock.selected .slate-editor [contenteditable=true]', @@ -86,6 +87,7 @@ context('Blocks Acceptance Tests', () => { cy.get('button[aria-label="Add block in position 1"]').click(); cy.get('.blocks-chooser [aria-label="Unfold Text blocks"]').click(); + cy.wait(200); cy.get('.blocks-chooser .text .button.slate').click(); cy.scrollTo('top'); diff --git a/cypress/tests/core/blocks/blocks-search.js b/cypress/tests/core/blocks/blocks-search.js index cf81cef8db..aef05fabcf 100644 --- a/cypress/tests/core/blocks/blocks-search.js +++ b/cypress/tests/core/blocks/blocks-search.js @@ -36,7 +36,14 @@ describe('Search Block Tests', () => { cy.waitForResourceToLoad('@types'); }); - it('Add Search block', () => { + afterEach(() => { + cy.removeContent({ path: 'my-page' }); + cy.removeContent({ path: 'my-folder' }); + cy.removeContent({ path: 'my-event' }); + cy.removeContent({ path: 'my-search-page' }); + }); + + it('Search block - test checkbox facet', () => { cy.visit('/'); cy.get('#toolbar-add > .icon').click(); cy.get('#toolbar-add-document').click(); @@ -81,21 +88,315 @@ describe('Search Block Tests', () => { cy.get('.react-select__option').contains('Checkbox').click(); cy.get('label[for="field-multiple-3-facets-0"]').click(); + // Save the page + cy.get('#toolbar-save > .icon').click(); + + cy.wait(500); + + // test if type facet works + cy.get('.block.search .facets > .facet .entries > .entry label') + .contains('Event') + .click(); + cy.get('#page-document .listing-item:first-of-type a').should( + 'have.attr', + 'href', + '/my-event', + ); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22portal_type%22%2C%22o%22%3A%22paqo.list.contains%22%2C%22v%22%3A%5B%22Event%22%5D%7D', + ); + // clear facets + cy.get('.block.search .filter-list-header .ui.button').click(); + }); + + it('Search block - test date range facet', () => { + cy.visit('/'); + cy.get('#toolbar-add > .icon').click(); + cy.get('#toolbar-add-document').click(); + cy.getSlateTitle().focus().click().type('My Search Page'); + + // Add Search listing block + cy.addNewBlock('search'); + + // Add search query criteria + cy.get('#default-query-0-query .react-select__value-container').click(); + cy.get('#default-query-0-query .react-select__option') + .contains('Type') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Page') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Folder') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Event') + .click(); + // Add data range facet cy.get('.add-item-button-wrapper > button').click(); - cy.get('#field-field-1-facets-1 .react-select__value-container').click(); + cy.get('#field-field-1-facets-0 .react-select__value-container').click(); cy.get('.react-select__option').contains('Effective date').click(); - cy.get('#field-title-0-facets-1').type('Effective date'); - cy.get('#field-type-2-facets-1').click(); + cy.get('#field-title-0-facets-0').type('Effective date'); + cy.get('#field-type-2-facets-0').click(); cy.get('.react-select__option').contains('Date Range').click(); + // TODO: test if date range facet works + + // Save the page + cy.get('#toolbar-save > .icon').click(); + + cy.wait(500); + }); + + it('Search block - test live searchbox', () => { + cy.visit('/'); + cy.get('#toolbar-add > .icon').click(); + cy.get('#toolbar-add-document').click(); + cy.getSlateTitle().focus().click().type('My Search Page'); + + // Add Search listing block + cy.addNewBlock('search'); + + // Add search query criteria + cy.get('#default-query-0-query .react-select__value-container').click(); + cy.get('#default-query-0-query .react-select__option') + .contains('Type') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Page') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Folder') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Event') + .click(); + // Save the page cy.get('#toolbar-save > .icon').click(); cy.wait(500); + // test searching for Event + cy.get('.search-wrapper .search-input input').focus().type('Event'); + cy.get('#page-document .listing-item:first-of-type a').should( + 'have.attr', + 'href', + '/my-event', + ); + cy.get('.search-results-count-sort .search-details em').should( + 'contain', + 'Event', + ); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Event%22%7D', + ); + + // test removing one char + cy.get('.search-wrapper .search-input input').focus().type('{backspace}'); + cy.get('.search-results-count-sort .search-details em') + .should('not.contain', 'Event') + .and('contain', 'Even'); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Even%22%7D', + ); + + // test removing the text with the button cy.get( - '.block.search .facets > .facet .entries > .entry:nth-of-type(1) label', + '.search-wrapper .search-input .search-input-actions button.search-input-clear-icon-button', ).click(); - cy.get('.block.search .filter-list-header .ui.button').click(); + cy.get('.search-results-count-sort .search-details').should( + 'not.contain', + 'Searched for:', + ); + cy.url().should('not.contain', '%22SearchableText%22'); + + // test searching for Event + cy.get('.search-wrapper .search-input input').focus().type('Event'); + cy.get('#page-document .listing-item:first-of-type a').should( + 'have.attr', + 'href', + '/my-event', + ); + cy.get('.search-results-count-sort .search-details em').should( + 'contain', + 'Event', + ); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Event%22%7D', + ); + + // test removing one char + cy.get('.search-wrapper .search-input input').focus().type('{backspace}'); + cy.get('.search-results-count-sort .search-details em') + .should('not.contain', 'Event') + .and('contain', 'Even'); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Even%22%7D', + ); + + // test removing the whole text from the keyboard + cy.get('.search-wrapper .search-input input') + .focus() + .type('{selectAll}{del}'); + cy.get('.search-results-count-sort .search-details').should( + 'not.contain', + 'Searched for:', + ); + cy.url().should('not.contain', '%22SearchableText%22'); + }); + + it('Search block - test searchbox', () => { + cy.visit('/'); + cy.get('#toolbar-add > .icon').click(); + cy.get('#toolbar-add-document').click(); + cy.getSlateTitle().focus().click().type('My Search Page'); + + // Add Search listing block + cy.addNewBlock('search'); + + // Add search query criteria + cy.get('#default-query-0-query .react-select__value-container').click(); + cy.get('#default-query-0-query .react-select__option') + .contains('Type') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Page') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Folder') + .click(); + + cy.get('#default-query-0-query .fields:first-of-type > .field').click(); + cy.get( + '#default-query-0-query .fields:first-of-type > .field .react-select__option', + ) + .contains('Event') + .click(); + + // uncheck showSearchButton + cy.get('label[for=field-showSearchButton]').click(); + cy.get('.search-wrapper .ui.button').should('contain', 'Search'); + + // Save the page + cy.get('#toolbar-save > .icon').click(); + + cy.wait(500); + + // test searching for Event + cy.get('.search-wrapper .search-input input').focus().type('Event'); + cy.get('.search-wrapper > .ui.button').click(); + + cy.get('#page-document .listing-item:first-of-type a').should( + 'have.attr', + 'href', + '/my-event', + ); + cy.get('.search-results-count-sort .search-details em').should( + 'contain', + 'Event', + ); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Event%22%7D', + ); + + // test removing one char + cy.get('.search-wrapper .search-input input').focus().type('{backspace}'); + cy.get('.search-wrapper > .ui.button').click(); + cy.get('.search-results-count-sort .search-details em') + .should('not.contain', 'Event') + .and('contain', 'Even'); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Even%22%7D', + ); + + // test removing the text with the button + cy.get( + '.search-wrapper .search-input .search-input-actions button.search-input-clear-icon-button', + ).click(); + cy.get('.search-wrapper > .ui.button').click(); + cy.get('.search-results-count-sort .search-details').should( + 'not.contain', + 'Searched for:', + ); + cy.url().should('not.contain', '%22SearchableText%22'); + + // test searching for Event + cy.get('.search-wrapper .search-input input').focus().type('Event'); + cy.get('.search-wrapper > .ui.button').click(); + cy.get('#page-document .listing-item:first-of-type a').should( + 'have.attr', + 'href', + '/my-event', + ); + cy.get('.search-results-count-sort .search-details em').should( + 'contain', + 'Event', + ); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Event%22%7D', + ); + + // test removing one char + cy.get('.search-wrapper .search-input input').focus().type('{backspace}'); + cy.get('.search-wrapper > .ui.button').click(); + cy.get('.search-results-count-sort .search-details em') + .should('not.contain', 'Event') + .and('contain', 'Even'); + cy.url().should( + 'contain', + '%7B%22i%22%3A%22SearchableText%22%2C%22o%22%3A%22paqo.string.contains%22%2C%22v%22%3A%22Even%22%7D', + ); + + // test removing the whole text from the keyboard + cy.get('.search-wrapper .search-input input') + .focus() + .type('{selectAll}{del}'); + cy.get('.search-wrapper > .ui.button').click(); + cy.get('.search-results-count-sort .search-details').should( + 'not.contain', + 'Searched for:', + ); + cy.url().should('not.contain', '%22SearchableText%22'); }); }); diff --git a/news/4828.bugfix b/news/4828.bugfix new file mode 100644 index 0000000000..0e11502b6c --- /dev/null +++ b/news/4828.bugfix @@ -0,0 +1 @@ +Fix search block input clear button doesn't reset the search @iFlameing diff --git a/src/components/manage/Blocks/Search/components/SearchInput.jsx b/src/components/manage/Blocks/Search/components/SearchInput.jsx index 531be61858..1640dd08f0 100644 --- a/src/components/manage/Blocks/Search/components/SearchInput.jsx +++ b/src/components/manage/Blocks/Search/components/SearchInput.jsx @@ -13,7 +13,14 @@ const messages = defineMessages({ }); const SearchInput = (props) => { - const { data, searchText, setSearchText, isLive, onTriggerSearch } = props; + const { + data, + searchText, + setSearchText, + isLive, + onTriggerSearch, + removeSearchQuery, + } = props; const intl = useIntl(); return ( @@ -44,7 +51,7 @@ const SearchInput = (props) => { className="search-input-clear-icon-button" onClick={() => { setSearchText(''); - onTriggerSearch(''); + removeSearchQuery(); }} > diff --git a/src/components/manage/Blocks/Search/hocs/withSearch.jsx b/src/components/manage/Blocks/Search/hocs/withSearch.jsx index b810cc282f..1fb910b2aa 100644 --- a/src/components/manage/Blocks/Search/hocs/withSearch.jsx +++ b/src/components/manage/Blocks/Search/hocs/withSearch.jsx @@ -301,7 +301,7 @@ const withSearch = (options) => (WrappedComponent) => { id, query: data.query || {}, facets: toSearchFacets || facets, - searchText: toSearchText || searchText, + searchText: toSearchText ? toSearchText.trim() : '', sortOn: toSortOn || sortOn, sortOrder: toSortOrder || sortOrder, facetSettings, @@ -329,6 +329,16 @@ const withSearch = (options) => (WrappedComponent) => { ], ); + const removeSearchQuery = () => { + searchData.query = searchData.query.reduce( + // Remove SearchableText from query + (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]), + [], + ); + setSearchData(searchData); + setLocationSearchData(getSearchFields(searchData)); + }; + const querystringResults = useSelector( (state) => state.querystringsearch.subrequests, ); @@ -347,6 +357,7 @@ const withSearch = (options) => (WrappedComponent) => { sortOrder={sortOrder} searchedText={urlSearchText} searchText={searchText} + removeSearchQuery={removeSearchQuery} setSearchText={setSearchText} onTriggerSearch={onTriggerSearch} totalItems={totalItems}