Merge branch 'staging' into feat/dark-mode

Author: Betree

.github/workflows/e2e.yml

@@ -76,3 +76,12 @@ jobs:
       - name: Start E2E tests
         working-directory: api
         run: ./scripts/run_e2e_ci.sh
+      # Upload Cypress artifacts
+      - name: Upload Cypress screenshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-screenshots
+          path: frontend/cypress/screenshots
+          retention-days: 7
+          if-no-files-found: ignore

app/components/Statements/StatementForm.jsx

@@ -116,6 +116,7 @@ export class StatementForm extends React.Component {
 
     return (
       <form
+        data-cy="statement-form"
         ref={this.containerRef}
         onSubmit={handleSubmit(this.handleSubmit)}
         className={cn('bg-white dark:bg-background rounded-lg shadow-lg dark:shadow-xl border border-gray-200 dark:border-border', {

app/components/VideoDebate/ActionBubbleMenu.jsx

@@ -139,6 +139,14 @@ export const ActionBubble = ({
   ...props
 }) => (
   <div
+    role="button"
+    tabIndex={0}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        props.onClick?.()
+      }
+    }}
+    data-cy="action-bubble"
     className={cn(
       'mb-2 first:mb-0 transition-all duration-300',
       'cursor-pointer shadow-md hover:shadow-lg right-0',

cypress.config.js

@@ -3,6 +3,8 @@ const { defineConfig } = require('cypress')
 module.exports = defineConfig({
   projectId: 'iivzis',
   videoUploadOnPasses: false,
+  screenshotOnRunFailure: true,
+  screenshotsFolder: 'cypress/screenshots',
   env: {
     CYPRESS_API_URL: 'http://localhost:4000',
     CYPRESS_USERNAME: 'Captain',

cypress/e2e/video_debate/statement_form.spec.js

@@ -1,40 +1,20 @@
 describe('Can add and edit statements', () => {
-  it('adds a new statement then edits it', () => {
+  it('adds a new statement', () => {
     const statementText = `Cypress statement ${Date.now()}`
-    const updatedStatementText = `${statementText} - edited`
 
     cy.login().then(() => {
       cy.visit('/videos/Jzqg')
 
-      cy.contains('div', 'Add a Statement', { matchCase: false, timeout: 10000 }).parent().click()
-
-      cy.get('#col-video')
-        .find('a[href^="/s/"]')
-        .first()
-        .invoke('text')
-        .then((speakerName) => {
-          if (speakerName) {
-            cy.get('input[name="speaker_id"]').type(`${speakerName.trim()}{enter}`, { force: true })
-          }
-        })
-
-      cy.get('textarea[name="text"]').type(statementText)
-
+      // Add a statement
+      cy.contains('[data-cy="action-bubble"]', 'Add a Statement').click()
+      cy.get('[data-cy="statement-form"] textarea[name="text"]').type(statementText)
       cy.contains('button[type=submit]', 'Save').click()
 
-      cy.contains('blockquote', statementText, { timeout: 15000 }).should('exist')
-
-      cy.contains('[data-cy="statement"]', statementText)
-        .find('button[aria-haspopup="menu"]')
-        .click()
-
-      cy.contains('[role="menuitem"]', 'Edit').click()
-
-      cy.get('textarea[name="text"]').clear().type(updatedStatementText)
-
+      cy.contains('A speaker should be added. To continue without one, press "Save".').should(
+        'exist',
+      )
       cy.contains('button[type=submit]', 'Save').click()
-
-      cy.contains('[data-cy="statement"]', updatedStatementText, { timeout: 15000 }).should('exist')
+      cy.contains('[data-cy="statement"]', statementText, { timeout: 15000 }).should('exist')
     })
   })
 })