[WIP] Ptitloup/add selenium test

.github/workflows/code_formatting.yml

@@ -17,10 +17,12 @@ jobs:
           git config user.email [email protected]
           git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
 
-      # Prettify js+css code with prettier
+      # Prettify .js | .json | .side | .css files with prettier
       - name: Running prettier
         run: |
           npx prettier --write pod/*/static/**/*.js
+          npx prettier --write pod/*/static/**/*.json
+          npx prettier --write --parser json pod/**/*.side
           npx prettier --write pod/*/static/**/*.css
 
       - name: Check for modified files
@@ -67,3 +69,17 @@ jobs:
         run: |
           git commit -am "Auto-update configuration files"
           git push
+
+      # Compile lang files
+      - name: Compile lang files in fr and nl
+        run: make compilelang
+
+      - name: Check for modified files
+        id: compilelang-git-check
+        run: echo modified=$(if git diff --quiet; then echo "false"; else echo "true"; fi) >> $GITHUB_OUTPUT
+
+      - name: Push lang compilation changes
+        if: steps.compilelang-git-check.outputs.modified == 'true'
+        run: |
+          git commit -am "Compile lang files"
+          git push

.github/workflows/pod.yml

@@ -7,10 +7,13 @@ on:
   pull_request:
     branches: ["*"]
 
+permissions:
+  pull-requests: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
-
+    permissions: write-all
     strategy:
       max-parallel: 4
       matrix:
@@ -51,7 +54,7 @@ jobs:
 
       - name: Flake8 compliance
         run: |
-          flake8 --max-complexity=7 --ignore=E501,W503,E203 --exclude .git,pod/*/migrations/*.py,*_settings.py
+          flake8 --max-complexity=7 --ignore=E501,W503,E203 --exclude .git,pod/*/migrations/*.py,*_settings.py,side_*.py
 
       - name: Runs Elasticsearch
         uses: elastic/elastic-github-actions/elasticsearch@refactor_with_plugins
@@ -74,6 +77,20 @@ jobs:
         run: |
           coverage run --append --source='.' manage.py test -v 3 --settings=pod.main.test_settings
 
+      - name: Add Gecko driver
+        if: matrix.python-version == '3.9'
+        uses: browser-actions/setup-geckodriver@latest
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Run Integration Tests
+        if: matrix.python-version == '3.9'
+        run: |
+          export DISPLAY=:99
+          geckodriver &
+          Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
+          python manage.py test -v 3 --settings=pod.main.test_settings pod.main.integration_tests.selenium_pod_integration_tests
+
       ## Start Accessibility tests with pa11y ##
 
       - name: Install pa11y-ci dependencies.
@@ -106,20 +123,6 @@ jobs:
         with:
           path: ./pa11y_output.txt
 
-      - name: Comment on pull request.
-        if: contains(steps.pa11y_output.outputs.content, 'Errors in http://')
-        uses: thollander/actions-comment-pull-request@v2
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          message: '<details><summary>Pa11y testing results</summary>
-
-
-```
-
-${{ steps.pa11y_output.outputs.content }}```
-
-
-</details>'
       - name: Check for pa11y failures.
         if: contains(steps.pa11y_output.outputs.content, 'Errors in http://')
         run: |

.gitignore

@@ -55,6 +55,7 @@ transcription/*
 # Unit test utilities #
 #######################
 chromedriver
+**/integration_tests/**/*.png
 
 ## Others
 pod/static/

dockerfile-dev-with-volumes/pod/Dockerfile

@@ -26,6 +26,17 @@ RUN apt-get clean && apt-get update \
                           imagemagick \
                           gettext
 
+RUN apt-get install -y firefox-esr xvfb
+
+# Download, unzip, and install geckodriver
+RUN wget https://github.com/mozilla/geckodriver/releases/download/v0.33.0/geckodriver-v0.33.0-linux64.tar.gz
+RUN tar -zxf geckodriver-v0.33.0-linux64.tar.gz -C /usr/local/bin
+RUN chmod +x /usr/local/bin/geckodriver
+
+# Set display port and dbus env to avoid hanging
+ENV DISPLAY=:99
+ENV DBUS_SESSION_BUS_ADDRESS=/dev/null
+
 WORKDIR /usr/src/app
 
 COPY ./requirements.txt .

dockerfile-dev-with-volumes/pod/my-entrypoint.sh

@@ -25,5 +25,6 @@ fi
 # Le serveur de développement permet de tester vos futures modifications facilement.
 # N'hésitez pas à lancer le serveur de développement pour vérifier vos modifications au fur et à mesure.
 # À ce niveau, vous devriez avoir le site en français et en anglais et voir l'ensemble de la page d'accueil.
+Xvfb -ac :99 -screen 0 1280x1024x24 -nolisten tcp &
 python3 manage.py runserver 0.0.0.0:8080 --insecure
 sleep infinity

pod/completion/integration_tests/tests/subtitles_staff.side

@@ -0,0 +1,185 @@
+{
+  "id": "9ea49e3a-2f6e-49aa-b1c7-975e8c0f70d3",
+  "version": "2.0",
+  "name": "pod-front",
+  "url": "http://localhost:9090/",
+  "tests": [{
+    "id": "pod-sous-titres-mode-edition",
+    "name": "Untitled",
+    "commands": [{
+      "id": "bb668b94-3724-482f-b0e9-ba055f0e3000",
+      "comment": "Ouvre la page de complétion",
+      "command": "open",
+      "target": "/video/completion/0002-video-staff/",
+      "targets": [],
+      "value": ""
+    }, {
+      "id": "833e6f0f-cfb0-494d-b62f-4dd944b3df42",
+      "comment": "Ouvre l'accordéon des sous-titres",
+      "command": "click",
+      "target": "id=section_track",
+      "targets": [
+        ["id=section_track", "id"],
+        ["linkText=Sous-titres et légendes", "linkText"],
+        ["css=#section_track", "css:finder"],
+        ["xpath=//a[contains(text(),'Sous-titres et légendes')]", "xpath:link"],
+        ["xpath=//a[@id='section_track']", "xpath:attributes"],
+        ["xpath=//div[@id='accordeon']/li[3]/a", "xpath:idRelative"],
+        ["xpath=(//a[contains(@href, '#')])[3]", "xpath:href"],
+        ["xpath=//div/li[3]/a", "xpath:position"],
+        ["xpath=//a[contains(.,'Sous-titres et légendes ')]", "xpath:innerText"]
+      ],
+      "value": ""
+    }, {
+      "id": "9292c6ab-76d7-43d6-9102-cf80e772acac",
+      "comment": "",
+      "command": "waitForElementVisible",
+      "target": "linkText=Outil de création de fichier de sous-titres/légende",
+      "targets": [
+        ["linkText=Outil de création de fichier de sous-titres/légende", "linkText"],
+        ["css=p > .btn", "css:finder"],
+        ["xpath=//a[contains(text(),'Outil de création de fichier de sous-titres/légende')]", "xpath:link"],
+        ["xpath=//div[@id='accordeon']/li[4]/div/p/a", "xpath:idRelative"],
+        ["xpath=//a[contains(@href, '/video/completion/caption_maker/0002-video-staff/')]", "xpath:href"],
+        ["xpath=//p/a", "xpath:position"],
+        ["xpath=//a[contains(.,'Outil de création de fichier de sous-titres/légende')]", "xpath:innerText"]
+      ],
+      "value": "30000"
+    }, {
+      "id": "18f5e568-9ae1-4e43-920d-8e7aca81aa83",
+      "comment": "Clique sur le bouton pour ouvrir l'outil de création de sous-titres",
+      "command": "click",
+      "target": "linkText=Outil de création de fichier de sous-titres/légende",
+      "targets": [
+        ["linkText=Outil de création de fichier de sous-titres/légende", "linkText"],
+        ["css=p > .btn", "css:finder"],
+        ["xpath=//a[contains(text(),'Outil de création de fichier de sous-titres/légende')]", "xpath:link"],
+        ["xpath=//div[@id='accordeon']/li[4]/div/p/a", "xpath:idRelative"],
+        ["xpath=//a[contains(@href, '/video/completion/caption_maker/33955-bbb/')]", "xpath:href"],
+        ["xpath=//p/a", "xpath:position"],
+        ["xpath=//a[contains(.,'Outil de création de fichier de sous-titres/légende')]", "xpath:innerText"]
+      ],
+      "value": ""
+    }, {
+      "id": "80aceab9-1cac-42ce-ba1e-e4e0ffb5fa27",
+      "comment": "Clique sur le bouton pour ajouter un sous-titre",
+      "command": "click",
+      "target": "id=addSubtitle",
+      "targets": [
+        ["id=addSubtitle", "id"],
+        ["css=#addSubtitle", "css:finder"],
+        ["xpath=//button[@id='addSubtitle']", "xpath:attributes"],
+        ["xpath=//div[@id='newCaptionsEditor']/button", "xpath:idRelative"],
+        ["xpath=//div[2]/div[2]/button", "xpath:position"],
+        ["xpath=//button[contains(.,' Ajouter un(e) légende / sous-titre')]", "xpath:innerText"]
+      ],
+      "value": ""
+    }, {
+      "id": "042569e8-f390-40c1-a04f-413c88519950",
+      "comment": "Sélectionne le champ des sous-titres",
+      "command": "click",
+      "target": "name=captionTextInput",
+      "targets": [
+        ["id=c40389510", "id"],
+        ["name=captionTextInput", "name"],
+        ["css=#c40389510", "css:finder"],
+        ["xpath=//textarea[@id='c40389510']", "xpath:attributes"],
+        ["xpath=//div[@id='newCaptionsEditor']/form/div[2]/textarea", "xpath:idRelative"],
+        ["xpath=//div[2]/textarea", "xpath:position"]
+      ],
+      "value": ""
+    }, {
+      "id": "3f6c5cb2-d467-4e35-9d55-3b69bba7dd13",
+      "comment": "Écrit le contenu du sous-titre",
+      "command": "type",
+      "target": "name=captionTextInput",
+      "targets": [
+        ["id=c40389510", "id"],
+        ["name=captionTextInput", "name"],
+        ["css=#c40389510", "css:finder"],
+        ["xpath=//textarea[@id='c40389510']", "xpath:attributes"],
+        ["xpath=//div[@id='newCaptionsEditor']/form/div[2]/textarea", "xpath:idRelative"],
+        ["xpath=//div[2]/textarea", "xpath:position"]
+      ],
+      "value": "Texte initial"
+    }, {
+      "id": "ffed3160-9509-4730-8478-c0c6543419a2",
+      "comment": "Change le mode d'édition",
+      "command": "click",
+      "target": "id=switchOldEditMode",
+      "targets": [
+        ["id=switchOldEditMode", "id"],
+        ["css=#switchOldEditMode", "css:finder"],
+        ["xpath=//button[@id='switchOldEditMode']", "xpath:attributes"],
+        ["xpath=//div[@id='pod-mainContent']/div[2]/div/div/div/div[7]/button", "xpath:idRelative"],
+        ["xpath=//div[7]/button", "xpath:position"],
+        ["xpath=//button[contains(.,' Changer le mode d’édition')]", "xpath:innerText"]
+      ],
+      "value": ""
+    }, {
+      "id": "50f96a38-c5bd-49bb-babe-47227a1a022e",
+      "comment": "Sélectionne le champ des sous-titres",
+      "command": "click",
+      "target": "id=captionContent",
+      "targets": [
+        ["id=captionContent", "id"],
+        ["css=#captionContent", "css:finder"],
+        ["xpath=//textarea[@id='captionContent']", "xpath:attributes"],
+        ["xpath=//div[@id='rawCaptionsEditor']/textarea", "xpath:idRelative"],
+        ["xpath=//div[2]/div/textarea", "xpath:position"]
+      ],
+      "value": ""
+    }, {
+      "id": "0ee2ab41-f02e-4a7f-a865-4caf1500d8ed",
+      "comment": "Modifie le contenu du sous-titre",
+      "command": "type",
+      "target": "id=captionContent",
+      "targets": [
+        ["id=captionContent", "id"],
+        ["css=#captionContent", "css:finder"],
+        ["xpath=//textarea[@id='captionContent']", "xpath:attributes"],
+        ["xpath=//div[@id='rawCaptionsEditor']/textarea", "xpath:idRelative"],
+        ["xpath=//div[2]/div/textarea", "xpath:position"]
+      ],
+      "value": "WEBVTT\\n\\n00:00.000 --> 00:02.000\\nTexte corrigé"
+    }, {
+      "id": "0bd7bfef-23b1-4eee-82aa-e8e10daf2541",
+      "comment": "Reviens au mode d'édition par défaut",
+      "command": "click",
+      "target": "id=switchOldEditMode",
+      "targets": [
+        ["id=switchOldEditMode", "id"],
+        ["css=#switchOldEditMode", "css:finder"],
+        ["xpath=//button[@id='switchOldEditMode']", "xpath:attributes"],
+        ["xpath=//div[@id='pod-mainContent']/div[2]/div/div/div/div[7]/button", "xpath:idRelative"],
+        ["xpath=//div[7]/button", "xpath:position"],
+        ["xpath=//button[contains(.,' Changer le mode d’édition')]", "xpath:innerText"]
+      ],
+      "value": ""
+    }, {
+      "id": "bf33e57c-b117-4d43-ba0f-ce246565ed15",
+      "comment": "Récupère la valeur du champ du sous-titre",
+      "command": "storeValue",
+      "target": "name=captionTextInput",
+      "targets": [],
+      "value": "sousTitre"
+    }, {
+      "id": "ee3f5108-139c-4e56-8ecd-5f4fe90208ad",
+      "comment": "Vérifie si la valeur modifiée est bien prise en compte d'un mode d'édition à l'autre",
+      "command": "assert",
+      "target": "sousTitre",
+      "targets": [],
+      "value": "Texte corrigé"
+    }]
+  }],
+  "suites": [{
+    "id": "pod-front",
+    "name": "Esup Pod test selenium",
+    "persistSession": false,
+    "parallel": false,
+    "timeout": 300,
+    "tests": ["pod-sous-titres-mode-edition"]
+  }],
+  "urls": ["http://localhost:9090/"],
+  "plugins": []
+}

pod/completion/static/js/caption_maker.js

@@ -286,6 +286,7 @@ document
       }
     } else {
       oldModeSelected = !oldModeSelected;
+      parseAndLoadWebVTT(document.getElementById("captionContent").value);
       document.getElementById("rawCaptionsEditor").style.display = "none";
       document.getElementById("newCaptionsEditor").style.display = "block";
     }

pod/main/configuration.json

@@ -4034,7 +4034,9 @@
                             "default_value": true,
                             "description": {
                                 "en": [
-                                    ""
+                                    "A boolean value to enable or disable debug mode.<br>",
+                                    "Never deploy a production site with DEBUG enabled.<br>",
+                                    "__ref: [https://docs.djangoproject.com/fr/3.2/ref/settings/#debug]()__"
                                 ],
                                 "fr": [
                                     "Une valeur booléenne qui active ou désactive le mode de débogage.<br>",
@@ -4045,6 +4047,23 @@
                             "pod_version_end": "",
                             "pod_version_init": "3.1"
                         },
+                        "USE_DEBUG_TOOLBAR": {
+                            "default_value": false,
+                            "description": {
+                                "en": [
+                                    "A boolean value that enables or disables the debugging tool.<br>",
+                                    "Never deploy a production site with USE_DEBUG_TOOLBAR enabled.<br>",
+                                    "__ref: [https://django-debug-toolbar.readthedocs.io/en/latest/]()__"
+                                ],
+                                "fr": [
+                                    "Une valeur booléenne qui active ou désactive l'outil de débogage.<br>",
+                                    "Ne déployez jamais de site en production avec le réglage USE_DEBUG_TOOLBAR activé.<br>",
+                                    "__ref: [https://django-debug-toolbar.readthedocs.io/en/latest/]()__"
+                                ]
+                            },
+                            "pod_version_end": "",
+                            "pod_version_init": "3.5.0"
+                        },
                         "LOGIN_URL": {
                             "default_value": "/authentication_login/",
                             "description": {

pod/main/integration_tests/commands/cookies_commands.side

@@ -0,0 +1,12 @@
+{
+  "commands": [
+    {
+      "id": "pod-accept-cookies",
+      "comment": "Valide les cookies du navigateur",
+      "command": "click",
+      "target": "id=okcookie",
+      "targets": [],
+      "value": ""
+    }
+  ]
+}