Skip to content

Commit

Permalink
Fix search block input clear button doesn't reset the search (#4837)
Browse files Browse the repository at this point in the history 
Co-authored-by: ionlizarazu <ilizarazu@codesyntax.com>
Co-authored-by: Mikel Larreategi <mlarreategi@codesyntax.com>
  • Loading branch information
@iFlameing @ionlizarazu @erral
3 people authored Jul 18, 2023
1 parent 8ccab38 commit f5bf897
Show file tree
Hide file tree
Showing 5 changed files with 331 additions and 9 deletions.
2 changes: 2 additions & 0 deletions cypress/tests/core/blocks/blocks-grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]',
Expand Down Expand Up @@ -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');

Expand Down
313 changes: 307 additions & 6 deletions cypress/tests/core/blocks/blocks-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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');
});
});
1 change: 1 addition & 0 deletions news/4828.bugfix
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fix search block input clear button doesn't reset the search @iFlameing
11 changes: 9 additions & 2 deletions src/components/manage/Blocks/Search/components/SearchInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -44,7 +51,7 @@ const SearchInput = (props) => {
className="search-input-clear-icon-button"
onClick={() => {
setSearchText('');
onTriggerSearch('');
removeSearchQuery();
}}
>
<Icon name={clearSVG} />
Expand Down
Loading

0 comments on commit f5bf897

Please sign in to comment.