Bugs

cypress/e2e/2-travel-study/destinations-filter.cy.ts

@@ -19,19 +19,19 @@ describe('Travel-Study Destinations Page', () => {
     cy.wait(1000);
 
     // Select Filter Month and check for URL update
-    cy.get('[data-test="filter-option--october"]').first().check({ force: true });
-    cy.url().should('contain', 'trip-month=oct');
+    cy.get('[data-test="filter-option--february"]').first().check({ force: true });
+    cy.url().should('contain', 'trip-month=feb');
 
     // Load the filter from the URL
-    cy.visit('/travel-study/destinations/?page=1&trip-month=oct');
+    cy.visit('/travel-study/destinations/?page=1&trip-month=feb');
     // Confirm chip exists
-    cy.get('[data-test="chip:October"]').should('exist');
+    cy.get('[data-test="chip:February"]').should('exist');
     // Confirm that a trip card exists
     cy.get('.trip-filter-page article h3').should('exist');
 
     // Clear Filters and check for URL update
     cy.get('[data-test="filter-btn--clear-all"]').first().click({force: true});
-    cy.url().should('not.contain', 'trip-month=oct');
+    cy.url().should('not.contain', 'trip-month=feb');
 
     // Enable family focused filter
     cy.visit('/travel-study/destinations/?page=1&trip-experience=family-focused');

cypress/e2e/2-travel-study/registration-form.cy.ts

@@ -46,16 +46,16 @@ describe('Travel-Study Trip Registration Form Page', () => {
     // Confirm form exists
     cy.get('[id="su-embed"]').should('exist');
     cy.get('form').should('exist');
-    
+
     // Confirm that the user's name is prefilled
     cy.get('[data-fieldid="DigitalName"]').should('contain.value', 'Teri Dactyl');
-    
+
     // Confirm email is prefilled
     cy.get('[data-fieldid="ContactEmail"]').should('contain.value', '[email protected]');
 
     // Confirm phone number is prefilled
     cy.get('[data-fieldid="PhoneNumber"]').should('contain.value', '4081111111');
-  
+
     // Fill required questions
     cy.get('[data-fieldid="Pre-TripExtension__0"]').first().check({force: true});
     cy.get('[data-fieldid="Post-TripExtension__0"]').first().check({force: true});
@@ -70,7 +70,7 @@ describe('Travel-Study Trip Registration Form Page', () => {
 
     // Visit the membership form page URL
     cy.visit('/travel-study/destinations/finland-2022/finland-reg-form/form');
-  
+
     // Confirm that the URL redirect to the expected URL
     cy.url().should('include', '/travel-study/destinations/finland-2022/finland-reg-form');
     cy.reload(); // Needed for local Gatsby build

cypress/e2e/4-search/search-results.cy.ts

@@ -9,7 +9,7 @@ describe('Search Results', () => {
     })
 
     cy.get('[data-test="search--modal-input"]').should('exist').type('travel study');
-    cy.get('[data-cy="search--submit-btn"]').first().click();
+    cy.get('[data-test="search--submit-btn"]').first().click();
 
     cy.reload({timeout: 1000}) // Needed for local Gatsby build
     cy.url().should('include', '/search/?q=travel%20study');
@@ -35,7 +35,7 @@ describe('Search Results', () => {
     cy.reload() // Needed for local Gatsby build
 
     cy.get('h1').should('contain.text', 'Search for...');
-    cy.get('section > div form input[data-test="search--modal-input"]').should('contain.value','lorem ipsum');
+    cy.get('#search-field-input').should('contain.value','lorem ipsum');
 
     cy.get('h2').should('contain.text', 'We’re sorry, we couldn’t find results for “lorem ipsum”.')
     cy.get('h3').should('contain.text', 'Consider Browsing by Category:')

src/components/search/Modal/SearchFieldModal.jsx

@@ -138,6 +138,7 @@ const SearchFieldModal = React.forwardRef(({ emptySearchMessage }, ref) => {
                   placeholder="Search"
                   InputProps={{ ...params.InputProps, type: 'searchbox' }}
                   inputRef={ref}
+                  data-test="search--modal-input"
                 />
               </label>
             )}
@@ -190,6 +191,7 @@ const SearchFieldModal = React.forwardRef(({ emptySearchMessage }, ref) => {
             type="submit"
             aria-label="Search events"
             className="su-flex su-items-center su-justify-center su-min-w-[4rem] su-w-40 su-h-40 md:su-min-w-[7rem] md:su-w-70 md:su-h-70 md:children:su-w-40 md:children:su-h-40 su-rounded-full su-transition-colors su-bg-digital-red hocus:su-bg-digital-red-xlight su-origin-center !su-ml-0"
+            data-test="search--submit-btn"
           >
             <Search className="su-transition su-text-white su-w-18 md:su-w-30 su-h-18 md:su-h-30" />
           </button>

src/components/search/SearchField.jsx

@@ -139,6 +139,7 @@ const SearchField = ({ emptySearchMessage }) => {
           <Autocomplete
             freeSolo
             id="search-field-input"
+            data-test="search--input"
             popupIcon={null}
             disableClearable
             disablePortal
@@ -209,6 +210,7 @@ const SearchField = ({ emptySearchMessage }) => {
             type="submit"
             aria-label="Search events"
             className="su-flex su-items-center su-justify-center su-shrink-0 su-rounded-full su-w-36 su-h-36 md:su-w-50 md:su-h-50 su-bg-digital-red-light hocus:su-bg-cardinal-red-dark su-transition-colors"
+            data-test="search--submit-btn"
           >
             <Search className="su-transition su-text-white su-w-18 md:su-w-30 su-h-18 md:su-h-30" />
           </button>

src/components/search/SearchPageContent.jsx

@@ -34,7 +34,10 @@ import useDisplay from '../../hooks/useDisplay';
 const SearchPageContent = (props) => {
   const { blok } = props;
   const { nbHits, areHitsSorted, nbSortedHits } = useStats();
-  const { status, started } = useInstantSearch();
+  const {
+    status,
+    results: { __isArtificial: isArtificial },
+  } = useInstantSearch();
   const [opened, setOpened] = useState(false);
   const { refine: clearFilters } = useClearRefinements();
   const { showDesktop, showMobile } = useDisplay();
@@ -49,9 +52,8 @@ const SearchPageContent = (props) => {
     return nbHits;
   }, [areHitsSorted, nbHits, nbSortedHits]);
 
-  const isLoading = status === 'loading' && started;
-  const isIdle = status === 'idle' && started;
-  const hasNoResults = resultCount === 0 && isIdle && started;
+  const isLoading = status === 'loading' && !isArtificial;
+  const hasNoResults = resultCount === 0 && !isArtificial;
 
   return (
     <SbEditable content={blok}>
@@ -252,7 +254,10 @@ const SearchPageContent = (props) => {
           </Grid>
 
           {hasNoResults && (
-            <Grid xs={12} className="su-rs-mt-7">
+            <Grid
+              xs={12}
+              className={cnb('su-rs-mt-7', { 'su-opacity-30': isLoading })}
+            >
               <SearchNoResults
                 heading={blok.noResultsHeading}
                 body={blok.noResultsBody}