WebUI E2E Tests

.github/workflows/unittests.yml

@@ -36,7 +36,7 @@ jobs:
         # Ignore E231, as it is raising warnings with auto-generated code.
         flake8 . --count --max-complexity=10 --max-line-length=127 --ignore F821,W503,E231 --statistics --exclude=examples/,"*/migrations/*",cli/medperf/templates/
     - name: Test with pytest
-      working-directory: ./cli
+      working-directory: ./cli/medperf/tests
       run: |
         pytest
     - name: Set server environment vars

.github/workflows/webui-ci.yml

@@ -0,0 +1,53 @@
+name: WebUI Integration workflow
+
+on: pull_request
+
+jobs:
+  setup:
+    name: webui-integration-test
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Python 3.9
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.9'
+
+    - name: Install dependencies
+      working-directory: .
+      run: |
+        python -m pip install --upgrade pip
+        pip install -e cli/
+        pip install -r cli/test-requirements.txt
+        pip install -r server/requirements.txt
+        pip install -r server/test-requirements.txt
+
+    - name: Set server environment vars
+      working-directory: ./server
+      run: cp .env.local.local-auth .env
+
+    - name: Run postgresql server in background
+      working-directory: ./server
+      run: sh run_dev_postgresql.sh && sleep 6
+
+    - name: Run django server in background with generated certs
+      working-directory: ./server
+      run: sh setup-dev-server.sh & sleep 6
+
+    - name: Reset and seed database with tutorial data
+      working-directory: ./server
+      run: sh reset_db.sh && python seed.py --demo tutorial
+
+    - name: Set up tutorial files
+      working-directory: .
+      run: bash tutorials_scripts/setup_webui_tutorial.sh
+
+    - name: Run fastapi server in background
+      working-directory: .
+      run: medperf_webui & sleep 6
+
+    - name: Run webUI tutorial E2E tests with pytest
+      working-directory: ./cli/medperf/web_ui/tests/e2e/
+      run: pytest

cli/medperf/web_ui/static/js/benchmarks/benchmark_workflow_test.js

@@ -2,7 +2,7 @@
 function onBenchmarkWorkflowTestSuccess(response){
     markAllStagesAsComplete();
     if(response.status === "success"){
-        $("next-modal-title").html("Benchmark Workflow Test Successful");
+        $("#next-modal-title").html("Benchmark Workflow Test Successful");
         const nextModal = new bootstrap.Modal('#next-modal', {
             keyboard: false,
             backdrop: "static"

cli/medperf/web_ui/static/js/containers/container_compatibility_test.js

@@ -1,7 +1,7 @@
 function onContainerCompatibilityTestSuccess(response){
     markAllStagesAsComplete();
     if(response.status === "success"){
-        $("next-modal-title").html("Container Compatibility Test Successful");
+        $("#next-modal-title").html("Model Compatibility Test Successful");
         const nextModal = new bootstrap.Modal('#next-modal', {
             keyboard: false,
             backdrop: "static"

cli/medperf/web_ui/static/js/event_handler.js

@@ -5,7 +5,8 @@ function create_p(msg){
 }
 
 function scrollToElement(selector){
-    $("html, body").animate({
+    // .stop(true) to avoid scroll lagging during multiple scrolls
+    $("html, body").stop(true).animate({
         scrollTop: $(selector).offset().top
     }, 1000);
 }

cli/medperf/web_ui/templates/base.html

@@ -87,9 +87,8 @@
     <script src="{{ url_for('static', path='js/prism-yaml-1.23.0.min.js') }}"></script>
     <script src="{{ url_for('static', path='js/notifications.js') }}"></script>
     <script src="{{ url_for('static', path='js/common.js') }}"></script>
-
     {% if task_running %}
-    <script>
+    <script data-testid="notifications-script">
         getNotifications();
         // Fetch notifications every 5 seconds
         setInterval(getNotifications, 5000);

cli/medperf/web_ui/templates/benchmark/benchmarks.html

@@ -10,14 +10,14 @@
 <div class="container">
     <div class="row text-center">
         <div class="col-12">
-            <a class="btn btn-primary my-4" href="/benchmarks/register/ui">
+            <a class="btn btn-primary my-4" href="/benchmarks/register/ui" data-testid="reg-bmk-btn">
                 Register a New Benchmark
             </a>
         </div>
     </div>
     <div class="row mt-5">
         <div class="col-12">
-            <h1 class="mt-4 text-center">Benchmarks</h1>
+            <h1 class="mt-4 text-center" data-testid="page-header">Benchmarks</h1>
             <div class="form-check form-switch d-flex flex-column align-items-center">
                 <input
                     class="form-check-input fs-5"
@@ -36,15 +36,15 @@ <h1 class="mt-4 text-center">Benchmarks</h1>
 </div>
 <div class="container mt-5">
     <!-- Benchmark Cards -->
-    <div class="row">
+    <div class="row" data-testid="cards-container">
         {% if benchmarks %}
         {% for benchmark in benchmarks %}
         <div class="col-md-4 mb-4">
             {{ benchmark_macros.benchmark_card(benchmark) }}
         </div>
         {% endfor %}
         {% else %}
-        <h3 class="col-12 text-center mt-5">
+        <h3 class="col-12 text-center mt-5" data-testid="no-bmks-msg">
             No benchmarks yet
         </h3>
         {% endif %}

cli/medperf/web_ui/templates/container/containers.html

@@ -8,14 +8,14 @@
 <div class="container">
     <div class="row text-center">
         <div class="col-12">
-            <a class="btn btn-primary my-4" href="/containers/register/ui">
+            <a class="btn btn-primary my-4" href="/containers/register/ui" data-testid="reg-cont-btn">
                 Register a New Container
             </a>
         </div>
     </div>
     <div class="row mt-5">
         <div class="col-12">
-            <h1 class="mt-4 text-center">Containers</h1>
+            <h1 class="mt-4 text-center" data-testid="page-header">Containers</h1>
             <div class="form-check form-switch d-flex flex-column align-items-center">
                 <input
                     class="form-check-input fs-5"
@@ -32,28 +32,33 @@ <h1 class="mt-4 text-center">Containers</h1>
         </div>
     </div>
 </div>
-<div class="container mt-5">
+<div class="container mt-5" data-testid="cards-container">
     <div class="row">
         {% if containers %}
         {% for container in containers %}
         <div class="col-md-4 mb-4">
-            <div class="{% if container.is_valid %}card{% else %}invalid-card{% endif %}">
+            <div class="card {% if not container.is_valid %}invalid-card{% endif %}">
                 <div class="card-body">
                     <h5 class="card-title">
-                        <a href="/containers/ui/display/{{ container.id }}" class="text-primary">{{ container.name }}</a>
+                        <a
+                            href="/containers/ui/display/{{ container.id }}"
+                            class="text-primary"
+                            data-testid="cont-name">
+                        {{ container.name }}
+                        </a>
                     </h5>
-                    <h6 class="card-subtitle mb-2">ID: {{container.id}}</h6>
-                    <h6 class="card-subtitle mb-2 text-muted">{% if container.state == 'OPERATION' %} OPERATIONAL {% else %} {{ container.state }} {% endif %}</h6>
-                    <h6 class="card-subtitle mb-2 text-muted">Is valid: {{ container.is_valid }}</h6>
-                    <p class="card-text">
+                    <h6 class="card-subtitle mb-2" data-testid="cont-id">ID: {{container.id}}</h6>
+                    <h6 class="card-subtitle mb-2 text-muted" data-testid="cont-state">{% if container.state == 'OPERATION' %} OPERATIONAL {% else %} {{ container.state }} {% endif %}</h6>
+                    <h6 class="card-subtitle mb-2 text-muted" data-testid="cont-is-valid">Is valid: {{ container.is_valid }}</h6>
+                    <p class="card-text" data-testid="cont-created-at">
                         <small class="text-muted" data-date="{{ container.created_at }}"></small>
                     </p>
                 </div>
             </div>
         </div>
         {% endfor %}
         {% else %}
-        <h3 class="col-12 text-center mt-5">
+        <h3 class="col-12 text-center mt-5" data-testid="no-conts-msg">
             No containers yet
         </h3>
         {% endif %}

cli/medperf/web_ui/templates/dataset/datasets.html

@@ -8,17 +8,17 @@
 <div class="container">
     <div class="row text-center">
         <div class="col-12">
-            <a class="btn btn-primary my-4" href="/datasets/register/ui">
+            <a class="btn btn-primary my-4" href="/datasets/register/ui" data-testid="reg-dset-btn">
                 Register a New Dataset
             </a>
-            <a class="btn btn-dark my-4 mx-3" href="/datasets/import/ui">
+            <a class="btn btn-dark my-4 mx-3" href="/datasets/import/ui" data-testid="import-dset-btn">
                 Import Dataset
             </a>
         </div>
     </div>
     <div class="row mt-5">
         <div class="col-12">
-            <h1 class="mt-4 text-center">Datasets</h1>
+            <h1 class="mt-4 text-center" data-testid="page-header">Datasets</h1>
             <div class="form-check form-switch d-flex flex-column align-items-center">
                 <input
                     class="form-check-input fs-5"
@@ -35,7 +35,7 @@ <h1 class="mt-4 text-center">Datasets</h1>
         </div>
     </div>
 </div>
-<div class="container mt-5">
+<div class="container mt-5" data-testid="cards-container">
     <!-- Dataset Cards -->
     <div class="row">
         {% if datasets %}
@@ -44,33 +44,33 @@ <h1 class="mt-4 text-center">Datasets</h1>
             <div class="card {% if not dataset.is_valid %}invalid-card{% endif %}">
                 <div class="card-body">
                     <h5 class="card-title">
-                        <a href="/datasets/ui/display/{{ dataset.id }}" class="text-primary">
+                        <a href="/datasets/ui/display/{{ dataset.id }}" class="text-primary" data-testid="dset-name">
                             {{ dataset.name }}
                         </a>
                     </h5>
-                    <h6 class="card-subtitle mb-2">ID: {{dataset.id}}</h6>
-                    <h6 class="card-subtitle mb-2 text-muted">
+                    <h6 class="card-subtitle mb-2" data-testid="dset-id">ID: {{dataset.id}}</h6>
+                    <h6 class="card-subtitle mb-2 text-muted" data-testid="dset-state">
                         {% if dataset.state == 'OPERATION' %} OPERATIONAL {% else %} {{ dataset.state }} {% endif %}
                     </h6>
-                    <h6 class="card-subtitle mb-2 text-muted">
+                    <h6 class="card-subtitle mb-2 text-muted" data-testid="dset-is-valid">
                         Is valid: {{ dataset.is_valid }}
                     </h6>
-                    <p class="card-text">
+                    <p class="card-text" data-testid="dset-description">
                         <strong>Description:</strong> 
                         {{ dataset.description }}
                     </p>
-                    <p class="card-text">
+                    <p class="card-text" data-testid="dset-created-at">
                         <small class="text-muted" data-date="{{ dataset.created_at }}"></small>
                     </p>
-                    <p class="card-text">
+                    <p class="card-text" data-testid="dset-location">
                         <small class="text-muted">Location: {{ dataset.location }}</small>
                     </p>
                 </div>
             </div>
         </div>
         {% endfor %}
         {% else %}
-        <h3 class="col-12 text-center mt-5">
+        <h3 class="col-12 text-center mt-5" data-testid="no-dsets-msg">
             No datasets yet
         </h3>
         {% endif %}

cli/medperf/web_ui/templates/macros/benchmark_macros.html

@@ -4,26 +4,26 @@
 <div class="card {% if not benchmark.is_valid %}invalid-card{% endif %}">
     <div class="card-body">
         <h5 class="card-title">
-            <a href="/benchmarks/ui/display/{{ benchmark.id }}" class="text-primary">{{ benchmark.name }}</a>
+            <a href="/benchmarks/ui/display/{{ benchmark.id }}" class="text-primary" data-testid="bmk-name">{{ benchmark.name }}</a>
         </h5>
-        <h6 class="card-subtitle mb-2">ID: {{benchmark.id}}</h6>
-        <h6 class="card-subtitle mb-2 text-muted">{% if benchmark.state == 'OPERATION' %} OPERATIONAL {% else %} {{ benchmark.state }} {% endif %}</h6>
-        <h6 class="card-subtitle mb-2 text-muted">Is valid: {{ benchmark.is_valid }}</h6>
-        <p class="card-text">
+        <h6 class="card-subtitle mb-2" data-testid="bmk-id">ID: {{benchmark.id}}</h6>
+        <h6 class="card-subtitle mb-2 text-muted" data-testid="bmk-state">{% if benchmark.state == 'OPERATION' %} OPERATIONAL {% else %} {{ benchmark.state }} {% endif %}</h6>
+        <h6 class="card-subtitle mb-2 text-muted" data-testid="bmk-is-valid">Is valid: {{ benchmark.is_valid }}</h6>
+        <p class="card-text" data-testid="bmk-description">
             <strong>Description:</strong> 
             {{ benchmark.description }}
         </p>
         {% if benchmark.docs_url %}
         <p class="card-text">
-            <a href="{{ benchmark.docs_url }}" target="_blank" class="text-primary">Documentation</a>
+            <a href="{{ benchmark.docs_url }}" target="_blank" class="text-primary" data-testid="bmk-docs">Documentation</a>
         </p>
         {% else %}
-        <p class="card-text text-muted">Documentation: Not Available</p>
+        <p class="card-text text-muted" data-testid="bmk-docs">Documentation: Not Available</p>
         {% endif %}
-        <p class="card-text">
+        <p class="card-text" data-testid="bmk-created-at">
             <small class="text-muted" data-date="{{ benchmark.created_at }}"></small>
         </p>
-        <p class="card-text">
+        <p class="card-text" data-testid="bmk-approval-status">
             <small class="text-muted">Approval Status: {{ benchmark.approval_status }}</small>
         </p>
     </div>

cli/medperf/web_ui/templates/partials/text_content_container.html

@@ -1,5 +1,5 @@
 {# ./cli/medperf/web_ui/templates/partials/text_content_container.html #}
 
-<div id="text-content" class="mt-5">
+<div id="text-content" class="mt-5 hidden-element">
     <div id="content"></div>
 </div>

cli/medperf/web_ui/templates/profiles.html

@@ -13,7 +13,7 @@ <h1 class="text-center">Settings</h1>
         <div class="col-12 mt-5">
             <h4 class="text-center">
                 Current Profile: 
-                <strong> {{ profiles.active_profile_name.title() }}</strong>
+                <strong data-testid="current-profile">{{ profiles.active_profile_name.title() }}</strong>
             </h4>
             <form id="profiles-form" class="mt-5">
                 <div class="form-group my-5">