[TESTING] Adds test for Hedy's choice programs (#4460)

**Description**

The Hedy's choice programs were not functioning for a while, so this tests makes sure that if they fail, it won't go unnoticed again.

**Fixes #4407**

**Checklist**
Done? Check if you have it all in place using this list: (mark with x if done)

- [ ] Contains one of the PR categories in the name
- [ ] Describes changes in the format above
- [ ] Links to an existing issue or discussion
- [ ] Has a "How to test" section

If you're unsure about any of these, don't hesitate to ask. We're here to help!

templates/class-overview.html

@@ -4,9 +4,9 @@
 <div>
     {% if achievement %}
     <script>
-    $(function() {
-        hedyApp.showAchievements({{ achievement|safe }}, false, "");
-    });
+        document.addEventListener("DOMContentLoaded", function() {
+            hedyApp.showAchievements({{ achievement|safe }}, false, "");
+        });
     </script>
     {% endif %}
     <div class="flex flex-col gap-4">

templates/explore.html

@@ -4,9 +4,9 @@
 <div class="px-8 py-12">
     {% if achievement %}
     <script>
-    $(function() {
-        hedyApp.showAchievements({{ achievement|safe }}, false, "");
-    });
+        document.addEventListener("DOMContentLoaded", function() {
+            hedyApp.showAchievements({{ achievement|safe }}, false, "");
+        });
     </script>
     {% endif %}
     <!-- <h2 class="px-8 mb-4">{{_('explore_programs')}}</h2> -->
@@ -39,7 +39,7 @@
             <h2 class="text-center z-10 font-bold pb-0 mb-0 text-3xl">{{_('hedy_choice_title')}}</h2>
             <div class="flex flex-wrap mx-auto justify-center gap-4 turn-pre-into-ace" id="explore_favourite_programs">
                 {% for program in favourite_programs %}
-                    {{ public_programs.program_box(program, true) }}
+                    {{ public_programs.program_box(program, true, is_admin) }}
                 {% endfor %}
             </div>
         </div>
@@ -50,7 +50,7 @@ <h2 class="text-center z-10 font-bold pb-0 mb-0 text-3xl">{{_('hedy_choice_title
                     {{_('no_programs')}}
                 {% else %}
                     {% for program in programs %}
-                        {{ public_programs.program_box(program, false) }}
+                        {{ public_programs.program_box(program, false, is_admin) }}
                     {% endfor %}
                 {% endif %}
             </div>

templates/macros/public-programs.html

@@ -1,5 +1,5 @@
-{% macro program_box(program, is_favorite) %}
-    <div class="explore-program-box overflow-hidden">
+{% macro program_box(program, is_favorite, is_admin) %}
+    <div class="explore-program-box overflow-hidden" data-cy="{{ program.id }}">
         <div class="flex flex-col h-full">
                 <div class="explore-program-box-title
                            {% if is_favorite %} bg-yellow-500

tests/cypress.config.js

@@ -41,5 +41,6 @@ module.exports = defineConfig({
     admin_achievements_page: '/admin/achievements',
     admin_classes_page: '/admin/classes',
     programs_page: '/programs',
+    explore_programs_page: '/explore',
   }
 });

tests/cypress/e2e/explore_programs_page/explore_programs.cy.js

@@ -0,0 +1,27 @@
+const { loginForAdmin } = require("../tools/login/login");
+const { goToExploreProgramsPage } = require("../tools/navigation/nav");
+
+describe('Explore programs page', () => {
+    beforeEach(() => {
+        loginForAdmin();
+        goToExploreProgramsPage();
+    });
+
+    it('When selecting a program as Hedys choice, it should be shown', ()=>{
+        // Get the id of the first program in the db
+        cy.get('#explore_page_programs')
+          .children()
+          .first()
+          .invoke('attr', 'data-cy')
+          .as('program_id');
+
+        cy.get('@program_id').then(program_id => {
+            // mark the program as Hedys choice
+            cy.get(`#${program_id}`).click();
+            cy.get('#modal-yes-button').click();
+            // reload the page to see the changes
+            cy.reload();
+            cy.get(`#explore_favourite_programs > [data-cy=${program_id}]`).should('be.visible');
+        });
+    });
+});

tests/cypress/e2e/tools/navigation/nav.js

@@ -105,4 +105,9 @@ export function goToEditAdventure()
       .click();
 }
 
+export function goToExploreProgramsPage()
+{
+   return goToPage(Cypress.env('explore_programs_page'));
+}
+
 export default {goToPage}