[TESTING, CYPRESS] 3692 front-end test for the run code button and pr…

…ogrammers mode switch (hedyorg#3702)

[CYPRESS, TESTING]

**Description**
With these front-end tests the 'Run code' and programmers mode switch on the `/hedy` page are tested. I created id's in the HTML file to select the buttons and I implemented a function which navigates to the `/hedy` page that can be used for these tests but also for future tests.

**Fixes _issue or discussion number_**
Fixes hedyorg#3692 

**How to test**
Run
`export ADMIN_USER=admin_user; python app.py` in your virtual environment. This ensures that there is an active admin_user and Hedy is running.

Then you can go to the /tests folder and run:

`npx cypress run --spec cypress/e2e/hedy_page/`

templates/incl-editor-and-output.html

@@ -209,8 +209,8 @@
   <label for="developers_toggle" class="flex flex-row items-center justify-center cursor-pointer">
     <div class="relative">
       <input id="developers_toggle" type="checkbox" onclick="hedyApp.toggle_developers_mode(false)" class="sr-only" />
-      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
-      <div class="toggle-circle absolute w-6 h-6 bg-white rounded-full shadow ltr:-left-1 rtl:-right-1 -top-1 transition" style="top: -5px;"></div>
+      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" id="dev_toggle"></div>
+      <div class="toggle-circle absolute w-6 h-6 bg-white rounded-full shadow ltr:-left-1 rtl:-right-1 -top-1 transition" id="toggle_circle" style="top: -5px;"></div>
     </div>
     <div class="ltr:ml-3 rtl:mr-3">{{_('developers_mode')}}</div>
   </label>

tests/cypress/e2e/hedy_page/programmers_mode_switch.cy.js

@@ -0,0 +1,13 @@
+import {goToHedyPage} from "../tools/navigation/nav";
+
+describe('Is able to switch programmers mode on and of', () => {
+    it('Passes', () => {
+      goToHedyPage();
+
+      cy.get('#toggle_circle').click(); // Programmers mode is switched on
+      cy.get('#adventures-tab').should('not.be.visible');
+
+      cy.get('#toggle_circle').click(); // Programmers mode is switched off
+      cy.get('#adventures-tab').should('be.visible');
+    })
+  })

tests/cypress/e2e/hedy_page/run_code_button.cy.js

@@ -0,0 +1,16 @@
+import {goToHedyPage} from "../tools/navigation/nav";
+
+describe('Is able to run code', () => {
+    it('Passes', () => {
+      goToHedyPage();
+
+      // Run with correct code
+      cy.get('#runit').click();
+      cy.get('#okbox').should('be.visible');
+
+      // Run with incorrect code
+      cy.get('#editor').type('\np');
+      cy.get('#runit').click();
+      cy.get('#errorbox').should('be.visible');
+    })
+  })

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

@@ -40,4 +40,9 @@ export function goToTeachersPage()
     return goToPage(Cypress.env('teachers_page'));
 }
 
+export function goToHedyPage()
+{
+    return goToPage(Cypress.env('hedy_page'));
+}
+
 export default {goToPage}