Skip to content

Commit

Permalink
🧪 Refactor cypress tests (part 3) (#5592)
Browse files Browse the repository at this point in the history 
Refactors the entire `for-teacher folder` for #4027 :
- `customize-adventure folder` only data-cy and .it() refactoring

**How to test**
I think the best way is to click around the for-teacher page tests and see if they are structured better, readabilty improved and if they cover testing the whole for-teacher page
  • Loading branch information
@Annelein
Annelein authored Jun 18, 2024
1 parent a4d8503 commit 9cd260b
Show file tree
Hide file tree
Showing 68 changed files with 822 additions and 1,512 deletions.
70 changes: 18 additions & 52 deletions static/js/appbundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -60469,7 +60467,6 @@ ${o3}` : i3;
logs: () => logs,
markAsTeacher: () => markAsTeacher,
markSuperTeacher: () => markSuperTeacher,
markUnsavedChanges: () => markUnsavedChanges,
modal: () => modal,
modalStepOne: () => modalStepOne,
preview_adventure: () => preview_adventure,
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
}
});
Expand All @@ -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();
}
});
Expand All @@ -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();
}
});
Expand All @@ -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();
}
});
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand All @@ -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() {
Expand Down Expand Up @@ -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"));
Expand Down
6 changes: 3 additions & 3 deletions static/js/appbundle.js.map
View file

Large diffs are not rendered by default.

29 changes: 0 additions & 29 deletions static/js/browser-helpers/unsaved-changes.ts
View file

This file was deleted.

1 change: 0 additions & 1 deletion static/js/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
61 changes: 27 additions & 34 deletions static/js/teachers.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
10 changes: 0 additions & 10 deletions static/js/tutorials/intro.ts
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand Down Expand Up @@ -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);
Expand All @@ -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();
}
});
Expand All @@ -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();
}
});
Expand All @@ -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();
}
});
Expand All @@ -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();
}
});
Expand Down
8 changes: 4 additions & 4 deletions templates/create-accounts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 9cd260b

Please sign in to comment.