🧪 Refactor cypress tests (part 3)

static/js/appbundle.js

@@ -103791,7 +103791,7 @@ def note_with_error(value, err):
     });
   }
   function duplicate_class(id2, teacher_classes, second_teacher_prompt, prompt, defaultValue = "") {
-    if (teacher_classes) {
+    if (teacher_classes && !defaultValue) {
       modal.confirm(second_teacher_prompt, function() {
         apiDuplicateClass(id2, prompt, true, defaultValue);
       }, function() {

static/js/teachers.ts

@@ -59,7 +59,7 @@ export function rename_class(id: string, class_name_prompt: string) {
 }
 
 export function duplicate_class(id: string, teacher_classes: string[], second_teacher_prompt: string, prompt: string, defaultValue: string = '') {
-  if (teacher_classes){
+  if (teacher_classes && !defaultValue){
     modal.confirm(second_teacher_prompt, function () {
       apiDuplicateClass(id, prompt, true, defaultValue);
     }, function () {

templates/customize-adventure.html

@@ -1,7 +1,7 @@
 {% extends "auth.html" %}
 
 {% block regular_content %}
-<button id='go_back_button' class="back-btn"
+<button id='go_back_button' data-cy='go_back_button' class="back-btn"
 onclick="window.open('/for-teachers', '_self');">
     <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
     <span>{{_('go_back')}}</span>
@@ -20,7 +20,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     <div class="flex flex-row items-center mb-4">
                         <label for="name" class="inline-block w-40 text-xl">{{_('name')}}</label>
                         <div class="flex-1">
-                            <input id="custom_adventure_name" autofocus required value="{{ adventure.name }}" class="w-full border-2 bg-gray-100 text-gray-700 py-2 px-4 ltr:pr-8 rtl:pl-8 rounded"{% if 'AdventureX' in adventure.name %}autofocus{% endif %}>
+                            <input id="custom_adventure_name" data-cy="custom_adventure_name" autofocus required value="{{ adventure.name }}" class="w-full border-2 bg-gray-100 text-gray-700 py-2 px-4 ltr:pr-8 rtl:pl-8 rounded"{% if 'AdventureX' in adventure.name %}autofocus{% endif %}>
                         </div>
                     </div>
                     <div class="flex flex-row items-center mb-4">
@@ -55,7 +55,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     <div class="flex flex-row items-center mb-4">
                         <label for="custom_adventure_levels" class="inline-block w-40 text-xl"  data-te-select-label-ref>{{_('available_in')}}</label>
                         <div class="flex-1">
-                            <div class="dropdown dropdown-green rounded relative" id="level_select" data-value="" data-dropdown-initialize>
+                            <div class="dropdown dropdown-green rounded relative" id="level_select" data-cy="level_select" data-value="" data-dropdown-initialize>
                                 <button type="button" class="toggle-button font-semibold rounded inline-flex justify-between 
                                                      appearance-none w-full border border-gray-200 text-gray-700 p-2 rounded"
                                     onclick="$('#levels_dropdown').slideToggle('medium');">
@@ -121,7 +121,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                         <label for="search_tags_input" class="inline-block w-40 text-xl">{{_('tags')}}</label>
                         <div class="flex-1">
                             <div class="flex flex-row w-full relative" id="add_tags">
-                                    <input type="text" name="tag" autocomplete="off" placeholder="{{_('tag_input_placeholder')}}" id="search_tags_input"
+                                    <input type="text" name="tag" autocomplete="off" placeholder="{{_('tag_input_placeholder')}}" id="search_tags_input" data-cy="search_tags_input"
                                         class="appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded"
                                         hx-trigger="keyup[keyCode == 13]"
                                         data-autosaved="true"
@@ -133,7 +133,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                                             on htmx:beforeRequest event.preventDefault() then if my value == '' then detail.xhr.abort() end
                                             on htmx:afterRequest set my value to '' then focus()" 
                                         >
-                                    <button class="green-btn" id="add_adventure_tags"
+                                    <button class="green-btn" data-cy="add_adventure_tags"
                                         hx-trigger="click"
                                         hx-post="/tags/create/{{adventure.id}}"
                                         hx-target="#tags_list"
@@ -192,14 +192,14 @@ <h3 class="text-center mt-0 mb-4">{{ _('adventure') }}
                     </div>
 
                     <div class="mt-2 mb-0 flex flex-row items-center text-center border-gray-500 border p-4 rounded-lg">
-                        <input type="checkbox" name="agree_public" id="agree_public" class="mr-4" {% if adventure.public %}checked{% endif %}>
+                        <input type="checkbox" name="agree_public" id="agree_public" data-cy="agree_public" class="mr-4" {% if adventure.public %}checked{% endif %}>
                         <label for="agree_public" class="text-sm italic w-full">{{_('adventure_terms')}}</label>
                     </div>
                 </div>
             </div>
             <div class="flex flex-row justify-end gap-2 my-4">
-                <button type="button" class="green-btn" id="preview_adventure_button" onclick="hedyApp.preview_adventure();event.preventDefault();">{{_('preview')}}</button>
-                <button type="reset" class="red-btn" id="remove_adventure_button" 
+                <button type="button" class="green-btn" data-cy="preview_adventure_button" onclick="hedyApp.preview_adventure();event.preventDefault();">{{_('preview')}}</button>
+                <button type="reset" class="red-btn" data-cy="remove_adventure_button" 
                   hx-confirm="{{_('delete_adventure_prompt')}}"
                   hx-trigger="click"
                   hx-delete="/for-teachers/customize-adventure/{{adventure.id}}"

templates/customize-class.html

@@ -96,21 +96,21 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
                             <tr>
                                 <td class="text-left border-t border-r border-gray-400">{{_('disable_quizes')}}</td>
                                 <td class="border-t border-gray-400">
-                                    <input class="other_settings_checkbox" id="hide_quiz" type="checkbox" {%
+                                    <input class="other_settings_checkbox" id="hide_quiz" data-cy="hide_quiz" type="checkbox" {%
                                         if "hide_quiz" in customizations['other_settings'] %}checked{% endif %}>
                                 </td>
                             </tr>
                             <tr>
                                 <td class="text-left border-t border-r border-gray-400">{{_('disable_parsons')}}</td>
                                 <td class="border-t border-gray-400">
-                                    <input class="other_settings_checkbox" id="hide_parsons" type="checkbox" {%
+                                    <input class="other_settings_checkbox" id="hide_parsons" data-cy="hide_parsons" type="checkbox" {%
                                         if "hide_parsons" in customizations['other_settings'] %}checked{% endif %}>
                                 </td>
                             </tr>
                             <tr>
                                 <td class="text-left border-t border-r border-gray-400">{{_('disable_explore_page')}}</td>
                                 <td class="border-t border-gray-400">
-                                    <input class="other_settings_checkbox" id="hide_explore" type="checkbox" {%
+                                    <input class="other_settings_checkbox" id="hide_explore" data-cy="hide_explore" type="checkbox" {%
                                         if "hide_explore" in customizations['other_settings'] %}checked{% endif %}>
                                 </td>
                             </tr>
@@ -120,7 +120,7 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
             </div>
 
             <div class="flex flex-col w-1/2">
-                <h3 id="opening_date_label" class="px-4 cursor-pointer"
+                <h3 id="opening_date_label" data-cy="opening_date_label" class="px-4 cursor-pointer"
                     _="on click
                         set t to #opening_date_container
                         toggle .rotate-180 on #opening_dates_arrow
@@ -135,7 +135,7 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
                         <svg id="opening_dates_arrow" class="fill-current inline h-6 w-6" 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>
                     </u>
                 </h3>
-                <div id="opening_date_container" class="border border-gray-400 w-full py-2 px-4 rounded-lg hidden opacity-0">
+                <div id="opening_date_container" data-cy="opening_date_container" class="border border-gray-400 w-full py-2 px-4 rounded-lg hidden opacity-0">
                     <table class="table-auto text-center opening_dates_overview">
                         <thead>
                             <tr>

templates/customize-class/partial-sortable-adventures.html

@@ -2,8 +2,7 @@
         <div class="flex w-full overflow-x-auto my-2">
             <h3 class="flex-1">{{_('select_adventures')}}</h3>
             <div class="flex items-center gap-2">
-                <select class="py-2 px-1 h-10 text-center " name="level" id="levels_dropdown"
-                        data-cy="adventures"
+                <select class="py-2 px-1 h-10 text-center " name="level" id="levels_dropdown" data-cy="levels_dropdown"
                         hx-get="/for-teachers/get-customization-level"
                         hx-target="#adventure_dragger"
                         hx-swap="outerHTML"
@@ -50,7 +49,7 @@ <h3 class="flex-1">{{_('select_adventures')}}</h3>
             <div id="state_accessible" class="leading-6 rounded-lg bg-gray-200 pt-1 pb-1 pl-2 pr-2 w-fit hidden">
                 <span>{{_('level_accessible')}}</span>
             </div>
-            <div id="state_disabled" class="leading-6 rounded-lg bg-gray-400 pt-1 pb-1 pl-2 pr-2 w-fit hidden">
+            <div id="state_disabled" data-cy="state_disabled" class="leading-6 rounded-lg bg-gray-400 pt-1 pb-1 pl-2 pr-2 w-fit hidden">
                 <span>{{_('level_disabled')}}</span>
             </div>
             <div id="state_future" class="leading-6 rounded-lg bg-green-300 pt-1 pb-1 pl-2 pr-2 w-fit hidden">

templates/for-teachers.html

@@ -18,7 +18,7 @@ <h2 class="m-0 basis-1/12"> {{_('classes')}} </h2>
       <p>{{ _('classes_info') }}</p>
       </div>
       <div class="flex flex-row gap-3 justify-end basis-1/12">
-        <button class="green-btn inline-flex items-center" id="create_class_button" onclick='hedyApp.create_class ({{_('class_name_prompt')|default(None)|tojson}})'
+        <button class="green-btn inline-flex items-center" id="create_class_button" data-cy="create_class_button" onclick='hedyApp.create_class ({{_('class_name_prompt')|default(None)|tojson}})'
         {% if second_teacher and role == 'viewer' %}disabled{% endif %}>{{_('create_class')}}</button>
         {% if teacher_classes %}
         <button class="white-btn inline-flex items-center gap-2" data-cy="view_classes"
@@ -41,7 +41,7 @@ <h2 class="m-0 basis-1/12"> {{_('adventures')}} </h2>
                 window.open('/for-teachers/customize-adventure', '_self')"
               data-cy="edit_link"{% if second_teacher and role == 'viewer' %}disabled{% endif %}>{{_('create_adventure')}}</button>
             {% if teacher_adventures %}
-            <button class="white-btn inline-flex" id="view_adventures"
+            <button class="white-btn inline-flex" id="view_adventures" data-cy="view_adventures"
             _="on click hedyApp.saveForTeacherTable('adventures_table')">
             <span>{{_('view_adventures')}}</span>
             <svg id="adventures_table_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">

templates/htmx-adventures-table.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-4 mb-8 md:px-16 hidden" id="adventures_table"
+<div class="flex flex-col gap-4 mb-8 md:px-16 hidden" id="adventures_table" data-cy="adventures_table"
     _="on load hedyApp.getForTeacherTable('adventures_table')">
     <div class="flex flex-col gap-4 pb-4 bg-gray-200 border border-gray-400 px-10 rounded-lg w-full lg:w-4/4 p-8">
       <h2 class="m-0 justify-left"> {{_('my_adventures')}} </h2>

templates/htmx-classes-table.html

@@ -27,7 +27,7 @@ <h2 class="m-0 justify-left"> {{_('my_classes')}} </h2>
                 </button>
                 <button class="flex flex-col items-center mr-16" id="duplicate_class"
                   data-cy="duplicate_{{class.name}}"
-                  onclick='hedyApp.duplicate_class("{{class.id}}", "{{class.second_teachers}}", {{_('second_teacher_copy_prompt')|default(None)|tojson}}, {{_('class_name_prompt')|default(None)|tojson}}, {% if class.teacher != username %}"{{class.name}}"{% else %}" "{% endif %})'>
+                  onclick='hedyApp.duplicate_class("{{class.id}}", "{{class.second_teachers}}", {{_('second_teacher_copy_prompt')|default(None)|tojson}}, {{_('class_name_prompt')|default(None)|tojson}}, {% if class.teacher != username %}"{{class.name}}"{% else %}""{% endif %})'>
                   <span class="fas fa-copy block mb-1"></span>
                   <span>{{_('duplicate')}}</span>
                 </button>
@@ -36,7 +36,7 @@ <h2 class="m-0 justify-left"> {{_('my_classes')}} </h2>
                   <span class="fas fa-eye block mb-1"></span>
                   <span>{{_('preview')}}</span>
                 </button>
-                <button id="remove_class" class="flex flex-col items-center"
+                <button data-cy="remove_class" class="flex flex-col items-center"
                     hx-confirm="{{_('delete_class_prompt')}}"
                     hx-trigger="click"
                     hx-delete="/class/{{class.id}}"

templates/htmx-tags-list.html

@@ -1,9 +1,9 @@
 
-<ul id="tags_list" class="flex flex-wrap items-center mb-4 list-none">
+<ul id="tags_list" data-cy="tags_list" class="flex flex-wrap items-center mb-4 list-none">
     {% for tag in tags %}
     <!-- TODO: allow teacher to edit tags; not urgent, but for a better ux! -->
         <li 
-            id="tag_{{loop.index}}" 
+            id="tag_{{loop.index}}"
             class='relative border-2 rounded-lg border-green-300 p-2 px-5 mx-2 mb-2 shadow'>
             {{tag}}
             {% if not public and username == creator %}

templates/incl/menubar.html

@@ -3,9 +3,9 @@
     <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" id="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="hedybutton" 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" id="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="explorebutton" 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>

templates/layout.html

@@ -18,12 +18,12 @@
     {% endif %}
     <noscript>Hedy requires Javascript to be enabled in your browser.</noscript>
     <div id="modal_mask" class="hidden fixed bg-black z-50 w-full h-full opacity-75"></div>
-    <div id="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_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 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" class="red-btn block m-4 w-40 pb-4 pt-4">{{_('no')}}</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>
           </div>
        </div>
        <div id="modal_prompt" class="hidden">
@@ -32,7 +32,7 @@
             <input id="modal_prompt_input" data-cy="modal_prompt_input" type="text" class="border border-green-400 rounded p-2 px-3 w-4/5 mt-1">
             <div class="mt-4 flex flex-row justify-center">
                 <button id="modal_ok_button" data-cy="modal_ok_button" class="green-btn block m-4 w-40 pb-4 pt-4">{{_('ok')}}</button>
-                <button id="modal_cancel_button" class="red-btn block m-4 w-40 pb-4 pt-4">{{_('cancel')}}</button>
+                <button id="modal_cancel_button" data-cy="modal_cancel_button" class="red-btn block m-4 w-40 pb-4 pt-4">{{_('cancel')}}</button>
             </div>
           </div>
        </div>
@@ -107,7 +107,7 @@
        </div>
         <div id="modal_preview" class="hidden">
           <div class="absolute top-2 right-2">
-              <svg class="fill-current h-8 w-8 text-white cursor-pointer" id="modal_preview_button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <svg class="fill-current h-8 w-8 text-white cursor-pointer" id="modal_preview_button" data-cy="modal_preview_button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
               <title>Close</title>
               <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/>
           </svg></div>