fix(StatementForm): broken update

Author: Betree

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/e2e/video_debate/statement_form.spec.js

@@ -0,0 +1,45 @@
+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"] textarea[name="text"]').clear().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"]', statementText)
+        .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",