github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-02-28 09:43:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[visual] Add cypress tests for table interactions

GitOrigin-RevId: 82d7db1d1f77e0dacc882fe3f37478d24a212d44
This commit is contained in:
Mathias Jakobsen 2023-09-08 12:35:35 +01:00 committed by Copybot
parent 0d7730f37a
commit fb379bc0b8
1 changed files with 101 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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')
})
})
})