test horizontal node layout

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)
+    })
+  })
+})