Add tests in nightwatch framework

nightwatch.conf.js

@@ -0,0 +1,17 @@
+const LAUNCH_URL = process.env.LAUNCH_URL || 'http://localhost:3000';
+module.exports = {
+    src_folders : ['tests'],
+    test_settings: {
+        default: {
+            launch_url: LAUNCH_URL,
+            selenium: {
+                start_process: false,
+                host: 'localhost',
+                port: 4444,
+            },
+            desiredCapabilities: {
+                browserName: 'chrome',
+            },
+        },
+    },
+};

package.json

@@ -15,7 +15,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "test:e2e": "cucumber-js --require tests/acceptance/cucumber.conf.js --require tests/acceptance/stepDefinitions"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +35,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@cucumber/cucumber": "^8.0.0-rc.1",
+    "@cucumber/pretty-formatter": "^1.0.0-alpha.1",
+    "chromedriver": "^96.0.0",
+    "geckodriver": "^2.0.4",
+    "nightwatch": "^1.7.12",
+    "nightwatch-api": "^3.0.2",
+    "selenium-server": "^3.141.59"
   }
 }

tests/acceptance/cucumber.conf.js

@@ -0,0 +1,22 @@
+const {setDefaultTimeout, BeforeAll, Before, AfterAll, After} = require('@cucumber/cucumber')
+const {startWebDriver, stopWebDriver, createSession, closeSession} = require('nightwatch-api')
+
+setDefaultTimeout(60000)
+
+
+
+BeforeAll(async function (){
+    await startWebDriver({})
+})
+
+Before((async function(){
+    await createSession({})
+}))
+
+AfterAll(async function(){
+    await stopWebDriver()
+})
+
+After(async function(){
+    await closeSession()
+})

tests/acceptance/feature/todo.feature

@@ -0,0 +1,9 @@
+Feature: todo
+  As a user
+  I want to add an item to the todo list
+  So that I can organize task
+
+  Scenario: Add item to the todo list
+    Given a user has navigated to the homepage
+    When the user adds "test" to the todo list using the webUI
+    Then card "test" should be displayed on the webUI

tests/acceptance/stepDefinitions/todoContext.js

@@ -0,0 +1,26 @@
+const {Given, When, Then} = require('@cucumber/cucumber')
+const {client} = require('nightwatch-api')
+
+//css selectors
+const todoInputField = '.todo-input'
+const todoCreateButton = '.todo-button'
+const todoListItem = '.todo .todo-item'
+
+Given('a user has navigated to the homepage', function () {
+    return client.url("http://localhost:3000");
+});
+
+
+When('the user adds {string} to the todo list using the webUI', async function (item) {
+    await client.waitForElementVisible(todoInputField)
+        .click(todoInputField)
+        .setValue(todoInputField, item)
+        .click(todoCreateButton)
+    return client
+});
+
+Then('card {string} should be displayed on the webUI', function (item) {
+    return client.getText(todoListItem, function (result) {
+        this.assert.equal(result.value, item)
+    })
+});