[TESTING] Survey view testing (#4802)

Fixes #4782 

Tests:
- Fill in one answer
- Fill in remaining 3 answers
- Click skip button
- Click remind me tomorrow button

It would be nice to only test classes that have students, anyone knows how to do that?

templates/htmx-survey.html

@@ -7,27 +7,27 @@
         <div class="mb-4">
                     <div id="question" class="text-white mb-4 text-xl">{{ _(question) }}</div>
                     <div class="flex flex-row justify-center space-x-1">
-                        <input autofocus="autofocus" id="input" type="text" class="flex items-center border border-green-400 rounded p-2 px-3 w-4/5 mx-auto" name="{{ question }}">
+                        <input autofocus="autofocus" id="input" data-cy="input_{{ loop.index }}" type="text" class="flex items-center border border-green-400 rounded p-2 px-3 w-4/5 mx-auto" name="{{ question }}">
                     </div>
                 </div>
             {% endfor %}
             <div class="mt-4 flex flex-row gap-2 justify-center">
-                <button type="submit" class="green-btn block mx-auto w-40 pb-4 pt-4"
+                <button id="submit" class="green-btn block mx-auto w-40 pb-4 pt-4"
                 hx-trigger="click"
                 hx-post="/surveys/submit-survey/{{ survey_id }}"
                 hx-include="[name='question']"
                 hx-swap="innerHTML"
                 _="on click toggle .hidden on #survey">
                 {{_('survey_submit')}}</button>
-                <button type="remind_later" class="red-btn block mx-auto w-40 pb-4 pt-4"
+                <button id="remind_later" class="red-btn block mx-auto w-40 pb-4 pt-4"
                 hx-trigger="click"
                 hx-post="/surveys/remind-later-survey/{{ survey_id }}"
                 hx-swap="innerHTML"
                 _="on click toggle .hidden on #survey">
                 {{_(survey_later)}}</button>
             </div>
             <div class="flex-row justify-center">
-            <button type="skip" class="text-white m-1 w-40 pb-4 pt-4"
+            <button id="skip" class="text-white m-1 w-40 pb-4 pt-4"
                 hx-trigger="click"
                 hx-post="/surveys/skip-survey/{{ survey_id }}"
                 hx-swap="innerHTML"

tests/cypress/e2e/for-teacher_page/class_page/class-survey.cy.js

@@ -0,0 +1,48 @@
+import {loginForTeacher} from '../../tools/login/login.js'
+import {createClassAndAddStudents} from '../../tools/classes/class.js'
+import { goToTeachersPage } from '../../tools/navigation/nav.js';
+
+let classname;
+
+beforeEach(() => {
+    loginForTeacher("teacher4");
+    ({classname} = createClassAndAddStudents());
+    goToTeachersPage();
+    cy.get(".view_class").contains(new RegExp(`^${classname}$`)).click();
+})
+
+describe('Class Survey View', () => {
+  it('Can first respond to 1 question, then to last 3 questions', () => {
+    cy.get("#input").type("test");
+    cy.get("#submit").click();
+    goToTeachersPage();
+    cy.get(".view_class").contains(new RegExp(`^${classname}$`)).click();
+    var surveyInputs = Array.from({length:3},(v, k)=>k+1)
+    cy.wrap(surveyInputs).each((index) => {
+        cy.getBySel("input_" + index)
+            .type("test")
+            .invoke('val').then((text) => {
+            expect('test').to.equal(text);
+            });
+        });
+    cy.get("#submit").click();
+    goToTeachersPage();
+    cy.get(".view_class").contains(new RegExp(`^${classname}$`)).click();
+    cy.get("#survey").should('not.exist');
+  })
+
+
+  it('Can be skipped and survey is not shown after', () => {
+    cy.get("#skip").click();
+    goToTeachersPage();
+    cy.get(".view_class").contains(new RegExp(`^${classname}$`)).click();
+    cy.get("#survey").should('not.exist');
+  })
+
+  it('Can be skipped and survey is not shown after', () => {
+    cy.get("#remind_later").click();
+    goToTeachersPage();
+    cy.get(".view_class").contains(new RegExp(`^${classname}$`)).click();
+    cy.get("#survey").should('not.exist');
+  })
+})

tests/cypress/e2e/for-teacher_page/general/click_duplicate_class.cy.js

@@ -34,7 +34,7 @@ describe('Is able to click on duplicate class', () => {
       .each(($username, i) => {
         if ($username.text().includes("teacher1")) {
           // Click on duplicate icon
-          cy.get(`tbody :nth-child(${i+1}) .no-underline > .fas`).click();
+          cy.get(`tbody :nth-child(${i+1}) .no-underline > .fas`).first().click();
 
           cy.wait(50)
           // Checks for input field

tests/cypress/e2e/for-teacher_page/general/duplicate_class.cy.js

@@ -27,7 +27,7 @@ describe('Is able to click on duplicate class', () => {
       .each(($tr, i) => {
         if ($tr.text().includes("teacher1")) {
           // Click on duplicate icon
-          cy.get(`tbody :nth-child(${i+1}) .no-underline > .fas`).click();
+          cy.get(`tbody :nth-child(${i+1}) .no-underline > .fas`).first().click();
 
           // Checks for input field
           cy.get('#modal-prompt-input').type(' teacher4');