Add selenium tests

.github/workflows/test.yml

@@ -3,7 +3,11 @@ name: test
 
 on:
   pull_request:
-    types: [opened, edited, reopened, synchronize]
+    branches:
+      - main
+  push:
+    branches:
+      - main
 
 jobs:
   test:
@@ -32,5 +36,10 @@ jobs:
       - run: poetry install --no-interaction --no-root
         if: steps.cache-deps.outputs.cache-hit != 'true'
       - run: poetry install --no-interaction
-      - name: test with coverage
-        run: poetry run pytest --cov
+      - name: run unit tests with coverage
+        id: fast-tests
+        run: poetry run pytest --cov -m 'not slow'
+      - name: run selenium tests
+        id: slow-tests
+        if: steps.fast-tests.outcome == 'success'
+        run: poetry run pytest -m 'slow'

.gitignore

@@ -164,3 +164,5 @@ cython_debug/
 staticfiles/
 
 node_modules
+
+tmp/

README.md

@@ -15,3 +15,8 @@ Run `npm install` and then `npm run sass` to compile the stylesheets.
 /search
 
 ![Screenshot of the service showing the search page](image.png)
+
+## Testing
+
+- Unit tests: `pytest -m 'not slow'`
+- Selenium tests: `pytest -m 'slow'`

core/settings.py

@@ -125,3 +125,11 @@
 
 # session
 SESSION_ENGINE = "django.contrib.sessions.backends.signed_cookies"
+
+# Not actually used - Just required for LiveServerTestCase
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": ":memory:",
+    }
+}

home/forms/search.py

@@ -1,7 +1,8 @@
 from copy import deepcopy
-from django import forms
 from urllib.parse import urlencode
 
+from django import forms
+
 
 def get_domain_choices():
     """Make API call to obtain domain choices"""
@@ -31,7 +32,9 @@ class SearchForm(forms.Form):
         max_length=100,
         strip=False,
         required=False,
-        widget=forms.TextInput(attrs={"class": "govuk-input search-input"}),
+        widget=forms.TextInput(
+            attrs={"class": "govuk-input search-input", "aria-label": "Search"}
+        ),
     )
     domains = forms.MultipleChoiceField(
         choices=get_domain_choices,

pyproject.toml

@@ -24,6 +24,7 @@ pytest-cov = "^4.1.0"
 [tool.poetry.group.dev.dependencies]
 black = "^23.12.1"
 pre-commit = "^3.6.0"
+selenium = ">=4.8.0"
 
 [build-system]
 requires = ["poetry-core"]
@@ -32,3 +33,4 @@ build-backend = "poetry.core.masonry.api"
 [tool.pytest.ini_options]
 DJANGO_SETTINGS_MODULE = "core.settings"
 python_files = ["test_*.py", "*_test.py", "testing/python/*.py"]
+markers = ["slow: marks tests as slow (deselect with '-m \"not slow\"')"]

templates/base/base.html

@@ -13,7 +13,7 @@
 {% include "base/navigation.html" %}
 
 <div class="govuk-width-container app-width-container">
-  <div class="govuk-phase-banner">
+  <div class="govuk-phase-banner" role="region">
     <p class="govuk-phase-banner__content">
       <strong class="govuk-tag govuk-phase-banner__content__tag">Alpha
       </strong>

templates/home.html

@@ -4,8 +4,7 @@
 {% block content %}
 
   <a onclick="history.back()" class="govuk-back-link">Back</a>
-  <main class="govuk-main-wrapper app-main-class" id="main-content" role="main">
-    <h1 class="govuk-heading-xl">Customised page template</h1>
-  </main>
+  <h1 class="govuk-heading-xl">Customised page template</h1>
+
 
 {% endblock content %}

templates/partial/filter.html

@@ -31,14 +31,14 @@ <h3 class="govuk-heading-s govuk-!-margin-bottom-0">Domain</h3>
               <input type="hidden" name="clear_label" value="">
               {% for label, href in label_clear_href.items %}
                 <li><a class="moj-filter__tag govuk-link" href="{{ href }}">
-                  {{label}}<span class="govuk-visually-hidden">Remove this filter</span>
+                  <span data-test-id="selected-domain-label">{{label}}</span> <span class="govuk-visually-hidden">Remove this filter</span>
                 </a></li>
               {% endfor %}
             </ul>
           {% endif %}
         </div>
         <div class="moj-filter__options">
-            <button form="searchform" class="govuk-button" data-module="govuk-button" data-test-id="submit-button">
+            <button form="searchform" class="govuk-button" data-module="govuk-button" data-test-id="apply-filters">
               Apply filters
             </button>
             <div class="govuk-form-group">
@@ -48,9 +48,7 @@ <h3 class="govuk-heading-s govuk-!-margin-bottom-0">Domain</h3>
                   {% for domain_option in form.domains %}
                       <div class="govuk-checkboxes__item">
                         {{ domain_option.tag}}
-                        <label class="govuk-label govuk-checkboxes__label" for="{{ domain_option.id_for_label }}">
-                          {{domain_option.choice_label}}
-                        </label>
+                        <label class="govuk-label govuk-checkboxes__label" for="{{ domain_option.id_for_label }}">{{domain_option.choice_label}}</label>
                       </div>
                   {% endfor %}
                 </div>

templates/partial/pagination.html

@@ -9,6 +9,7 @@
         <span class="govuk-pagination__link-title">Previous<span class="govuk-visually-hidden"> page</span></span></a>
     </div>
     {% endif %}
+    <ul class="govuk-pagination__list">
     {% for p in page_range %}
         {% if paginator.ELLIPSIS != p %}
             {% if page_obj.number == p %}
@@ -20,11 +21,11 @@
                     {{ p }}
                 </a>
                 </li>
-            </ul>
         {% else %}
             <li class="govuk-pagination__item govuk-pagination__item--ellipses">&ctdot;</li>
         {% endif %}
     {% endfor %}
+    </ul>
     {% if page_obj.has_next %}
     <div class="govuk-pagination__next">
       <a class="govuk-link govuk-pagination__link" href="{% url 'home:pagination' page=page_obj.next_page_number %}{% query_string clear_label=None clear_filter=None value=None new=None %}" rel="next"> <span class="govuk-pagination__link-title">Next<span class="govuk-visually-hidden"> page</span></span> <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">

templates/partial/search_result.html

@@ -1,8 +1,9 @@
 {% load markdown %}
 {% load humanize %}
+<div id="search-results">
 {% for result in results %}
 
-<div class="govuk-grid-row" id="search_result">
+<div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       <h3 class="govuk-heading-m govuk-!-margin-bottom-2">
           <a href="{% url 'home:details' id=result.id %}" class="govuk-link">{{result.name}}</a>
@@ -17,7 +18,7 @@ <h3 class="govuk-heading-m govuk-!-margin-bottom-2">
           {% endif %}
       </h3>
       {% if result.description %}
-      <div class="govuk-body-m">{{result.description|markdown}}</div>
+      <div class="govuk-body-m">{{result.metadata.search_summary|markdown}}</div>
       {% endif %}
 
 
@@ -51,4 +52,5 @@ <h3 class="govuk-heading-m govuk-!-margin-bottom-2">
         </div>
     </div>
   </div>
-{%endfor%}
+{%endfor%}
+</div>

templates/partial/sort.html

@@ -7,9 +7,7 @@
         {% for radio in form.sort %}
                 <div class="govuk-radios__item">
                     {{radio.tag}}
-                    <label class="govuk-label govuk-radios__label" for="{{ radio.id_for_label }}">
-                        {{radio.choice_label}}
-                    </label>
+                    <label class="govuk-label govuk-radios__label" for="{{ radio.id_for_label }}">{{radio.choice_label}}</label>
                 </div>
             {% endfor %}
         </div>

templates/search.html

@@ -13,7 +13,7 @@ <h1 class="govuk-heading-xl">Find MOJ Data</h1>
             {{ form.query }}
             <button class="search-button" type="submit">
               <svg aria-hidden="true" class="search-icon" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="40" height="40"><path d="M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z" fill="currentColor"></path>
-              </svg><span class="govuk-visually-hidden">Search</span>
+              </svg><label class="govuk-visually-hidden">Search</span>
             </button>
           </div>
         </div>
@@ -23,7 +23,7 @@ <h1 class="govuk-heading-xl">Find MOJ Data</h1>
 <div class="govuk-grid-row">
   {% include "partial/filter.html" %}
   <div class="govuk-grid-column-two-thirds">
-    <h2 class="govuk-heading-l govuk-!-display-inline-block">{{total_results|intcomma}} Results</h2>
+    <h2 class="govuk-heading-l govuk-!-display-inline-block" id="result-count">{{total_results|intcomma}} Results</h2>
       {% include "partial/sort.html" %}
       {% include "partial/search_result.html" %}
       {% include "partial/pagination.html" %}

tests/conftest.py

@@ -12,9 +12,10 @@
 )
 from django.test import Client
 from faker import Faker
-from home.service.search import SearchService
-from home.service.details import DetailsService
+
 from home.forms.search import SearchForm
+from home.service.details import DetailsService
+from home.service.search import SearchService
 
 fake = Faker()