added demo component and a prompt

Author: DavertMik

generator/index.js

@@ -1,4 +1,6 @@
-module.exports = api => {
+const fs = require('fs');
+
+module.exports = (api, options) => {
  api.render('./template');
 
  // These dependencies always need to be added
@@ -16,5 +18,37 @@ module.exports = api => {
  'test:e2e:parallel': 'vue-cli-service test:e2e:parallel',
  'test:e2e:open': 'vue-cli-service test:e2e:open',
  },
- }); 
+ });
+ 
+ if (options.demo) api.injectImports(api.entryFile, `import TestMe from './components/TestMe'`);
+}
+
+module.exports.hooks = (api, options) => {
+ api.afterInvoke(() => {
+ appendGitIgnore(api);
+ if (options.demo) replaceAppFile(api);
+ })
+}
+
+
+function replaceAppFile(api) {
+ const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' });
+ const newContent = contentMain.replace('new Vue({', `
+Vue.component('TestMe', TestMe);
+
+new Vue({`);
+
+ fs.writeFileSync(api.entryFile, newContent, { encoding: 'utf-8' });
+
+ const appPath = api.resolve('src/App.vue')
+ const appFile = fs.readFileSync(appPath, { encoding: 'utf-8' });
+
+ // replace div inside a template
+ const newAppFile = appFile.replace('</div>', `<TestMe></TestMe></div>`); 
+ fs.writeFileSync(appPath, newAppFile, { encoding: 'utf-8' });
+}
+
+function appendGitIgnore(api) {
+ const ignorePath = api.resolve('.gitignore');
+ fs.appendFileSync(ignorePath, `\n/tests/e2e/output`);
 }

generator/template/src/components/TestMe.vue

@@ -0,0 +1,72 @@
+<template>
+ <div>
+ <h1>Demo Component. Submit me!</h1>
+ <div class="row">
+ <div class="col-md-6 mb-3">
+ <label for="firstName">First name</label>
+ <input type="text" v-model="data.first_name" class="form-control" id="firstName" placeholder="" value="" required>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="lastName">Last name</label>
+ <input type="text" v-model="data.last_name" class="form-control" id="lastName" placeholder="" value="" required>
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="username">Username</label>
+ <input type="text" class="form-control" v-model="data.username" id="username" placeholder="Username" required>
+ </div>
+
+ <div class="mb-3">
+ <label for="email">Email</label>
+ <input type="email" class="form-control" v-model="data.email" id="email" placeholder="you@example.com">
+ </div>
+
+ <div class="mb-3">
+ <label for="address">Address</label>
+ <input type="text" class="form-control" v-model="data.address" id="address" placeholder="1234 Main St" required>
+ </div>
+ <div>
+ <button @click="submit()">Submit</button>
+ </div>
+ <div>
+ <h1>Result</h1>
+ <pre id="result" v-html="result"></pre>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ data: {},
+ result: '',
+ };
+ },
+ methods: {
+ submit() {
+ this.result = JSON.stringify(this.data);
+ return false;
+ }
+ } 
+}
+</script>
+
+<style lang="css">
+ h1 {
+ font-weight: bold;
+ font-size: 24px;
+ margin-bottom: 16px;
+ }
+ input {
+ margin-left: 20px;
+ border: 1px solid silver;
+ }
+
+ button {
+ background: blueviolet;
+ padding: 20px 60px;
+ color: white;
+ }
+</style>

generator/template/tests/e2e/app_test.js

@@ -2,5 +2,14 @@ Feature('App');
 
 Scenario('Open app', (I) => {
  I.amOnPage('/');
- I.see('Vue');
+ I.see('Demo Component', 'h1');
+ I.fillField('First name', 'tester'); // using semantic locators
+ I.fillField('Last name', 'end2end');
+ I.fillField('#username', 'codecept'); // using CSS locators
+ I.fillField('Email', 'tester@codecept.io');
+ I.fillField('Address', 'some street');
+ I.click('Submit');
+ I.see('"first_name":"tester"','#result');
+ I.see('"last_name":"end2end"','#result');
+ pause(); // TODO: Add more assertions when paused!
 });

prompts.js

@@ -0,0 +1,7 @@
+module.exports = [
+ {
+ name: 'demo',
+ type: 'confirm',
+ message: `Do you want to update App.vue and add a demo component for testing?`
+ }
+]