🧪 Refactor cypress tests (part 3)

static/js/appbundle.js

@@ -60416,7 +60416,6 @@ ${o3}` : i3;
     changeUserEmail: () => changeUserEmail,
     change_language: () => change_language,
     change_password_student: () => change_password_student,
-    clearUnsavedChanges: () => clearUnsavedChanges,
     closeAchievement: () => closeAchievement,
     closeContainingModal: () => closeContainingModal,
     comeBackHereAfterLogin: () => comeBackHereAfterLogin,
@@ -60442,7 +60441,6 @@ ${o3}` : i3;
     getPreviousAndNext: () => getPreviousAndNext,
     get_active_and_trimmed_code: () => get_active_and_trimmed_code,
     goToLevel: () => goToLevel,
-    hasUnsavedChanges: () => hasUnsavedChanges,
     hide_editor: () => hide_editor,
     incrementDebugLine: () => incrementDebugLine,
     initialize: () => initialize,
@@ -60469,7 +60467,6 @@ ${o3}` : i3;
     logs: () => logs,
     markAsTeacher: () => markAsTeacher,
     markSuperTeacher: () => markSuperTeacher,
-    markUnsavedChanges: () => markUnsavedChanges,
     modal: () => modal,
     modalStepOne: () => modalStepOne,
     preview_adventure: () => preview_adventure,
@@ -77722,24 +77719,6 @@ def note_with_error(value, err):
     });
   }
 
-  // static/js/browser-helpers/unsaved-changes.ts
-  function unloadHandler(event2) {
-    event2.preventDefault();
-    return event2.returnValue = ClientMessages["Unsaved_Changes"];
-  }
-  var unsavedChanges = false;
-  function hasUnsavedChanges() {
-    return unsavedChanges;
-  }
-  function markUnsavedChanges() {
-    unsavedChanges = true;
-    window.addEventListener("beforeunload", unloadHandler, { capture: true });
-  }
-  function clearUnsavedChanges() {
-    unsavedChanges = false;
-    window.removeEventListener("beforeunload", unloadHandler, { capture: true });
-  }
-
   // static/js/tutorials/intro.ts
   var current_step = 0;
   function startIntro() {
@@ -77871,15 +77850,13 @@ def note_with_error(value, err):
     $("#code_content_container").addClass("z-40");
     $("#adventures").addClass("z-40 bg-gray-100");
     $("#adventures").show();
-    clearUnsavedChanges();
     addHighlightBorder("adventures");
     relocatePopup(50, 40);
     tutorialPopup("intro", current_step);
   }
   function adventureTabsStep() {
     $("#adventures_buttons").children().each(function() {
       if ($(this).attr("data-tab") == "story") {
-        clearUnsavedChanges();
         $(this).click();
       }
     });
@@ -77888,7 +77865,6 @@ def note_with_error(value, err):
   function parsonsTabStep() {
     $("#adventures_buttons").children().each(function() {
       if ($(this).attr("data-tab") == "parsons") {
-        clearUnsavedChanges();
         $(this).click();
       }
     });
@@ -77897,7 +77873,6 @@ def note_with_error(value, err):
   function quizTabStep() {
     $("#adventures_buttons").children().each(function() {
       if ($(this).attr("data-tab") == "quiz") {
-        clearUnsavedChanges();
         $(this).click();
       }
     });
@@ -77906,7 +77881,6 @@ def note_with_error(value, err):
   function saveShareStep() {
     $("#adventures_buttons").children().each(function() {
       if ($(this).attr("data-tab") == "default") {
-        clearUnsavedChanges();
         $(this).click();
       }
     });
@@ -103791,7 +103765,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() {
@@ -104132,7 +104106,6 @@ def note_with_error(value, err):
         showAchievements(response.achievement, false, "");
       }
       modal.notifySuccess(response.success);
-      clearUnsavedChanges();
       $("#remove_customizations_button").removeClass("hidden");
     }).fail(function(err) {
       modal.notifyError(err.responseText);
@@ -104159,7 +104132,6 @@ def note_with_error(value, err):
     });
   }
   function enable_level(level3) {
-    markUnsavedChanges();
     if ($("#enable_level_" + level3).is(":checked")) {
       $("#opening_date_level_" + level3).prop("disabled", false).attr("type", "text").attr("placeholder", ClientMessages.directly_available).removeClass("bg-green-300").addClass("bg-gray-200");
     } else {
@@ -104183,16 +104155,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() {
@@ -104327,21 +104306,8 @@ def note_with_error(value, err):
   }
   function initializeCustomizeClassPage(options) {
     $(document).ready(function() {
-      $("input").on("change", function() {
-        markUnsavedChanges();
-      });
       $("#back_to_class").on("click", () => {
-        function backToClass() {
-          window.location.href = `/for-teachers/class/${options.class_id}`;
-        }
-        if (hasUnsavedChanges()) {
-          modal.confirm(ClientMessages.unsaved_class_changes, () => {
-            clearUnsavedChanges();
-            backToClass();
-          });
-        } else {
-          backToClass();
-        }
+        window.location.href = `/for-teachers/class/${options.class_id}`;
       });
       $("[id^=opening_date_level_]").each(function() {
         setDateLevelInputColor($(this).attr("level"));

static/js/index.ts

@@ -19,7 +19,6 @@ export * from './statistics';
 export * from './logs';
 export * from './tutorials/tutorial';
 export * from './teachers';
-export * from './browser-helpers/unsaved-changes';
 export * from './initialize';
 export * from './debugging';
 export { getPreviousAndNext } from './tabs';

static/js/teachers.ts

@@ -1,6 +1,5 @@
 import { modal } from './modal';
 import { showAchievements, theKeywordLanguage } from "./app";
-import { markUnsavedChanges, clearUnsavedChanges, hasUnsavedChanges } from './browser-helpers/unsaved-changes';
 import { ClientMessages } from './client-messages';
 import DOMPurify from 'dompurify'
 import { startTeacherTutorial } from './tutorials/tutorial';
@@ -59,7 +58,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 () {
@@ -429,7 +428,6 @@ export function save_customizations(class_id: string) {
           showAchievements(response.achievement, false, "");
       }
       modal.notifySuccess(response.success);
-      clearUnsavedChanges();
       $('#remove_customizations_button').removeClass('hidden');
     }).fail(function (err) {
       modal.notifyError(err.responseText);
@@ -472,7 +470,6 @@ export function restore_customization_to_default(prompt: string) {
 }
 
 export function enable_level(level: string) {
-    markUnsavedChanges();
     if ($('#enable_level_' + level).is(':checked')) {
       $('#opening_date_level_' + level).prop('disabled', false)
                                       .attr('type', 'text')
@@ -510,19 +507,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() {
@@ -694,24 +703,8 @@ export interface InitializeCustomizeClassPageOptions {
 
 export function initializeCustomizeClassPage(options: InitializeCustomizeClassPageOptions) {
   $(document).ready(function(){
-      // Use this to make sure that we return a prompt when a user leaves the page without saving
-      $( "input" ).on('change', function() {
-        markUnsavedChanges();
-      });
-
       $('#back_to_class').on('click', () => {
-        function backToClass() {
-            window.location.href = `/for-teachers/class/${options.class_id}`;
-        }
-
-        if (hasUnsavedChanges()) {
-            modal.confirm(ClientMessages.unsaved_class_changes, () => {
-                clearUnsavedChanges();
-                backToClass();
-            });
-        } else {
-            backToClass();
-        }
+        window.location.href = `/for-teachers/class/${options.class_id}`;
       });
 
       $('[id^=opening_date_level_]').each(function() {

static/js/tutorials/intro.ts

@@ -1,6 +1,5 @@
 import {pushAchievement, runit, theGlobalEditor} from "../app";
 import {addHighlightBorder, relocatePopup, removeBorder, tutorialPopup} from "./utils";
-import { clearUnsavedChanges } from '../browser-helpers/unsaved-changes';
 
 let current_step = 0;
 
@@ -158,8 +157,6 @@ function levelDefaultStep() {
   $('#adventures').addClass('z-40 bg-gray-100');
   $('#adventures').show();
 
-  // Set to false, prevent "are you sure you want to switch without saving" pop-up
-  clearUnsavedChanges();
 
   addHighlightBorder("adventures");
   relocatePopup(50, 40);
@@ -169,8 +166,6 @@ function levelDefaultStep() {
 function adventureTabsStep() {
   $('#adventures_buttons').children().each(function() {
     if ($(this).attr('data-tab') == "story") {
-      // Set to false, prevent "are you sure you want to switch without saving" pop-up
-      clearUnsavedChanges();
       $(this).click();
     }
   });
@@ -181,8 +176,6 @@ function adventureTabsStep() {
 function parsonsTabStep() {
   $('#adventures_buttons').children().each(function() {
     if ($(this).attr('data-tab') == "parsons") {
-      // Set to false, prevent "are you sure you want to switch without saving" pop-up
-      clearUnsavedChanges();
       $(this).click();
     }
   });
@@ -192,8 +185,6 @@ function parsonsTabStep() {
 function quizTabStep() {
   $('#adventures_buttons').children().each(function() {
     if ($(this).attr('data-tab') == "quiz") {
-      // Set to false, prevent "are you sure you want to switch without saving" pop-up
-      clearUnsavedChanges();
       $(this).click();
     }
   });
@@ -204,7 +195,6 @@ function saveShareStep() {
   // We should go back to the intro tab to make sure the save/share option is shown
   $('#adventures_buttons').children().each(function() {
     if ($(this).attr('data-tab') == "default") {
-      clearUnsavedChanges();
       $(this).click();
     }
   });

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>