with_test_harness

Author: paul-hammant

package-lock.json

@@ -22,7 +22,7 @@
     "@types/nightwatch": "^2.3.18",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/test-utils": "^2.2.7",
-    "chromedriver": "109.0.0",
+    "chromedriver": "112.0.0",
     "eslint-plugin-vue": "9.9.0",
     "nightwatch": "2.6.10",
     "vite": "^4.0.4"

package.json

@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+import ToDoForm from "../../src/components/ToDoForm.vue";
+const emitted = ref("")
+
+</script>
+
+<template>
+    <ToDoForm @todo-added="(e) => emitted += e" />
+    <p id="testHarnessOutput">todo-added: {{ emitted }}</p>
+</template>

test/component/ToDoForm_TestHarness.vue

@@ -1,13 +1,28 @@
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
 describe('Component test for the TodoForm', function() {
 
   browser.baseUrl = browser.baseUrl || 'http://localhost:3000';
 
   it('render and test the component', async function(browser) {
-    const component = await browser.mountComponent('/src/components/ToDoForm.vue');
+    const component = await browser.mountComponent('/test/component/ToDoForm_TestHarness.vue');
     browser.expect(component).to.be.visible;
 
-    const labelEl = await component.find('label[for="new-todo-input"]');
-    expect(labelEl).text.toContain('What needs to be done?');
+    expect(await component.find('label[for="new-todo-input"]'))
+        .text.toContain('What needs to be done?');
+
+    expect(await component.find('#testHarnessOutput')).text.toBe('todo-added:', );
+
+    //await delay(10000);
+    browser.clearValue('#new-todo-input')
+        .sendKeys('#new-todo-input', "abc")
+        .click("button")
+        .clearValue('#new-todo-input')
+        .sendKeys('#new-todo-input', "def")
+        .click("button");
+
+    expect(await component.find('#testHarnessOutput')).text.toBe('todo-added: abcdef', );
+
 
   });