Toptal设计系统的新版本最近发布了，它要求我们对系统中的几乎每个组件进行更改毕加索，我们的内部组件库. 我们的团队面临着一个挑战:我们如何确保回归不会发生?

毫不奇怪，简短的答案是测试. 有很多测试.

我们不会回顾测试的理论方面，也不会讨论不同类型的测试, 其效用, 或者解释为什么应该首先测试代码. 我们的博客其他人已经覆盖了这些话题. 相反，我们将只关注测试的实际方面.

继续阅读，了解Toptal的开发人员如何编写测试. 我们的存储库是公共的，所以我们使用真实的示例. 没有任何抽象或简化.

测试金字塔

我们本身并没有定义一个测试金字塔，但如果我们定义了，它看起来会是这样的:

Toptal的测试金字塔说明了我们所强调的测试.

单元测试

单元测试编写简单，易于运行. 如果您几乎没有时间编写测试，那么它们应该是您的首选.

然而，它们并不完美. 不管你选择哪个测试库(在我们的例子中是Jest和反应测试库[RTL]), 它不会有一个真正的DOM，它不允许你在不同的浏览器中检查功能, 但它将允许您剥离复杂性并测试库的简单构建块.

单元测试不仅通过测试代码的行为来增加价值，还通过检查代码的整体可测试性来增加价值. 如果您不能轻松地编写单元测试，那么您很有可能编写了糟糕的代码.

视觉回归测试

即使你有100%的单元测试覆盖率, 这并不意味着这些组件在不同设备和浏览器上看起来都很好.

手工测试尤其难以发现视觉退化. 例如，如果一个按钮的标签移动了1px，则a 质量工程师甚至通知? 值得庆幸的是，有许多解决方案可以解决这个可见性有限的问题. 您可以选择企业级的一体化解决方案，例如 LambdaTest or Mabl. 你可以加入插件，比如珀西，以及DIY解决方案，从喜欢洛基 or 故事书 (这是我们在毕加索之前使用的). 它们都有缺点:有些过于昂贵，而另一些则有陡峭的学习曲线或需要太多的维护.

Happo 拯救! 它是珀西的直接竞争对手, 但是便宜多了, 支持更多浏览器, 而且更容易使用. 另一大卖点? 它支持Cypress集成, 这一点很重要，因为我们想摆脱使用故事书进行视觉测试. 我们发现自己处于这样的情况，我们必须创建故事，这样我们才能确保视觉测试覆盖率, 不是因为我们需要记录那个用例. 这污染了我们的文档，使它们更难以理解. 我们想要将可视化测试与可视化文档隔离开来.

集成测试

即使两个组件有单元测试和可视测试，也不能保证它们能一起工作. 例如, 我们发现了一个错误，工具提示在下拉项中使用时不会打开，但在单独使用时却可以正常工作.

为了保证组件的良好集成，我们使用了Cypress的实验组件测试功能. 起初，我们不满意表现不佳，但我们可以用自定义webpack配置. 结果? 我们能够使用Cypress出色的API来编写性能测试，以确保我们的组件能够很好地协同工作.

运用测试金字塔

这一切在现实生活中是什么样子? 让我们测试一下手风琴组件!

您的第一反应可能是打开编辑器并开始编写代码. 我的建议? 花一些时间了解组件的所有特性，并写下您想要涵盖的测试用例.

测试什么?

下面是我们的测试应该涵盖的情况的分类:

州 -手风琴可以展开和折叠, 其默认状态可配置, 这个功能可以被禁用
风格手风琴可以有边界变化
内容 -它们可以与图书馆的其他单元集成
定制 -组件可以有它的样式覆盖，可以有自定义展开图标
回调 -每次状态改变时，都可以调用回调

如何测试?

既然我们知道了要测试的内容，那么让我们考虑一下如何进行测试. 我们在测试金字塔中有三个选项. 我们希望以金字塔各部分之间最小的重叠实现最大的覆盖. 测试每个测试用例的最佳方法是什么?

州 -单元测试可以帮助我们评估状态是否相应改变, 但是我们还需要视觉测试来确保组件在每个状态下都被正确渲染
风格 -视觉测试应足以发现不同变体的回归
内容 -视觉测试和集成测试的结合是最好的选择, 因为accordion可以与许多其他组件结合使用
定制 -我们可以使用单元测试来验证是否正确应用了类名, 但我们需要一个视觉测试，以确保组件和自定义样式协同工作
回调单元测试是确保调用正确回调的理想选择

手风琴测试金字塔

单元测试

可以找到完整的单元测试套件在这里. 我们已经介绍了所有的状态更改、自定义和回调:

  it('toggles', async () => {
    const handleChange = jest.fn()

    const {getByText, getbytestd} = render手风琴({
      onChange: handleChange,
      expandIcon: 
    })

    fireEvent.点击(getByTestId (accordion-summary))
    await waitFor(() => expect(getByText(DETAILS_TEXT)).toBeVisible ())

    fireEvent.点击(getByTestId(“触发”))
    await waitFor(() => expect(getByText(DETAILS_TEXT)).不.toBeVisible ())

    fireEvent.点击(getByText (SUMMARY_TEXT))
    await waitFor(() => expect(getByText(DETAILS_TEXT)).toBeVisible ())

    期望(handleChange).toHaveBeenCalledTimes (3)
  })

视觉回归测试

视觉测试位于这柏树描述块. 截图可以在 Happo的仪表板.

您可以看到记录了所有不同的组件状态、变体和自定义. 每次打开公关， CI比较了屏幕截图 Happo已经存储到你的分支中了:

  it('renders', () => {
    山(
      
        
      
    )
    cy.(身体的).happoScreenshot ()
  })
  it('renders disabled', () => {
    山(
      
        
        } />
      
    )
    cy.(身体的).happoScreenshot ()
  })
  it('renders border variants', () => {
    山(
      
        
        
        
      
    )
    cy.(身体的).happoScreenshot ()
  })

集成测试

我们编写了一个“坏路径”测试这柏树描述块断言手风琴仍然可以正常工作，并且用户可以与自定义组件进行交互. 我们也添加了可视化断言为了增加自信:

describe('手风琴 with custom summary', () => {
  it('closes and opens', () => {
    山(<手风琴CustomSummary />)
    toggle手风琴 ()
    get手风琴内容 ().('不应该.be.可见”)

    cy.get(“[data-testid = accordion-custom-summary]”).happoScreenshot ()

    toggle手风琴 ()
    get手风琴内容 ().(“应该.可见”)

    cy.get(“[data-testid = accordion-custom-summary]”).happoScreenshot ()
  })
  // …
})

持续集成

毕加索几乎完全依赖 GitHub的行为对于QA. 此外，我们还添加了 Git钩子用于阶段性文件的代码质量检查. 我们最近从Jenkins迁移到GHA，所以我们的设置仍处于MVP阶段.

工作流按顺序在远程分支中的每个更改上运行, 集成和可视化测试是最后一个阶段，因为它们的运行成本最高(在性能和货币成本方面)。. 除非所有测试都成功完成，否则无法合并拉取请求.

以下是GitHub的行为每次都要经历的阶段:

依赖安装
版本控制 -验证提交的格式和PR标题是否匹配传统的提交
线头 ESlint确保高质量的代码
打印稿编译 —检查是否有输入错误
包编译 -如果包不能被构建, then they won’t be released successfully; our Cypress tests also expect compiled code
单元测试
集成和视觉测试

可以找到完整的工作流程在这里. 目前，完成所有阶段只需不到12分钟.

可测试性

像大多数组件库一样, 毕加索有一个根组件，它必须封装所有其他组件，并可用于设置全局规则. 这使得编写测试变得更加困难，原因有两个——测试结果不一致, depending on the props used in the wrapper; and extra boilerplate:

从“@testing-library/react”中导入{render}

describe('Form', () => {
  it('renders', () => {
    Const {container} = render(
      <毕加索 loadFavicon={false} environment='test'>
        
      
    )

    期望(容器).toMatchSnapshot ()
  })
})

我们通过创建一个 Testing毕加索这是全球测试规则的先决条件. 但是必须为每个测试用例声明它是很烦人的. 这就是我们创建a的原因自定义渲染功能它将传递的组件封装在Testing毕加索中，并返回RTL渲染函数中可用的所有内容.

我们的测试现在更容易阅读和直接编写:

从“@toptal/picasso/test-utils”中导入{render}

describe('Form', () => {
  it('renders', () => {
    Const {container} = render()

    期望(容器).toMatchSnapshot ()
  })
})

结论

这里描述的设置远非完美, 但对于那些敢于创建组件库的人来说，这是一个很好的起点. 我读过很多关于测试金字塔的书，但在实践中应用它们并不总是那么容易. 因此，我邀请你去探索我们的代码库从我们的错误和成功中学习.

组件库是独特的，因为它们服务于两种受众:与UI交互的最终用户和使用您的代码构建自己的应用程序的开发人员. 在健壮的测试框架中投入时间将使每个人受益. 在可测试性改进上投入时间将使您作为维护人员和使用(和测试)您的库的工程师受益.

我们没有讨论代码覆盖、端到端测试、版本和发布策略等问题. 关于这些主题的简短建议是:经常发布, 实践适当的语义版本控制, 你的流程是否透明, 为那些依赖你的图书馆的工程师设定期望. 我们可能会在以后的文章中更详细地讨论这些主题.