@ cucumber/ react- 组件
一组用于渲染Gherkin文档和Cucumber结果的回放组件.
预览和实例 :
https://react-communctions-9pg.pages.dev/ 互联网档案馆的存檔,存档日期2014-12-02
使用量
- 此软件包仅以ES模块格式分发.
- 需要反应18或以上.
上面截图的源代码是:
import { EnvelopesProvider, FilteredDocuments } from '@cucumber/react-components'
<EnvelopesProvider envelopes={envelopes}>
<FilteredDocuments />
</EnvelopesProvider>
envelopes 应为 木瓜信件 这来自测试运行。 您可以通过使用“ Message” 来获取这些 .
附录
测试运行中的附件会显示相应的步骤。 附件的基准行为是一个下载按钮. 然而,我们对常见的MIME类型有一些特殊的处理方法,使它们在不留下报告的情况下更有用:
image/*- 图像是用<img/>标签video/*- 视频是用<video/标签text/x.cucumber.log+plain- 日志(从呼叫到log函数在 Cucumber) 中作为单空间文本提供,并支持 ANSI 颜色text/uri-list- 一个或多个 URL 作为链接在新标签中打开application/json- JSON是作为单空间文本并预设的text/*- 其他文本类型作为单空间文本提供
样式
标准型号的来历没有任何额外的提供者或配置. 有几种方法可以对组件应用不同的样式.
他们
可以提供少量CSS来提供自己的主题. 瞄准您最高水平使用组件以上的元素:
<div className="dark-theme">
<EnvelopesProvider envelopes={envelopes}>
<FilteredDocuments />
</EnvelopesProvider>
</div>
在您的 CSS 中, 您可以设置背景和文字颜色, 并覆盖所支持的 自定义属性 所希望的数值:
.dark-theme {
background-color: #1d1d26;
color: #c9c9d1;
--cucumber-anchor-color: #4caaee;
--cucumber-keyword-color: #d89077;
--cucumber-parameter-color: #4caaee;
--cucumber-tag-color: #85a658;
--cucumber-docstring-color: #66a565;
--cucumber-error-background-color: #cf6679;
--cucumber-error-text-color: #222;
--cucumber-code-background-color: #282a36;
--cucumber-code-text-color: #f8f8f2;
--cucumber-panel-background-color: #282a36;
--cucumber-panel-accent-color: #313442;
--cucumber-panel-text-color: #f8f8f2;
}
自定义样式
要对造型进行更多的控制,您可以覆盖单个组件使用的CSS.
假设你想做一些完全不同的 与医生字符串的打字。 在你自己的CSS中,你可能会写出诸如:
.acme-docstring {
font-weight: bold;
font-style: italic;
background-color: black;
color: hotpink;
text-shadow: 1px 1px 2px white;
padding: 10px;
}
然后,你可以提供 overrides 给 CustomRendering 组件,其形式为: 宣布您要覆盖哪个类名称以及使用什么对象:
<CustomRendering overrides={{
DocString: {
docString: 'acme-docstring'
}
}}>
<EnvelopesProvider envelopes={envelopes}>
<FilteredDocuments />
</EnvelopesProvider>
</CustomRendering>
有些部件有多种型式钩子——例如: <Tags> 组件有: tags 列表的分类名称,以及 tag 每个项目的分类名称。 在这种情况下,你可以只提供您想要更改的自定义类名称,任何省略的都会像正常一样取出内置的样式.
自定义渲染
要完全改变某些组件的渲染,你可以有选择地提供自己的组件执行,而不是内置执行.
保留 Doc 字符串示例, 您可以使用相同的 overrides 道具,但这次你不是提供类名的对象,而是提供反应功能组件,赋予你对渲染的全部控制:
<CustomRendering overrides={{
DocString: (props) => (
<>
<p>I am going to render this doc string in a textarea:</p>
<textarea>{props.docString.content}</textarea>
</>
)
}}>
<EnvelopesProvider envelopes={envelopes}>
<FilteredDocuments />
</EnvelopesProvider>
</CustomRendering>
在提供自有组件的每一种情况下,它都会得到与默认组件相同的道具,加上两个:
styles- 默认样式的类名称, 如果有道理, 您仍可将这些名称应用到您的自定义组件中DefaultRenderer- 默认反射组件, 有用, 如果您只想为某些情况提供自己的渲染, 否则会回到默认渲染( 不要忘记通过道具)