木瓜反应
Cucumber-React是一组用于渲染Gherkin文档和Cucumber结果的React组件.
截图
使用量
以上截图的源代码为:
<EnvelopesWrapper envelopes={envelopes}>
<GherkinDocumentList />
</EnvelopesWrapper>
这个 <GherkinDocumentList> 反应组件,
手风琴 <GherkinDocument>。 。 。 .
这个 <GherkinDocument> 反应组件和任何嵌入其中的组件(例如: <Scenario>)可以独立化.
<GherkinDocument> 特性
这个 <GherkinDocument> 反应组件以单个即时 gherkinDocument 道具 (英语).
数值必须是 Gherkin 文档 对象.
你可以用这个 盖克金 解析器生成一个 GherkinDocument 对象.
默认情况下 <GherkinDocument> 组件不会显示任何有色结果,因为 GherkinDocument
消息对象不包含结果,只包含 辅助 页:1.
对于结果不重要的简单使用案件来说,这是很好的.
制作 <GherkinDocument> 成果和重点 木瓜表达式参数 参数必须嵌入到一个
<Wrapper> 组件.
样式
标准造型来自用 CucumberReact 组件(sans-props)。 有几种方法可以对组件应用不同的样式.
内建主题
这些是内在的主题:
light(默认)darkauto(荣耀您的操作系统偏好 光或黑暗)
你可以通过传出这些 theme 给 CucumberReact 组件 :
<CucumberReact theme="dark">
<GherkinDocument />
</CucumberReact>
自定义主题
也可以提供少量CSS的自有主题. 通过 CucumberReact 组件类名称而不是主题名称:
<CucumberReact className="acme-widgets">
<GherkinDocument />
</CucumberReact>
在您的 CSS 为 acme-widgets 类,您可以覆盖支持 自定义属性 价值观。 以下是驱动内置"黑暗"主题的CSS:
.darkTheme {
--cucumber-background-color: #1d1d26;
--cucumber-text-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;
}
那么,你可以提供 customRendering 给 CucumberReact 组件,其形式为: 宣布您要覆盖哪个类名称以及使用什么对象:
<CucumberReact customRendering={{
DocString: {
docString: 'acme-docstring'
}
}}>
<GherkinDocument />
</CucumberReact>
有些部件有多种型式钩子——例如: <Tags> 组件有: tags 列表的分类名称,以及 tag 每个项目的分类名称。 在这种情况下,你可以只提供您想要更改的自定义类名称,任何省略的都会像正常一样取出内置的样式.
自定义渲染
要完全改变某些组件的渲染,你可以有选择地提供自己的组件执行,而不是内置执行.
保留 Doc 字符串示例, 您可以使用相同的 customRendering 道具,但这次你不是提供类名的对象,而是提供反应功能组件,赋予你对渲染的全部控制:
<CucumberReact customRendering={{
DocString: (props) => (
<>
<p>I am going to render this doc string in a textarea:</p>
<textarea>{props.docString.content}</textarea>
</>
)
}}>
<GherkinDocument />
</CucumberReact>
在提供自有组件的每一种情况下,它都会得到与默认组件相同的道具,加上两个:
styles- 默认样式的类名称, 如果有道理, 您仍可将这些名称应用到您的自定义组件中DefaultRenderer- 默认反射组件, 有用, 如果您只想为某些情况提供自己的渲染, 否则会回到默认渲染( 不要忘记通过道具)
构建/ 黑客
安装依赖关系
npm install
运行测试
npm test
二. 互动发展
npm run storybook
想法
ScenarioList 组件
一个组件,可以生成一个情景列表(可能来自多个文件,被标记等过滤).
这一组成部分可用于在第三方工具中提出相关设想,例如: JIRA, Conference 和各种支持插件的问题跟踪器.
连接 JIRA
配置一个 regexp 和 url 函数, 标记将作为 JIRA 发行链接提供
搜索
通过标签搜索,但也通过文本搜索. 可以使用 http://elsticlunr.com/ (中文(中国大陆) )
或者说 https://lunrjs.com/ (中文(简体) ) - 或者它可以简单地在一系列 GherkinDocument 留言.
搜索结果
下方显示的每个情景, 按特征文件分组 。 特征描述是"相撞", (除非它包含搜索术语)但可以打开.
过滤/排序
- 通过标签
- 按持续时间(找到慢时间)
- 按地位分列
- (更新时间戳) - 不包括旧的
- 由闪闪发光
标记搜索
- 为所有标签绘制标签云
- 大小: 计数
- 颜色:通过/失败/未定义
点播数据
对于大型报告(尤其是有截图),可能太重而无法将全部存储在浏览器中. 图形用户界面应要求请求当前文件的数据。 图形用户界面还应当能够过滤 什么样的事件 它想要。 例如,要渲染初始屏幕.
服务器/ App
应方便用. 只要运行应用程序(Electron). 它将创建一个命名的管子 在那里 它会听。 这里写的东西被直接写到React应用(没有网络口袋, 过程相同). 这个应用可以相当小.
重运行测试
添加一个消息来代表一个运行的配置+cwd+env,这样GUI就可以重新运行. 配置基本上是命令行选项. 它们可以在"gui"中被修改. 在文件更改上重运行也可以设置. 这让整个DX变得简单.
警报
应用程序可以使用OS发送屏幕消息( 自动测试类似)