I'm testing an app that uses drag-drop to rearrange panels on the page. There are a lot of permutations that need to be tested. Starting with half a dozen panels on the page, each needs to be moved in a different direction and the resulting layout tested.
To check the final layout in each test I need to use 10 to 15 traversal commands that are tedious to get right and hard to read when reviewing the test, for example
cy.get('.panel[data-cy="2"]')
.trigger('mousedown', 'center')
.trigger('mousemove', 'center')
cy.get('.target')
.trigger('mouseup', 'center')
cy.get('.panel[data-cy="2"]')
.parent()
.should('have.text', 'Panel2')
.children()
.should('have.length', 3)
// and so on
I would like to use something like a snapshot test to assert the structure of the final DOM.
Looking at Cypress snapshot, it has two draw-backs
it's too black-box. The final layout is not apparent looking at the test nor at the Cypress log. I want the results to reflect the test assertion so that stake-holders can assure the tests are comprehensive.
it captures too much detail, every element attribute and style which makes it too fragile when anything is adjusted. I'd like to "filter" the snapshot to just compare the elements and attributes that are relevant to the drag feature.
As an example, the following would be ideal as and "expected" layout. Each line has selectors for the element and the indenting represents parent/child relationship.
There can be other element between, but we don't care about those and they can be ignored or filtered out.
.box[data-cy='1']
.panel[data-cy='9']
.pane#Pane1
.divider
.box[data-cy='side-panel']
.panel[data-cy='projects-panel']
.pane#Projects
.divider
.panel[data-cy='questions-panel']
.pane#Questions
.divider
.panel[data-cy='2']
.pane#analysis
.pane#graph
.pane#schema
.pane#data
How do I implement an expect() (or something similar) that compares the above to the actual DOM?