赛普拉斯-有1个测试调用另一个测试并运行它

Question

我们正在使用Cypress来自动化单元，功能和表示层测试。我们的开发方法一直遵循在React环境中混合原子设计的思路。我们正在平衡CSS的无情反应模块性与全球/区域/本地范围。因此，我们的测试组织属于同一组织。

例如，我有.../support/button_all.js在我们网站的所有5个断点中测试UI呈现（是的，5个-不问）。 原子模式测试-所有按钮

describe('Global Button Patterns', () => {
  context('mobile', () => {
    beforeEach(function() {
      cy.viewport(320, 740)
    })

    it('GLOBAL & XS bp: Buttons display as designed', () => {
      // $pageURL needs be set/redefined
      // by local test variable
      // cy.visit('/')

      // All Buttons
      //cy.document()
      cy.get('[data-cy=button]')
        .should('be.visible')
        .should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
        .should('have.css', 'border-radius', '4px')
        .should('have.css', 'font-size', '11px')
        .should('have.css', 'font-weight', '800')
        .should('have.css', 'letter-spacing', '0.96px')
        .should('have.css', 'text-transform', 'uppercase')
      cy.get('[data-cy=button')
        .should('have.css', 'min-height')
        .should('be.gte', '30px')
      cy.get('[data-cy=button]')
        .should('have.css', 'min-width')
        .should('be.gte', '117px')
      cy.get('[data-cy=button]')
        .should('have.css', 'border-width')
        .and('be.gte', '1px')
        .and('be.lte', '2px')
      cy.get('[data-cy=button]')
        .should('have.css', 'line-height')
        .and('match', /^15/)
      cy.get('[data-cy=button]')
        .should('have.css', 'padding-right')
        .and('match', /^17/)

      // Button - Outline Light
      cy.get('.btn-outline-light')
        .should('have.css', 'border-color', 'rgb(255, 255, 255)')
        .should('have.css', 'color', 'rgb(255, 255, 255)')

      // Button - Outline Dark
      cy.get('.btn-outline-dark')
        .should('have.css', 'border-color', 'rgb(55, 71, 79)')
        .should('have.css', 'color', 'rgb(55, 71, 79)')

      // Button Light (used for Login buttons)

      // Button Light states - :focus, :hover, :active
      // Test manually for the moment.
    })
  })

  context('tablet', () => {
    beforeEach(function() {
      cy.viewport(640, 1136)
    })

    it('SM bp: Default button displays as designed ', () => {
      // cy.visit('/')

      // All Buttons
      cy.get('[data-cy=button]')
        .should('be.visible')
        .should('have.css', 'font-size', '11.5px')
        .should('have.css', 'letter-spacing', '1.23px')
      cy.get('[data-cy=button]')
        .should('have.css', 'min-width')
        .should('be.gte', '131px')
      cy.get('[data-cy=button]')
        .should('have.css', 'line-height')
        .and('match', /^17/)
      cy.get('[data-cy=button]')
        .should('have.css', 'padding-right')
        .and('match', /^21/)
    })
  })

  context('laptop', () => {
    beforeEach(function() {
      cy.viewport(960, 600)
    })

    it('MD bp: Default button displays as designed', () => {
      // cy.visit('/')

      // All Buttons
      cy.get('[data-cy=button]')
        .should('be.visible')
        .should('have.css', 'font-size', '12.5px')
        .should('have.css', 'letter-spacing', '1.34px')
      cy.get('[data-cy=button]')
        .should('have.css', 'min-width')
        .should('be.gte', '139px')
      cy.get('[data-cy=button]')
        .should('have.css', 'line-height')
        .and('match', /^18/)
      cy.get('[data-cy=button]')
        .should('have.css', 'padding-right')
        .and('match', /^21/)
    })
  })
})

我想将此测试包含在integration/components/hero.js文件中。 hero.js包含5个断点上下文。我希望button_all.js文件在运行断点上下文之后运行。

组件测试-hero.js

import Buttons from '../../support/buttons_all.js'

describe('Hero Component', () => {
  context('mobile', () => {
    beforeEach(function() {
      cy.viewport(320, 740)
    })

    // global pattern test(s)
    after(function() {
      // runs once after all tests in the block
    })

    it('displays Hero Component in mobile bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '14px 0px 40px')
        .should('have.css', 'width')
        .should('be.gt', '292px')
      cy.get('[data-cy=hero]')
        .should('have.css', 'background')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'color', 'rgb(255, 255, 255)')
        .should('have.css', 'font-size', '38px')
        .should('have.css', 'line-height').and('match', /^43/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'color', 'rgb(255, 255, 255)')
        .should('have.css', 'margin-top', '8px')
        .should('have.css', 'font-size', '15px')
        .should('have.css', 'line-height').and('match', /^18/)
      cy.get('[data-cy=hero] .btn-outline-light')
        .should('have.css', 'margin-top', '12px')
        .should('have.css', 'margin-bottom').and('match', /0/)
    })
  })

  context('tablet', () => {
    beforeEach(function() {
      cy.viewport(640, 1136)
    })

    it('displays Hero Component in tablet bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '28px 0px 30px')
        .should('have.css', 'width')
        .should('be.gt', '580px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'font-size', '48px')
        .should('have.css', 'width')
        .should('be.gt', '300px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'line-height').and('match', /^54/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'margin-top', '8px')
        .should('have.css', 'font-size', '15.5px')
      cy.get('[data-cy=hero] .btn-outline-light')
        .should('have.css', 'margin-top', '12px')
    })
  })

  context('laptop', () => {
    beforeEach(function() {
      cy.viewport(960, 600)
    })

    it('displays Hero Component in laptop bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '42px 0px 87.9936px')
        .should('have.css', 'width')
        .should('be.gt', '860px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'font-size', '52px')
        .should('have.css', 'line-height').and('match', /^60/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'font-size', '16px')
        .should('have.css', 'margin-top', '10px')
        .should('have.css', 'line-height').and('match', /^20/)
      cy.get('[data-cy=hero] .btn-outline-light')
        .should('have.css', 'margin-top', '20px')
    })
  })

  context('desktop', () => {
    beforeEach(function() {
      cy.viewport(1280, 850)
    })

    it('displays Hero Component in desktop bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '56px 0px 129.997px')
        .should('have.css', 'width')
        .should('be.gt', '1168px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'font-size', '60px')
        .should('have.css', 'line-height').and('match', /^70/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'font-size', '16px')
        .should('have.css', 'margin-top', '10px')
        .should('have.css', 'line-height').and('match', /^20/)
    })
  })

  context('oversized', () => {
    beforeEach(function() {
      cy.viewport(1600, 2048)
    })

    it('displays Hero Component in oversized bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '70px 0px 188px')
    })
  })

  context('buttons_all.js', function(){

  })
})

完成此操作后，我要转到integration/pages/homepage/hero_spec.js，它声明要去的地方并测试页面此区域中的实际内容。我希望hero.js测试在hero_spec.js中包含的上下文之后运行。

首页测试-hero_spec.js

import HeroComponent from '../components/hero.js'

describe('Homepage - Hero Component', () => {
  context('mobile', () => {
    beforeEach(function() {
      cy.viewport(320, 740)
    })

    // global pattern test(s)
    after(function() {
      // runs once after all tests in the block
    })

    it('displays Homepage Hero Component as designed in mobile bp', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'background-image')
        .should('contain', 'live-life-confidence-1x1', 'contain', '.jpg')
      cy.get('[data-cy=hero] h1')
        .contains('Lorem Ipsum')
      cy.get('[data-cy=hero] p')
        .contains('Lorem ipsum sum amit dolor...')
      cy.get('[data-cy=hero] .btn-outline-light')
        .contains('About us')
        .should('have.attr', 'href')
        .and('match', /about-us/)
        .then((href) => {
          cy.visit(href)
        })
    })
  })

  context('tablet', () => {
    beforeEach(function() {
      cy.viewport(640, 1136)
    })

    after(function() {
      // runs once after all tests in the block
    })

    it('displays Homepage Hero Component as designed in tablet bp', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'background-image')
        .should('contain', 'live-life-confidence-2x1', 'contain', '.jpg')
    })
  })

})

我的问题是弄清楚如何模块化进行测试。在此示例中，我可以导入并调用一个纯JS文件：https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/unit-testing__application-code/cypress/integration/unit_test_application_code_spec.js

尽管赛普拉斯的文档非常出色，但对于能够做到这一点似乎显得沉默寡言。我希望能有一个解决此问题的指导。

Answer 1

在您引用的示例配方中，导入都是SUT，而不是其他测试。

要在另一个测试中运行button_all.js，请将其代码包装在一个函数中。您还可以传递参数来修改每次运行。

export function runButtonAllTests(testParams) {

  describe('Global Button Patterns', () => {
    context('mobile', () => {
      if (testParams.allBreakpoints) {
      ...

}

通过调用函数运行它。注意，我将其保留在support文件夹中，而不是在集成文件夹中，以阻止Cypress将其包括在“全部运行”中。

import { runButtonAllTests } from '../../support/run_button_all_tests.js'

describe('Homepage - Hero Component', () => {
  context('mobile', () => {
    before(function() {
      cy.viewport(320, 740)
      cy.visit('/')
    })

    context('buttons_all.js', function() {
      runButtonAllTests()
    })