Fixed some tests that were broken from changes to actions and mutations. Added tests for note functionality, typescript export and some other new actions and types

Author: MrBeeAreWhy

src/store/actions.js

@@ -164,7 +164,7 @@ const actions = {
   [types.setActiveRoute]: ({ state, commit }, payload) => {
     if (state.routes[payload].length === 0){
       commit(types.SET_ACTIVE_COMPONENT, '');
-    }
+    } 
     commit(types.SET_ACTIVE_ROUTE, payload);
   },
 
@@ -297,7 +297,7 @@ const actions = {
 
   // Loading ///////////////////////////////////////////////////////
 
-  [types.openProject]: ({ commit, state }, payload) => {
+  [types.openProject]: ({ commit }, payload) => {
     commit(types.REMOVE_ALL_STATE_PROPS_ACTIONS)
     commit(types.SET_ACTIVE_ROUTE, "HomeView");
     payload.userProps.forEach((prop)=>{commit(types.CREATE_PROP, prop)})
@@ -309,11 +309,6 @@ const actions = {
     commit(types.SET_ACTIVE_COMPONENT, '')
   },
 
-  [types.importComponent]: ({ commit }, payload) => {
-    //import component
-    console.log(payload)
-  },
-
   // Add project
   [types.addProject]: ({ commit }, payload) => {
     commit(types.ADD_PROJECT, payload);

test/jest/__tests__/App.spec.js

@@ -8,167 +8,6 @@ import { mount, createLocalVue, shallowMount } from "@vue/test-utils";
 import * as All from "quasar";
 const { Quasar, date } = All;
 
-describe("Test mutations + actions to remove action from component and userActions", () => {
-  let state;
-  beforeEach(() => {
-    // state = {
-    //   componentMap: {
-    //     component: {
-    //       componentName: "App",
-    //       children: ["HomeView"],
-    //       htmlList: [],
-    //       mapActions: ["action"]
-    //     }
-    //   },
-    //   activeComponent: "component",
-    //   userActions: ["action"]
-    // };
-    state = {
-      // state below is what is used when exporting a project
-      componentMap: {
-        App: {
-          componentName: 'component',
-          children: ['HomeView'],
-          htmlList: []
-        },
-        HomeView: {
-          componentName: 'HomeView',
-          children: [],
-          htmlList: []
-        }
-      },
-      routes: {
-        HomeView: []
-      },
-      userActions: [],
-      userProps: [],
-      userState: [],
-      imagePath: {
-        HomeView: ''
-      },
-      // state below is not used when exporting a project
-      componentNameInputValue: '',
-      projects: [{ filename: 'Untitled-1', lastSavedLocation: '' }],
-    
-      activeRoute: 'HomeView',
-      // need to change to activeComponentName
-      activeComponent: '',
-      activeComponentObj: null,
-      activeHTML: '',
-      activeLayer: {
-        id: '',
-        lineage: []
-      },
-    
-      selectedProps: [],
-      selectedState: [],
-      selectedActions: [],
-      selectedElementList: [],
-      projectNumber: 2,
-      activeTab: 0,
-      componentChildrenMultiselectValue: [],
-      modalOpen: false,
-      parentSelected: false,
-      // for storing copied component
-      copiedComponent: {},
-      copyNumber: 0,
-      pastedComponent: {}
-    }
-  });
-
-  it("deleting user action from state.userActions", () => {
-    mutations.DELETE_USER_ACTIONS(state, "action");
-    expect(state.userActions.length).toBe(0);
-  });
-
-  // it('deleting "action" from componentMap', () => {
-  //   mutations.REMOVE_ACTION_FROM_COMPONENT(state, "action");
-  //   expect(state.componentMap.component.mapActions.length).toBe(0);
-  // });
-});
-
-describe("Adding actions and state to components", () => {
-  let state;
-  beforeEach(() => {
-    state = {
-      componentMap: {
-        testComponent: {
-          componentName: "testComponent",
-          children: [],
-          htmlList: [],
-          componentActions: [],
-          componentState: []
-        }
-      },
-      activeComponent: "testComponent"
-    };
-  });
-  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"]);
-    // });
-  });
-  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([
-      //   "testState"
-      // ]);
-    });
-  });
-});
-
-// describe("userActions mutation", () => {
-//   let actions;
-//   let store;
-//   beforeEach(() => {
-//     store = {
-//       userActions: []
-//     };
-//   });
-//   it("should push user defined action to end of userActions array", () => {
-//   //   mutations.ADD_USER_ACTION(store, "actionnnn");
-//   //   expect(store.userActions[store.userActions.length - 1]).toBe("actionnnn");
-//   // });
-//   it("should only push to array if payload is of type string", () => {
-//   //   mutations.ADD_USER_ACTION(store, 66);
-//   //   expect(store.userActions).toStrictEqual([]);
-//   // });
-// });
-
-// describe("userStore mutation", () => {
-//   let actions;
-//   let store;
-//   store = {
-//     userStore: {}
-//   };
-//   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({});
-//   });
-//   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([]);
-//   });
-//   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);
-//   });
-//   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);
-//   });
-
-//   it("should work with strings too", () => {
-//     mutations.ADD_TO_USER_STORE(store, { string: "string" });
-//     expect(store.userStore.string).toBe("string");
-//   });
-// });
-
 /**
  * @description: Tests for deleting state
  * @summary:
@@ -177,42 +16,40 @@ describe("Adding actions and state to components", () => {
  *  `userStore` holds the user defined state objects
  */
 
-describe("Delete state in userStore/componentMap", () => {
+describe("Delete state/actions in userStore/componentMap", () => {
   let state;
   beforeEach(() => {
     state = {
       componentMap: {
-        test: {
+        testComp: {
           componentName: "test",
           children: [],
           htmlList: [],
           componentActions: [],
-          state: ["state1", "state2"]
+          state: ["state1", "state2"],
+          actions: ["action1", "action2"]
         }
       },
       activeComponent: "test",
-      userState: ['state1', 'state2']
+      userState: ['state1', 'state2'],
+      userActions: ['action1', 'action2'],
+      userProps: ['prop1', 'prop2']
     };
   });
-  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.userState).toEqual(['state2']);
-    });
+  test("'[types.DELETE_USER_STATE]' should delete a single state property", () => {
+    mutations.DELETE_USER_STATE(state, "state1");
+    expect(state.userState).toEqual(['state2']);
+  });
+  test("'[types.DELETE_USER_ACTIONS]' should delete a single action property", () => {
+    mutations.DELETE_USER_ACTIONS(state, "action1");
+    expect(state.userActions).toEqual(['action2']);
   });
-  // 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"]);
-  //   });
-  // });
-  // describe('"deleteUserState" should delete state in "activeComponent" when deleted from "userStore"', () => {
-  //   const commit = jest.fn();
-  //   it("should remove state from active component", () => {
-  //     actions.deleteUserState({ commit }, "state2");
-  //     expect(state.componentMap[state.activeComponent].componentState).toEqual([
-  //       "state1"
-  //     ]);
-  //   });
-  // });
+  test("'[types.REMOVE_ALL_STATE_PROPS_ACTIONS]' should delete all props, state and action", () => {
+    mutations.REMOVE_ALL_STATE_PROPS_ACTIONS(state);
+    expect(state.userState.length).toEqual(0);
+    expect(state.userActions.length).toEqual(0);
+    expect(state.userProps.length).toEqual(0);
+  });
+
 });
+  

test/jest/__tests__/booleanToggles.spec.js

@@ -0,0 +1,41 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { createApp } from "vue";
+import * as All from "quasar";
+const { Quasar, date } = All;
+import actions from "../../../src/store/actions";
+import mutations from "../../../src/store/mutations";
+import * as types from "../../../src/store/types";
+import Vuex from "vuex";
+import store from "../../../src/store/state/index";
+
+
+//testing that export as typescript on/off, showTutorial, all update properly
+describe("Test for exportAsTypescript flag to flip when mutation committed", () => {
+  const App = {}
+  const app = createApp(App);
+  app.use(Quasar, Vuex);
+  const state = { ...store }
+
+  //tests that the export as typescript mutation properly updates state to on/off
+  test('"[types.EXPORT_AS_TYPESCRIPT]" to update state successfully', ()=>{
+    mutations[types.EXPORT_AS_TYPESCRIPT](state, 'on');
+    expect(state.exportAsTypescript).toEqual('on');
+    mutations[types.EXPORT_AS_TYPESCRIPT](state, 'off');
+    expect(state.exportAsTypescript).toEqual('off');
+  })
+
+  //tests that the tutorial toggle successfully updates state to true/false
+  test('"[types.toggleTutorial]" action to commit TOGGLE_TUTORIAL', () => {
+    const commit = jest.fn();
+    actions[types.toggleTutorial]({ state, commit });
+    expect(commit).toHaveBeenCalledWith(types.TOGGLE_TUTORIAL);
+  });
+
+  test('"[types.TOGGLE_TUTORIAL]" to mutate state true/false', () => {
+    mutations[types.TOGGLE_TUTORIAL](state);
+    expect(state.showTutorial).toBe(false)
+    mutations[types.TOGGLE_TUTORIAL](state);
+    expect(state.showTutorial).toBe(true)
+  });
+
+});

test/jest/__tests__/noteTests.spec.js

@@ -0,0 +1,67 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { createApp } from "vue";
+import * as All from "quasar";
+const { Quasar, date } = All;
+import actions from "../../../src/store/actions";
+import mutations from "../../../src/store/mutations";
+import * as types from "../../../src/store/types";
+import Vuex from "vuex";
+import store from "../../../src/store/state/index";
+
+describe("Test for component note data population", () => {
+  const App = {}
+  const app = createApp(App);
+  app.use(Quasar, Vuex);
+  const state = { ...store }
+
+  //tests that ADD_ACTIVE_COMPONENT_NOTE mutation successfully populates activeComponent with notes
+  test('"[types.ADD_ACTIVE_COMPONENT_NOTE]" to update state successfully', ()=>{
+    mutations[types.ADD_COMPONENT_TO_COMPONENT_MAP](state, {componentName: 'testComponent'})
+    mutations[types.SET_ACTIVE_COMPONENT](state, 'testComponent')
+    mutations[types.ADD_ACTIVE_COMPONENT_NOTE](state, 'test note here');
+    expect(state.componentMap[state.activeComponent].noteList[0]).toEqual('test note here');
+    mutations[types.ADD_ACTIVE_COMPONENT_NOTE](state, 'another test here');
+    expect(state.componentMap[state.activeComponent].noteList[1]).toEqual('another test here');
+  })
+
+  //tests that the action addActiveComponentNote commits the mutation
+  test('"[types.addActiveComponentNote]" action to commit ADD_ACTIVE_COMPONENT_NOTE', () => {
+    const commit = jest.fn();
+    actions[types.addActiveComponentNote]({ commit }, 'test note');
+    expect(commit).toHaveBeenCalledWith(types.ADD_ACTIVE_COMPONENT_NOTE, 'test note');
+  });
+
+  //tests that DELETE_ACTIVE_COMPONENT_NOTE mutation successfully deletes activeComponent notes
+  test('"[types.DELETE_ACTIVE_COMPONENT_NOTE]" to update state successfully', ()=>{
+    mutations[types.DELETE_ACTIVE_COMPONENT_NOTE](state, 'test note here');
+    expect(state.componentMap[state.activeComponent].noteList[0]).toEqual('another test here');
+    mutations[types.DELETE_ACTIVE_COMPONENT_NOTE](state, 'another test here');
+    expect(state.componentMap[state.activeComponent].noteList.length).toEqual(0);
+  })
+
+  test('"[types.deleteActiveComponentNote]" action to commit DELETE_ACTIVE_COMPONENT_NOTE', () => {
+    const commit = jest.fn();
+    actions[types.deleteActiveComponentNote]({ commit }, 'test note');
+    expect(commit).toHaveBeenCalledWith(types.DELETE_ACTIVE_COMPONENT_NOTE, 'test note');
+  });
+
+  test('expect mutation to check and handle for duplicate note entry', () =>{
+    mutations[types.ADD_ACTIVE_COMPONENT_NOTE](state, 'test note here');
+    mutations[types.ADD_ACTIVE_COMPONENT_NOTE](state, 'test note here');
+    expect(state.componentMap[state.activeComponent].noteList[1]).toEqual('DUPLICATE: test note here');
+  });
+  
+  test('"[types.openNoteModal]" action to commit OPEN_NOTE_MODAL', () => {
+    const commit = jest.fn();
+    actions[types.openNoteModal]({ commit });
+    expect(commit).toHaveBeenCalledWith(types.OPEN_NOTE_MODAL);
+  });
+
+  test('"[types.OPEN_NOTE_MODAL]" to update state successfully', ()=>{
+    mutations[types.OPEN_NOTE_MODAL](state);
+    expect(state.noteModalOpen).toEqual(true);
+    mutations[types.OPEN_NOTE_MODAL](state);
+    expect(state.noteModalOpen).toEqual(false);
+  })
+
+});