export test config and dev

Author: sunhonghaoparis

src/components/Canvas.vue

@@ -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 -->
@@ -72,7 +72,7 @@
             {'background-color': componentData.color}]"
         >
           <p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
-        </div>sss
+        </div>
         <div v-if="element.text === 'footer'" class="htmlFooter"></div>
                 <div v-if="element.text === 'form'"
           class="htmlGeneral"
@@ -472,7 +472,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];
@@ -528,7 +528,7 @@ export default {
     //   if (this.activeComponent !== e.target.id) {
     //     if (e.target.parentElement?.classList.contains('draggable')) {
     //       // this.setActiveComponent(e.target.parentElement.id)
-    //     } 
+    //     }
     //     else if (typeof `${e.target.id}` !== 'number') {
     //       // this.setActiveComponent(e.target.id);
     //     }

src/components/nav-buttons/ExportMenu.vue

@@ -311,7 +311,7 @@ export default {
         }
       }
       else {
-        if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){return `<template>\n\t${str}${templateTagStr}${routeStr}</div>\n<Oauth/>\n</template>`}
+
         return `<template>\n\t${str}${templateTagStr}${routeStr}</div>\n</template>`
       }
     },
@@ -508,6 +508,25 @@ export default {
       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>`;
@@ -784,6 +803,18 @@ export default {
       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",`;
@@ -819,6 +850,8 @@ export default {
       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)) {

src/layouts/MyLayout.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;
@@ -628,4 +656,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/store/mutations.js

@@ -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/state/index.ts

@@ -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/types.js

@@ -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'

types.ts

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