🧪 Cypress part5 (#5683)

Fixes the following tests for #4027 :

static/js/appbundle.js

@@ -126649,6 +126649,9 @@ def note_with_error(value, err):
         for (const attribute of option2.attributes) {
           if (attribute.name.includes("hx-")) {
             newDiv.setAttribute(attribute.name, attribute.value);
+          } else if (attribute.name == "data-cy") {
+            newDiv.setAttribute(attribute.name, attribute.value);
+            option2.removeAttribute(attribute.name);
           }
         }
       }

static/js/custom-elements.ts

@@ -31,6 +31,9 @@ export class HedySelect extends HTMLElement {
             for(const attribute of option.attributes) {
                 if(attribute.name.includes('hx-')) {
                     newDiv.setAttribute(attribute.name, attribute.value);
+                } else if(attribute.name == "data-cy") {
+                    newDiv.setAttribute(attribute.name, attribute.value);
+                    option.removeAttribute(attribute.name);
                 }
             }
         }

templates/custom-elements-templates.html

@@ -27,7 +27,7 @@
     <div data-cy="test_warning_message"
         class="flex-0 z-20 mt-4 bg-yellow-100 border-t-4 border-yellow-500 rounded-b text-yellow-900 px-4 py-3 shadow-md relative"
         role="alert">
-        <p class="close-dialog"><i class="fa-solid fa-xmark"></i></p>
+        <p class="close-dialog" data-cy="close_warning"><i class="fa-solid fa-xmark"></i></p>
         <div class="flex">
             <div class="py-1">
                 <div id="warningbox_icon">

templates/customize-adventure.html

@@ -92,9 +92,9 @@ <h2>{{_('customize_adventure')}}: <strong>{{adventure.name}}</strong></h2>
                         <div class="flex flex-row items-center mb-4">
                             <label for="custom_adventure_classes" class="inline-block w-40 text-xl">{{_('used_in')}}</label>
                             <div class="flex-1">
-                                <custom-select data-type="multiple" id="classes_dropdown" data-label="{{_('used_in')}}">
+                                <custom-select data-type="multiple" id="classes_dropdown" data-cy="classes_select" data-label="{{_('used_in')}}">
                                     {% for class in all_classes %}
-                                        <option {% if class.id in adventure.classes %}selected{% endif %} value="{{class.id}}">{{ class.name }}</option>
+                                        <option {% if class.id in adventure.classes %}selected{% endif %} value="{{class.id}}" data-cy="{{class.name}}">{{ class.name }}</option>
                                     {% endfor %}
                                 </custom-select>
                             </div>
@@ -105,18 +105,18 @@ <h2>{{_('customize_adventure')}}: <strong>{{adventure.name}}</strong></h2>
                                 <custom-select data-type="multiple" id="levels_dropdown" data-cy="level_select" data-label="{{_('select_levels')}}">
                                     {% for i in range(1, (max_level + 1)) %}
                                         {% set adv_levels = adventure.levels if adventure.get("levels") else [adventure.level|string] %}
-                                        <option {% if i|string in adv_levels %}selected{% endif %} data-value="{{i}}">{{ i }}</option>
+                                        <option {% if i|string in adv_levels %}selected{% endif %} data-value="{{i}}" data-cy="{{i}}">{{ i }}</option>
                                     {% endfor %}
                                 </custom-select>
                             </div>
                         </div>
                         <div class="flex flex-row items-center mb-4">
                             <label class="inline-block w-40 text-xl" for="language">{{_('language')}}</label>
                             <div class="flex-1">
-                                <custom-select data-type="single" id="languages_dropdown" data-label="{{_('select_lang')}}">
+                                <custom-select data-type="single" id="languages_dropdown" data-cy="language_select" data-label="{{_('select_lang')}}">
                                     <option value="{{ adventure['language'] or current_language().lang }}" selected>{{ lang_to_sym(adventure['language'] or current_language().lang) }}</option>
                                     {% for language in other_languages(adventure["language"]) %}
-                                        <option value="{{ language.lang }}">{{ language.sym }}</option>
+                                        <option value="{{ language.lang }}" data-cy="{{ language.lang }}">{{ language.sym }}</option>
                                     {% endfor %}
                                 </custom-select>
                             </div>

templates/for-teachers.html

@@ -36,7 +36,7 @@ <h2 class="m-0 basis-1/12"> {{_('classes')}} </h2>
       <h2 class="m-0 basis-1/12"> {{_('adventures')}} </h2>
       <div class="text-black basis-10/12">{{ _('adventures_info') }}</div>
       <div class="flex gap-3 justify-end basis-1/12">
-            <button id="create_adventure_button" class="green-btn inline-flex" 
+            <button id="create_adventure_button" data-cy="create_adventure_button" class="green-btn inline-flex" 
               _="on click
                 window.open('/for-teachers/customize-adventure', '_self')"
               data-cy="edit_link"{% if second_teacher and role == 'viewer' %}disabled{% endif %}>{{_('create_adventure')}}</button>
@@ -83,7 +83,7 @@ <h2 class="m-0 basis-1/12"> {{_('slides')}} </h2>
         <h2 class="m-0 basis-1/12"> {{_('public_content')}} </h2>
         <div class="text-black basis-10/12">{{ _('public_content_info') }}</div>
         <div class="flex gap-3 justify-end basis-1/12">
-              <button id="public_adventures_link" class="blue-btn inline-flex items-center"
+              <button id="public_adventures_link" data-cy="public_adventures_link" class="blue-btn inline-flex items-center"
             _="on click window.open('/public-adventures', '_self')">{{_('public_adventures')}}</button>
         </div>
       </div>

templates/htmx-adventures-table.html

@@ -17,7 +17,7 @@ <h2 class="m-0 justify-left"> {{_('my_adventures')}} </h2>
         <tbody>
           {% for adventure in teacher_adventures %}
             <tr class="{% if loop.index is divisibleby 2 %}bg-gray-200{% else %}bg-white{% endif %}">
-              <td class="text-center px-4 py-2"><a href="for-teachers/customize-adventure/{{adventure.id}}" class="no-underline" data-cy="edit_link_adventure">{{adventure.name|e}}</a></td>
+              <td class="text-center px-4 py-2"><a href="for-teachers/customize-adventure/{{adventure.id}}" class="no-underline" data-cy="edit_link_{{adventure.name|e}}">{{adventure.name|e}}</a></td>
               <td class="text-center owner_username_cell">{{adventure.author or adventure.creator}}</td>
               <td class="text-center username_cell">{{adventure.creator}}</td>
               <td class="text-center p-2">

templates/htmx-program.html

@@ -1,4 +1,4 @@
-<div id="program_{{ program.id }}" data-name="{{program.name}}" data-id="{{program.id}}" class="program w-full border-solid border-2 {% if program.submitted %} border-gray-400 bg-gray-400 {% else %} border-orange-400 {% endif %} rounded p-4 mb-4">
+<div id="program_{{ program.id }}" data-cy="{{program.name}}" data-name="{{program.name}}" data-id="{{program.id}}" class="program w-full border-solid border-2 {% if program.submitted %} border-gray-400 bg-gray-400 {% else %} border-orange-400 {% endif %} rounded p-4 mb-4">
     <h3 id="submitted_header_{{ program.id }}" class="mt-0 mb-4 text-red-500 text-center {% if not program.submitted %} hidden{% endif %}">{{_('submitted_header')}}</h3>
     <div class="flex flex-row">
         <div class="flex flex-row flex-wrap justify-between">
@@ -31,6 +31,7 @@ <h3 id="submitted_header_{{ program.id }}" class="mt-0 mb-4 text-red-500 text-ce
             {% set favourite_program = public_profile.favourite_program == program.id %}
             <div
                 id="favourite_program_container_{{ program.id }}"
+                data-cy="favourite_program_container_{{ program.id }}"
                 data-starred="{{favourite_program}}"
                 class="ml-auto mb-10 favourite_program_container {% if favourite_program %}text-yellow-400{% else %}text-white{% endif %} text-2xl{% if not program.public %} hidden{% endif %}">
                 <i class="fa fa-star p-4 bg-blue-300 rounded-full cursor-pointer hover:bg-blue-600"
@@ -39,11 +40,11 @@ <h3 id="submitted_header_{{ program.id }}" class="mt-0 mb-4 text-red-500 text-ce
         {% endif %}
         {% if not graph_view %}
           <div class="ml-auto dropdown relative">
-            <button class="gray-btn text-gray-500 border border-gray-600 font-semibold rounded inline-flex items-center gap-2" id="more_options_{{ program.id }}"
+            <button class="gray-btn text-gray-500 border border-gray-600 font-semibold rounded inline-flex items-center gap-2" data-cy="more_options_{{ program.id }}"
               onclick="$('#program_options_dropdown_{{ program.id }}').slideToggle('medium');">
               <span>{{_('more_options')}}</span>
             </button>
-            <div class="dropdown-menu z-30 min-w-full" id="program_options_dropdown_{{ program.id }}"
+            <div class="dropdown-menu z-30 min-w-full" id="program_options_dropdown_{{ program.id }}" data-cy="program_options_dropdown_{{ program.id }}"
               style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;">
                 <button class="gray-btn text-blue-500 min-w-full flex justify-between items-center gap-2 border-b border-gray-500" onclick="hedyApp.copy_to_clipboard(`{{program.code}}`, '{{_('copy_clipboard')}}')">{{_('copy_code')}}</button>
                 {% if program.public %}
@@ -66,13 +67,13 @@ <h3 id="submitted_header_{{ program.id }}" class="mt-0 mb-4 text-red-500 text-ce
     <div id="submitted_button_container_{{ program.id }}" class="flex flex-row gap-2" {% if not program.submitted %} style="display: none;" {% endif %}>
         <button class="blue-btn" onclick="window.open (hedyApp.viewProgramLink('{{program.id}}'))">{{_('open')}}</button>
     </div>
-    <div id="non_submitted_button_container_{{ program.id }}" class="flex flex-row w-full gap-2 {% if program.submitted %} hidden {% endif %}">
+    <div id="non_submitted_button_container_{{ program.id }}" data-cy="non_submitted_button_container_{{ program.id }}" class="flex flex-row w-full gap-2 {% if program.submitted %} hidden {% endif %}">
         <a href="/hedy/{{program.level|string}}/{{program.id}}" target="_blank"><button class="blue-btn">{{_('open')}}</button></a>
         {% if not graph_view %}
-            <button class="green-btn" data-cy="submit_btn" {% if not program.public or second_teachers_programs %} style="display: none;" {% endif %} onclick="hedyApp.modal.confirm ('{{_('submit_warning')}}', function () {hedyApp.submit_program ('{{program.id}}')})">{{_('submit_program')}}</button>
+            <button class="green-btn" data-cy="submit_btn_{{ program.id }}" {% if not program.public or second_teachers_programs %} style="display: none;" {% endif %} onclick="hedyApp.modal.confirm ('{{_('submit_warning')}}', function () {hedyApp.submit_program ('{{program.id}}')})">{{_('submit_program')}}</button>
             {% if not second_teachers_programs %}
             <div class="dropdown relative">
-                <button class="white-btn inline-flex items-center gap-2" id="share_option_dropdown_{{ program.id }}"
+                <button class="white-btn inline-flex items-center gap-2" data-cy="share_option_dropdown_{{ program.id }}"
                 onclick="$('#share_dropdown_{{ program.id }}').slideToggle('medium');">
                 <span class="fa fa-{% if program.public %}globe{% else %}lock{% endif %}"></span>
                 <span>{% if program.public %}{{_('public')}}{% else %}{{_('private')}}{% endif %}</span>
@@ -89,7 +90,7 @@ <h3 id="submitted_header_{{ program.id }}" class="mt-0 mb-4 text-red-500 text-ce
                     else if not arrow.classList.contains('rotate-180')
                         add .rotate-180 to arrow
                     end">
-                    <button id="share_button_{{ program.id }}" class="gray-btn text-blue-500 min-w-full inline-flex items-center gap-2"
+                    <button data-cy="share_button_{{ program.id }}" class="gray-btn text-blue-500 min-w-full inline-flex items-center gap-2"
                     hx-post="/programs/share/{{program.id}}/{{second_teachers_programs}}"
                     data-cy="unshare_program_{{ program.id }}"
                     hx-swap="outerHTML"

templates/incl/adventure-tabs.html

@@ -1,5 +1,5 @@
       {# TABS #}
-      <div id="adventures">
+      <div id="adventures" data-cy="adventures">
         {% macro adventure_tab(tabname, title, selected, id, tab_class, index) %}
             <div
                 class="tab {% if selected %}tab-selected{% endif %} flex items-center justify-center whitespace-nowrap {{ tab_class }}"

templates/incl/editor-and-output.html

@@ -86,7 +86,7 @@
         </div>
     </div>
     <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-auto" id="code_output" style="height: {{editor_height}}">
-      <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 pb-10 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
+      <div id="output" data-cy="output" tabindex=0 class="flex-1 rounded p-2 px-3 pb-10 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
       <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
       <div class="overflow-auto flex-0 absolute bottom-0 w-full z-20 bg-blue-100">
         <div id="variable_button" class="hidden my-3 cursor-pointer" onclick="$('#variable_list').slideToggle('medium');">
@@ -154,7 +154,7 @@
       {% endif %}
       <div class="flex justify-between gap-2 items-start h-12 overflow-visible">
         <div id="run_button_container">
-          <button id="runit" class="green-btn" onclick='hedyApp.runit({{ level }}, "{{ g.lang }}", {% if raw %}{{raw | lower}}{% else %}false{% endif %}, {{_('already_program_running')|default(None)|tojson}}, "run")'>{{_('run_code_button')}} </button>
+          <button id="runit" data-cy="runit" class="green-btn" onclick='hedyApp.runit({{ level }}, "{{ g.lang }}", {% if raw %}{{raw | lower}}{% else %}false{% endif %}, {{_('already_program_running')|default(None)|tojson}}, "run")'>{{_('run_code_button')}} </button>
           <button id="stopit" class="red-btn" onclick="hedyApp.stopit()" style="display: none;">{{_('stop_code_button')}}</button>
         </div>
       <div id="saveMicrobitFilesContainer" {% if not microbit_feature %} class="hidden" {% endif %} >

templates/layout.html

@@ -20,7 +20,7 @@
     <div id="modal_mask" class="hidden fixed bg-black z-50 w-full h-full opacity-75"></div>
     <div id="modal_content" data-cy="modal_content" class="hidden fixed z-50 p-12 px-16 bg-blue-400 border-2 border-gray-400 rounded-lg text-lg text-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="max-height: 80vh; overflow-y: auto;">
        <div id="modal_confirm" data-cy="modal_confirm" class="hidden">
-          <div id="modal_confirm_text" class="text-white mb-8 text-xl"></div>
+          <div id="modal_confirm_text" data-cy="modal_confirm_text" class="text-white mb-8 text-xl"></div>
           <div class="ltr:ml-auto rtl:mr-auto ltr:mr-auto rtl:ml-auto mt-4 flex flex-row justify-center">
             <button id="modal_yes_button" data-cy="modal_yes_button" class="green-btn block m-4 w-40 pb-4 pt-4">{{_('yes')}}</button>
             <button id="modal_no_button" data-cy="modal_no_button" class="red-btn block m-4 w-40 pb-4 pt-4">{{_('no')}}</button>
@@ -64,11 +64,11 @@
                       class="border border-green-400 rounded py-2 px-2 w-full h-48"></textarea>
 
                       <div class="pt-4 text-white flex justify-center items-center gap-2">
-                        <input type="radio" id="bug" required name="category" value="bug" />
+                        <input type="radio" data-cy="bug" required name="category" value="bug" />
                         <label for="bug">{{_('bug')}}</label>
-                        <input type="radio" id="feature" required name="category" value="feature" />
+                        <input type="radio" data-cy="feature" required name="category" value="feature" />
                         <label for="feature">{{_('feature')}}</label>
-                        <input type="radio" id="feedback" required name="category" value="feedback" />
+                        <input type="radio" data-cy="feedback" required name="category" value="feedback" />
                         <label for="feedback">{{_('feedback')}}</label>
                       </div>
 

templates/programs.html

@@ -24,7 +24,7 @@
                     {% endfor %}
                 {% endif %}
             </select>
-            <select id="adventure_select" name="adventure" class="block appearance-none w-4/8 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" data-autosubmit="true">
+            <select id="adventure_select" data-cy="adventure_select" name="adventure" class="block appearance-none w-4/8 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" data-autosubmit="true">
                 <option class="text-center" selected value="">&mdash; {{ _('adventure') }} &mdash;</option>
                 {% if request.args.get('level') %}
                     {% for name in sorted_level_programs[request.args.get('level')|int] %}
@@ -49,7 +49,7 @@
         </div>
     </form>
   </div>
-  <div class="programs w-full">
+  <div class="programs w-full" data-cy="programs">
     {% for program in programs %}
         {{ render_partial('htmx-program.html', program=program, adventure_names=adventure_names, public_profile=public_profile, second_teachers_programs=second_teachers_programs) }}
     {% endfor %}

templates/public-adventures/body.html

@@ -6,6 +6,7 @@
         _="on load set $filtered to {}">
         <div id="search" class="w-full sm:basis-1/2">
             <input id="search_adventure"
+                data-cy="search_adventure"
                 type="search"
                 name="search"
                 value="{{currentSearch}}"
@@ -30,7 +31,7 @@
               </custom-select>
             </div>              
             <div id="languages" class="flex-1">
-              <custom-select id="language_select" data-label="{{ lang_to_sym(selectedLang) if selectedLang else _('select_lang') }}">
+              <custom-select id="language_select" data-cy="language_select" data-label="{{ lang_to_sym(selectedLang) if selectedLang else _('select_lang') }}">
                 <option
                         hx-post="/public-adventures/filter?lang=reset&level={{selectedLevel}}&tag={{selectedTag}}&search={{currentSearch}}"
                         hx-target="#public_adventures"
@@ -45,7 +46,7 @@
             </div>
 
             <div id="tags" class="flex-1">
-              <custom-select data-type="multiple" id="tag_select" data-label="{{ _('select_tag') }}">
+              <custom-select data-type="multiple" id="tag_select" data-cy="tag_select" data-label="{{ _('select_tag') }}">
                 {% for tag in available_tags %}
                   {% set selected = tag in selectedTag %}
                   <option {% if selected %}selected{% endif %}