freeCodeCamp · raisedadead · Feb 10, 2021 · Feb 10, 2021 · Feb 10, 2021 · Feb 10, 2021
@@ -356,8 +356,6 @@
     "heres-a-quote": "我们未找到你搜索的信息。这里分享一句名言："
   },
   "search": {
-    "index-name": "news-zh",
-    "search-page-url": "https://chinese.freecodecamp.org/news/search/?query={{searchQuery}}",
     "label": "搜索",
     "placeholder": "搜索 300+ 篇教程",
     "see-results": "查看 {{searchQuery}} 的所有结果",

@@ -356,8 +356,6 @@
     "heres-a-quote": "We couldn't find what you were looking for, but here is a quote:"
   },
   "search": {
-    "index-name": "news",
-    "search-page-url": "https://www.freecodecamp.org/news/search/?query={{searchQuery}}",
     "label": "Search",
     "placeholder": "Search 6,000+ tutorials",
     "see-results": "See all results for {{searchQuery}}",

@@ -356,8 +356,6 @@
     "heres-a-quote": "No pudimos encontrar lo que estabas buscando, pero aquí hay una cita:"
   },
   "search": {
-    "index-name": "noticias",
-    "search-page-url": "https://www.freecodecamp.org/espanol/news/search/?query={{searchQuery}}",
     "label": "Buscar",
     "placeholder": "Buscar en más de 6.000 tutoriales",
     "see-results": "Ver todos los resultados de {{searchQuery}}",

@@ -426,9 +426,6 @@ const translationsSchema = {
       "We couldn't find what you were looking for, but here is a quote:"
   },
   search: {
-    'index-name': 'news',
-    'search-page-url':
-      'https://www.freecodecamp.org/news/search/?query={{searchQuery}}',
     label: 'Search',
     placeholder: 'Search 6,000+ tutorials',
     'see-results': 'See all results for {{searchQuery}}',

@@ -7,7 +7,7 @@ import qs from 'query-string';
 import { navigate } from 'gatsby';
 import Media from 'react-responsive';
 import algoliasearch from 'algoliasearch/lite';
-import { withTranslation } from 'react-i18next';
+import { newsIndex } from '../../utils/algolia-locale-setup';
 
 import {
   isSearchDropdownEnabledSelector,
@@ -32,7 +32,6 @@ const propTypes = {
   isDropdownEnabled: PropTypes.bool,
   location: PropTypes.object.isRequired,
   query: PropTypes.string,
-  t: PropTypes.func.isRequired,
   toggleSearchDropdown: PropTypes.func.isRequired,
   updateSearchQuery: PropTypes.func.isRequired
 };
@@ -126,11 +125,11 @@ class InstantSearchRoot extends Component {
   };
 
   render() {
-    const { query, t } = this.props;
+    const { query } = this.props;
     const MAX_MOBILE_HEIGHT = 768;
     return (
       <InstantSearch
-        indexName={t('search.index-name')}
+        indexName={newsIndex}
         onSearchStateChange={this.onSearchStateChange}
         searchClient={searchClient}
         searchState={{ query }}
@@ -159,7 +158,7 @@ InstantSearchRoot.propTypes = propTypes;
 const InstantSearchRootConnected = connect(
   mapStateToProps,
   mapDispatchToProps
-)(withTranslation()(InstantSearchRoot));
+)(InstantSearchRoot);
 
 const WithInstantSearch = ({ children }) => (
   <Location>

@@ -7,6 +7,7 @@ import { SearchBox } from 'react-instantsearch-dom';
 import { HotKeys, ObserveKeys } from 'react-hotkeys';
 import { isEqual } from 'lodash';
 import { withTranslation } from 'react-i18next';
+import { searchPageUrl } from '../../../utils/algolia-locale-setup';
 
 import {
   isSearchDropdownEnabledSelector,
@@ -93,7 +94,7 @@ export class SearchBar extends Component {
 
   handleSearch(e, query) {
     e.preventDefault();
-    const { toggleSearchDropdown, updateSearchQuery, t } = this.props;
+    const { toggleSearchDropdown, updateSearchQuery } = this.props;
     const { index, hits } = this.state;
     const selectedHit = hits[index];
 
@@ -116,9 +117,7 @@ export class SearchBar extends Component {
     // are hits besides the footer
     return query && hits.length > 1
       ? window.location.assign(
-          t('search.search-page-url', {
-            searchQuery: encodeURIComponent(query)
-          })
+          `${searchPageUrl}?query=${encodeURIComponent(query)}`
         )
       : false;
   }

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connectStateResults, connectHits } from 'react-instantsearch-dom';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'react-i18next';
+import { searchPageUrl } from '../../../utils/algolia-locale-setup';
 
 import Suggestion from './SearchSuggestion';
 import NoHitsSuggestion from './NoHitsSuggestion';
@@ -25,9 +26,7 @@ const CustomHits = connectHits(
         query: searchQuery,
         url: noHits
           ? null
-          : t('search.search-page-url', {
-              searchQuery: encodeURIComponent(searchQuery)
-            }),
+          : `${searchPageUrl}?query=${encodeURIComponent(searchQuery)}`,
         title: t('search.see-results', { searchQuery: searchQuery }),
         _highlightResult: {
           query: {

@@ -0,0 +1,19 @@
+import { clientLocale } from '../../../config/env.json';
+
+const algoliaIndices = {
+  english: {
+    name: 'news',
+    searchPage: 'https://www.freecodecamp.org/news/search/'
+  },
+  espanol: {
+    name: 'news-es',
+    searchPage: 'https://www.freecodecamp.org/espanol/news/search/'
+  },
+  chinese: {
+    name: 'news-zh',
+    searchPage: 'https://chinese.freecodecamp.org/news/search/'
+  }
+};
+
+export const newsIndex = algoliaIndices[clientLocale].name;
+export const searchPageUrl = algoliaIndices[clientLocale].searchPage;
@@ -57,22 +57,6 @@ describe('Navbar', () => {
     }
   );
 
-  it('Should be able to search on navbar search field', () => {
-    cy.get('.ais-SearchBox').within(() => {
-      cy.get('input').type('Learn');
-    });
-
-    cy.get('.ais-Hits-list')
-      .children()
-      .should('to.have.length.of.at.least', 1);
-
-    cy.get('.ais-SearchBox').within(() => {
-      cy.get('input').clear();
-    });
-
-    cy.get('div.ais-Hits').should('not.exist');
-  });
-
   it('Should have a "Sign in" button', () => {
     cy.contains("[data-test-label='landing-small-cta']", 'Sign in');
   });

@@ -0,0 +1,87 @@
+/* global cy */
+
+const search = query => {
+  cy.get('.ais-SearchBox').within(() => {
+    cy.get('input').type(query);
+  });
+
+  cy.wait(300);
+};
+
+const clear = () => {
+  cy.get('.ais-SearchBox').within(() => {
+    cy.get('input').clear();
+  });
+};
+
+describe('Search bar', () => {
+  before(() => {
+    cy.visit('/');
+  });
+
+  beforeEach(() => {
+    clear();
+  });
+
+  it('Should render properly', () => {
+    cy.get('.ais-SearchBox').should('be.visible');
+  });
+
+  it('Should accept input and display hits', () => {
+    search('freeCodeCamp');
+
+    cy.get('.ais-Hits-list')
+      .children()
+      .should('to.have.length.of.at.least', 1);
+  });
+
+  it('Should clear hits when input is cleared', () => {
+    search('freeCodeCamp');
+
+    cy.get('.ais-Hits-list')
+      .children()
+      .should('to.have.length.of.at.least', 1);
+
+    clear();
+
+    cy.get('div.ais-Hits').should('not.exist');
+  });
+
+  it('Should show up to 8 hits when height >= 768px', () => {
+    cy.viewport(1300, 768);
+
+    search('freeCodeCamp');
+
+    cy.get('.ais-Hits-list')
+      .children()
+      .should('to.have.length.of', 8);
+  });
+
+  it('Should show up to 5 hits when height < 768px', () => {
+    cy.viewport(1300, 767);
+
+    search('freeCodeCamp');
+
+    cy.get('.ais-Hits-list')
+      .children()
+      .should('to.have.length.of', 5);
+  });
+
+  it('Should show no hits for queries that do not exist in the Algolia index', () => {
+    search('testtttt');
+
+    cy.get('.ais-Hits-list')
+      .children()
+      .should('to.have.length.of', 0);
+
+    cy.contains('No tutorials found');
+  });
+
+  it('Should not redirect to the News search page if there are no hits', () => {
+    search('testtttt');
+
+    cy.get('.ais-SearchBox-form').submit();
+
+    cy.url('/');
+  });
+});