🧹 Cypress part4

static/js/appbundle.js

@@ -119423,7 +119423,7 @@ def note_with_error(value, err):
     "try_button5",
     "try_button6",
     "speak_dropdown",
-    "language_dropdown",
+    "language_dropdown_button",
     "commands_dropdown",
     "keyword_toggle",
     "level_button_1",

static/js/user-activity.ts

@@ -19,7 +19,7 @@ const ELEMENT_TO_TRACK = [
 
     // Dropdowns and Toggles
     "speak_dropdown",
-    "language_dropdown",
+    "language_dropdown_button",
     "commands_dropdown",
     "keyword_toggle",
 

templates/incl/menubar.html

@@ -3,13 +3,13 @@
     <ul class="h-full w-full list-none flex flex-row items-center gap-x-2 xl:gap-x-6">
         <li class="ltr:mr-2 rtl:ml-2"><a href="/" class="inline-block w-10 lg:w-12"><img src="{{static('/images/Hedy-logo-96x96-round.png')}}" height="48px" width="48px" alt="{{_('hedy_logo_alt')}}"></a></li>
         <li class="flex-initial menubar-item{% if current_page == 'start' %} active{% endif %}"><a class="menubar-text" href="/" title="{{_('nav_start')}}">{{_('nav_start')}}</a></li>
-        <li class="flex-initial menubar-item{% if current_page == 'hedy' %} active{% endif %}"><a class="menubar-text" data-cy="hedybutton" href="/hedy" title="{{_('nav_hedy')}}">{{_('nav_hedy')}}</a></li>
+        <li class="flex-initial menubar-item{% if current_page == 'hedy' %} active{% endif %}"><a class="menubar-text" data-cy="hedy_button" href="/hedy" title="{{_('nav_hedy')}}">{{_('nav_hedy')}}</a></li>
         {% if not hide_explore %}
-            <li class="flex-initial truncate menubar-item{% if current_page == 'explore' %} active{% endif %}"><a class="menubar-text" data-cy="explorebutton" href="/explore" title="{{_('nav_explore')}}">{{_('nav_explore')}}</a></li>
+            <li class="flex-initial truncate menubar-item{% if current_page == 'explore' %} active{% endif %}"><a class="menubar-text" data-cy="explore_button" href="/explore" title="{{_('nav_explore')}}">{{_('nav_explore')}}</a></li>
         {% endif %}
         {% if is_teacher  or is_second_teacher %}
-            <li class="flex-initial truncate menubar-item{% if current_page == 'for-teachers' %} active{% endif %}"><a class="menubar-text" href="/for-teachers" title="{{_('for_teachers')}}">{{_('for_teachers')}}</a></li>
-            <li class="flex-initial truncate menubar-item{% if current_page == 'teacher-manual' %} active{% endif %}"><a class="menubar-text" href="/for-teachers/manual" title="{{_('teacher_manual')}}">{{_('teacher_manual')}}</a></li>
+            <li class="flex-initial truncate menubar-item{% if current_page == 'for-teachers' %} active{% endif %}"><a class="menubar-text" data-cy="for_teacher_button" href="/for-teachers" title="{{_('for_teachers')}}">{{_('for_teachers')}}</a></li>
+            <li class="flex-initial truncate menubar-item{% if current_page == 'teacher-manual' %} active{% endif %}"><a class="menubar-text" data-cy="manual_button" href="/for-teachers/manual" title="{{_('teacher_manual')}}">{{_('teacher_manual')}}</a></li>
         {% endif %}
         {% if is_admin %}
             <li class="flex-initial truncate menubar-item{% if current_page == 'admin' %} active{% endif %}"><a class="menubar-text" href="/admin">Admin</a></li>
@@ -21,40 +21,40 @@
     {% if username %}
        <!-- Logged in -->
         <li class="flex-initial menubar-item {% if current_page == 'programs' %} active{% endif %}">
-            <a class="menubar-text whitespace-nowrap" href="/programs">
+            <a class="menubar-text whitespace-nowrap" data-cy="programs_button" href="/programs">
                 <span class="fas fa-fw fa-list-alt"></span>
                 <span class="hidden lg:inline-block">{{ _('program_header')}}</span>
             </a>
         </li>
-        <li class="flex-initial menubar-item dropdown relative z-20{% if current_page == 'my-profile' %} active{% endif %}">
-            <a data-cy="user_dropdown" class="menubar-text cursor-pointer whitespace-nowrap" onclick="$('#profile_dropdown').slideToggle('medium');">
+        <li class="flex-initial menubar-item dropdown relative z-20{% if current_page == 'my-profile' %} active{% endif %}" data-cy="user_dropdown">
+            <a class="menubar-text cursor-pointer whitespace-nowrap" onclick="$('#profile_dropdown').slideToggle('medium');">
                 {% if session.profile_image %}
                     <img src="{{static('/images/profile_images/' + session.profile_image + '.png')}}" class="h-8 lg:h-10 inline-block">
                 {% else %}
                     <span class="fas fa-fw fa-user"></span>
                 {% endif %}
-                <span class="hidden lg:inline-block">{{username[0]|upper}}{{username[1:]}} {% if get_user_messages() %} ({{ get_user_messages() }}){% endif %}</span>
+                <span data-cy="username" class="hidden lg:inline-block">{{username[0]|upper}}{{username[1:]}} {% if get_user_messages() %} ({{ get_user_messages() }}){% endif %}</span>
             </a>
             <div class="dropdown-menu dropdown-blue" id="profile_dropdown" style="display: none;">
                 <a class="dropdown-item" href="/highscores"><span class="fas fa-trophy ltr:mr-4 rtl:ml-4"></span>{{_('highscores')}}</a>
                 <a class="dropdown-item" href="/my-achievements"><span class="fas fa-fw fa-list-alt ltr:mr-4 rtl:ml-4"></span>{{_('my_achievements')}}</a>
                 <a class="dropdown-item" data-cy="my_account_button" href="/my-profile"><span class="fas fa-user-cog ltr:mr-4 rtl:ml-4"></span>{{_('my_account')}} {% if get_user_messages() %} ({{ get_user_messages() }}){% endif %}</a>
-                <a class="dropdown-item" {% if not has_public_profile %}style="display: none;"{% endif %} id="public_profile_redirect" href="#" onclick="window.open('/user/{{ username}}')"><span class="fas fa-user ltr:mr-4 rtl:ml-4"></span>{{_('my_public_profile')}}</a>
-                <a class="dropdown-item" id="logout_button" href="#" onclick="hedyApp.logout(); return false;"><span class="fas fa-fw fa-sign-out-alt ltr:mr-4 rtl:ml-4"></span>{{_('logout')}}</a>
+                <a class="dropdown-item" {% if not has_public_profile %}style="display: none;"{% endif %} data-cy="public_profile_button" href="#" onclick="window.open('/user/{{ username}}')"><span class="fas fa-user ltr:mr-4 rtl:ml-4"></span>{{_('my_public_profile')}}</a>
+                <a class="dropdown-item"data-cy="logout_button" href="#" onclick="hedyApp.logout(); return false;"><span class="fas fa-fw fa-sign-out-alt ltr:mr-4 rtl:ml-4"></span>{{_('logout')}}</a>
             </div>
         </li>
     {% else %}
       <!-- Not logged in -->
       <li class="menubar-item dropdown relative z-20">
           {# Needs a 'block' because it contains a flexbox child #}
-          <a class="menubar-text block border-transparent cursor-pointer" onclick="$('#language_dropdown').slideToggle('medium'); $('#search_language').focus();" data-cy="language_dropdown">
+          <a class="menubar-text block border-transparent cursor-pointer" onclick="$('#language_dropdown').slideToggle('medium'); $('#search_language').focus();" data-cy="language_dropdown_button">
             <div class="flex flex-row gap-2 items-center">
                 <i class="fas fa-fw fa-globe"></i>
                 <span class="hidden lg:flex">{{ current_language().sym }}</span>
                 <svg id="language_arrow" class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
             </div>
           </a>
-          <div class="dropdown-menu dropdown-blue h-96 overflow-auto" id="language_dropdown" style="display: none;"
+          <div class="dropdown-menu dropdown-blue h-96 overflow-auto" id="language_dropdown" data-cy="language_dropdown" style="display: none;"
           _="on mutation of @style
                 set arrow to #language_arrow
                 if *display == 'none'
@@ -63,13 +63,13 @@
                     add .rotate-180 to arrow
                 end">
               <div class="mb-4">
-                  <input id="search_language" placeholder="{{_('search')}} {{other_languages()|length}}" class="border text-black border-gray-500 rounded h-8 px-2 w-full">
+                  <input id="search_language" data-cy="search_language" placeholder="{{_('search')}} {{other_languages()|length}}" class="border text-black border-gray-500 rounded h-8 px-2 w-full">
               </div>
               <div class="flex flex-row flex-wrap w-min justify-start content-start items-start">         
                 {% for lang in other_languages() %}
                     <div class="dropdown-item language" data-english="{{ lang.english }}" onclick="hedyApp.change_language ('{{lang.lang}}');event.preventDefault();" data-cy="switch_lang_{{lang.lang}}">{{ lang.sym }}</div>
                 {% endfor %}
-                <a id="add_language_btn" class="add-language-item language" href="https://hosted.weblate.org/new-lang/hedy/adventures/">{{_('add_your_language')}}</a>
+                <a id="add_language_btn" data-cy="add_language_btn" class="add-language-item language" href="https://hosted.weblate.org/new-lang/hedy/adventures/">{{_('add_your_language')}}</a>
               </div>
           </div>
       </li>

templates/login.html

@@ -8,13 +8,13 @@
         <h2>{{_('login_long')}}</h2>
         <div class="w-full flex px-8 flex-row items-center justify-center">
             <label for="username" class="inline-block w-1/3">{{_('username')}}</label>
-            <input class="inline-block w-2/3 px-2 py-1 rounded-lg border-gray-400" id="username" minlength="3" name="username" required>
+            <input class="inline-block w-2/3 px-2 py-1 rounded-lg border-gray-400" data-cy="username" minlength="3" name="username" required>
         </div>
         <div class="w-full flex px-8 flex-row items-center justify-center">
             <label for=password" class="inline-block w-1/3">{{_('password')}}</label>
-            <input class="inline-block w-2/3 px-2 py-1 rounded-lg border-gray-400" id="password" minlength="6" name="password" type=password required>
+            <input class="inline-block w-2/3 px-2 py-1 rounded-lg border-gray-400" data-cy="password" minlength="6" name="password" type=password required>
         </div>
-        <button type="submit" class="green-btn mt-2" id="login_button">{{_('login')}}</button>
+        <button type="submit" class="green-btn mt-2" data-cy="login_button">{{_('login')}}</button>
       </form>
   </div>
   <div class="flex flex-row gap-2 items-center">
@@ -24,7 +24,7 @@ <h2>{{_('login_long')}}</h2>
       </button>
   </div>
   <div>
-    <button type="submit" class="blue-btn" id="forgot_password_button" onclick="window.location.href = '/recover'">
+    <button type="submit" class="blue-btn" data-cy="forgot_password_button" onclick="window.location.href = '/recover'">
       {{_('forgot_password')}}
     </button>
   </div>

templates/main-page.html

@@ -7,8 +7,8 @@
                 <h1 class="font-bold font-slab text-sky-600 text-6xl tracking-wide">{{_('main_title')}}</h1>
                 <h2 class="py-0 my-0 font-sans font-light text-black tracking-wide">{{_('main_subtitle')}}</h2>
                 <div class="flex flex-row gap-4 min-w-full">
-                    <button id="try_learning_button" class="green-btn text-white w-64 py-4" onclick="window.location.href='/hedy'">{{_('start_learning')}}</button>
-                    <button id="try_teaching_button" class="white-btn text-blue-500 w-64 py-4" onclick="window.location.href={% if not user.is_teacher %}'for-teachers/preview-teacher-mode'{% else %}'for-teachers'{% endif %}">{{_('start_teaching')}}</button>
+                    <button data-cy="start_learning_button" class="green-btn text-white w-64 py-4" onclick="window.location.href='/hedy'">{{_('start_learning')}}</button>
+                    <button data-cy="start_teaching_button" class="white-btn text-blue-500 w-64 py-4" onclick="window.location.href={% if not user.is_teacher %}'for-teachers/preview-teacher-mode'{% else %}'for-teachers'{% endif %}">{{_('start_teaching')}}</button>
                 </div>
             </div>
             {# image for large screens #}
@@ -71,17 +71,17 @@ <h3>{{ col['title'] }}</h3>
     <div class="bg-pink-800 text-sm text-white py-16">
         <div class="flex w-100 max-w-screen-md mx-auto text-links-plain">
             <div class="flex-1">
-                <a href="/subscribe">{{_('subscribe_newsletter')}}</a><br>
-                <a href="/learn-more" id="learnmorebutton">{{_('nav_learn_more')}}</a><br>
-                <a href="/for-teachers/manual">{{_('teacher_manual')}}</a><br>
-                <a href="/privacy">{{_('privacy_terms')}}</a><br>
+                <a href="/subscribe" data-cy="subscribe_button">{{_('subscribe_newsletter')}}</a><br>
+                <a href="/learn-more" data-cy="learnmore_button">{{_('nav_learn_more')}}</a><br>
+                <a href="/for-teachers/manual" data-cy="footer_manual_button">{{_('teacher_manual')}}</a><br>
+                <a href="/privacy" data-cy="privacy_button">{{_('privacy_terms')}}</a><br>
             </div>
             <div class="flex-1">
-                <a href="https://github.com/hedyorg/hedy">{{_('hedy_on_github')}}</a><br>
-                <a href="https://github.com/sponsors/hedyorg">{{_('become_a_sponsor')}}</a><br>
-                <a href="https://discord.gg/8yY7dEme9r">{{_('discord_server')}}</a><br>
-                <a href="https://github.com/hedyorg/hedy/wiki/Hedy-Translation-Tutorial">{{_('translating_hedy')}}</a><br>
-                ✉️ <a href="mailto:hello@hedy.org">hello@hedy.org</a>
+                <a href="https://github.com/hedyorg/hedy" data-cy="github_button">{{_('hedy_on_github')}}</a><br>
+                <a href="https://github.com/sponsors/hedyorg" data-cy="sponsor_button">{{_('become_a_sponsor')}}</a><br>
+                <a href="https://discord.gg/8yY7dEme9r" data-cy="discord_button">{{_('discord_server')}}</a><br>
+                <a href="https://github.com/hedyorg/hedy/wiki/Hedy-Translation-Tutorial" data-cy="translate_button">{{_('translating_hedy')}}</a><br>
+                ✉️ <a href="mailto:hello@hedy.org" data-cy="email_button">hello@hedy.org</a>
             </div>
         </div>
     </div>

templates/profile.html

@@ -37,7 +37,7 @@ <h2 class="profile-section-body-header">{{_('my_messages')}}</h2>
              {% endfor %}
            </div>
        {% endif %}
-       <h1 id="public_profile_button" class="section-header" onclick="$ ('#public_profile_body').toggle()">{{_('public_profile')}}</h1>
+       <h1 data-cy="profile_button" class="section-header" onclick="$ ('#public_profile_body').toggle()">{{_('public_profile')}}</h1>
        <div id="public_profile_body" class="profile-section-body" {% if request.args.get('open') == "public-profile" %} style="display: inline;"{% endif %}>
             <h2 class="profile-section-body-header">{{_('public_profile')}}</h2>
              <form id="public_profile" class="flex flex-col gap-4">
@@ -56,7 +56,7 @@ <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('profile_picture')}}</h3>
                  </div>
                  <div class="flex flex-col">
                      <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('personal_text')}}</h3>
-                     <textarea class="block h-32 px-2 py-1 border border-gray-400 rounded-lg" id="personal_text" name="personal_text" required maxlength="200" minlength="5" placeholder="{{_('your_personal_text')}}">{% if public_settings.personal_text %}{{ public_settings.personal_text }}{% endif %}</textarea>
+                     <textarea class="block h-32 px-2 py-1 border border-gray-400 rounded-lg" data-cy="personal_text" name="personal_text" required maxlength="200" minlength="5" placeholder="{{_('your_personal_text')}}">{% if public_settings.personal_text %}{{ public_settings.personal_text }}{% endif %}</textarea>
                  </div>
                  {% if programs %}
                      <div>
@@ -70,11 +70,11 @@ <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('favourite_program')}}</h3>
                      </div>
                  {% endif %}
                  <div class="flex flex-row gap-4 items-center border-gray-400 border p-4 rounded-lg">
-                    <input type="checkbox" name="agree_terms" id="agree_terms" required class="" {% if public_settings %}checked{% endif %}>
+                    <input type="checkbox" name="agree_terms" data-cy="agree_terms" required class="" {% if public_settings %}checked{% endif %}>
                     <label for="agree_terms" class="cursor-pointer w-full">{{_('public_profile_info')}}</label>
                  </div>
                  <div class="flex flex-row">
-                    <button id="submit_public_profile" type="submit" class="green-btn">{{_('update_public')}}</button>
+                    <button data-cy="submit_public_profile" type="submit" class="green-btn">{{_('update_public')}}</button>
                     {% if public_settings %}
                         <button type="reset" class="ml-auto red-btn" onclick="event.preventDefault(); hedyApp.destroy_public('{{_('are_you_sure')}}');">{{_('delete_public')}}</button>
                     {% endif %}
@@ -96,7 +96,7 @@ <h2 class="profile-section-body-header">{{_('my_classes')}}</h2>
                 </div>
            </div>
        {% endif %}
-       <h1 class="section-header" onclick="$('#profile_change_body').toggle();" id="personal_settings">{{_('settings')}}</h1>
+       <h1 class="section-header" onclick="$('#profile_change_body').toggle();" data-cy="personal_settings">{{_('settings')}}</h1>
        <div class="profile-section-body" id="profile_change_body">
         <form id="profile">
             <h2 class="profile-section-body-header">{{_('settings')}}</h2>
@@ -153,7 +153,7 @@ <h2 class="profile-section-body-header">{{_('settings')}}</h2>
                 </select>
             </div>
         </form>
-        <button class="red-btn" onclick="hedyApp.destroy('{{_('are_you_sure')}}')" id="delete_profile_button">{{_('destroy_profile')}}</button>
+        <button class="red-btn" onclick="hedyApp.destroy('{{_('are_you_sure')}}')" data-cy="delete_profile_button">{{_('destroy_profile')}}</button>
        </div>
       <h1 id="password_toggle" class="section-header" onclick="$ ('#change_password_body').toggle()">{{_('change_password')}}</h1>
         <div class="profile-section-body" id="change_password_body">

templates/public-page.html

@@ -1,6 +1,6 @@
 {% extends "auth.html" %}
 {% block regular_content %}
-    <div id="general_info" class="flex flex-col md:flex-row gap-4 md:gap-8 justify-between md:items-center mt-8 mx-2 md:h-64">
+    <div data-cy="general_info" class="flex flex-col md:flex-row gap-4 md:gap-8 justify-between md:items-center mt-8 mx-2 md:h-64">
         <div class="h-full flex items-center justify-center">
             <div class="container flex flex-col items-center">
                 {% if user_info.image %}

templates/recover.html

@@ -7,9 +7,9 @@
         <h2>{{_('recover_password')}}</h2>
         <div class="w-full flex px-8 flex-row items-center justify-center gap-2">
             <label class="inline-block w-80" for="username">{{_('username')}} / {{_('email')}}</label>
-            <input class="inline-block w-full px-2 py-1 rounded-lg border-gray-400" id="username" name="username" required>
+            <input class="inline-block w-full px-2 py-1 rounded-lg border-gray-400" data-cy="username" name="username" required>
         </div>
-        <button type="submit" class="green-btn mt-2" id="send_recovery_button">{{_('send_password_recovery')}}</button>
+        <button type="submit" class="green-btn mt-2" data-cy="send_recovery_button">{{_('send_password_recovery')}}</button>
       </form>
     </div>
 </div>