enhance(cypress): extend coverage of test suite, extract functions and simplify structure

apps/frontend-manage/src/components/interaction/feedbacks/FeedbackChannel.tsx

@@ -92,17 +92,20 @@ function FeedbackChannel({
           )}
 
         {sortedFeedbacks?.map(
-          ({
-            id,
-            content,
-            createdAt,
-            votes,
-            isResolved,
-            isPinned,
-            isPublished,
-            responses,
-            resolvedAt,
-          }: FeedbackType) => (
+          (
+            {
+              id,
+              content,
+              createdAt,
+              votes,
+              isResolved,
+              isPinned,
+              isPublished,
+              responses,
+              resolvedAt,
+            }: FeedbackType,
+            index
+          ) => (
             <div className="flex flex-row print:mt-2" key={id}>
               {!isPublic && (
                 <div className="flex-initial print:hidden">

apps/frontend-manage/src/components/questions/QuestionEditModal.tsx

@@ -1006,7 +1006,9 @@ function QuestionEditModal({
                                                   newValue
                                                 )
                                               }}
-                                              data={{ cy: 'set-correctness' }}
+                                              data={{
+                                                cy: `set-correctness-${index}`,
+                                              }}
                                             />
                                           )}
                                         </FastField>

apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizCreationBlock.tsx

@@ -145,7 +145,7 @@ function LiveQuizCreationBlock({
             className={{
               root: 'px-1 hover:text-red-600',
             }}
-            data={{ cy: 'delete-block' }}
+            data={{ cy: `delete-block-${index}` }}
           >
             <Button.Icon>
               <FontAwesomeIcon icon={faTrash} />
@@ -346,7 +346,7 @@ function LiveQuizCreationBlock({
           'w-full rounded border border-solid p-0.5 text-center',
           isOver && 'bg-primary-20'
         )}
-        data-cy="drop-questions-here"
+        data-cy={`drop-questions-here-${index}`}
       >
         <FontAwesomeIcon icon={faPlus} size="lg" />
       </div>

apps/frontend-manage/src/pages/courses/[id].tsx

@@ -99,7 +99,9 @@ function CourseOverviewPage() {
           <div className="whitespace-nowrap font-bold">
             {t('shared.generic.pinCode')}
           </div>
-          <div className="font-mono text-red-700">{course.pinCode}</div>
+          <div className="font-mono text-red-700" data-cy="course-pin">
+            {course.pinCode}
+          </div>
           <div className="font-bold">{t('shared.generic.courseDuration')}</div>
           {dayjs(course.startDate).format('DD.MM.YYYY')} -{' '}
           {dayjs(course.endDate).format('DD.MM.YYYY')}

apps/frontend-pwa/src/components/participant/groups/GroupAction.tsx

@@ -14,6 +14,7 @@ interface GroupActionProps {
   explanation?: string
   placeholder?: string
   textSubmit?: string
+  inputData?: { text?: string; cy?: string }
   data?: { text?: string; cy?: string }
 }
 
@@ -45,6 +46,7 @@ function GroupAction({
   placeholder,
   textSubmit,
   validationSchema,
+  inputData,
   data,
   buttonMode,
 }: GroupActionButtonProps | GroupActionFormProps) {
@@ -77,6 +79,7 @@ function GroupAction({
                   name="value"
                   placeholder={placeholder}
                   className={{ root: 'w-full' }}
+                  data={inputData}
                 />
                 <Button
                   type="submit"

apps/frontend-pwa/src/components/participant/groups/GroupCreationBlock.tsx

@@ -58,6 +58,7 @@ function GroupCreationBlock({
       loading={loading}
       placeholder={t('pwa.courses.groupName')}
       textSubmit={t('shared.generic.create')}
+      inputData={{ cy: 'group-creation-name-input' }}
       data={{ cy: 'create-new-participant-group' }}
     />
   )

apps/frontend-pwa/src/components/practiceQuiz/ElementStack.tsx

@@ -270,7 +270,7 @@ function ElementStack({
               handleNextElement()
             }
           }}
-          data={{ cy: 'practice-quiz-continue' }}
+          data={{ cy: 'student-stack-continue' }}
         >
           {currentStep === totalSteps
             ? t('shared.generic.finish')
@@ -428,7 +428,7 @@ function ElementStack({
               }
             }
           }}
-          data={{ cy: 'practice-quiz-stack-submit' }}
+          data={{ cy: 'student-stack-submit' }}
         >
           {t('shared.generic.submit')}
         </Button>

apps/frontend-pwa/src/pages/join.tsx

@@ -59,6 +59,7 @@ function JoinPage() {
                 <FormikPinField
                   name="pin"
                   label={t('pwa.joinCourse.coursePinFormat')}
+                  data={{ cy: 'join-course-pin-field' }}
                 />
 
                 <Button

cypress/cypress.config.ts

@@ -11,11 +11,20 @@ export default defineConfig({
     LECTURER_PASSWORD: 'abcd',
     STUDENT_USERNAME: 'testuser1',
     STUDENT_USERNAME2: 'testuser2',
+    STUDENT_USERNAME3: 'testuser3',
+    STUDENT_USERNAME4: 'testuser4',
+    STUDENT_USERNAME5: 'testuser5',
+    STUDENT_USERNAME6: 'testuser6',
+    STUDENT_USERNAME7: 'testuser7',
+    STUDENT_USERNAME8: 'testuser8',
+    STUDENT_USERNAME9: 'testuser9',
     STUDENT_USERNAME10: 'testuser10',
     STUDENT_USERNAME11: 'testuser11',
+    STUDENT_USERNAME12: 'testuser12',
+    STUDENT_USERNAME15: 'testuser15',
     STUDENT_NOGROUP: 'testuser40',
     STUDENT_EMAIL: '[email protected]',
-    STUDENT_PASSWORD: 'abcd',
+    STUDENT_PASSWORD: 'abcdabcd',
 
     // codeCoverage: {
     //   expectBackendCoverageOnly: true,

cypress/cypress/e2e/A-login-workflow.cy.ts

@@ -1,3 +1,6 @@
+import messages from '../../../packages/i18n/messages/en'
+import { AVATAR_OPTIONS } from '../../../packages/shared-components/src/constants'
+
 describe('Login / Logout workflows for lecturer and students', () => {
   it('signs in into student account', () => {
     cy.clearAllCookies()
@@ -30,6 +33,168 @@ describe('Login / Logout workflows for lecturer and students', () => {
     cy.viewport('macbook-16')
   })
 
+  it('signs in into the student account and tries to modify the profile settings', () => {
+    cy.clearAllCookies()
+    cy.visit(Cypress.env('URL_STUDENT'))
+    cy.get('[data-cy="login-logo"]').should('exist')
+    cy.get('[data-cy="username-field"]').type(Cypress.env('STUDENT_USERNAME'))
+    cy.get('[data-cy="password-field"]').type(Cypress.env('STUDENT_PASSWORD'))
+    cy.get('[data-cy="submit-login"]').click()
+    cy.get('[data-cy="homepage"]').should('exist')
+
+    cy.get('[data-cy="header-avatar"]').click()
+    cy.get('[data-cy="edit-profile"]').click()
+
+    cy.get('[data-cy="avatar-hair-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['hair'][0]]
+    )
+    cy.get('[data-cy="avatar-hair-select"]').click()
+    cy.get(`[data-cy="avatar-hair-${AVATAR_OPTIONS['hair'][1]}"]`).click()
+    cy.get('[data-cy="avatar-hair-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['hair'][1]]
+    )
+
+    cy.get('[data-cy="avatar-hairColor-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['hairColor'][0]]
+    )
+    cy.get('[data-cy="avatar-hairColor-select"]').click()
+    cy.get(
+      `[data-cy="avatar-hairColor-${AVATAR_OPTIONS['hairColor'][1]}"]`
+    ).click()
+    cy.get('[data-cy="avatar-hairColor-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['hairColor'][1]]
+    )
+
+    cy.get('[data-cy="avatar-eyes-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['eyes'][0]]
+    )
+    cy.get('[data-cy="avatar-eyes-select"]').click()
+    cy.get(`[data-cy="avatar-eyes-${AVATAR_OPTIONS['eyes'][1]}"]`).click()
+    cy.get('[data-cy="avatar-eyes-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['eyes'][1]]
+    )
+
+    cy.get('[data-cy="avatar-accessory-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['accessory'][0]]
+    )
+    cy.get('[data-cy="avatar-accessory-select"]').click()
+    cy.get(
+      `[data-cy="avatar-accessory-${AVATAR_OPTIONS['accessory'][1]}"]`
+    ).click()
+    cy.get('[data-cy="avatar-accessory-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['accessory'][1]]
+    )
+
+    cy.get('[data-cy="avatar-mouth-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['mouth'][0]]
+    )
+    cy.get('[data-cy="avatar-mouth-select"]').click()
+    cy.get(`[data-cy="avatar-mouth-${AVATAR_OPTIONS['mouth'][1]}"]`).click()
+    cy.get('[data-cy="avatar-mouth-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['mouth'][1]]
+    )
+
+    cy.get('[data-cy="avatar-facialHair-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['facialHair'][0]]
+    )
+    cy.get('[data-cy="avatar-facialHair-select"]').click()
+    cy.get(
+      `[data-cy="avatar-facialHair-${AVATAR_OPTIONS['facialHair'][1]}"]`
+    ).click()
+    cy.get('[data-cy="avatar-facialHair-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['facialHair'][1]]
+    )
+
+    cy.get('[data-cy="avatar-clothing-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['clothing'][0]]
+    )
+    cy.get('[data-cy="avatar-clothing-select"]').click()
+    cy.get(
+      `[data-cy="avatar-clothing-${AVATAR_OPTIONS['clothing'][1]}"]`
+    ).click()
+    cy.get('[data-cy="avatar-clothing-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['clothing'][1]]
+    )
+
+    cy.get('[data-cy="avatar-clothingColor-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['clothingColor'][0]]
+    )
+    cy.get('[data-cy="avatar-clothingColor-select"]').click()
+    cy.get(
+      `[data-cy="avatar-clothingColor-${AVATAR_OPTIONS['clothingColor'][1]}"]`
+    ).click()
+    cy.get('[data-cy="avatar-clothingColor-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['clothingColor'][1]]
+    )
+
+    cy.get('[data-cy="avatar-skinTone-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['skinTone'][0]]
+    )
+    cy.get('[data-cy="avatar-skinTone-select"]').click()
+    cy.get(
+      `[data-cy="avatar-skinTone-${AVATAR_OPTIONS['skinTone'][1]}"]`
+    ).click()
+    cy.get('[data-cy="avatar-skinTone-select"]').contains(
+      messages.pwa.avatar[AVATAR_OPTIONS['skinTone'][1]]
+    )
+  })
+
+  it('signs in into student account and modifies the password', () => {
+    const newPassword = 'NEW PASSWORD'
+
+    cy.clearAllCookies()
+    cy.visit(Cypress.env('URL_STUDENT'))
+    cy.viewport('macbook-16')
+    cy.get('[data-cy="login-logo"]').should('exist')
+    cy.get('[data-cy="username-field"]').type(Cypress.env('STUDENT_USERNAME'))
+    cy.get('[data-cy="password-field"]').type(Cypress.env('STUDENT_PASSWORD'))
+    cy.get('[data-cy="submit-login"]').click()
+    cy.get('[data-cy="homepage"]').should('exist')
+    cy.wait(1000)
+
+    // modify password
+    cy.get('[data-cy="header-avatar"]').click()
+    cy.get('[data-cy="edit-profile"]').click()
+    cy.get('[data-cy="update-account-password"]').type(newPassword)
+    cy.get('[data-cy="update-account-password-repetition"]').type(newPassword)
+    cy.get('[data-cy="save-account-update"]').click()
+    cy.wait(1000)
+
+    // logout, reload page and log in again with new password
+    cy.get('[data-cy="header-avatar"]').click()
+    cy.get('[data-cy="logout"]').click()
+    cy.get('[data-cy="login-logo"]').should('exist')
+    cy.reload()
+    cy.get('[data-cy="login-logo"]').should('exist')
+    cy.get('[data-cy="username-field"]').type(Cypress.env('STUDENT_USERNAME'))
+    cy.get('[data-cy="password-field"]').type(newPassword)
+    cy.get('[data-cy="submit-login"]').click()
+    cy.get('[data-cy="homepage"]').should('exist')
+
+    // modify password back to original value
+    cy.get('[data-cy="header-avatar"]').click()
+    cy.get('[data-cy="edit-profile"]').click()
+    cy.get('[data-cy="update-account-password"]').type(
+      Cypress.env('STUDENT_PASSWORD')
+    )
+    cy.get('[data-cy="update-account-password-repetition"]').type(
+      Cypress.env('STUDENT_PASSWORD')
+    )
+    cy.get('[data-cy="save-account-update"]').click()
+    cy.wait(1000)
+
+    // login again with original credentials
+    cy.get('[data-cy="header-avatar"]').click()
+    cy.get('[data-cy="logout"]').click()
+    cy.get('[data-cy="login-logo"]').should('exist')
+    cy.reload()
+    cy.get('[data-cy="login-logo"]').should('exist')
+    cy.get('[data-cy="username-field"]').type(Cypress.env('STUDENT_USERNAME'))
+    cy.get('[data-cy="password-field"]').type(Cypress.env('STUDENT_PASSWORD'))
+    cy.get('[data-cy="submit-login"]').click()
+    cy.get('[data-cy="homepage"]').should('exist')
+  })
+
   it('signs in into student account with the students email', () => {
     cy.clearAllCookies()
     cy.visit(Cypress.env('URL_STUDENT'))
@@ -47,27 +212,21 @@ describe('Login / Logout workflows for lecturer and students', () => {
 
   it('signs in into lecturer account', () => {
     cy.visit(Cypress.env('URL_MANAGE'))
-
     cy.clearAllCookies()
     cy.clearAllLocalStorage()
-
     cy.get('[data-cy="delegated-login-button"').then((btn) => {
       if (btn.is(':disabled')) {
         cy.get('button[data-cy="tos-checkbox"]').click()
       }
     })
 
     cy.get('[data-cy="delegated-login-button"').should('be.enabled').click()
-
     cy.get('[data-cy="identifier-field"]').type(
       Cypress.env('LECTURER_IDENTIFIER')
     )
     cy.get('[data-cy="password-field"]').type(Cypress.env('LECTURER_PASSWORD'))
-
     cy.get('form > button[type=submit]').click()
-
     cy.get('[data-cy="homepage"]').should('exist')
-
     cy.get('[data-cy="user-menu"]').click()
   })
 })