feat(atomic)!: make textarea search box the default and only behavior (…

…#4332) https://coveord.atlassian.net/browse/KIT-2689 --------- Co-authored-by: GitHub Actions Bot <> Co-authored-by: Louis Bompart <[email protected]>
coveo · Sep 6, 2024 · 5890858 · 5890858
1 parent 8f77114
commit 5890858
Show file tree

Hide file tree

Showing 33 changed files with 119 additions and 292 deletions.
diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -1915,14 +1915,14 @@ export declare interface AtomicResultsPerPage extends Components.AtomicResultsPe
 
 
 @ProxyCmp({
-  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout', 'textarea']
+  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout']
 })
 @Component({
   selector: 'atomic-search-box',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout', 'textarea'],
+  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout'],
 })
 export class AtomicSearchBox {
   protected el: HTMLElement;

diff --git a/packages/atomic/cypress/e2e/did-you-mean.cypress.ts b/packages/atomic/cypress/e2e/did-you-mean.cypress.ts
@@ -20,7 +20,7 @@ describe('Did You Mean Test Suites', () => {
   }
 
   function search() {
-    SearchBoxSelectors.inputBox().type(`${originalQuery}{enter}`, {
+    SearchBoxSelectors.textArea().type(`${originalQuery}{enter}`, {
       force: true,
       delay: 200,
     });

diff --git a/packages/atomic/cypress/e2e/no-results.cypress.ts b/packages/atomic/cypress/e2e/no-results.cypress.ts
@@ -79,7 +79,7 @@ describe('No Results Test Suites', () => {
   });
 
   function submitNoResultsSearch() {
-    SearchBoxSelectors.inputBox().type('asiufasfgasiufhsaiufgsa');
+    SearchBoxSelectors.textArea().type('asiufasfgasiufhsaiufgsa');
     SearchBoxSelectors.submitButton().click();
     cy.wait(wait);
   }

diff --git a/packages/atomic/cypress/e2e/search-box/instant-results/search-box-instant-results.cypress.ts b/packages/atomic/cypress/e2e/search-box/instant-results/search-box-instant-results.cypress.ts
@@ -107,7 +107,7 @@ describe('Instant Results Test Suites', () => {
       )
       .init();
 
-    SearchBoxSelectors.inputBox().type(`${downKeys(2)}`, delay());
+    SearchBoxSelectors.textArea().type(`${downKeys(2)}`, delay());
     InstantResultsSelectors.results()
       .find(resultTextComponent, {includeShadowDom: true})
       .should(($els) => expect($els.text().trim().length).to.greaterThan(0));
@@ -143,7 +143,7 @@ describe('Instant Results Test Suites', () => {
   it('with keyboard navigation, it should function correctly', () => {
     setupWithSuggestionsAndRecentQueries();
     interceptRedirectionToExampleDotCom();
-    SearchBoxSelectors.inputBox().type(`${downKeys(1)}{rightArrow}`, delay());
+    SearchBoxSelectors.textArea().type(`${downKeys(1)}{rightArrow}`, delay());
 
     SearchBoxAssertions.assertHasSuggestionsCountWithoutIt(
       maxRecentQueriesWithoutQuery
@@ -159,7 +159,7 @@ describe('Instant Results Test Suites', () => {
     SearchBoxSelectors.activeQuerySuggestion().should('have.length', 0);
 
     cy.log('when navigating back from result to query');
-    SearchBoxSelectors.inputBox().type(
+    SearchBoxSelectors.textArea().type(
       `${downKeys(2)}{leftArrow}{downArrow}`,
       delay()
     );
@@ -168,10 +168,10 @@ describe('Instant Results Test Suites', () => {
     SearchBoxAssertions.assertHasTextWithoutIt('Recent query 0');
 
     cy.log('when navigating to first suggestion and back with up arrow');
-    SearchBoxSelectors.inputBox().type(`${downKeys(3)}{upArrow}`, delay());
-    SearchBoxSelectors.inputBox().clear({force: true});
+    SearchBoxSelectors.textArea().type(`${downKeys(3)}{upArrow}`, delay());
+    SearchBoxSelectors.textArea().clear({force: true});
 
-    SearchBoxSelectors.inputBox().type(
+    SearchBoxSelectors.textArea().type(
       'Rec{downArrow}{upArrow}{leftArrow}{del}',
       delay()
     );
@@ -180,32 +180,32 @@ describe('Instant Results Test Suites', () => {
     SearchBoxAssertions.assertHasTextWithoutIt('Re');
 
     cy.log('when navigating with the down arrow only');
-    SearchBoxSelectors.inputBox().clear({force: true});
-    SearchBoxSelectors.inputBox().type(downKeys(6), delay());
+    SearchBoxSelectors.textArea().clear({force: true});
+    SearchBoxSelectors.textArea().type(downKeys(6), delay());
     SearchBoxAssertions.assertSuggestionIsSelectedWithoutIt(0);
 
     cy.log('when navigating up from results');
-    SearchBoxSelectors.inputBox().type(`${downKeys(2)}{upArrow}`, delay());
-    SearchBoxSelectors.inputBox().clear({force: true});
+    SearchBoxSelectors.textArea().type(`${downKeys(2)}{upArrow}`, delay());
+    SearchBoxSelectors.textArea().clear({force: true});
 
-    SearchBoxSelectors.inputBox().type('{moveToStart}');
+    SearchBoxSelectors.textArea().type('{moveToStart}');
 
     cy.log('when navigating up from input');
-    SearchBoxSelectors.inputBox().type('{moveToStart}{upArrow}', delay());
+    SearchBoxSelectors.textArea().type('{moveToStart}{upArrow}', delay());
 
     SearchBoxAssertions.assertSuggestionIsSelectedWithoutIt(2);
 
     cy.log('when typing when a query is selected');
-    SearchBoxSelectors.inputBox().type(`${downKeys(1)}{downArrow}`, delay());
+    SearchBoxSelectors.textArea().type(`${downKeys(1)}{downArrow}`, delay());
 
-    SearchBoxSelectors.inputBox().type(`${downKeys(2)}{backspace}`, delay());
+    SearchBoxSelectors.textArea().type(`${downKeys(2)}{backspace}`, delay());
 
     SearchBoxAssertions.assertNoSuggestionIsSelected();
 
     SearchBoxAssertions.assertHasTextWithoutIt('Recent query ');
 
     cy.wait(1000);
-    SearchBoxSelectors.inputBox().type(
+    SearchBoxSelectors.textArea().type(
       `${downKeys(2)}{rightArrow}{enter}`,
       delay()
     );
@@ -218,21 +218,21 @@ describe('Instant Results Test Suites', () => {
     interceptRedirectionToExampleDotCom();
 
     cy.log('when hovering over a query');
-    SearchBoxSelectors.inputBox().click();
+    SearchBoxSelectors.textArea().click();
     SearchBoxSelectors.querySuggestions().eq(0).trigger('mouseover');
 
     SearchBoxAssertions.assertSuggestionIsSelectedWithoutIt(0);
     SearchBoxAssertions.assertHasTextWithoutIt('');
 
     cy.log('when hovering over an instant result');
-    SearchBoxSelectors.inputBox().click();
+    SearchBoxSelectors.textArea().click();
     InstantResultsSelectors.results().eq(1).trigger('mouseover');
 
     InstantResultsAssertions.assertHasResultCount(4);
 
     SearchBoxSelectors.activeQuerySuggestion().should('have.length', 0);
 
-    SearchBoxSelectors.inputBox().click();
+    SearchBoxSelectors.textArea().click();
     InstantResultsSelectors.results().eq(1).trigger('mouseover');
     SearchBoxSelectors.querySuggestions().eq(1).trigger('mouseover');
 
@@ -252,19 +252,19 @@ describe('Instant Results Test Suites', () => {
     interceptRedirectionToExampleDotCom();
 
     cy.log('when hovering over a query');
-    SearchBoxSelectors.inputBox().click();
+    SearchBoxSelectors.textArea().click();
     SearchBoxSelectors.querySuggestions().eq(0).trigger('mouseover');
 
     SearchBoxAssertions.assertSuggestionIsSelectedWithoutIt(0);
     SearchBoxAssertions.assertHasTextWithoutIt('');
 
     cy.log('when hovering over an instant result');
-    SearchBoxSelectors.inputBox().click();
+    SearchBoxSelectors.textArea().click();
     InstantResultsSelectors.results().eq(1).trigger('mouseover');
 
     InstantResultsAssertions.assertHasResultCount(4);
 
-    SearchBoxSelectors.inputBox().click();
+    SearchBoxSelectors.textArea().click();
     InstantResultsSelectors.results().eq(1).trigger('mouseover');
     SearchBoxSelectors.querySuggestions().eq(1).trigger('mouseover');
 

diff --git a/packages/atomic/cypress/e2e/search-box/search-box-actions.ts b/packages/atomic/cypress/e2e/search-box/search-box-actions.ts
@@ -56,12 +56,6 @@ export const addSearchBox =
     env.withElement(searchBox);
   };
 
-export function typeSearchInput(query: string, verifyInput = '') {
-  SearchBoxSelectors.inputBox().click();
-  SearchBoxSelectors.inputBox().type(`${query}{enter}`, {force: true});
-  SearchBoxAssertions.assertHasText(verifyInput || query);
-}
-
 export function typeSearchTextArea(query: string, verifyInput = '') {
   SearchBoxSelectors.textArea().click();
   SearchBoxSelectors.textArea().type(`${query}{enter}`, {force: true});

diff --git a/packages/atomic/cypress/e2e/search-box/search-box-assertions.ts b/packages/atomic/cypress/e2e/search-box/search-box-assertions.ts
@@ -1,7 +1,7 @@
 import {SearchBoxSelectors} from './search-box-selectors';
 
 export function assertFocusSearchBox(
-  searchBoxSelector = SearchBoxSelectors.inputBox
+  searchBoxSelector = SearchBoxSelectors.textArea
 ) {
   it('should focus on the search box', () => {
     searchBoxSelector().should('be.focused');
@@ -13,7 +13,7 @@ export function assertFocusSearchBox(
  */
 export function assertHasText(
   text: string,
-  searchBoxSelector = SearchBoxSelectors.inputBox
+  searchBoxSelector = SearchBoxSelectors.textArea
 ) {
   it(`should contain "${text}"`, () => {
     searchBoxSelector().should('have.value', text);
@@ -22,7 +22,7 @@ export function assertHasText(
 
 export function assertHasTextWithoutIt(
   text: string,
-  searchBoxSelector = SearchBoxSelectors.inputBox
+  searchBoxSelector = SearchBoxSelectors.textArea
 ) {
   searchBoxSelector().should('have.value', text);
 }

diff --git a/packages/atomic/cypress/e2e/search-box/search-box-selectors.ts b/packages/atomic/cypress/e2e/search-box/search-box-selectors.ts
@@ -5,7 +5,6 @@ export const searchBoxComponent = 'atomic-search-box';
 export const SearchBoxSelectors = {
   host: () => cy.get(searchBoxComponent),
   shadow: () => cy.get(searchBoxComponent).shadow(),
-  inputBox: () => SearchBoxSelectors.shadow().find('[part="input"]'),
   textArea: () => SearchBoxSelectors.shadow().find('[part="textarea"]'),
   submitButton: () =>
     SearchBoxSelectors.shadow().find('[part="submit-button"]'),