fix(StatementForm): broken update

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/Statement.jsx

@@ -17,7 +17,7 @@ export default class Statement extends React.PureComponent {
     const { statement, speaker, handleEdit, handleDelete, withoutActions, offset = 0 } = this.props
 
     return (
-      <div>
+      <div data-cy="statement">
         <StatementHeader
           statementTime={statement.time + offset}
           isDraft={statement.is_draft}

app/components/Statements/StatementForm.jsx

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

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

@@ -0,0 +1,47 @@
+describe('Can add and edit statements', () => {
+  it('adds a new statement, edits it, then deletes it', () => {
+    const statementText = `Cypress statement ${Date.now()}`
+    const updatedStatementText = `${statementText} - edited`
+
+    cy.login().then(() => {
+      cy.visit('/videos/Jzqg')
+
+      // 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('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"]', statementText, { timeout: 15000 }).should('exist')
+
+      // Edit
+      cy.contains('[data-cy="statement"]', statementText)
+        .find('button[aria-haspopup="menu"]')
+        .click()
+      cy.contains('[role="menuitem"]', 'Edit').click()
+      cy.get('[data-cy="statement-form"]:first textarea[name="text"]').should('be.visible')
+      cy.get('[data-cy="statement-form"]:first textarea[name="text"]').clear()
+      cy.get('[data-cy="statement-form"]:first textarea[name="text"]').type(updatedStatementText)
+      cy.contains('button[type=submit]', 'Save').click()
+
+      cy.contains('A speaker should be added. To continue without one, press "Save".').should(
+        'exist',
+      )
+      cy.contains('button[type=submit]', 'Save').click()
+
+      // Remove
+      cy.contains('[data-cy="statement"]', updatedStatementText, { timeout: 15000 }).should('exist')
+      cy.contains('[data-cy="statement"]', updatedStatementText)
+        .find('button[aria-haspopup="menu"]')
+        .click()
+      cy.contains('[role="menuitem"]', 'Remove').click()
+      cy.contains('[role="alertdialog"] button', 'Remove').click()
+      cy.contains('[data-cy="statement"]', updatedStatementText, { timeout: 15000 }).should(
+        'not.exist',
+      )
+    })
+  })
+})

package-lock.json

@@ -115,7 +115,7 @@
     "reactjs-popup": "~2.0.6",
     "redux": "~4.2.1",
     "redux-actions": "~2.6.5",
-    "redux-form": "8.3.10",
+    "redux-form": "8.3.9",
     "redux-promise": "~0.6.0",
     "redux-thunk": "~2.3.0",
     "remark-gfm": "4.0.1",