typo

bookshop/app/vue/index.html

@@ -44,11 +44,11 @@
         <img v-bind:src="book.image" alt=""/>
         <label style="text-align:right">
             <span class="succeeded"> {{ order.succeeded }} </span>
-            <span class="failed"> {{ order.failed }} </span>
-            &nbsp;&nbsp; {{ book.stock }} in stock
+            <span class="failed"> {{ order.failed }} </span> &nbsp;&nbsp;
+            <span id="stock"> {{ book.stock }} in stock </span>
         </label>
         <form @submit.prevent="submitOrder" style="float:right; display:flex; flex-direction:row-reverse">
-            <input type="number" v-model="order.amount" v-bind:class="{ failed: order.failed }" style="width:5em">
+            <input id="amount" type="number" v-model="order.amount" v-bind:class="{ failed: order.failed }" style="width:5em">
             <input type="submit" value="Order:" class="muted-button">
         </form>
         <h4> {{ book.title }} </h4>

package.json

@@ -17,6 +17,8 @@
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "chai-subset": "^1.6.0",
+    "@cucumber/cucumber": "^7.0.0",
+    "selenium-webdriver": "^4.0.0-beta.1",
     "sqlite3": "5.0.0"
   },
   "scripts": {

test/cds.ql.test.js

@@ -365,7 +365,7 @@ describe('cds.ql → cqn', () => {
         },
       })
 
-      expect(
+      if (!is_v2) expect(
         SELECT.from(Foo).where(`x=`, 1, `or y.z is null and (a>`, 2, `or b=`, 3, `)`)
       ).to.eql(CQL`SELECT from Foo where x=1 or y.z is null and (a>2 or b=3)`)
 

test/features/bookshop.feature

@@ -0,0 +1,34 @@
+Feature: List Books using Vue.js UI
+
+  Scenario: Launch cds server for bookshop
+    When we run the 'bookshop' server
+    And wait for 1s
+    Then it should listen at 'http://localhost:4004'
+
+  Scenario: Display Books List
+    When we open page '/vue/index.html'
+    And wait for 1s
+    Then it should list these rows in table 'books':
+      | Wuthering Heights | Emily Brontë      |
+      | Jane Eyre         | Charlotte Brontë  |
+      | The Raven         | Edgar Allen Poe   |
+      | Eleonora          | Edgar Allen Poe   |
+      | Catweazle         | Richard Carpenter |
+
+  Scenario: Select a Book
+    When we click on the 1st row in table 'books'
+    Then it shows '12' in 'stock'
+
+  Scenario: Order One Book
+    When we click on button 'Order:'
+    Then it succeeds with 'ordered 1 item(s)'
+
+  Scenario: Order Four Books
+    When we enter '4' into 'amount'
+    And we click on button 'Order:'
+    Then it succeeds with 'ordered 4 item(s)'
+
+  Scenario: Order Amount Exceeding Stock
+    When we enter '9' into 'amount'
+    And we click on button 'Order:'
+    Then it fails with '9 exceeds stock'

test/features/step_definitions/bookshop_steps.js

@@ -0,0 +1,82 @@
+const { Given, When, Then, AfterAll } = require('@cucumber/cucumber')
+const { Builder, By } = require('selenium-webdriver')
+const browser = (new Builder).forBrowser('safari').build()
+const cds = require ('@sap/cds/lib')
+
+process.env.cds_requires_auth_strategy = 'dummy'
+
+let axios = require('axios').default
+let {display} = browser
+
+When('we run the {string} server', project => cds.exec('watch', project))
+Then('it should listen at {string}', baseURL => {
+  axios = axios.create({ baseURL })
+  display = url => browser.get (baseURL+url)
+  return axios.head()
+})
+Then('terminate the server', ()=> process.exit())
+
+
+
+When(/wait for (\d+)\s*(\w+)/, {timeout:60*1000}, (delay, unit, done) => {
+  const factor = {
+    ms: 1,
+    s: 1000, sec: 1000, second: 1000, seconds: 1000,
+    m: 60*1000, min: 60*1000, minute: 60*1000, minutes: 60*1000,
+    h: 60*60*1000, hr: 60*60*1000, hour: 60*60*1000, hours: 60*60*1000,
+  }[unit]
+  if (!factor) throw `Unknown duration unit: ${unit}`
+  setTimeout (done, delay * factor)
+})
+
+AfterAll(()=> setTimeout (process.exit, 111))
+
+
+
+
+
+When('we open page {string}', page => display(page))
+
+Then('it should list these rows in table {string}:', async (id,data) => {
+  let rows = await browser.findElements(By.css(`#${id} tr`)); rows.shift()
+  await Promise.all (data.rawTable.map (async (row,i)=>{
+    const tr = await rows[i].getText()
+    for (let each of row) if (!tr.match(each)) throw `Didn't find '${each}' in web page as expected`
+  }))
+})
+
+When(/we click on the (\d+)(?:st|nd|rd|th) row in table '(\w+)'/, async (row, id) => {
+  let rows = await browser.findElements(By.css(`#${id} tr`))
+  let td = await rows[row].findElement(By.css('td'))
+  return td.click()
+})
+
+When('we enter {string} into {string}', async (value,id) => {
+  const field = await browser.findElement(By.css(`input#${id}`))
+  return field.sendKeys('\b\b\b\b\b\b',value)
+})
+
+When('we click on button {string}', async (text) => {
+  const button = await browser.findElement(By.css(`input[value='${text}']`))
+  return button.click()
+})
+
+Then('it succeeds with {string}', async message => {
+  const element = await browser.wait (browser.findElement(By.css(`span.succeeded`)))
+  return (await element.getText()).includes(message)
+})
+
+Then('it fails with {string}', async message => {
+  const element = await browser.wait (browser.findElement(By.css(`span.failed`)))
+  return (await element.getText()).includes(message)
+})
+
+Then('it shows {string} in {string}', async (message,id) => {
+  const element = await browser.wait (browser.findElement(By.id(id)))
+  return (await element.getText()).includes(message)
+})
+
+Given('we login as {string}, {string}', async (username, password) => {
+  const alert = await browser.switchTo().alert()
+  return alert.authenticateAs(username, password)
+})