How to fail a Cypress test if text wraps at wrong point-CodePudding

so I am trying to write a test that checks multiple viewports if an element wraps at certain points. I am using Next.JS with component testing. Here is an example:

The test should pass if it wraps like this:

If it wraps like this it should fail:

Here is the structure of the text:

<h1 >
<span >H</span>
<span >e</span>
<span >l</span>
<span >l</span>
<span >o</span>
<span >,</span>
<br>
</h1>

CodePudding user response：

The way I would approach it is to measure the height of the element, HTMLElement.offsetHeight.

For example

cy.viewport(...)  // ensure viewport size is known

...

cy.get('h1')
  .should($h1 => {
    const height = $h1[0].offsetHeight
    expect(height).to.be.lt(300)
  })

CodePudding user response：

You don't give a very precise requirement, just a couple of images. I'm going to assume you don't want to break mid-word, as that looks most likely.

cy.get('h1 span')
  .should($spans => {

    const result = offsets.reduce((acc,current) => {
      if (acc.lastOffset && current[0].offsetTop > lastOffset) {
        acc.breaks.push(current.text())
      }
      acc.lastOffset= current[0].offsetTop
      return acc
    }, {breaks:[], lastOffset:null})

    // only breaks on spaces
    expect(result.breaks.every(breakChar => breakChar === ' ').to.eq(true)
  })