fix level select

hedyorg · Apr 22, 2024 · ccd2d09 · ccd2d09
1 parent 942290c
commit ccd2d09
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 32 deletions.
diff --git a/templates/customize-adventure.html b/templates/customize-adventure.html
@@ -24,7 +24,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     </div>
                     <div class="flex flex-row items-center mb-4">
                         <label for="custom_adventure_classes" class="inline-block w-40 text-xl"  data-te-select-label-ref>{{_('used_in')}}</label>
-                        <div id="levels" class="flex-1">
+                        <div class="flex-1">
                             <div class="dropdown dropdown-green rounded relative" id="custom_adventure_classes" data-value="" data-dropdown-initialize>
                                 <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"
@@ -53,7 +53,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     </div>
                     <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 id="levels" class="flex-1">
+                        <div class="flex-1">
                             <div class="dropdown dropdown-green rounded relative" id="level_select" data-value="" data-dropdown-initialize>
                                 <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"

diff --git a/tests/cypress/e2e/for-teacher_page/customize-adventure_page/level_field.cy.js b/tests/cypress/e2e/for-teacher_page/customize-adventure_page/level_field.cy.js
@@ -1,34 +1,26 @@
-import {loginForTeacher} from '../../tools/login/login.js'
-import {goToEditAdventure} from '../../tools/navigation/nav.js'
+import { loginForTeacher } from '../../tools/login/login.js'
+import { goToEditAdventure } from '../../tools/navigation/nav.js'
 
 describe('Levels Dropdown Select test', () => {
- const levels = ["3", "5"];
- for (const level of levels) {
-   for (const teacher of ["teacher1", "teacher4"]) {
-     it(`${teacher} can select level ${level}`, () => {
-       loginForTeacher(teacher);
-       goToEditAdventure();
+  const levels = ["3", "5"];
+  for (const level of levels) {
+    for (const teacher of ["teacher1", "teacher4"]) {
+      it(`${teacher} can select level ${level}`, () => {
+        loginForTeacher(teacher);
+        goToEditAdventure();
 
-       // Tests level field interaction
-       cy.get('#custom_adventure_levels_container')
-         .should('be.visible')
-         .should('not.be.disabled')
-         .click()
-
-       cy.wait(400)
-
-       cy.get("div[data-te-select-dropdown-ref]")
-         .should('be.visible')
-
-       cy.get("div[role='option']")
-         .contains(level)
-         .click()
-
-       cy.get("div[role='option']")
-         .contains(level)
-         .parent()
-         .should("have.attr", "data-te-select-selected")
-     })
-   }
- }
+        // Tests level field interaction
+        cy.get("#level_select")
+          .should('be.visible')
+          .should('not.be.disabled')
+          .click()
+
+        cy.get(`#levels_dropdown > div.option[data-value="${level}"]`)
+          .click()
+
+        cy.get(`#levels_dropdown > div.option[data-value="${level}"]`)
+          .should('have.class', 'selected')
+      })
+    }
+  }
 })