chore(cypress): extend e2e testing to cover participation in gamified live quiz without participant account (#4735)

Author: sjschlapbach

apps/frontend-manage/src/components/common/Header.tsx

@@ -218,12 +218,14 @@ function Header({ user }: { user?: User | null }): React.ReactElement {
           quizzes?.length !== 0 ? 'text-green-600' : 'text-slate-400'
         ),
       },
+      data: { cy: 'running-live-quiz-dropdown' },
       elements:
         quizzes?.map((quiz) => ({
           key: quiz.id,
           type: 'link',
           label: quiz.name,
           onClick: () => router.push(`/quizzes/${quiz.id}/cockpit`),
+          data: { cy: `running-live-quiz-${quiz.name}` },
         })) ?? [],
     },
     {

apps/frontend-manage/src/components/liveQuiz/cockpit/LiveQuizQRModal.tsx

@@ -46,6 +46,7 @@ function LiveQuizQRModal({
               className={{ title: 'text-base', canvas: 'flex justify-center' }}
               path={accountRelativeLink}
               width={100}
+              data={{ cy: 'qr-link-shortname' }}
             />
             <Link passHref href={`/qr${accountRelativeLink}`} target="_blank">
               <Button
@@ -72,14 +73,10 @@ function LiveQuizQRModal({
               className={{ title: 'text-base', canvas: 'flex justify-center' }}
               path={quizRelativeLink}
               width={100}
+              data={{ cy: 'qr-link-direct' }}
             />
             <Link passHref href={`/qr${quizRelativeLink}`} target="_blank">
-              <Button
-                fluid
-                primary
-                className={{ root: 'mt-2' }}
-                data={{ cy: `qr-direct-link-${quizId}` }}
-              >
+              <Button fluid primary className={{ root: 'mt-2' }}>
                 <Button.Label>{t('manage.general.presentQrCode')}</Button.Label>
               </Button>
             </Link>

apps/frontend-manage/src/components/liveQuiz/cockpit/LiveQuizTimeline.tsx

@@ -147,7 +147,7 @@ function LiveQuizTimeline({
             <Button
               className={{ root: 'h-8 sm:w-max' }}
               onClick={() => setQRModal(true)}
-              data={{ cy: `qr-modal-${quizId}` }}
+              data={{ cy: 'open-qr-modal' }}
             >
               <Button.Icon icon={faQrcode} />
               <Button.Label> {t('manage.general.qrCode')}</Button.Label>

apps/frontend-manage/src/pages/qr/[...args].tsx

@@ -18,6 +18,7 @@ interface Props {
   showLink?: boolean
   showButton?: boolean
   showLogo?: boolean
+  data?: { cy?: string; test?: string }
 }
 
 export function QR({
@@ -27,6 +28,7 @@ export function QR({
   showLink = true,
   showButton = true,
   showLogo = true,
+  data,
 }: Props): React.ReactElement {
   const t = useTranslations()
 
@@ -55,6 +57,8 @@ export function QR({
             )}
             target="_blank"
             rel="noopener noreferrer"
+            data-cy={data?.cy}
+            data-test={data?.test}
           >
             {process.env.NEXT_PUBLIC_PWA_URL}
             {path}

apps/frontend-pwa/src/components/common/Header.tsx

@@ -162,6 +162,7 @@ function Header({
                       </div>
                     ),
                     className: { item: '!h-max py-0.5' },
+                    data: { cy: 'header-logged-in-as' },
                   },
                   {
                     id: 'separator',

apps/frontend-pwa/src/components/liveQuiz/AccountSelector.tsx

@@ -256,6 +256,7 @@ function AccountSelector({
                   label={t('shared.generic.pseudonym')}
                   placeholder="klicker123"
                   className={{ label: 'text-sm' }}
+                  data={{ cy: 'pseudonym-input' }}
                 />
                 <Button
                   type="button"
@@ -266,6 +267,7 @@ function AccountSelector({
                   }
                   onClick={() => setStep('avatar')}
                   className={{ root: 'mt-2 self-end' }}
+                  data={{ cy: 'pseudonym-next-step' }}
                 >
                   <Button.Icon icon={faArrowRight} />
                   <Button.Label>{t('shared.generic.next')}</Button.Label>
@@ -343,14 +345,23 @@ function AccountSelector({
                       </div>
                     ))}
                   </CarouselContent>
-                  <CarouselPrevious type="button" className="left-0" />
-                  <CarouselNext type="button" className="right-0" />
+                  <CarouselPrevious
+                    type="button"
+                    className="left-0"
+                    data-cy="avatar-carousel-prev"
+                  />
+                  <CarouselNext
+                    type="button"
+                    className="right-0"
+                    data-cy="avatar-carousel-next"
+                  />
                 </Carousel>
                 <Button
                   primary
                   type="submit"
                   loading={loggingIn}
                   className={{ root: 'mt-2 self-end' }}
+                  data={{ cy: 'submit-pseudonym-and-avatar' }}
                 >
                   {t('shared.generic.submit')}
                 </Button>