wip: refactor existing parts of test suite to reduce code duplication

uzh-bf · Dec 27, 2024 · c91bc41 · c91bc41
1 parent 27d23b7
commit c91bc41
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 52 deletions.
diff --git a/apps/frontend-manage/src/components/activities/creation/AddStackButton.tsx b/apps/frontend-manage/src/components/activities/creation/AddStackButton.tsx
@@ -192,7 +192,7 @@ function AddStackButton({
               })
             }
           }}
-          data-cy="drop-elements-add-stack"
+          data-cy={`drop-elements-add-${type}`}
         >
           <FontAwesomeIcon icon={faPlus} size="lg" />
           <div>

diff --git a/apps/frontend-manage/src/components/activities/creation/StackBlockCreation.tsx b/apps/frontend-manage/src/components/activities/creation/StackBlockCreation.tsx
@@ -223,6 +223,7 @@ function StackBlockCreation({
       </div>
 
       <WizardElementList
+        type="stack"
         stack={stack}
         stackIx={stackIx}
         replace={replace}

diff --git a/apps/frontend-manage/src/components/activities/creation/WizardElementList.tsx b/apps/frontend-manage/src/components/activities/creation/WizardElementList.tsx
@@ -11,6 +11,7 @@ import { Ellipsis } from '@klicker-uzh/markdown'
 import { Button } from '@uzh-bf/design-system'
 import { swapIndices } from 'remeda'
 import {
+  ElementBlockErrorValues,
   ElementBlockFormValues,
   ElementStackErrorValues,
   ElementStackFormValues,
@@ -21,20 +22,23 @@ interface BaseProps {
 }
 
 interface StackWizardElementListProps extends BaseProps {
+  type: 'stack'
   stack: ElementStackFormValues
   error: ElementStackErrorValues | ElementStackErrorValues[] | undefined
   replace: (index: number, value: ElementStackFormValues) => void
   highlightFTNoSL?: boolean
 }
 
 interface BlockWizardElementListProps extends BaseProps {
+  type: 'block'
   stack: ElementBlockFormValues
-  error: ElementBlockFormValues | undefined
+  error: ElementBlockErrorValues | ElementBlockErrorValues[] | undefined
   replace: (index: number, value: ElementBlockFormValues) => void
   highlightFTNoSL?: never
 }
 
 function WizardElementList({
+  type,
   stackIx,
   stack,
   error,
@@ -55,7 +59,7 @@ function WizardElementList({
           <div
             key={`${elementIdx}-${element.title}`}
             className="flex flex-row items-center border-b border-solid border-slate-200 py-0.5 text-xs last:border-b-0"
-            data-cy={`question-${elementIdx}-stack-${stackIx}`}
+            data-cy={`element-${elementIdx}-${type}-${stackIx}`}
           >
             <div className="flex-1">
               <Ellipsis
@@ -100,7 +104,7 @@ function WizardElementList({
                   }
                 }}
                 data={{
-                  cy: `move-question-${elementIdx}-stack-${stackIx}-up`,
+                  cy: `move-element-${elementIdx}-${type}-${stackIx}-up`,
                 }}
               >
                 <FontAwesomeIcon icon={faArrowUp} />
@@ -129,7 +133,7 @@ function WizardElementList({
                   }
                 }}
                 data={{
-                  cy: `move-question-${elementIdx}-stack-${stackIx}-down`,
+                  cy: `move-element-${elementIdx}-${type}-${stackIx}-down`,
                 }}
               >
                 <FontAwesomeIcon icon={faArrowDown} />
@@ -148,7 +152,7 @@ function WizardElementList({
                     .concat(stack.elements.slice(elementIdx + 1)),
                 })
               }}
-              data={{ cy: `delete-question-${elementIdx}-stack-${stackIx}` }}
+              data={{ cy: `remove-element-${elementIdx}-${type}-${stackIx}` }}
             >
               <Button.Icon>
                 <FontAwesomeIcon icon={faTrash} />

diff --git a/apps/frontend-manage/src/components/activities/creation/WizardLayout.tsx b/apps/frontend-manage/src/components/activities/creation/WizardLayout.tsx
@@ -35,7 +35,7 @@ export interface ElementBlockFormValues {
   }[]
 }
 
-export interface ElememntBlockErrorValues {
+export interface ElementBlockErrorValues {
   timeLimit?: string
   elements?:
     | string

diff --git a/apps/frontend-manage/src/components/activities/creation/liveQuiz/LiveQuizBlocksError.tsx b/apps/frontend-manage/src/components/activities/creation/liveQuiz/LiveQuizBlocksError.tsx
@@ -1,8 +1,8 @@
 import { useTranslations } from 'next-intl'
-import { ElememntBlockErrorValues } from '../WizardLayout'
+import { ElementBlockErrorValues } from '../WizardLayout'
 
 interface LiveQuizBlocksErrorProps {
-  errors: ElememntBlockErrorValues
+  errors: ElementBlockErrorValues
 }
 
 function LiveQuizBlocksError({ errors }: LiveQuizBlocksErrorProps) {

diff --git a/apps/frontend-manage/src/components/activities/creation/liveQuiz/LiveQuizCreationBlock.tsx b/apps/frontend-manage/src/components/activities/creation/liveQuiz/LiveQuizCreationBlock.tsx
@@ -17,7 +17,7 @@ import DropElementsStack from '../DropElementsStack'
 import PasteSelectionButton from '../PasteSelectionButton'
 import WizardElementList from '../WizardElementList'
 import {
-  ElememntBlockErrorValues,
+  ElementBlockErrorValues,
   ElementBlockFormValues,
 } from '../WizardLayout'
 import LiveQuizBlocksError from './LiveQuizBlocksError'
@@ -33,7 +33,7 @@ interface LiveQuizCreationBlockProps {
   replace: (blockIx: number, value: ElementBlockFormValues) => void
   selection?: Record<number, Element>
   resetSelection?: () => void
-  error?: ElememntBlockErrorValues[]
+  error?: ElementBlockErrorValues[]
 }
 
 function LiveQuizCreationBlock({
@@ -160,6 +160,7 @@ function LiveQuizCreationBlock({
       </div>
 
       <WizardElementList
+        type="block"
         stack={block}
         stackIx={blockIx}
         replace={replace}

diff --git a/cypress/cypress/e2e/F-live-quiz-workflow.cy.ts b/cypress/cypress/e2e/F-live-quiz-workflow.cy.ts
@@ -166,7 +166,7 @@ describe('Different live-quiz workflows', () => {
     cy.get('[data-cy="next-or-submit"]').click()
 
     cy.get('[data-cy="block-container-header"]').should('have.length', 1)
-    cy.get('[data-cy="drop-elements-add-stack"]').click()
+    cy.get('[data-cy="drop-elements-add-block"]').click()
     cy.get('[data-cy="block-container-header"]').should('have.length', 2)
     cy.get('[data-cy="delete-block-1"]').click()
     cy.get('[data-cy="block-container-header"]').should('have.length', 1)
@@ -304,6 +304,7 @@ describe('Different live-quiz workflows', () => {
     cy.get('[data-cy="next-or-submit"]').click()
     cy.get('[data-cy="next-or-submit"]').click()
 
+    // TODO: replace with createStacks function and corresponding type
     // add two questions in separate blocks, move blocks and add time limit of 10 for first and 20 for second block
     const dataTransfer = new DataTransfer()
     cy.get(`[data-cy="question-item-${SCQuestion1Title}"]`)
@@ -319,7 +320,7 @@ describe('Different live-quiz workflows', () => {
       .trigger('dragstart', {
         dataTransfer,
       })
-    cy.get('[data-cy="drop-elements-add-stack"]').trigger('drop', {
+    cy.get('[data-cy="drop-elements-add-block"]').trigger('drop', {
       dataTransfer,
     })
     cy.get('[data-cy="question-0-stack-0"]')
@@ -735,32 +736,14 @@ describe('Different live-quiz workflows', () => {
     cy.get('[data-cy="set-liveqa-enabled"]').click()
     cy.get('[data-cy="next-or-submit"]').click()
 
-    // TODO: replace this with cy.createStacks function after migration to element stacks
     // Step 4: Questions
-    for (let i = 0; i < 2; i++) {
-      const dataTransfer = new DataTransfer()
-      cy.get(`[data-cy="question-item-${SCQuestion1Title}"]`)
-        .contains(SCQuestion1Title)
-        .trigger('dragstart', {
-          dataTransfer,
-        })
-      cy.get('[data-cy="drop-elements-block-0"]').trigger('drop', {
-        dataTransfer,
-      })
-    }
-
-    cy.get('[data-cy="drop-elements-add-stack"]').click()
-    for (let i = 0; i < 2; i++) {
-      const dataTransfer = new DataTransfer()
-      cy.get(`[data-cy="question-item-${SCQuestion2Title}"]`)
-        .contains(SCQuestion2Title)
-        .trigger('dragstart', {
-          dataTransfer,
-        })
-      cy.get('[data-cy="drop-elements-block-1"]').trigger('drop', {
-        dataTransfer,
-      })
-    }
+    cy.createStacks({
+      stacks: [
+        { elements: [SCQuestion1Title, SCQuestion1Title] },
+        { elements: [SCQuestion2Title, SCQuestion2Title] },
+      ],
+      type: 'block',
+    })
     cy.get('[data-cy="next-or-submit"]').click()
 
     cy.get('[data-cy="load-live-quiz-list"]').click()

diff --git a/cypress/cypress/e2e/G-microlearning-workflow.cy.ts b/cypress/cypress/e2e/G-microlearning-workflow.cy.ts
@@ -203,7 +203,7 @@ describe('Different microlearning workflows', () => {
     })
     cy.get('[data-cy="question-2-stack-1"]').contains(SCQuestionTitleNoSol)
     cy.get('[data-cy="next-or-submit"]').should('be.disabled')
-    cy.get('[data-cy="delete-question-2-stack-1"]').click()
+    cy.get('[data-cy="remove-element-2-stack-1"]').click()
     cy.get('[data-cy="next-or-submit"]').should('not.be.disabled')
 
     // add displayname and description to stacks
@@ -260,10 +260,10 @@ describe('Different microlearning workflows', () => {
     cy.get('[data-cy="close-stack-description"]').click()
 
     // move questions in stack
-    cy.get('[data-cy="move-question-0-stack-1-down"]').click()
+    cy.get('[data-cy="move-element-0-stack-1-down"]').click()
     cy.get('[data-cy="question-0-stack-1"]').contains(CTQuestionTitle)
     cy.get('[data-cy="question-1-stack-1"]').contains(FCQuestionTitle)
-    cy.get('[data-cy="move-question-1-stack-1-up"]').click()
+    cy.get('[data-cy="move-element-1-stack-1-up"]').click()
     cy.get('[data-cy="question-0-stack-1"]').contains(FCQuestionTitle)
     cy.get('[data-cy="question-1-stack-1"]').contains(CTQuestionTitle)
 
@@ -350,7 +350,7 @@ describe('Different microlearning workflows', () => {
       cy.get(`[data-cy="drop-elements-stack-2"]`).trigger('drop', {
         dataTransfer,
       })
-      cy.get(`[data-cy="question-${ix}-stack-2"]`).contains(element)
+      cy.get(`[data-cy="element-${ix}-stack-2"]`).contains(element)
     })
 
     // check stack descriptions

diff --git a/cypress/cypress/e2e/H-practice-quiz-workflow.cy.ts b/cypress/cypress/e2e/H-practice-quiz-workflow.cy.ts
@@ -207,7 +207,7 @@ describe('Different practice quiz workflows', () => {
     })
     cy.get('[data-cy="question-1-stack-1"]').contains(SCQuestionTitleNoSol)
     cy.get('[data-cy="next-or-submit"]').should('be.disabled')
-    cy.get('[data-cy="delete-question-1-stack-1"]').click()
+    cy.get('[data-cy="remove-element-1-stack-1"]').click()
     cy.get('[data-cy="next-or-submit"]').should('not.be.disabled')
 
     // end the practice quiz creation

diff --git a/cypress/cypress/e2e/J-group-activity-workflow.cy.ts b/cypress/cypress/e2e/J-group-activity-workflow.cy.ts
@@ -301,7 +301,7 @@ describe('Create and solve a group activity', () => {
       cy.get('[data-cy="drop-elements-stack-0"]').trigger('drop', {
         dataTransfer,
       })
-      cy.get(`[data-cy="question-${ix}-stack-0"]`)
+      cy.get(`[data-cy="element-${ix}-stack-0"]`)
         .should('exist')
         .should('contain', title.substring(0, 20))
     })

diff --git a/cypress/cypress/support/commands.ts b/cypress/cypress/support/commands.ts
@@ -525,6 +525,7 @@ Cypress.Commands.add(
     }
     cy.get('[data-cy="next-or-submit"]').click()
 
+    // TODO: use createStacks function with blocks option (fix input types first)
     // Step 4: Blocks & Questions
     if (blocks.length > 0) {
       const dataTransfer = new DataTransfer()
@@ -538,7 +539,7 @@ Cypress.Commands.add(
         cy.get('[data-cy="drop-elements-block-0"]').trigger('drop', {
           dataTransfer,
         })
-        cy.get(`[data-cy="question-${ix}-stack-0"]`)
+        cy.get(`[data-cy="element-${ix}-stack-0"]`)
           .should('exist')
           .should('contain', question.substring(0, 20))
       })
@@ -552,36 +553,42 @@ interface StackType {
   elements: string[]
 }
 
-function createStacks({ stacks }: { stacks: StackType[] }) {
+function createStacks({
+  stacks,
+  type = 'stack',
+}: {
+  stacks: StackType[]
+  type?: 'block' | 'stack'
+}) {
   stacks[0].elements.forEach((element, ix) => {
     const dataTransfer = new DataTransfer()
     cy.get(`[data-cy="question-item-${element}"]`)
       .contains(element)
       .trigger('dragstart', {
         dataTransfer,
       })
-    cy.get('[data-cy="drop-elements-stack-0"]').trigger('drop', {
+    cy.get(`[data-cy="drop-elements-${type}-0"]`).trigger('drop', {
       dataTransfer,
     })
-    cy.get(`[data-cy="question-${ix}-stack-0"]`).contains(
+    cy.get(`[data-cy="element-${ix}-${type}-0"]`).contains(
       element.substring(0, 20)
     )
   })
 
   if (stacks.length > 1) {
     stacks.slice(1).forEach((stack, ix) => {
-      cy.get('[data-cy="drop-elements-add-stack"]').click()
+      cy.get(`[data-cy="drop-elements-add-${type}"]`).click()
       stack.elements.forEach((element, jx) => {
         const dataTransfer = new DataTransfer()
         cy.get(`[data-cy="question-item-${element}"]`)
           .contains(element)
           .trigger('dragstart', {
             dataTransfer,
           })
-        cy.get(`[data-cy="drop-elements-stack-${ix + 1}"]`).trigger('drop', {
+        cy.get(`[data-cy="drop-elements-${type}-${ix + 1}"]`).trigger('drop', {
           dataTransfer,
         })
-        cy.get(`[data-cy="question-${jx}-stack-${ix + 1}"]`).contains(
+        cy.get(`[data-cy="element-${jx}-${type}-${ix + 1}"]`).contains(
           element.substring(0, 20)
         )
       })
@@ -851,7 +858,13 @@ declare global {
         courseName,
         blocks,
       }: CreateLiveQuizArgs): Chainable<void>
-      createStacks({ stacks }: { stacks: StackType[] }): Chainable<void>
+      createStacks({
+        stacks,
+        type,
+      }: {
+        stacks: StackType[]
+        type?: 'block' | 'stack'
+      }): Chainable<void>
       createPracticeQuiz({
         name,
         displayName,
-Original file line number
+Diff line change
@@ Expand Up / @@ -192,7 +192,7 @@ function AddStackButton({ @@
                   })
                 }
               }}
-              data-cy="drop-elements-add-stack"
+              data-cy={`drop-elements-add-${type}`}
             >
               <FontAwesomeIcon icon={faPlus} size="lg" />
               <div>
@@ Expand Down @@