A demo of full stack BDD in a single JS process
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
features
.gitignore
README.md
cucumber
package-lock.json
package.json
start.js

README.md

Cucumbers on Vine Hill

Everyone's invited to my party:

Here's how they mingle:

Features

Feature: Weather Forecast

  Scenario: Forecast for a city
    Given I am using the weather app
    When I open the forecast for London
    Then it should predict rain again

Step Definitions

const cucumber = require('cucumber')
const hyperdom = require('hyperdom')
const vineHill = require('vinehill')
const browserMonkey = require('browser-monkey')
const Client = require('../../app/client')
const server = require('../../app/server')

const weatherUrl = 'http://weather.com'

cucumber.defineSupportCode(function ({ Given, When, Then }) {
  Given('I am using the weather app', function () {
    vineHill({ [weatherUrl]: server })
    hyperdom.append(document.body, new Client(weatherUrl))
    this.monkey = browserMonkey.component(document.body)
  })

  When('I open the forecast for London', function () {
    return this.monkey.click('Forecast for London')
  })

  Then('it should predict rain again', function () {
    return this.monkey.shouldFind('h1', { text: 'Rainy!' })
  })
})

Client

const hyperdom = require('hyperdom')
const httpism = require('httpism/browser')
const html = hyperdom.html

module.exports = class WeatherAppClient {
  constructor(serverUrl) {
    this.api = httpism.client(serverUrl)
  }

  render() {
    return this.forecast ? this.renderForecast() : this.renderMenu()
  }

  renderMenu(model) {
    return html('button', { onclick: () => this.fetchForecast('london') },
      'Forecast for London')
  }

  fetchForecast(city) {
    return this.api.get('/cities/' + city)
      .then(weather => { this.forecast = weather.forecast })
  }

  renderForecast() {
    return html('h1', this.forecast)
  }
}

Server

const path = require('path')
const express = require('express')
const app = express()

app.get('/cities/:city', (req, res) => {
  res.json({ forecast: 'Rainy!' })
})

app.use(express.static(path.join(__dirname, 'public')))

module.exports = app

Testing and developing

Install it:

npm install

Then you can run cucumber-electron with:

./cucumber

Or debug it in a browser window:

./cucumber --electron-debug

Hit cmd+r to re-run scenarios

Running the app in a browser

Run the server:

npm start

And point your browser at:

http://localhost:3001