Merge pull request #8403 from weseek/fix/139063-30-search--search.cy.ts

fix: Normalization of 30-search--search.cy.ts

apps/app/src/components/PageControls/SearchButton.tsx

@@ -19,6 +19,7 @@ const SearchButton = (): JSX.Element => {
       type="button"
       className={`me-3 btn btn-search ${styles['btn-search']}`}
       onClick={searchButtonClickHandler}
+      data-testid="open-search-modal-button"
     >
       <span className="material-symbols-outlined">search</span>
     </button>

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -51,7 +51,11 @@ export const SearchForm = (props: Props): JSX.Element => {
   });
 
   return (
-    <form className="w-100" onSubmit={submitHandler}>
+    <form
+      className="w-100"
+      onSubmit={submitHandler}
+      data-testid="search-form"
+    >
       <input {...inputOptions} />
     </form>
   );

apps/app/src/features/search/client/components/SearchMethodMenuItem.tsx

@@ -28,33 +28,37 @@ export const SearchMethodMenuItem = (props: Props): JSX.Element => {
   return (
     <>
       { shouldShowMenuItem && (
+        <div data-testid="search-all-menu-item">
+          <SearchMenuItem
+            index={0}
+            isActive={activeIndex === 0}
+            getItemProps={getItemProps}
+            url={`/_search?q=${searchKeyword}`}
+          >
+            <span className="material-symbols-outlined fs-4 me-3">search</span>
+            <span>{searchKeyword}</span>
+            <div className="ms-auto">
+              <span>{t('search_method_menu_item.search_in_all')}</span>
+            </div>
+          </SearchMenuItem>
+        </div>
+      )}
+
+      <div data-testid="search-prefix-menu-item">
         <SearchMenuItem
-          index={0}
-          isActive={activeIndex === 0}
+          index={shouldShowMenuItem ? 1 : 0}
+          isActive={activeIndex === (shouldShowMenuItem ? 1 : 0)}
           getItemProps={getItemProps}
-          url={`/_search?q=${searchKeyword}`}
+          url={`/_search?q=prefix:${currentPagePath} ${searchKeyword}`}
         >
           <span className="material-symbols-outlined fs-4 me-3">search</span>
-          <span>{searchKeyword}</span>
+          <code>prefix: {currentPagePath}</code>
+          <span className="ms-2">{searchKeyword}</span>
           <div className="ms-auto">
-            <span>{t('search_method_menu_item.search_in_all')}</span>
+            <span>{t('search_method_menu_item.only_children_of_this_tree')}</span>
           </div>
         </SearchMenuItem>
-      )}
-
-      <SearchMenuItem
-        index={shouldShowMenuItem ? 1 : 0}
-        isActive={activeIndex === (shouldShowMenuItem ? 1 : 0)}
-        getItemProps={getItemProps}
-        url={`/_search?q=prefix:${currentPagePath} ${searchKeyword}`}
-      >
-        <span className="material-symbols-outlined fs-4 me-3">search</span>
-        <code>prefix: {currentPagePath}</code>
-        <span className="ms-2">{searchKeyword}</span>
-        <div className="ms-auto">
-          <span>{t('search_method_menu_item.only_children_of_this_tree')}</span>
-        </div>
-      </SearchMenuItem>
+      </div>
 
       { shouldShowMenuItem && (
         <SearchMenuItem

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -55,7 +55,7 @@ const SearchModal = (): JSX.Element => {
   }, [searchModalData?.isOpened]);
 
   return (
-    <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
+    <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal} data-testid="search-modal">
       <ModalBody>
         <Downshift
           onSelect={selectSearchMenuItemHandler}

apps/app/test/cypress/e2e/30-search/30-search--search.cy.ts

@@ -100,14 +100,17 @@ context('Search all pages', () => {
     cy.collapseSidebar(true, true);
     cy.waitUntilSkeletonDisappear();
 
-    cy.get('.rbt-input').click();
-    cy.get('.rbt-menu.dropdown-menu.show').should('be.visible').within(() => {
-      cy.screenshot(`${ssPrefix}1-search-input-focused`);
+    // open SearchModal
+    cy.getByTestid('grw-contextual-sub-nav').within(() => {
+      cy.getByTestid('open-search-modal-button').click();
     })
+    cy.getByTestid('search-modal').should('be.visible').within(() => {
+      cy.screenshot(`${ssPrefix}1-search-input-focused`);
+    });
 
-    cy.get('.rbt-input-main').type(`${searchText}`);
+    // inseart text
+    cy.getByTestid('search-form').should('be.visible').type(searchText);
     cy.screenshot(`${ssPrefix}2-insert-search-text`, { capture: 'viewport'});
-    cy.get('.rbt-input-main').type('{enter}');
   });
 
   it(`Search all pages by tag is successfully loaded `, () => {
@@ -138,16 +141,20 @@ context('Search all pages', () => {
     });
 
     cy.visit('/');
+    cy.waitUntilSkeletonDisappear();
 
-    cy.get('.rbt-input').should('be.visible');
-    cy.get('.rbt-input').click();
-    cy.get('.rbt-input-main').type(`${searchText}`);
+    // open SearchModal
+    cy.getByTestid('grw-contextual-sub-nav').within(() => {
+      cy.getByTestid('open-search-modal-button').click();
+    })
+    cy.getByTestid('search-modal').should('be.visible');
 
-    cy.collapseSidebar(true);
-    cy.waitUntilSkeletonDisappear();
+    // inseart text
+    cy.getByTestid('search-form').should('be.visible').type(searchText);
     cy.screenshot(`${ssPrefix}1-insert-search-text-with-tag`, { capture: 'viewport'});
 
-    cy.get('.rbt-input-main').type('{enter}');
+    // click search method button
+    cy.getByTestid('search-all-menu-item').click();
 
     cy.getByTestid('search-result-base').should('be.visible');
     cy.getByTestid('search-result-list').should('be.visible');
@@ -375,27 +382,19 @@ context('Search current tree with "prefix":', () => {
     const searchText = 'help';
 
     cy.visit('/');
+    cy.waitUntilSkeletonDisappear();
 
-    cy.waitUntil(() => {
-      // do
-      cy.getByTestid('select-search-scope').should('be.visible').click();
-      // wait until
-      return cy.get('.grw-global-search-container').within(() => {
-        return Cypress.$('.dropdown-menu.show').is(':visible');
-      });
-    });
+    // open SearchModal
+    cy.getByTestid('grw-contextual-sub-nav').within(() => {
+      cy.getByTestid('open-search-modal-button').click();
+    })
+    cy.getByTestid('search-modal').should('be.visible');
 
-    cy.get('.grw-global-search-container').within(() => {
-      cy.get('.dropdown-menu.show').should('be.visible');
-      // TODO: .input-group-prepend dropped in bootstrap v5
-      cy.get('.input-group-prepend.show > div > button:nth-child(2)').click();
-      cy.get('.rbt-input').should('be.focused');
-      cy.screenshot(`${ssPrefix}1-search-input-focused`);
-    });
+    // inseart text
+    cy.getByTestid('search-form').should('be.visible').type(searchText);
 
-    cy.get('.rbt-input').type(`${searchText}`);
-    cy.screenshot(`${ssPrefix}2-insert-search-text`, { capture: 'viewport'});
-    cy.get('.rbt-input').type('{enter}');
+    // click search method button
+    cy.getByTestid('search-prefix-menu-item').click();
 
     cy.getByTestid('search-result-base').should('be.visible');
     cy.getByTestid('search-result-list').should('be.visible');