diff --git a/cypress/e2e/adminTextLayout.cy.js b/cypress/e2e/adminTextLayout.cy.js new file mode 100644 index 0000000..f13b97c --- /dev/null +++ b/cypress/e2e/adminTextLayout.cy.js @@ -0,0 +1,41 @@ +describe('The admin text detail page horizontal layout', () => { + beforeEach(() => { + cy.exec('npm run db:seed') + cy.loginAsAdmin() + cy.intercept('GET', '/api/texts/0').as('getText') + cy.intercept('GET', '/api/nodes/0').as('getNodes') + cy.visit('/admin/texts/0') + cy.wait('@getText') + cy.wait('@getNodes') + }) + + afterEach(() => { + cy.exec('npm run db:wipe') + }) + + it('renders child list to the right of the parent title', () => { + cy.get('#text-detail > ul > li').first().as('rootLi') + cy.get('@rootLi').children('span').first().as('rootTitle') + cy.get('@rootLi').children('ul').first().as('childList') + + cy.get('@childList').should('be.visible') + + cy.get('@rootTitle').then(($title) => { + const titleRect = $title[0].getBoundingClientRect() + cy.get('@childList').then(($list) => { + const listRect = $list[0].getBoundingClientRect() + expect(listRect.left).to.be.greaterThan(titleRect.right) + }) + }) + }) + + it('stacks sibling child nodes vertically within the right column', () => { + cy.get('#text-detail > ul > li > ul > li').then(($siblings) => { + expect($siblings.length).to.be.greaterThan(1) + const firstRect = $siblings[0].getBoundingClientRect() + const secondRect = $siblings[1].getBoundingClientRect() + expect(secondRect.top).to.be.greaterThan(firstRect.top) + expect(Math.abs(secondRect.left - firstRect.left)).to.be.lessThan(2) + }) + }) +})