Merge pull request #14726 from overleaf/mj-table-generator-more-cypress

[visual] Add cypress tests for table interactions

GitOrigin-RevId: 82d7db1d1f77e0dacc882fe3f37478d24a212d44

services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx

@@ -477,4 +477,105 @@ cell 3 & cell 4 \\\\
         .should('be.disabled')
     })
   })
+  describe('Tabular interactions', function () {
+    it('Can type into cells', function () {
+      mountEditor(`
+      \\begin{tabular}{cccc}
+        cell 1 & cell 2 & cell 3 & cell 4\\\\
+        cell 5 & \\multicolumn{2}{c}cell 6} & cell 7 \\\\
+      \\end{tabular}`)
+
+      cy.get('.table-generator-cell').eq(0).as('cell-1')
+      cy.get('.table-generator-cell').eq(5).as('cell-6')
+
+      // Escape should cancel editing
+      cy.get('@cell-1').type('foo{Esc}')
+      cy.get('@cell-1').should('have.text', 'cell 1')
+
+      // Enter should commit change. Direct typing should override the current contents
+      cy.get('@cell-1').type('foo{Enter}')
+      cy.get('@cell-1').should('have.text', 'foo')
+
+      // Enter should start editing at the end of current text
+      cy.get('@cell-1').type('{Enter}')
+      cy.get('@cell-1').find('textarea').should('exist')
+      cy.get('@cell-1').type('bar{Enter}')
+      cy.get('@cell-1').should('have.text', 'foobar')
+
+      // Double clicking should start editing at the end of current text
+      cy.get('@cell-1').dblclick()
+      cy.get('@cell-1').find('textarea').should('exist')
+      cy.get('@cell-1').type('baz{Enter}')
+      cy.get('@cell-1').should('have.text', 'foobarbaz')
+
+      cy.get('@cell-1').type('{Backspace}')
+      cy.get('@cell-1').should('have.text', '')
+
+      // Typing also works for multicolumn cells
+      cy.get('@cell-6').type('foo{Enter}')
+      checkTable([
+        ['', 'cell 2', 'cell 3', 'cell 4'],
+        ['cell 5', { text: 'foo', colspan: 2 }, 'cell 7'],
+      ])
+    })
+
+    it('Can paste tabular data into cells', function () {
+      mountEditor(`
+      \\begin{tabular}{cc }
+        cell 1 & cell 2\\\\
+        cell 3 & cell 4 \\\\
+      \\end{tabular}`)
+      cy.get('.table-generator-cell').eq(0).as('cell-1')
+      // TODO: Seems as cypress can't access clipboard, so we can't test copying
+      cy.get('@cell-1').click()
+      const clipboardData = new DataTransfer()
+      clipboardData.setData('text/plain', 'foo\tbar\nbaz\tqux')
+      cy.get('@cell-1').trigger('paste', { clipboardData })
+      checkTable([
+        ['foo', 'bar'],
+        ['baz', 'qux'],
+      ])
+    })
+
+    it('Can navigate cells with keyboard', function () {
+      mountEditor(`
+      \\begin{tabular}{cc }
+        cell 1 & cell 2\\\\
+        cell 3 & cell 4 \\\\
+      \\end{tabular}`)
+      cy.get('.table-generator-cell').eq(0).as('cell-1')
+      cy.get('.table-generator-cell').eq(1).as('cell-2')
+      cy.get('.table-generator-cell').eq(2).as('cell-3')
+      cy.get('.table-generator-cell').eq(3).as('cell-4')
+
+      // Arrow key navigation
+      cy.get('@cell-1').click()
+      cy.get('@cell-1').type('{rightarrow}')
+      cy.get('@cell-2').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-2').type('{leftarrow}')
+      cy.get('@cell-1').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-1').type('{downarrow}')
+      cy.get('@cell-3').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-3').type('{rightarrow}')
+      cy.get('@cell-4').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-4').type('{uparrow}')
+      cy.get('@cell-2').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-2').type('{leftarrow}')
+      cy.get('@cell-1').should('have.focus').should('have.class', 'selected')
+
+      // Tab navigation
+      cy.get('@cell-1').tab()
+      cy.get('@cell-2').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-2').tab()
+      cy.get('@cell-3').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-3').tab()
+      cy.get('@cell-4').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-4').tab({ shift: true })
+      cy.get('@cell-3').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-3').tab({ shift: true })
+      cy.get('@cell-2').should('have.focus').should('have.class', 'selected')
+      cy.get('@cell-2').tab({ shift: true })
+      cy.get('@cell-1').should('have.focus').should('have.class', 'selected')
+    })
+  })
 })