From a786a0ce4e8ca21b516290a86d90857eb67c2b97 Mon Sep 17 00:00:00 2001
From: dojutsu-user <vaibhgupt199@gmail.com>
Date: Wed, 17 Jul 2019 15:45:35 +0530
Subject: [PATCH] add forward slash as hotkey for search ui

---
 sphinx_search/_static/js/rtd_sphinx_search.js | 18 +++++++++++++
 .../_static/js/rtd_sphinx_search.min.js       |  2 +-
 tests/test_ui.py                              | 25 +++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/sphinx_search/_static/js/rtd_sphinx_search.js b/sphinx_search/_static/js/rtd_sphinx_search.js
index f3b90ab..94e347c 100644
--- a/sphinx_search/_static/js/rtd_sphinx_search.js
+++ b/sphinx_search/_static/js/rtd_sphinx_search.js
@@ -2,6 +2,11 @@ const MAX_SUGGESTIONS = 50;
 const MAX_SECTION_RESULTS = 3;
 const MAX_SUBSTRING_LIMIT = 100;
 
+// Possible states of search modal
+const SEARCH_MODAL_OPENED = "opened";
+const SEARCH_MODAL_CLOSED = "closed";
+
+let SEARCH_MODAL_STATE = SEARCH_MODAL_CLOSED;
 let TOTAL_PAGE_RESULTS = 0;
 let SEARCH_QUERY = "";
 
@@ -603,6 +608,8 @@ const showSearchModal = custom_query => {
     // removes previous results (if there are any).
     removeResults();
 
+    SEARCH_MODAL_STATE = SEARCH_MODAL_OPENED;
+
     // removes the focus from the initial input field
     // which as already present in the docs.
     let search_bar = getInputField();
@@ -634,6 +641,8 @@ const removeSearchModal = () => {
     // removes previous results before closing
     removeResults();
 
+    SEARCH_MODAL_STATE = SEARCH_MODAL_CLOSED;
+
     // sets the value of input field to empty string and remove the focus.
     let search_outer_input = document.querySelector(".search__outer__input");
     if (search_outer_input !== null) {
@@ -786,6 +795,15 @@ window.addEventListener("DOMContentLoaded", evt => {
             }
         });
 
+        // open search modal if "forward slash" button is pressed
+        document.addEventListener("keydown", e => {
+            if (e.keyCode === 191) {
+                if (SEARCH_MODAL_STATE !== SEARCH_MODAL_OPENED) {
+                    showSearchModal();
+                }
+            }
+        });
+
         // if "rtd_search" is present in URL parameters,
         // then open the search modal and show the results
         // for the value of "rtd_search"
diff --git a/sphinx_search/_static/js/rtd_sphinx_search.min.js b/sphinx_search/_static/js/rtd_sphinx_search.min.js
index 9ec3b9b..0ff273e 100644
--- a/sphinx_search/_static/js/rtd_sphinx_search.min.js
+++ b/sphinx_search/_static/js/rtd_sphinx_search.min.js
@@ -1 +1 @@
-"use strict";var MAX_SUGGESTIONS=50,MAX_SECTION_RESULTS=3,MAX_SUBSTRING_LIMIT=100,TOTAL_PAGE_RESULTS=0,SEARCH_QUERY="",COUNT=0,debounce=function(r,n){function e(){var e=this,t=arguments;clearTimeout(i),i=setTimeout(function(){return r.apply(e,t)},n)}var i;return e.cancel=function(){clearTimeout(i),i=null},e},convertObjToUrlParams=function(t){for(var e=Object.keys(t).map(function(e){if(_is_string(e))return e+"="+encodeURI(t[e])}),r=[],n=0;n<e.length;++n)_is_string(e[n])&&r.push(e[n]);return 1===r.length?r[0]:r.join("&")},updateUrl=function(){var e=window.location.origin,t=window.location.pathname,r=$.getQueryParameters(),n=window.location.hash;_is_string(SEARCH_QUERY)?r.rtd_search=SEARCH_QUERY:delete r.rtd_search;var i=t+"?"+(convertObjToUrlParams(r)+n);"http"===e.substring(0,4)&&(i=e+i),window.history.pushState({},null,i)},createDomNode=function(e,t){var r=document.createElement(e);for(var n in t)r.setAttribute(n,t[n]);return r},_is_string=function(e){return"string"==typeof e&&0<e.length},_is_array=function(e){return!!(Array.isArray(e)&&0<e.length)},get_section_html=function(e,t){var r=e._source.title,n=e.highlight;getHighlightListData(n,"sections.title")&&(r=getHighlightListData(n,"sections.title")[0]);var i=[e._source.content.substring(0,MAX_SUBSTRING_LIMIT)+" ..."];if(getHighlightListData(n,"sections.content")){var a=getHighlightListData(n,"sections.content");i=[];for(var o=0;o<a.length&&o<MAX_SECTION_RESULTS;++o)i.push("... "+a[o]+" ...")}var s="".concat(t,"#").concat(e._source.id),c="hit__"+COUNT;return $u.template('<a href="<%= section_link %>">             <div class="outer_div_page_results" id="<%= section_id %>">                 <span class="search__result__subheading">                     <%= section_subheading %>                 </span>                 <% for (var i = 0; i < section_content.length; ++i) { %>                     <p class="search__result__content">                         <%= section_content[i] %>                     </p>                 <% } %>            </div>         </a>         <br class="br-for-hits">',{section_link:s,section_id:c,section_subheading:r,section_content:i})},getHighlightListData=function(e,t){return!!_is_array(e[t])&&e[t]},get_domain_html=function(e,t){var r="".concat(t,"#").concat(e._source.anchor),n=e._source.role_name,i=e._source.type_display,a=e._source.doc_display,o=e._source.display_name,s=e._source.name;if(void 0!==e.highlight&&null!==e.highlight){var c=e.highlight,l=getHighlightListData(c,"domains.name"),u=getHighlightListData(c,"domains.display_name"),_=getHighlightListData(c,"domains.type_display");l&&(s=l[0]),u&&(o=u[0]),_&&(i=_[0])}var d="";_is_string(i)&&(d+=i+" -- "),_is_string(s)&&(d+=s+" "),_is_string(a)&&(d+="-- in "+a);var h="";h=_is_string(o)?"("+n+") "+o:n;var v="hit__"+COUNT;return $u.template('<a href="<%= domain_link %>">             <div class="outer_div_page_results" id="<%= domain_id %>">                 <span class="search__result__subheading">                     <%= domain_subheading %>                 </span>                 <p class="search__result__content"><%= domain_content %></p>             </div>         </a>         <br class="br-for-hits">',{domain_link:r,domain_id:v,domain_content:d,domain_subheading:h})},generateSingleResult=function(e,t){var r=createDomNode("div"),n="".concat(e.link).concat(DOCUMENTATION_OPTIONS.FILE_SUFFIX)+"?highlight="+encodeURIComponent(SEARCH_QUERY),i=e.title;void 0!==e.highlight&&null!==e.highlight&&void 0!==e.highlight.title&&null!==e.highlight.title&&(i=e.highlight.title),t!==e.project&&(i+=" "+$u.template('<small class="rtd_ui_search_subtitle">                     (from project <%= project %>)                 </small>',{project:e.project})),i+="<br>",r.innerHTML+=$u.template('<a href="<%= page_link %>">             <h2 class="search__result__title">                 <%= page_title %>             </h2>         </a>',{page_link:n,page_title:i});for(var a=0;a<e.inner_hits.length;++a){var o=e.inner_hits[a].type;COUNT+=1;var s="";"sections"===o?s=get_section_html(e.inner_hits[a],n):"domains"===o&&(s=get_domain_html(e.inner_hits[a],n)),r.innerHTML+=s}return r},generateSuggestionsList=function(e,t){for(var r=createDomNode("div",{class:"search__result__box"}),n=0;n<TOTAL_PAGE_RESULTS;++n){var i=createDomNode("div",{class:"search__result__single"}),a=generateSingleResult(e.results[n],t);i.appendChild(a),r.appendChild(i)}return r},removeAllActive=function(){for(var t=document.querySelectorAll(".outer_div_page_results"),e=Object.keys(t).map(function(e){return t[e]}),r=1;r<=e.length;++r)e[r-1].classList.remove("active")},addActive=function(e){var t=document.querySelector("#hit__"+e);null!==t&&(t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"start"}))},getInputField=function(){var t;try{if(null==(t=document.querySelector("div[role='search'] input")))throw"'div[role='search'] input' not found"}catch(e){t=document.querySelector("input[name='q']")}return t},removeResults=function(){for(var e=document.querySelectorAll(".search__result__box"),t=0;t<e.length;++t)e[t].parentElement.removeChild(e[t])},getErrorDiv=function(e){var t=createDomNode("div",{class:"search__result__box",style:"color: black; min-width: 300px; font-weight: 700"});return t.innerHTML=e,t},fetchAndGenerateResults=function(e,i){var a=document.querySelector(".search__outer");removeResults();var t=createDomNode("div",{class:"search__result__box"});t.innerHTML="<strong>Searching ....</strong>",a.appendChild(t);var r=function(){$.ajax({url:e,crossDomain:!0,xhrFields:{withCredentials:!0},complete:function(e,t){if("success"===t||void 0!==e.responseJSON)if(0<e.responseJSON.results.length){TOTAL_PAGE_RESULTS=MAX_SUGGESTIONS<=e.responseJSON.results.length?MAX_SUGGESTIONS:e.responseJSON.results.length;var r=generateSuggestionsList(e.responseJSON,i);removeResults(),a.appendChild(r),a.addEventListener("mouseenter",function(e){removeAllActive()})}else{removeResults();var n=getErrorDiv("No Results Found");a.appendChild(n)}},error:function(e,t,r){removeResults();var n=getErrorDiv("Error Occurred. Please try again.");a.appendChild(n)}})};return r=debounce(r,500)},generateAndReturnInitialHtml=function(){return'<div class="search__outer__wrapper search__backdrop">             <div class="search__outer">                 <div class="search__cross" title="Close">                     \x3c!--?xml version="1.0" encoding="UTF-8"?--\x3e                     <svg class="search__cross__img" width="15px" height="15px" enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">                         <polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01"></polygon>                     </svg>                 </div>                 <input class="search__outer__input" placeholder="Search ...">                 <span class="bar"></span>             </div>         </div>'},showSearchModal=function(t){removeResults(),getInputField().blur(),$(".search__outer__wrapper").fadeIn(400,function(){var e=document.querySelector(".search__outer__input");null!==e&&(void 0!==t&&_is_string(t)?e.value=t:e.value="",e.focus())})},removeSearchModal=function(){removeResults();var e=document.querySelector(".search__outer__input");null!==e&&(e.value="",e.blur()),SEARCH_QUERY="",updateUrl(),$(".search__outer__wrapper").fadeOut(400)};window.addEventListener("DOMContentLoaded",function(e){if(void 0!==READTHEDOCS_DATA){var r=READTHEDOCS_DATA.project,n=READTHEDOCS_DATA.version,i=READTHEDOCS_DATA.language||"en",a=READTHEDOCS_DATA.api_host,t=generateAndReturnInitialHtml();document.body.innerHTML+=t;var o=document.querySelector(".search__outer__wrapper"),s=document.querySelector(".search__outer__input"),c=document.querySelector(".search__cross"),l=0,u=null,_=getInputField();_.addEventListener("focus",function(e){showSearchModal()}),s.addEventListener("input",function(e){SEARCH_QUERY=e.target.value,COUNT=0;var t=a+"/api/v2/docsearch/?"+convertObjToUrlParams({q:SEARCH_QUERY,project:r,version:n,language:i});"string"==typeof SEARCH_QUERY&&0<SEARCH_QUERY.length?(null!==u&&u.cancel(),(u=fetchAndGenerateResults(t,r))()):debounce(removeResults,600)(),updateUrl()}),s.addEventListener("keydown",function(e){if(40===e.keyCode&&(e.preventDefault(),COUNT<(l+=1)&&(l=1),removeAllActive(),addActive(l)),38===e.keyCode&&(e.preventDefault(),(l-=1)<1&&(l=COUNT),removeAllActive(),addActive(l)),13===e.keyCode){e.preventDefault();var t=document.querySelector(".outer_div_page_results.active");if(null!==t){var r=t.parentElement.href;window.location.href=r}else{var n=getInputField().parentElement;_.value=SEARCH_QUERY||"",n.submit()}}}),o.addEventListener("click",function(e){e.target.parentNode===document.body&&removeSearchModal()}),c.addEventListener("click",function(e){removeSearchModal()}),document.addEventListener("keydown",function(e){27===e.keyCode&&removeSearchModal()});var d=$.getQueryParameters();if(_is_array(d.rtd_search)){var h=decodeURIComponent(d.rtd_search);showSearchModal(h),s.value=h;var v=document.createEvent("Event");v.initEvent("input",!0,!0),s.dispatchEvent(v)}}});
\ No newline at end of file
+"use strict";var MAX_SUGGESTIONS=50,MAX_SECTION_RESULTS=3,MAX_SUBSTRING_LIMIT=100,SEARCH_MODAL_OPENED="opened",SEARCH_MODAL_CLOSED="closed",SEARCH_MODAL_STATE=SEARCH_MODAL_CLOSED,TOTAL_PAGE_RESULTS=0,SEARCH_QUERY="",COUNT=0,debounce=function(n,r){function e(){var e=this,t=arguments;clearTimeout(i),i=setTimeout(function(){return n.apply(e,t)},r)}var i;return e.cancel=function(){clearTimeout(i),i=null},e},convertObjToUrlParams=function(t){for(var e=Object.keys(t).map(function(e){if(_is_string(e))return e+"="+encodeURI(t[e])}),n=[],r=0;r<e.length;++r)_is_string(e[r])&&n.push(e[r]);return 1===n.length?n[0]:n.join("&")},updateUrl=function(){var e=window.location.origin,t=window.location.pathname,n=$.getQueryParameters(),r=window.location.hash;_is_string(SEARCH_QUERY)?n.rtd_search=SEARCH_QUERY:delete n.rtd_search;var i=t+"?"+(convertObjToUrlParams(n)+r);"http"===e.substring(0,4)&&(i=e+i),window.history.pushState({},null,i)},createDomNode=function(e,t){var n=document.createElement(e);for(var r in t)n.setAttribute(r,t[r]);return n},_is_string=function(e){return"string"==typeof e&&0<e.length},_is_array=function(e){return!!(Array.isArray(e)&&0<e.length)},get_section_html=function(e,t){var n=e._source.title,r=e.highlight;getHighlightListData(r,"sections.title")&&(n=getHighlightListData(r,"sections.title")[0]);var i=[e._source.content.substring(0,MAX_SUBSTRING_LIMIT)+" ..."];if(getHighlightListData(r,"sections.content")){var a=getHighlightListData(r,"sections.content");i=[];for(var o=0;o<a.length&&o<MAX_SECTION_RESULTS;++o)i.push("... "+a[o]+" ...")}var s="".concat(t,"#").concat(e._source.id),c="hit__"+COUNT;return $u.template('<a href="<%= section_link %>">             <div class="outer_div_page_results" id="<%= section_id %>">                 <span class="search__result__subheading">                     <%= section_subheading %>                 </span>                 <% for (var i = 0; i < section_content.length; ++i) { %>                     <p class="search__result__content">                         <%= section_content[i] %>                     </p>                 <% } %>            </div>         </a>         <br class="br-for-hits">',{section_link:s,section_id:c,section_subheading:n,section_content:i})},getHighlightListData=function(e,t){return!!_is_array(e[t])&&e[t]},get_domain_html=function(e,t){var n="".concat(t,"#").concat(e._source.anchor),r=e._source.role_name,i=e._source.type_display,a=e._source.doc_display,o=e._source.display_name,s=e._source.name;if(void 0!==e.highlight&&null!==e.highlight){var c=e.highlight,l=getHighlightListData(c,"domains.name"),_=getHighlightListData(c,"domains.display_name"),u=getHighlightListData(c,"domains.type_display");l&&(s=l[0]),_&&(o=_[0]),u&&(i=u[0])}var d="";_is_string(i)&&(d+=i+" -- "),_is_string(s)&&(d+=s+" "),_is_string(a)&&(d+="-- in "+a);var h="";h=_is_string(o)?"("+r+") "+o:r;var v="hit__"+COUNT;return $u.template('<a href="<%= domain_link %>">             <div class="outer_div_page_results" id="<%= domain_id %>">                 <span class="search__result__subheading">                     <%= domain_subheading %>                 </span>                 <p class="search__result__content"><%= domain_content %></p>             </div>         </a>         <br class="br-for-hits">',{domain_link:n,domain_id:v,domain_content:d,domain_subheading:h})},generateSingleResult=function(e,t){var n=createDomNode("div"),r="".concat(e.link).concat(DOCUMENTATION_OPTIONS.FILE_SUFFIX)+"?highlight="+encodeURIComponent(SEARCH_QUERY),i=e.title;void 0!==e.highlight&&null!==e.highlight&&void 0!==e.highlight.title&&null!==e.highlight.title&&(i=e.highlight.title),t!==e.project&&(i+=" "+$u.template('<small class="rtd_ui_search_subtitle">                     (from project <%= project %>)                 </small>',{project:e.project})),i+="<br>",n.innerHTML+=$u.template('<a href="<%= page_link %>">             <h2 class="search__result__title">                 <%= page_title %>             </h2>         </a>',{page_link:r,page_title:i});for(var a=0;a<e.inner_hits.length;++a){var o=e.inner_hits[a].type;COUNT+=1;var s="";"sections"===o?s=get_section_html(e.inner_hits[a],r):"domains"===o&&(s=get_domain_html(e.inner_hits[a],r)),n.innerHTML+=s}return n},generateSuggestionsList=function(e,t){for(var n=createDomNode("div",{class:"search__result__box"}),r=0;r<TOTAL_PAGE_RESULTS;++r){var i=createDomNode("div",{class:"search__result__single"}),a=generateSingleResult(e.results[r],t);i.appendChild(a),n.appendChild(i)}return n},removeAllActive=function(){for(var t=document.querySelectorAll(".outer_div_page_results"),e=Object.keys(t).map(function(e){return t[e]}),n=1;n<=e.length;++n)e[n-1].classList.remove("active")},addActive=function(e){var t=document.querySelector("#hit__"+e);null!==t&&(t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"start"}))},getInputField=function(){var t;try{if(null==(t=document.querySelector("div[role='search'] input")))throw"'div[role='search'] input' not found"}catch(e){t=document.querySelector("input[name='q']")}return t},removeResults=function(){for(var e=document.querySelectorAll(".search__result__box"),t=0;t<e.length;++t)e[t].parentElement.removeChild(e[t])},getErrorDiv=function(e){var t=createDomNode("div",{class:"search__result__box",style:"color: black; min-width: 300px; font-weight: 700"});return t.innerHTML=e,t},fetchAndGenerateResults=function(e,i){var a=document.querySelector(".search__outer");removeResults();var t=createDomNode("div",{class:"search__result__box"});t.innerHTML="<strong>Searching ....</strong>",a.appendChild(t);var n=function(){$.ajax({url:e,crossDomain:!0,xhrFields:{withCredentials:!0},complete:function(e,t){if("success"===t||void 0!==e.responseJSON)if(0<e.responseJSON.results.length){TOTAL_PAGE_RESULTS=MAX_SUGGESTIONS<=e.responseJSON.results.length?MAX_SUGGESTIONS:e.responseJSON.results.length;var n=generateSuggestionsList(e.responseJSON,i);removeResults(),a.appendChild(n),a.addEventListener("mouseenter",function(e){removeAllActive()})}else{removeResults();var r=getErrorDiv("No Results Found");a.appendChild(r)}},error:function(e,t,n){removeResults();var r=getErrorDiv("Error Occurred. Please try again.");a.appendChild(r)}})};return n=debounce(n,500)},generateAndReturnInitialHtml=function(){return'<div class="search__outer__wrapper search__backdrop">             <div class="search__outer">                 <div class="search__cross" title="Close">                     \x3c!--?xml version="1.0" encoding="UTF-8"?--\x3e                     <svg class="search__cross__img" width="15px" height="15px" enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">                         <polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01"></polygon>                     </svg>                 </div>                 <input class="search__outer__input" placeholder="Search ...">                 <span class="bar"></span>             </div>         </div>'},showSearchModal=function(t){removeResults(),SEARCH_MODAL_STATE=SEARCH_MODAL_OPENED,getInputField().blur(),$(".search__outer__wrapper").fadeIn(400,function(){var e=document.querySelector(".search__outer__input");null!==e&&(void 0!==t&&_is_string(t)?e.value=t:e.value="",e.focus())})},removeSearchModal=function(){removeResults(),SEARCH_MODAL_STATE=SEARCH_MODAL_CLOSED;var e=document.querySelector(".search__outer__input");null!==e&&(e.value="",e.blur()),SEARCH_QUERY="",updateUrl(),$(".search__outer__wrapper").fadeOut(400)};window.addEventListener("DOMContentLoaded",function(e){if(void 0!==READTHEDOCS_DATA){var n=READTHEDOCS_DATA.project,r=READTHEDOCS_DATA.version,i=READTHEDOCS_DATA.language||"en",a=READTHEDOCS_DATA.api_host,t=generateAndReturnInitialHtml();document.body.innerHTML+=t;var o=document.querySelector(".search__outer__wrapper"),s=document.querySelector(".search__outer__input"),c=document.querySelector(".search__cross"),l=0,_=null,u=getInputField();u.addEventListener("focus",function(e){showSearchModal()}),s.addEventListener("input",function(e){SEARCH_QUERY=e.target.value,COUNT=0;var t=a+"/api/v2/docsearch/?"+convertObjToUrlParams({q:SEARCH_QUERY,project:n,version:r,language:i});"string"==typeof SEARCH_QUERY&&0<SEARCH_QUERY.length?(null!==_&&_.cancel(),(_=fetchAndGenerateResults(t,n))()):debounce(removeResults,600)(),updateUrl()}),s.addEventListener("keydown",function(e){if(40===e.keyCode&&(e.preventDefault(),COUNT<(l+=1)&&(l=1),removeAllActive(),addActive(l)),38===e.keyCode&&(e.preventDefault(),(l-=1)<1&&(l=COUNT),removeAllActive(),addActive(l)),13===e.keyCode){e.preventDefault();var t=document.querySelector(".outer_div_page_results.active");if(null!==t){var n=t.parentElement.href;window.location.href=n}else{var r=getInputField().parentElement;u.value=SEARCH_QUERY||"",r.submit()}}}),o.addEventListener("click",function(e){e.target.parentNode===document.body&&removeSearchModal()}),c.addEventListener("click",function(e){removeSearchModal()}),document.addEventListener("keydown",function(e){27===e.keyCode&&removeSearchModal()}),document.addEventListener("keydown",function(e){191===e.keyCode&&SEARCH_MODAL_STATE!==SEARCH_MODAL_OPENED&&showSearchModal()});var d=$.getQueryParameters();if(_is_array(d.rtd_search)){var h=decodeURIComponent(d.rtd_search);showSearchModal(h),s.value=h;var v=document.createEvent("Event");v.initEvent("input",!0,!0),s.dispatchEvent(v)}}});
\ No newline at end of file
diff --git a/tests/test_ui.py b/tests/test_ui.py
index 292272e..e5dfb74 100644
--- a/tests/test_ui.py
+++ b/tests/test_ui.py
@@ -125,6 +125,31 @@ def test_opening_of_search_modal(selenium, app, status, warning):
         open_search_modal(selenium)
 
 
+@pytest.mark.sphinx(srcdir=TEST_DOCS_SRC)
+def test_open_search_modal_when_forward_slash_button_is_pressed(selenium, app, status, warning):
+    """Test if the search modal is opening correctly."""
+    app.build()
+    path = app.outdir / 'index.html'
+
+    with InjectJsManager(path, SCRIPT_TAG) as _:
+        selenium.get(f'file://{path}')
+
+        search_outer_wrapper = selenium.find_element_by_class_name(
+            'search__outer__wrapper'
+        )
+
+        assert (
+            search_outer_wrapper.is_displayed() == False
+        ), 'search__outer__wrapper should not be displayed on page load'
+
+        body = selenium.find_element_by_css_selector('body')
+        body.send_keys('/')
+
+        assert (
+            search_outer_wrapper.is_displayed() == True
+        ), 'search__outer__wrapper should be displayed when forward slash button is pressed'
+
+
 @pytest.mark.sphinx(srcdir=TEST_DOCS_SRC)
 def test_focussing_of_input_field(selenium, app, status, warning):
     """Test if the input field in search modal is focussed after opening the modal."""