Merge branch 'dev2021' of https://github.com/oslabs-beta/OverVue into sean/edit

Author: ziggrace

src/App.vue

@@ -40,8 +40,14 @@ let redoMixin = {
       // console.log("Are these equal to each other?", action == this.undoneAction[this.undoneAction.length-1])
       if (!this.isTimetraveling) {
         if (this.undoneAction[this.undoneAction.length - 1]) {
-          if (action.type === this.undoneAction[this.undoneAction.length - 1].type &&
-            deepEqual(action.payload, this.undoneAction[this.undoneAction.length - 1].payload)) {
+          if (
+            action.type ===
+              this.undoneAction[this.undoneAction.length - 1].type &&
+            deepEqual(
+              action.payload,
+              this.undoneAction[this.undoneAction.length - 1].payload
+            )
+          ) {
             this.undoneAction.pop()
           } else {
             this.undoneAction = []
@@ -50,19 +56,21 @@ let redoMixin = {
       }
     })
   },
-
+  // undo + redo function calling
+  // metaKey accounts for Command Key on Mac
   mounted () {
     const throttledUndo = throttle(this.undo, 300)
     const throttledRedo = throttle(this.redo, 300)
-
+    // undo function calling
     window.addEventListener('keydown', event => {
-      if (event.ctrlKey && event.key === 'z') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
         event.preventDefault()
         throttledUndo()
       }
     })
+    // redo function calling
     window.addEventListener('keydown', event => {
-      if (event.ctrlKey && event.key === 'y') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'y') {
         event.preventDefault()
         throttledRedo()
       }
@@ -90,8 +98,10 @@ let redoMixin = {
         this.undoneAction.push(undone)
         if (ignoredActions.has(undone.type)) {
           // console.log('We undid an ignored action!')
-          while (this.doneAction[this.doneAction.length - 1] &&
-          ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)) {
+          while (
+            this.doneAction[this.doneAction.length - 1] &&
+            ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)
+          ) {
             this.undoneAction.push(this.doneAction.pop())
           }
           /* if we get here, that means we have undone all "useless" actions
@@ -130,7 +140,6 @@ let redoMixin = {
         this.redo()
       }
     }
-
   }
 }
 
@@ -140,5 +149,4 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style></style>

src/components/ComponentDisplay.vue

@@ -382,10 +382,9 @@ export default {
   },
   watch: {
     activeComponent: function () {
-      if (this.activeComponent){
+      if (this.activeComponent) {
         this.onActivated(this.activeComponentObj)
-      }
-      else{
+      } else {
         this.onDeactivated()
       }
     }

src/components/dashboard_items/CodeSnippet.vue

@@ -65,7 +65,6 @@ export default {
     },
     // Creates <template> boilerplate
     writeTemplateTag (componentName) {
-      // console.log('writeTemplateTag invoked!')
       // create reference object
       const htmlElementMap = {
         div: ['<div>', '</div>'],
@@ -82,6 +81,7 @@ export default {
       }
 
       // Helper function that recursively iterates through the given html element's children and their children's children.
+      // also adds proper indentation to code snippet
       function writeNested (childrenArray, indent) {
         if (!childrenArray.length) {
           return ''
@@ -91,7 +91,6 @@ export default {
 
         childrenArray.forEach(child => {
           nestedString += indented
-          // console.log(child)
           if (!child.text) {
             nestedString += `<${child}/>\n`
           } else {
@@ -113,7 +112,6 @@ export default {
       let htmlArr = this.componentMap[componentName].htmlList
       let outputStr = ``
       for (let el of htmlArr) {
-        // console.log(el)
         if (!el.text) {
           outputStr += `    <${el}/>\n`
         } else {
@@ -130,7 +128,6 @@ export default {
           }
         }
       }
-      // console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
     },
     // Creates boiler text for <script> and <style>
@@ -156,15 +153,14 @@ export default {
       this.getWindowHeight()
     })
   },
-  // Updates code snippet
+  // Updates code snippet when adding children
   updated () {
-    // console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
-    // console.log('component map: ', this.componentMap);
     if (this.componentMap[this.activeComponent]) {
       this.code = `${this.createCodeSnippet(
         this.activeComponent,
         this.componentMap[this.activeComponent].children
       )}`
+      // else if there is not existing component/no active component
     } else {
       this.code = `Your component boilerplate will be displayed here.`
     }

src/components/dashboard_items/ComponentDetails.vue

@@ -1,3 +1,12 @@
+<!--
+Description:
+  Located in the Dashboard
+  Contains the Code Snippet, HTMLQueue Components, and the Component state, actions, and props as well
+  Functionality includes: Contains the Code Snippet and HTMLQueue Components,
+  as well as tabs to show the Component state, actions, and props
+
+  -->
+
 <template>
   <div class="container">
     <q-card id="store-cards" v-if="this.activeComponentObj">

src/components/dashboard_items/Dashboard.vue

@@ -1,8 +1,8 @@
 <!--
 Description:
   Displays OverVue's dashboard containing Component Details, Vuex Store, and the Project Tree
-  Functionality includes: opening/closing drawer, deselecting active html, and
-  toggling to html elements tab during component creation
+  Functionality includes: opening/closing drawer, and contains the different Tabs
+  As of now, no default tab selected when not selecting anything, but might change to Project Tree in the future if we want
   -->
 
   <template>
@@ -85,27 +85,30 @@ export default {
       }
     }
   },
-  // toggles dashboard to "html" tab when existing component is not in focus
   watch: {
+    // toggles dashboard to "Component Details" tab when a components is selected
     activeComponent: function () {
-      // console.log('watching activeComponent in Dashboard');
-      if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
-        this.tab = 'html'
+      if (this.activeComponent !== '') {
+        this.tab = 'detail'
+      } else {
+        // otherwise toggle dashboard to 'Project Tree' tab if no component is selected
+        this.tab = 'tree'
       }
     },
-    // toggles dashboard to "html" tab if component name has value & elements are in queue
+    // otherwise toggle dashboard to 'Project Tree' tab if no component is selected or the
+    // user is in the process of creating a component
     componentNameInputValue: function () {
-      // console.log('watching componentNameInputVal')
-      if (this.componentNameInputValue !== '' && this.selectedElementList.length !== 0 && this.activeComponent === '') {
-        // console.log(this.selectedElementList)
-        this.tab = 'html'
+      if (this.componentNameInputValue !== '' && this.activeComponent === '') {
+        console.log(this.selectedElementList.length)
+        this.tab = 'tree'
       }
     },
-    // toggles dashboard to "html" tab if elements are added to queue on component creation
+    // // toggles dashboard to "Project Tree" tab if:
+    // // no component is selected and either:
+    // // elements are being added to component or name is being typed
     selectedElementList: function () {
-      // console.log('watching selectedElementList')
       if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
-        this.tab = 'html'
+        this.tab = 'tree'
       }
     }
   }

src/components/dashboard_items/HTMLQueue.vue

@@ -38,7 +38,7 @@ import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlL
 import { breadthFirstSearch } from '../../utils/search.util'
 
 export default {
-  name: 'HTML Queue',
+  name: 'HTMLQueue',
   props: {
     name: {
       type: String

test/jest/__tests__/App.spec.js

@@ -25,18 +25,18 @@ describe("Test mutations + actions to remove action from component and userActio
     };
   });
 
-  xit("deleting user action from state.userActions", () => {
+  it("deleting user action from state.userActions", () => {
     mutations.DELETE_USER_ACTIONS(state, "action");
     expect(state.userActions.length).toBe(0);
   });
 
-  xit('deleting "action" from componentMap', () => {
+  it('deleting "action" from componentMap', () => {
     mutations.REMOVE_ACTION_FROM_COMPONENT(state, "action");
     expect(state.componentMap.component.mapActions.length).toBe(0);
   });
 });
 
-xdescribe("Adding actions and state to components", () => {
+describe("Adding actions and state to components", () => {
   let state;
   beforeEach(() => {
     state = {
@@ -52,15 +52,15 @@ xdescribe("Adding actions and state to components", () => {
       activeComponent: "testComponent"
     };
   });
-  xdescribe("Adding actions to components", () => {
+  describe("Adding actions to components", () => {
     it("should add a single action to active component", () => {
       mutations.ADD_TO_COMPONENT_ACTIONS(state, "testAction");
       expect(
         state.componentMap[state.activeComponent].componentActions
       ).toEqual(["testAction"]);
     });
   });
-  xdescribe("Adding state to components", () => {
+  describe("Adding state to components", () => {
     it("should add a single state string to active component", () => {
       mutations.ADD_TO_COMPONENT_STATE(state, "testState");
       expect(state.componentMap[state.activeComponent].componentState).toEqual([
@@ -70,7 +70,7 @@ xdescribe("Adding actions and state to components", () => {
   });
 });
 
-xdescribe("userActions mutation", () => {
+describe("userActions mutation", () => {
   let actions;
   let store;
   beforeEach(() => {
@@ -88,31 +88,31 @@ xdescribe("userActions mutation", () => {
   });
 });
 
-xdescribe("userStore mutation", () => {
+describe("userStore mutation", () => {
   let actions;
   let store;
   store = {
     userStore: {}
   };
-  xit("should be able to update store with a key defined by the user and a value of type object", () => {
+  it("should be able to update store with a key defined by the user and a value of type object", () => {
     mutations.ADD_TO_USER_STORE(store, { dummyKey: {} });
     // console.log('store.userStore.dummyKey', store.userStore.dummyKey);
     expect(store.userStore.dummyKey).toStrictEqual({});
   });
-  xit("should update user store with a key value pair with value strictly equal to empty array", () => {
+  it("should update user store with a key value pair with value strictly equal to empty array", () => {
     mutations.ADD_TO_USER_STORE(store, { dummyKey: [] });
     expect(store.userStore.dummyKey).toStrictEqual([]);
   });
-  xit("should be able to store booleans in the store as the key", () => {
+  it("should be able to store booleans in the store as the key", () => {
     mutations.ADD_TO_USER_STORE(store, { boolean: true });
     expect(store.userStore.boolean).toBe(true);
   });
-  xit("should add to userStore a key with a value of type number", () => {
+  it("should add to userStore a key with a value of type number", () => {
     mutations.ADD_TO_USER_STORE(store, { number: 696 });
     expect(store.userStore.number).toBe(696);
   });
 
-  xit("should work with strings too", () => {
+  it("should work with strings too", () => {
     mutations.ADD_TO_USER_STORE(store, { string: "string" });
     expect(store.userStore.string).toBe("string");
   });
@@ -126,7 +126,7 @@ xdescribe("userStore mutation", () => {
  *  `userStore` holds the user defined state objects
  */
 
-xdescribe("Delete state in userStore/componentMap", () => {
+describe("Delete state in userStore/componentMap", () => {
   let state;
   beforeEach(() => {
     state = {
@@ -143,13 +143,13 @@ xdescribe("Delete state in userStore/componentMap", () => {
       userStore: { state1: true, state2: [] }
     };
   });
-  xdescribe('"DELETE_USER_STATE" should delete property from "userStore" object', () => {
+  describe('"DELETE_USER_STATE" should delete property from "userStore" object', () => {
     it("should delete a single state property", () => {
       mutations.DELETE_USER_STATE(state, "state1");
       expect(state.userStore).toEqual({ state2: [] });
     });
   });
-  xdescribe('"REMOVE_STATE_FROM_COMPONENT" should delete state in "activeComponent"', () => {
+  describe('"REMOVE_STATE_FROM_COMPONENT" should delete state in "activeComponent"', () => {
     it("should remove state from active component", () => {
       mutations.REMOVE_STATE_FROM_COMPONENT(state, "state2");
       expect(state.componentMap.test.componentState).toEqual(["state1"]);