🧪 add playwright test suite

.github/workflows/ui_test.yml

@@ -0,0 +1,56 @@
+name: Build and run UI test
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build and run aodn portal
+        uses: addnab/docker-run-action@v3
+        with:
+          image: node:20
+          options: |
+            -v ${{ github.workspace }}:/app
+            -d -p 5173:5173 --name aodn_portal_dev
+          run: |
+            cd app
+            : # set-version will always download the latest version of yarn
+            yarn policies set-version 4.3.0
+            yarn install --immutable
+            yarn dev --host 0.0.0.0
+
+      - name: Wait for server to start
+        run: |
+          timeout=180
+          interval=1
+          elapsed=0
+          while [[ "$(curl -s -o /dev/null -w ''%{http_code}'' http://0.0.0.0:5173/)" != "200" && $elapsed -lt $timeout ]]; do
+            sleep $interval
+            elapsed=$((elapsed + interval))
+          done
+          if [[ $elapsed -ge $timeout ]]; then
+            echo "Server did not start within $timeout seconds."
+            exit 1
+          fi
+
+      - name: Build and run playwright tests
+        uses: addnab/docker-run-action@v3
+        with:
+          image: mcr.microsoft.com/playwright/python:v1.43.0-jammy
+          docker_network: container:aodn_portal_dev
+          options: |
+            -v ${{ github.workspace }}/playwright:/app
+            -e POETRY_VIRTUALENVS_CREATE=false
+          run: |
+            python3 -m pip install poetry
+            cd app
+            python3 -m poetry install --no-root --no-interaction --no-ansi
+            python3 -m poetry run pytest

playwright/.gitignore

@@ -0,0 +1,163 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Custom Specifications
+#  Project specific gitignores are listed here

playwright/.pre-commit-config.yaml

@@ -0,0 +1,45 @@
+fail_fast: false
+default_stages: [commit, manual]
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.5.0
+    hooks:
+      - id: check-ast
+      - id: check-merge-conflict
+        args: ["--assume-in-merge"]
+      - id: debug-statements
+        name: pdb_debug-statements
+      - id: trailing-whitespace
+        types: [python]
+      - id: end-of-file-fixer
+        types: [python]
+      - id: check-yaml
+      - id: check-added-large-files
+
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    # Ruff version.
+    rev: v0.1.3
+    hooks:
+      - id: ruff
+        args: [--fix, --exit-non-zero-on-fix]
+      # Run the Ruff formatter.
+      - id: ruff-format
+
+  - repo: https://github.com/pre-commit/mirrors-mypy
+    rev: v1.8.0
+    hooks:
+      - id: mypy
+        args:
+          [
+            --disallow-untyped-defs,
+            --disallow-incomplete-defs,
+            --disallow-untyped-calls,
+          ]
+        additional_dependencies:
+          [
+            pytest==8.0.0,
+            python-dotenv==1.0.1,
+            pytest-playwright==0.4.4,
+            dynaconf==3.2.4,
+            types-requests==2.31.0.20240218,
+          ]

playwright/config.py

@@ -0,0 +1,9 @@
+from dynaconf import Dynaconf  # type: ignore
+
+settings = Dynaconf(
+    envvar_prefix='AODN',  # variables exported as `AODN_FOO=bar` becomes `settings.FOO == 'bar'`
+    settings_files=[
+        'settings.toml',  # settings file
+    ],
+    environments=True,  # Enable layered environments (sections on settings.toml file for development, production, etc.)
+)

playwright/mocks/api/autocomplete.py

@@ -0,0 +1,57 @@
+import json
+from http import HTTPStatus
+from typing import Dict, List, Union
+from urllib.parse import parse_qs, urlparse
+
+from playwright.sync_api import Route
+
+
+class SuggesterOptions:
+    def __init__(
+        self, category_suggestions: List[str], record_titles: List[str]
+    ):
+        self.category_suggestions = category_suggestions
+        self.record_titles = record_titles
+
+    def filter_items(self, items: List[str], keyword: str) -> List[str]:
+        keyword_lower = keyword.lower()
+        return [item for item in items if keyword_lower in item.lower()]
+
+    def get_suggestions(
+        self, input: str
+    ) -> Dict[str, Union[List[str], Dict[str, List[str]]]]:
+        categories = self.filter_items(self.category_suggestions, input)
+        titles = self.filter_items(self.record_titles, input)
+        return {
+            'category_suggestions': categories,
+            'record_suggestions': {'titles': titles},
+        }
+
+
+def load_suggester_options(filename: str) -> SuggesterOptions:
+    with open(f'mocks/mock_data/{filename}', 'r') as file:
+        data = json.load(file)
+    return SuggesterOptions(
+        category_suggestions=data['category_suggestions'],
+        record_titles=data['record_suggestions']['titles'],
+    )
+
+
+def handle_search_autocomplete_api(route: Route) -> None:
+    suggester_options = load_suggester_options('suggester_options.json')
+
+    query_string = urlparse(route.request.url).query
+    search_params = parse_qs(query_string)
+
+    inputs = search_params.get('input', [])
+    if len(inputs) != 1:
+        route.fulfill(
+            status=HTTPStatus.BAD_REQUEST,
+            json={'error': f'Found {len(inputs)} input(s), but expected 1'},
+        )
+    else:
+        input_value = inputs[0]
+        # filters_value = search_params.get('filter')
+        suggestions = suggester_options.get_suggestions(input_value)
+
+        route.fulfill(json=suggestions)

playwright/mocks/api/categories.py

@@ -0,0 +1,9 @@
+import json
+
+from playwright.sync_api import Route
+
+
+def handle_categories_api(route: Route) -> None:
+    with open('mocks/mock_data/categories.json') as f:
+        json_data = json.load(f)
+    route.fulfill(json=json_data)

playwright/mocks/api/collections.py

@@ -0,0 +1,9 @@
+import json
+
+from playwright.sync_api import Route
+
+
+def handle_collections_api(route: Route) -> None:
+    with open('mocks/mock_data/collection_wave.json') as f:
+        json_data = json.load(f)
+    route.fulfill(json=json_data)