fix tests

static/js/app.ts

@@ -173,7 +173,8 @@ export function initializeApp(options: InitializeAppOptions) {
 
   // All input elements with data-autosubmit="true" automatically submit their enclosing form
   $('*[data-autosubmit="true"]').on('change', (ev) => {
-    $(ev.target).closest('form').trigger('submit');
+    const form = ev.target.closest('form') as HTMLFormElement
+    form['trigger']('submit');
   });
 
   initializeLoginLinks();

static/js/appbundle.js

@@ -104656,7 +104656,9 @@ def note_with_error(value, err):
       });
     });
     $('*[data-autosubmit="true"]').on("change", (ev) => {
-      $(ev.target).closest("form").trigger("submit");
+      const form = ev.target.closest("form");
+      console.log(form.elements);
+      form["trigger"]("submit");
     });
     initializeLoginLinks();
     initializeActivity();

templates/explore.html

@@ -32,6 +32,24 @@
             </div>
         </form>
     </div>
+    <div class="w-full mb-4" id="program_filter">
+        <form method="GET">
+            <div class="flex flex-row px-4 w-full items-center border border-gray-400 py-2 rounded-lg gap-4">
+                <custom-select name="adventure" id="explore_page_adventure" data-autosubmit="true" class="w-2/3" data-type="single">
+                    <option hidden {% if not filtered_adventure %} selected{% endif %} value="">&mdash; {{ _('adventure') }} &mdash;</option>
+                    {% for adventure_key, name in adventures_names.items() %}
+                        <option hidden value="{{ adventure_key }}" {% if adventure_key == filtered_adventure %}selected{% endif %}>{{ name }}</option>
+                    {% endfor %}
+                </custom-select>
+                <custom-select name="level" id="explore_page_level" data-autosubmit="true" class="w-1/3" data-type="single">
+                    <option hidden {% if not filtered_adventure %}selected{% endif %} value="">&mdash; {{_('level')}} &mdash;</option>
+                    {% for i in range(1, (max_level + 1)) %}
+                        <option hidden value="{{ i }}" {% if filtered_level and i|string == filtered_level %}selected{% endif %}>{{ i }}</option>
+                    {% endfor %}                
+                </custom-select>
+            </div>
+        </form>
+    </div>
     <!-- Only show our selected favourites when not filtering -->
     {% if not filtered_level and not filtered_adventure and favourite_programs %}
         <div class="border rounded-lg border-yellow-500 mb-4 py-2">

tests/cypress/e2e/for-teacher_page/customize-adventure_page/level_field.cy.js

@@ -10,15 +10,15 @@ describe('Levels Dropdown Select test', () => {
         goToEditAdventure();
 
         // Tests level field interaction
-        cy.get("#level_select")
+        cy.get("#levels_dropdown")
           .should('be.visible')
           .should('not.be.disabled')
           .click()
 
-        cy.get(`#levels_dropdown > div.option[data-value="${level}"]`)
+        cy.get(`#levels_dropdown > div > div > div.option[data-value="${level}"`)
           .click()
 
-        cy.get(`#levels_dropdown > div.option[data-value="${level}"]`)
+        cy.get(`#levels_dropdown > div > div > div.option[data-value="${level}"`)
           .should('have.class', 'selected')
       })
     }

tests/cypress/e2e/public_adventures/public_adventures.cy.js

@@ -8,18 +8,18 @@ describe("Able to browse all public adventures and use filters", () => {
     });
 
     it("should have level 1 as the default one", () => {
-        cy.get("#level-select").should('have.attr', 'data-value', '1')
+        cy.get("#level-select > div > div > div.option.selected").should('have.attr', 'data-value', '1')
     })
 
     it("should be able to filter by levels", () => {
         cy.get("#level-select")
             .click()
 
-        cy.get('#level_dropdown').should('be.visible');
+        cy.get('#level-select > div > div.dropdown-menu').should('be.visible');
 
         cy.get("#adventures").should("contain.text", "adventure1")
         cy.get("#adventures").should("contain.text", "adventure2")
-        cy.get("#level_dropdown .option[data-value='2']")
+        cy.get("#level-select > div > div > div.option[data-value='2']")
             .click()
 
         cy.get("#adventures").should("contain.text", "adventure1")
@@ -30,11 +30,11 @@ describe("Able to browse all public adventures and use filters", () => {
         cy.get("#language-select")
             .click()
 
-        cy.get('#lang_dropdown').should('be.visible');
+        cy.get('#language-select > div > div.dropdown-menu').should('be.visible');
 
         cy.get("#adventures").should("contain.text", "adventure1")
         cy.get("#adventures").should("contain.text", "adventure2")
-        cy.get("#lang_dropdown .option[data-value='en']")
+        cy.get("#language-select > div > div > div.option[data-value='English']")
             .click()
 
         cy.get("#adventures").should("contain.text", "adventure1")
@@ -45,11 +45,11 @@ describe("Able to browse all public adventures and use filters", () => {
         cy.get("#tag-select")
             .click()
 
-        cy.get('#tags_dropdown').should('be.visible');
+        cy.get('#tag-select > div > div.dropdown-menu').should('be.visible');
 
         cy.get("#adventures").should("contain.text", "adventure1")
         cy.get("#adventures").should("contain.text", "adventure2")
-        cy.get("#tags_dropdown .option[data-value='test']")
+        cy.get("#tag-select > div > div.dropdown-menu > .option[data-value='test']")
             .click()
 
         cy.get("#adventures").should("contain.text", "adventure1")