done

Author: sunhonghaoparis

package-lock.json

@@ -7,10 +7,10 @@
 <template>
   <!-- the background Canvas grid -->
   <div class="component-display grid-bg" :style="{backgroundColor:'#FFFFF' }" v-on:click="handleClick" v-on:click.right="handleRight">
-  <div class="cssContainer" :style="{ 
-    'background-size': `${gridWidth}px ${gridHeight}px, 
-    ${gridWidth}px ${gridHeight}px`, 
-    'height': `${this.containerH}px`, 'width': `${this.containerW}px` 
+  <div class="cssContainer" :style="{
+    'background-size': `${gridWidth}px ${gridHeight}px,
+    ${gridWidth}px ${gridHeight}px`,
+    'height': `${this.containerH}px`, 'width': `${this.containerW}px`
     }">
     <!-- This is the actual component box -->
     <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
@@ -467,7 +467,7 @@ export default {
     // find the amount of grid lines for width
     gridWidth() {
       return this.containerW / this.gridLayout[0];
-    }, 
+    },
     // find the amount of grid lines for height
     gridHeight() {
       return this.containerH / this.gridLayout[1];

src/components/Canvas.vue

@@ -28,15 +28,16 @@ Description:
         ></q-input>
       </form>
 
-      <ParentMultiselect 
+      <ParentMultiselect
       @addparent="parent = $event"
       v-if="activeComponent === ''"></ParentMultiselect>
 
     <!-- <q-expansion-item group="accordion" label="Create Component" > -->
       <LibComponents></LibComponents>
 <div class="searchinput">
-      <q-input outlined v-model="input" placeholder="Please input" label="Search Element+ Components"
 
+      <q-input outlined v-model="input" placeholder="Please input" label="Search Element+ Components"
+      id="searchbox"
       color="white"
           dark
           dense
@@ -45,6 +46,7 @@ Description:
           class="input-add"
           no-error-icon
       />
+
     </div>
 
 
@@ -308,8 +310,11 @@ pickComponent(componentName){
     max-width: 600px;
   }
   .searchinput{
-    margin-right: 10px;
+    
+    width: 260px;
+
   }
 
 
+
 </style>

src/components/left-sidebar/ComponentTab/CreateMenu.vue

@@ -535,6 +535,25 @@ test('renders ${componentName}', () => {
       fs.writeFileSync(path.join(location, "firebaseConfig.js"), str);
       }
     },
+
+    createjestConfigFile(location){
+      if(this.$store.state.importTest ==='on'){
+      let str = `module.exports = {`;
+        str += `\n\tpreset: '@vue/cli-plugin-unit-jest'`;
+        str += `\n}`
+      fs.writeFileSync(path.join(location,"jest.config.js"), str);
+      }
+    },
+    createbabelConfigFile(location){
+      if(this.$store.state.importTest ==='on'){
+      let str = `module.exports = {`;
+        str += `\n\tpresets: [`;
+        str += `\n\t\t'@vue/cli-plugin-babel/preset'`;
+        str += `\n\t]`;
+        str += `\n}`
+      fs.writeFileSync(path.join(location,"babel.config.js"), str);
+      }
+    },
     createOauthFile(location){
       if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
       let str = `<template>`;
@@ -648,21 +667,14 @@ test('renders ${componentName}', () => {
       str += `\nimport store from './store'`
       str += `\nimport App from './App.vue';`;
       str += `\nimport router from './router';\n`;
-      if(this.$store.state.importLibraries.includes('element')){
-        str+= `\nimport ElementPlus from 'element-plus';`
-        str+=`\nimport 'element-plus/dist/index.css';`
-      };
+      str+= `\nimport ElementPlus from 'element-plus';`
+      str+=`\nimport 'element-plus/dist/index.css';`
       str += `\nconst app = createApp(App);`;
       str += `\napp.use(router);`;
       str += `\napp.use(store)`;
-      if(this.$store.state.importLibraries.includes('element')){
-        str+=`\napp.use(ElementPlus);`;
-      };
+      str+=`\napp.use(ElementPlus);`;
       str += `\napp.mount('#app');`;
 
-
-
-
       // if using typescript, export with .ts extension
       if (this.exportAsTypescript === "on") {
         fs.writeFileSync(path.join(location, "src", "main.ts"), str);
@@ -785,11 +797,19 @@ test('renders ${componentName}', () => {
       str += `\n\t"scripts": {`;
       str += `\n\t\t"dev": "vite",`;
       if (this.exportAsTypescript === "on") {
+
         str += `\n\t\t"build": "vue-tsc --noEmit && vite build",`;
+        if(this.$store.state.importTest ==='on'){
+          str +=`\n\t\t"test:unit": "vue-cli-service test:unit",`
+        }
+
         str += `\n\t\t"typecheck": "vue-tsc --noEmit",`;
         str += `\n\t\t"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",`;
       } else {
         str += `\n\t\t"build": "vite build",`;
+        if(this.$store.state.importTest ==='on'){
+          str +=`\n\t\t"test:unit": "vue-cli-service test:unit",`
+        }
         str += `\n\t\t"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",`;
       }
       str += `\n\t\t"preview": "vite preview --port 5050"`;
@@ -798,9 +818,8 @@ test('renders ${componentName}', () => {
       str += `\n\t\t"vue": "^3.2.31",`;
       str += `\n\t\t"vue-router": "^4.0.12",`;
       str += `\n\t\t"vuex": "^4.0.2"`;
-      if(this.$store.state.importLibraries.includes('element')){
-        str += `,\n\t\t"element-plus": "^2.2.16"`;
-      };
+      str += `,\n\t\t"element-plus": "^2.2.16"`;
+
       if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
         str += `,\n\t\t "firebase": "^9.6.9"`
       }
@@ -810,6 +829,18 @@ test('renders ${componentName}', () => {
       str += `\n\t\t"eslint": "^8.5.0",`;
       str += `\n\t\t"eslint-plugin-vue": "^8.2.0",`;
       str += `\n\t\t"vite": "^2.8.4"`
+      if(this.$store.state.importTest ==='on'){
+      str+=`,\n\t\t"@babel/core": "^7.12.16",`
+      str+=`\n\t\t"@babel/eslint-parser": "^7.12.16",`
+      str+=`\n\t\t"@vue/cli-plugin-babel": "~5.0.0",`
+      str+=`\n\t\t"@vue/cli-plugin-eslint": "~5.0.0",`
+      str+=`\n\t\t"@vue/cli-plugin-unit-jest": "~5.0.0",`
+      str+=`\n\t\t"@vue/cli-service": "~5.0.0",`
+      str+=`\n\t\t"@vue/test-utils": "^2.0.0-0",`
+      str+=`\n\t\t"@vue/vue3-jest": "^27.0.0-alpha.1",`
+      str+=`\n\t\t"babel-jest": "^27.0.6",`
+      str+=`\n\t\t"jest": "^27.0.5"`
+      }
       if (this.exportAsTypescript === "on") {
         str += `,\n\t\t"@rushstack/eslint-patch": "^1.1.0",`
         str += `\n\t\t"@vue/tsconfig": "^0.1.3",`;
@@ -832,8 +863,8 @@ test('renders ${componentName}', () => {
         fs.mkdirSync(path.join(data, "src", "views"));
         fs.mkdirSync(path.join(data, "src", "router"));
         fs.mkdirSync(path.join(data, "src", "store"));
-        fs.mkdirSync(path.join(data, "test-templates"));
-        fs.mkdirSync(path.join(data, "test-templates", "components"));
+        fs.mkdirSync(path.join(data, "tests"));
+        fs.mkdirSync(path.join(data, "tests", "unit"));
       }
       // creating basic boilerplate for vue app
       this.createIndexFile(data);
@@ -847,6 +878,8 @@ test('renders ${componentName}', () => {
       this.createStore(data);
       this.createFirebaseConfigFile(data);
       this.createOauthFile(data);
+      this.createjestConfigFile(data);
+      this.createbabelConfigFile(data)
       // exports images to the /assets folder
       // eslint-disable-next-line no-unused-vars
       for (let [routeImage, imageLocation] of Object.entries(this.imagePath)) {
@@ -876,7 +909,7 @@ test('renders ${componentName}', () => {
               componentName,
               this.componentMap
             );
-            this.createComponentTestCode(path.join(data, "test-templates", "components", componentName + '.spec.js'),
+            this.createComponentTestCode(path.join(data, "tests", "unit", componentName + '.spec.js'),
               componentName,
               this.componentMap)
           }

src/components/nav-buttons/ExportMenu.vue

@@ -67,6 +67,20 @@ Description:
                 <span class="switch-handle" :value="this.exportAsTypescript"></span>
               </label>
              </div>
+
+             <div class="Test">
+             <p class="Test-text"> <b>
+         Vue Test:
+
+             </b> </p>
+              <label for="Test"  class="switch" >
+              <input v-if="this.importTest === 'on'" class="switch-input" type="checkbox" name="Test" id="Test" :value="this.importTest" @change="syncTestFlag" checked/>
+              <input v-else class="switch-input" type="checkbox" name="Test" id="Test" :value="this.importTest" @change="syncTestFlag"/>
+                <span class="switch-label" :value="this.importTest" data-on="on" data-off="off"></span>
+                <span class="switch-handle" :value="this.importTest"></span>
+              </label>
+             </div>
+
              <div class="drawer">
              <q-expansion-item group="accordion" label="Create Oauth" >
              <div class="Oauth">
@@ -95,6 +109,7 @@ Description:
               </label>
              </div>
              </q-expansion-item>
+
             </div>
           </div>
           <i id="btn"></i>
@@ -212,7 +227,7 @@ export default {
     GridDensity
   },
   computed: {
-    ...mapState(["exportAsTypescript","exportOauth","exportOauthGithub"]),
+    ...mapState(["exportAsTypescript","exportOauth","exportOauthGithub","importTest"]),
   },
   methods: {
     ...mapActions(["toggleTutorial"]),
@@ -267,6 +282,19 @@ export default {
       }
       this.$store.commit("EXPORT_AS_TYPESCRIPT", checkboxValue);
     },
+    syncTestFlag(e) {
+      console.log(this.$store.state.importTest )
+
+let checkboxValue;
+if (e.target.value === "off") {
+  checkboxValue = "on";
+} else {
+  checkboxValue = "off";
+}
+this.$store.commit("EXPORT_TEST", checkboxValue);
+console.log(this.$store.state.importTest )
+
+},
     syncOauthFlag(e) {
 
       let checkboxValue;
@@ -626,4 +654,15 @@ q-btn > i {
   margin-left: 25px;
 
 }
+.Test{
+
+  display: flex;
+  align-items: flex-end;
+  margin: 10px;
+  flex-direction: row;
+
+}
+.Test-text{
+  margin-right: 10px;
+}
 </style>

src/layouts/MyLayout.vue

@@ -116,6 +116,9 @@ const mutations = {
   [types.EXPORT_OAUTH_GIT]: (state, payload) => {
     state.exportOauthGithub = payload;
   },
+  [types.EXPORT_TEST]: (state, payload) => {
+    state.importTest = payload;
+  },
 
   [types.CREATE_ACTION]: (state, payload) => {
     state.userActions.push(payload);

src/store/mutations.js

@@ -72,7 +72,8 @@ const newState :types.State = {
   containerH: 720, // in px
   containerW: 1280, // in px
   importLibraries:[],
-  displaylibComponent:false
+  displaylibComponent:false,
+  importTest:'off'
   //push libraries string to the array
 };
 

src/store/state/index.ts

@@ -69,6 +69,7 @@ export const DELETE_USER_STATE = 'DELETE_USER_STATE'
 export const EXPORT_AS_TYPESCRIPT = 'EXPORT_AS_TYPESCRIPT'
 export const EXPORT_OAUTH = 'EXPORT_OAUTH'
 export const EXPORT_OAUTH_GIT = 'EXPORT_OAUTH_GIT'
+export const EXPORT_TEST = 'EXPORT_TEST'
 export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
 export const ADD_ACTIVE_COMPONENT_NOTE = 'ADD_ACTIVE_COMPONENT_NOTE'
 export const DELETE_ACTIVE_COMPONENT_NOTE = 'DELETE_ACTIVE_COMPONENT_NOTE'

src/store/types.js

@@ -59,6 +59,8 @@ export type State = {
   containerW: number,
   importLibraries: string[],
   displaylibComponent: boolean,
+  importTest:string
+
 };
 
 // Type for HTML Element Map that used in multiple files