🧪 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() {
@@ -104183,16 +104183,23 @@ def note_with_error(value, err):
     }
   }
   function add_account_placeholder() {
-    let row = $("#account_row_unique").clone();
-    row.removeClass("hidden");
-    row.attr("id", "");
-    row.find(":input").each(function() {
-      if ($(this).prop("id") != "classes") {
-        $(this).prop("required", true);
-      }
-    });
+    const rowTemplate = $("#account_row_unique").clone();
+    rowTemplate.removeClass("hidden");
+    rowTemplate.attr("id", "");
+    function updateDataCyAttributes(row, index3) {
+      row.find("[data-cy]").each(function() {
+        const currentCy = $(this).attr("data-cy");
+        if (currentCy) {
+          const newCy = currentCy.replace(/_\d+$/, `_${index3}`);
+          $(this).attr("data-cy", newCy);
+        }
+      });
+    }
+    const existingRowsCount = $(".account_row").length;
     for (let x = 0; x < 5; x++) {
-      row.clone().appendTo("#account_rows_container");
+      const newRow = rowTemplate.clone();
+      updateDataCyAttributes(newRow, existingRowsCount + x + 1);
+      newRow.appendTo("#account_rows_container");
     }
   }
   function generate_passwords() {

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 () {
@@ -510,19 +510,31 @@ export function setDateLevelInputColor(level: string) {
 }
 
 export function add_account_placeholder() {
-    let row = $('#account_row_unique').clone();
-    row.removeClass('hidden');
-    row.attr('id', "");
-    // Set all inputs except class to required
-    row.find(':input').each(function() {
-       if ($(this).prop('id') != 'classes') {
-           $(this).prop('required', true);
-       }
-    });
-    // Append 5 rows at once
-    for (let x = 0; x < 5; x++) {
-        row.clone().appendTo("#account_rows_container");
-    }
+  // Get the hidden row template
+  const rowTemplate = $('#account_row_unique').clone();
+  rowTemplate.removeClass('hidden');
+  rowTemplate.attr('id', "");
+
+  // Function to update data-cy attributes
+  function updateDataCyAttributes(row: JQuery<HTMLElement>, index: number) {
+      row.find('[data-cy]').each(function() {
+          const currentCy = $(this).attr('data-cy');
+          if (currentCy) {
+              const newCy = currentCy.replace(/_\d+$/, `_${index}`);
+              $(this).attr('data-cy', newCy);
+          }
+      });
+  }
+
+  // Get the current number of rows
+  const existingRowsCount = $('.account_row').length;
+
+  // Append 5 rows at once
+  for (let x = 0; x < 5; x++) {
+      const newRow = rowTemplate.clone();
+      updateDataCyAttributes(newRow, existingRowsCount + x + 1);
+      newRow.appendTo("#account_rows_container");
+  }
 }
 
 export function generate_passwords() {

templates/create-accounts.html

@@ -22,10 +22,10 @@ <h2 class="w-full text-center my-0 py-0">{{_('password')}}</h2>
                 <!-- we create one hidden row -> we can simply copy this one and append() below when adding rows -->
                 {% for i in range(5) %}
                     <div class="flex flex-row w-full gap-2 items-center mb-4 account_row {% if i == 0 %}hidden{% endif %}" {% if i == 0 %}id="account_row_unique"{% endif %}>
-                        <input id="username" data-cy="username" autocomplete="off" name="username" type=text placeholder="{{_('username')}}" class="usernames_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
-                        <input id="password" data-cy="password" autocomplete="off" name="password" minlength="6" type=text placeholder="{{_('password')}}" class="passwords_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
+                        <input id="username" data-cy="username_{{i}}" autocomplete="off" name="username" type=text placeholder="{{_('username')}}" class="usernames_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
+                        <input id="password" data-cy="password_{{i}}" autocomplete="off" name="password" minlength="6" type=text placeholder="{{_('password')}}" class="passwords_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
                         <input id="classes" name="class" value="{{current_class.name}}" disabled type="hidden">
-                        <svg class="fill-current w-40 text-red-500 cursor-pointer" xmlns="http://www.w3.org/2000/svg" onclick="$(this).parent().remove();" viewBox="0 0 20 20"><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>
+                        <svg data-cy="remove_student_{{i}}" class="fill-current w-40 text-red-500 cursor-pointer" xmlns="http://www.w3.org/2000/svg" onclick="$(this).parent().remove();" viewBox="0 0 20 20"><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>
                 {% endfor %}
             </div>
@@ -61,7 +61,7 @@ <h2 class="w-full text-center my-0 py-0">{{_('password')}}</h2>
                 <button class="yellow-btn text-white" onclick="hedyApp.append_classname();">{{_('postfix_classname')}}</button>
                 <button type="reset" data-cy="reset_button" class="red-btn" onclick="window.open('/for-teachers/create-accounts/{{ current_class.id }}', '_self');">
                     {{_('reset_view')}}</button>
-                <button type="submit" id="create_accounts_button" class="blue-btn px-4">{{_('create_accounts')}}</button>
+                <button type="submit" data-cy="create_accounts_button" class="blue-btn px-4">{{_('create_accounts')}}</button>
             </div>
         </div>
         </form>

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_setting" 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_setting" 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_setting" 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">
@@ -73,7 +72,7 @@ <h3 class="flex-1">{{_('select_adventures')}}</h3>
                         {% if adventure.is_teacher_adventure %}teacher_tab{% elif adventure.is_command_adventure %}command_tab{% endif %} 
                         {% if adventure.short_name in ['quiz', 'parsons'] %}special_tab{% endif %}
                         z-10 whitespace-nowrap flex items-center justify-left relative" data-cy="{{ adventure.short_name }}">
-                        <span class="absolute top-0.5 right-0.5 text-gray-600 hover:text-red-400 fa-regular fa-circle-xmark" data-cy="hide"
+                        <span class="absolute top-0.5 right-0.5 text-gray-600 hover:text-red-400 fa-regular fa-circle-xmark" data-cy="hide_{{adventure.short_name}}"
                             hx-post="/for-teachers/remove-adventure?adventure_id={{ adventure.short_name }}&level={{ level }}" 
                             hx-target="#adventure_dragger"
                             hx-indicator="#indicator"></span>

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">