fixed typos in createBoilerFunc

Co-authored-by: Daniel Garan <[email protected]>
Co-authored-by: Kevin Can <[email protected]>
Co-authored-by: Anthony Herrera <[email protected]>
Co-authored-by: Rob Sinzieri <[email protected]>
Co-authored-by: Roderick de Leon <[email protected]>"

Author: 5 people

src/components/right-sidebar/CodeSnippet.vue

@@ -19,7 +19,7 @@
           <input
             :checked="store.composition"
             @change="store.compositionToggle"
-            type="checkbox"
+            type="checkbox" class="compositiontoggle"
           >
           <span class="slider round"/>
         </label>

src/components/right-sidebar/createBoilerFuncs.ts

@@ -3,19 +3,35 @@ import { useStore } from "../../store/main.js";
 import { vtIcons } from "src/store/state/icons";
 import { Component, RouteComponentMap } from "../../../types";
 
-const store = useStore(); // template
-const componentMap = computed(() => store.componentMap);
-const activeComponent = computed(() => store.activeComponent);
-const activeComponentObj = computed(() => store.activeComponentObj);
-const exportAsTypescript = computed(() => store.exportAsTypescript);
-const activeRoute = computed(() => store.activeRoute);
-
+// const store = useStore(); // template
+// const componentMap = computed(() => store.componentMap);
+// const activeComponent = computed(() => store.activeComponent);
+// const activeComponentObj = computed(() => store.activeComponentObj);
+// const exportAsTypescript = computed(() => store.exportAsTypescript);
+// const activeRoute = computed(() => store.activeRoute);
+export function useComputedStore() {
+  const store = useStore();
+  const componentMap = computed(() => store.componentMap);
+  const activeComponent = computed(() => store.activeComponent);
+  const activeComponentObj = computed(() => store.activeComponentObj);
+  const exportAsTypescript = computed(() => store.exportAsTypescript);
+  const activeRoute = computed(() => store.activeRoute);
+
+  return {
+    componentMap,
+    activeComponent,
+    activeComponentObj,
+    exportAsTypescript,
+    activeRoute
+  };
+}
 
 export const createBoilerOptions = (componentName: string, children: string[] | {
   [key: string]: RouteComponentMap | Component;
   App: RouteComponentMap;
   HomeView: RouteComponentMap;
 }) => {
+  const { componentMap, activeComponent, exportAsTypescript, activeComponentObj } = useComputedStore();
   // add import mapstate and mapactions if they exist
   let imports = "";
   const activeComp = componentMap.value[activeComponent.value] as Component;
@@ -69,7 +85,7 @@ export const createBoilerOptions = (componentName: string, children: string[] |
 
   const vtComponents: string[] = [];
 
-  htmlBinding.forEach((el) => {
+  htmlBinding.forEach((el: {text: string}) => {
     if (vuetensilsSet.has(el.text)) {
       // Add import statement for Vuetensils components
       vtComponents.push(el.text);
@@ -83,7 +99,7 @@ export const createBoilerOptions = (componentName: string, children: string[] |
   }
 
   data += "  data() {\n    return {\n";
-  htmlBinding.forEach((el) => {
+  htmlBinding.forEach((el: { binding: string }) => {
     if (el.binding !== "") {
       data += `      ${el.binding}: "PLACEHOLDER FOR VALUE", `;
       data += "\n";
@@ -185,6 +201,7 @@ export const createBoilerComposition = (componentName: string, children: string[
   App: RouteComponentMap;
   HomeView: RouteComponentMap;
 }) => {
+  const { componentMap, activeComponent, activeComponentObj, exportAsTypescript } = useComputedStore();
   // add import mapstate and mapactions if they exist
   let imports = "";
   const activeComp = componentMap.value[activeComponent.value] as Component;
@@ -234,7 +251,7 @@ export const createBoilerComposition = (componentName: string, children: string[
 
   const vtComponents: string[] = [];
 
-  htmlBinding.forEach((el) => {
+  htmlBinding.forEach((el: { text: string }) => {
     if (vuetensilsSet.has(el.text)) {
       // Add import statement for Vuetensils components
       vtComponents.push(el.text);
@@ -251,7 +268,7 @@ data += "  setup() {"
 if(activeComp.state.length || activeComp.actions.length){
   data += "   \n    const /* testStore */ = useStore();  ";
 }
-  htmlBinding.forEach((el) => {
+  htmlBinding.forEach((el: { binding: string }) => {
     if (el.binding !== "") {
       data += `      ${el.binding}: "PLACEHOLDER FOR VALUE", `;
       data += "\n";

test/jest/__tests__/stateChangeTest.spec.js

@@ -30,13 +30,13 @@ describe('CodeSnippet', () => {
     const store = useStore();
 
     // the initial value of store.options is false using the expect function.
-    expect(store.options).toBe(false);
+    expect(store.composition).toBe(false);
 
     // Find the checkbox input with the class compositiontoggle in the wrapper, trigger a change event on it, and wait for any potential DOM updates using the nextTick method.
     await wrapper.find('input.compositiontoggle').trigger('change');
     await wrapper.vm.$nextTick(); //wait for any potential DOM updates
 
     //the final value of store.options is true using the expect function.
-    expect(store.options).toBe(true);
+    expect(store.composition).toBe(true);
   });
 });