Restored search hotkey for desktop.

Author: sarahboyce

.github/workflows/tests.yml

@@ -39,6 +39,9 @@ jobs:
               run: |
                   python -m pip install --upgrade pip setuptools
                   python -m pip install -r requirements/tests.txt
+            - name: Install playwright browsers
+              run: |
+                  python -m playwright install --with-deps
             - name: Set up databases
               run: |
                   PGPASSWORD="postgres" createuser -U postgres -d djangoproject --superuser -h localhost

Dockerfile

@@ -31,6 +31,10 @@ COPY ./requirements ./requirements
 RUN apt-get update \
     && apt-get install --assume-yes --no-install-recommends ${BUILD_DEPENDENCIES} \
     && python3 -m pip install --no-cache-dir -r ${REQ_FILE} \
+    && if [ "${REQ_FILE}" = "requirements/tests.txt" ]; then \
+        echo "Installing Playwright browsers..."; \
+        playwright install --with-deps; \
+    fi \
     && apt-get purge --assume-yes --auto-remove ${BUILD_DEPENDENCIES} \
     && apt-get distclean
 

Makefile

@@ -4,7 +4,7 @@ APP_LIST ?= accounts aggregator blog contact dashboard djangoproject docs founda
 SCSS = djangoproject/scss
 STATIC = djangoproject/static
 
-ci: compilemessages test
+ci: compilemessages collectstatics test
 	@python -m coverage report
 
 compilemessages:

djangoproject/static/js/djangoproject.js

@@ -67,17 +67,19 @@ document.querySelector('.menu-button').addEventListener('click', function () {
 
 // Update search input placeholder text based on the user's operating system
 (function () {
-  const el = document.getElementById('id_q');
+  const elements = document.querySelectorAll('[id="id_q"]');
 
-  if (!el) {
+  if (!elements.length) {
     return;
   }
 
-  const original_placeholder = el.getAttribute('placeholder');
   const is_mac = navigator.userAgent.indexOf('Mac') !== -1;
-  const new_value = `${original_placeholder} (${is_mac ? '⌘\u200aK' : 'Ctrl+K'})`;
 
-  el.setAttribute('placeholder', new_value);
+  elements.forEach((el) => {
+    const original_placeholder = el.getAttribute('placeholder');
+    const new_value = `${original_placeholder} (${is_mac ? '⌘\u200aK' : 'Ctrl+K'})`;
+    el.setAttribute('placeholder', new_value);
+  });
 })();
 
 // Focus, select, and scroll to search input when key combination is pressed
@@ -94,7 +96,13 @@ window.addEventListener('keydown', function (e) {
 
   e.preventDefault();
 
-  const el = document.querySelector('#id_q');
+  function querySelectorVisible(selector) {
+    return [...document.querySelectorAll(selector)].find(
+      (el) => el.offsetParent !== null,
+    );
+  }
+
+  const el = querySelectorVisible('#id_q');
 
   el.select();
   el.focus();

djangoproject/tests.py

@@ -1,12 +1,15 @@
+import os
 from http import HTTPStatus
 from io import StringIO
 
 from django.conf import settings
+from django.contrib.staticfiles.testing import StaticLiveServerTestCase
 from django.core.management import call_command
 from django.test import TestCase
 from django.urls import NoReverseMatch, get_resolver
 from django.utils.translation import activate, gettext as _
 from django_hosts.resolvers import reverse
+from playwright.sync_api import sync_playwright
 
 from docs.models import DocumentRelease, Release
 
@@ -211,3 +214,72 @@ def test_single_h1_per_page(self):
                     response = self.client.get(url)
                     self.assertEqual(response.status_code, 200)
                     self.assertContains(response, "<h1", count=1)
+
+
+class EndToEndTests(ReleaseMixin, StaticLiveServerTestCase):
+    @classmethod
+    def setUpClass(cls):
+        os.environ["DJANGO_ALLOW_ASYNC_UNSAFE"] = "true"
+        super().setUpClass()
+        cls.playwright = sync_playwright().start()
+        cls.browser = cls.playwright.chromium.launch()
+
+    @classmethod
+    def tearDownClass(cls):
+        super().tearDownClass()
+        cls.browser.close()
+        cls.playwright.stop()
+
+    def setUp(self):
+        self.setUpTestData()
+
+    def test_search_ctrl_k_hotkey_desktop(self):
+        page = self.browser.new_page()
+        page.goto(self.live_server_url)
+
+        mobile_search_bar, desktop_search_bar = page.query_selector_all("#id_q")
+        self.assertFalse(mobile_search_bar.is_visible())
+        self.assertTrue(desktop_search_bar.is_visible())
+        is_focused = page.evaluate(
+            "el => document.activeElement === el", desktop_search_bar
+        )
+        self.assertFalse(is_focused)
+
+        page.keyboard.press("Control+KeyK")
+        is_focused = page.evaluate(
+            "el => document.activeElement === el", desktop_search_bar
+        )
+        self.assertTrue(is_focused)
+        page.close()
+
+    def test_search_ctrl_k_hotkey_mobile(self):
+        page = self.browser.new_page(viewport={"width": 375, "height": 812})
+        page.goto(self.live_server_url)
+
+        mobile_search_bar, desktop_search_bar = page.query_selector_all("#id_q")
+        self.assertTrue(mobile_search_bar.is_visible())
+        self.assertFalse(desktop_search_bar.is_visible())
+        is_focused = page.evaluate(
+            "el => document.activeElement === el", mobile_search_bar
+        )
+        self.assertFalse(is_focused)
+
+        page.keyboard.press("Control+KeyK")
+        is_focused = page.evaluate(
+            "el => document.activeElement === el", mobile_search_bar
+        )
+        self.assertTrue(is_focused)
+        page.close()
+
+    def test_search_placeholder_mac_mode(self):
+        page = self.browser.new_page(user_agent="Mozilla/5.0 (Macintosh) AppleWebKit")
+        page.goto(self.live_server_url)
+
+        inputs = page.query_selector_all("#id_q")
+        self.assertEqual(len(inputs), 2)
+
+        for el in inputs:
+            placeholder = el.get_attribute("placeholder")
+            self.assertIn("⌘\u200aK", placeholder)
+
+        page.close()

requirements/tests.txt

@@ -1,4 +1,5 @@
 -r dev.txt
 coverage==7.11.3
+playwright==1.56.0
 requests-mock==1.12.1
 tblib>=3.0.0