https://github.com/smartbear/react-gherkin-editor
https://github.com/smartbear/react-gherkin-editor
cucumber-for-jira open-source
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/smartbear/react-gherkin-editor
- Owner: SmartBear
- License: mit
- Created: 2019-04-02T11:47:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T06:28:57.000Z (over 2 years ago)
- Last Synced: 2024-04-12T14:34:15.101Z (over 2 years ago)
- Topics: cucumber-for-jira, open-source
- Language: JavaScript
- Homepage:
- Size: 5.99 MB
- Stars: 8
- Watchers: 13
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Gherkin Editor
A Gherkin language editor for React.
[![Version][version-badge]][package]
[![CI][ci-badge]][ci]
[![Dependencies][dependencies-badge]][dependencies]
[![License][license-badge]][license]
## Introduction
React Gherkin Editor is a wrapper arround [React Ace Editor](https://github.com/securingsincity/react-ace) specially designed for Gherkin.
Features:
- Gherkin syntax highlighting
- Gherkin keyword snippets
- Easy to provide step autocompletions (Promise based)
- Gherkin I18n support
- Special themes for Jira and Cucumber
## Installation
Using npm:
```
npm install --save @smartbear/react-gherkin-editor
```
Using yarn:
```
yarn add @smartbear/react-gherkin-editor
```
## Basic Usage
```javascript
import React from 'react'
import { render } from 'react-dom'
import ReactGherkinEditor from '@smartbear/react-gherkin-editor'
const root = document.createElement('div')
document.body.appendChild(root)
const initialValue = `Feature: Serve coffee
As a coffee lover
I can get coffee from the machine
So I can enjoy the rest of the day
Scenario: Simple use
# Well, sometimes, you just get a coffee.
Given the coffee machine is started
When I take a coffee
Then coffee should be served
And message "Please take your coffee" should be printed`
const steps = [
'I start the coffee machine using language "lang"',
'I shutdown the coffee machine',
'message "message" should be displayed'
]
const onValueChange = console.log
const autoCompleteFunction = async (_keyword, text) => {
const matches = steps.filter(step => step.startsWith(text))
const completions = matches.map(match => ({
caption: match,
value: match,
score: Math.floor(Math.random() * Math.floor(100)),
meta: 'Step'
}))
return completions
}
render(
,
root
)
```
## Ace Documentation
[React Ace Editor](https://github.com/securingsincity/react-ace)
[version-badge]: https://img.shields.io/npm/v/@smartbear/react-gherkin-editor
[package]: https://www.npmjs.com/package/@smartbear/react-gherkin-editor
[ci-badge]: https://img.shields.io/github/workflow/status/smartbear/react-gherkin-editor/CI?logo=github
[ci]: https://github.com/SmartBear/react-gherkin-editor/actions?query=workflow%3ACI
[dependencies-badge]: https://img.shields.io/david/smartbear/react-gherkin-editor
[dependencies]: https://david-dm.org/smartbear/react-gherkin-editor
[license-badge]: https://img.shields.io/npm/l/@smartbear/react-gherkin-editor
[license]: https://github.com/SmartBear/react-gherkin-editor/blob/master/LICENSE