Jason/testingb

jest.config.js

@@ -4,15 +4,17 @@ module.exports = {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.jsx?$': 'babel-jest',
   },
   transformIgnorePatterns: ['/node_modules/'],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   snapshotSerializers: ['jest-serializer-vue'],
   testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
   ],
-  testURL: 'http://localhost/'
+  testEnvironmentOptions: {
+    url: 'http://localhost:5174', // replace with your test URL
+  },
 };

package.json

@@ -11,7 +11,9 @@
     "build": "vite build",
     "serve": "vite preview",
     "vite": "vite",
-    "server": "node server/server.js"
+    "server": "node server/server.js",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "license": "MIT",
   "dependencies": {
@@ -26,6 +28,7 @@
     "file-saver": "^2.0.5",
     "fs-extra": "^7.0.1",
     "handlebars": "^4.7.7",
+    "happy-dom": "^8.9.0",
     "he-tree-vue": "^3.1.2",
     "jsonwebtoken": "^9.0.0",
     "localforage": "^1.7.3",
@@ -34,8 +37,6 @@
     "mongoose": "^6.10.0",
     "mousetrap": "^1.6.3",
     "sass": "^1.58.3",
-    "vite-plugin-checker": "^0.5.6",
-    "vite-plugin-vue2": "1.9.0",
     "vue": "^3.2.47",
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-router": "^4.1.6",
@@ -50,13 +51,18 @@
     "@typescript-eslint/parser": "^5.54.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/test-utils": "^2.3.1",
     "dotenv": "^16.0.3",
     "eslint": "^8.35.0",
     "eslint-plugin-typescript": "^0.14.0",
     "eslint-plugin-vue": "^8.7.1",
+    "jest": "^29.5.0",
+    "jsdom": "^21.1.0",
+    "supertest": "^6.3.3",
     "typescript": "^4.9.5",
-    "vue-eslint-parser": "^9.1.0",
     "vite": "^4.1.4",
+    "vitest": "^0.29.2",
+    "vue-eslint-parser": "^9.1.0",
     "vue-template-compiler": "^2.5.21",
     "vue-tsc": "^1.0.24",
     "vuex": "^4.1.0"

src/App.vue

@@ -17,8 +17,8 @@ import NavBar from '@/components/NavBar.vue';
 
 export default {
   components: {
-    NavBar
-  }
+    NavBar,
+  },
 };
 </script>
 

src/components/HomeSidebar.vue

@@ -6,25 +6,25 @@
     :style="{
       'background-color': '#565656',
       'border-bottom': '0.5px solid #6a696a',
-      padding: '16px 0px 24px 0px'
+      padding: '16px 0px 24px 0px',
     }"
   >
     <v-card-title
       :style="{
         'font-size': '14px',
         color: '#f5f4f3',
         'font-weight': '550',
-        padding: '0 24px 0 24px'
+        padding: '0 24px 0 24px',
       }"
     >
-     <strong>Component Creator</strong> 
+      <strong>Component Creator</strong>
     </v-card-title>
     <v-card-actions class="d-block">
       <v-form
         id="form1"
         v-on:submit.prevent="handleClick"
         :style="{
-          padding: '0 24px 0 24px'
+          padding: '0 24px 0 24px',
         }"
       >
         <v-text-field
@@ -43,7 +43,7 @@
         :style="{
           display: 'flex',
           'padding-top': '10px',
-          'justify-content': 'center'
+          'justify-content': 'center',
         }"
       >
         <v-btn
@@ -56,7 +56,7 @@
             'align-self': 'center',
             border: '.5px solid #f5f4f3',
             color: '#f5f4f3',
-            'text-transform': 'unset !important'
+            'text-transform': 'unset !important',
           }"
         >
           Add Component
@@ -77,32 +77,32 @@ export default {
   name: 'HomeSidebar',
   components: {
     ChildrenMultiselect,
-    Icons
+    Icons,
   },
   computed: {
     ...mapState([
       'componentMap',
       'selectedElementList',
       'routes',
-      'activeRoute'
+      'activeRoute',
     ]),
     componentNameInputValue: {
       get() {
         return this.$store.state.componentNameInputValue;
       },
       set(value) {
         this.updateComponentNameInputValue(value);
-      }
+      },
     },
     validateInput() {
       return this.componentNameInputValue.length < 1;
-    }
+    },
   },
   methods: {
     ...mapActions([
       'registerComponent',
       'addToSelectedElementList',
-      'updateComponentNameInputValue'
+      'updateComponentNameInputValue',
     ]),
     // invoked when clicking "add component" button
     handleClick() {
@@ -115,7 +115,7 @@ export default {
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
-        isActive: false
+        isActive: false,
       };
 
       // console.log('component', component);
@@ -125,8 +125,8 @@ export default {
     },
     addToSelectedElementList(htmlElement) {
       this.$store.dispatch(types.addToSelectedElementList, htmlElement);
-    }
-  }
+    },
+  },
 };
 </script>
 <style>

tests/integration/supertest.spec.js

@@ -0,0 +1,46 @@
+const request = require('supertest');
+const mongoose = require('mongoose');
+const server = require('../../server/server');
+const accountRouter = require('../../server/routes/accountRouter');
+const projectRouter = require('../../server/routes/projectRouter');
+
+// change this later!!!!!
+const myURI =
+  'mongodb+srv://prevue:prevue123@pvcluster.msrpd4m.mongodb.net/?retryWrites=true&w=majority';
+
+beforeAll(async () => {
+  // connect to MongoDB before all tests
+  await mongoose.connect(myURI, {
+    //   await mongoose.connect(process.env.MONGO_URI, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  });
+});
+
+afterAll(async () => {
+  // disconnect from MongoDB after all tests
+  await mongoose.disconnect();
+});
+
+describe('/users accountRouter', () => {
+  describe('POST / createUser', () => {
+    it('responds with 200 status and text/html content type', () => {
+      return (
+        request(server)
+          .post('/users/createUser')
+          .expect(201)
+      );
+    });
+  });
+});
+
+describe('/projects projectRouter', () => {
+  //   describe('GET', () => {
+  // it('responds with 200 status and text/html content type', () => {
+  //   return request(server)
+  //     .get('/')
+  //     .expect('Content-Type', /text\/html/)
+  //     .expect(200);
+  //     });
+  //   });
+});

tests/unit/App.spec.js

@@ -1,13 +1,29 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount, mount, get } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
 import App from '@/App.vue';
+import NavBar from '@/components/NavBar.vue';
 
 describe('App.vue', () => {
-  it('renders correct', () => {
+  it('renders App correctly', () => {
     const wrapper = shallowMount(App);
     expect(wrapper.element).toMatchSnapshot();
   }),
-    it('contains a section that wraps router-view', () => {
+    it('contains v-main element that wraps router-view', () => {
       const wrapper = shallowMount(App, {});
-      expect(wrapper.contains('section')).toBe(true);
+      expect(wrapper.get('v-main')).toBeTruthy();
+      expect(wrapper.get('v-main > router-view')).toBeTruthy();
     });
 });
+
+describe('App.vue', () => {
+  it('should renders elements found in children', () => {
+    const wrapper = mount(App, {
+      components: {
+        NavBar,
+      },
+    });
+    expect(wrapper.find('h1').exists()).toBeTruthy();
+    expect(wrapper.find('i').exists()).toBeTruthy();
+    expect(wrapper.find('button').exists()).toBeTruthy();
+  });
+});

tests/unit/Component.spec.js

@@ -0,0 +1,40 @@
+import { shallowMount, mount, createVuexStore } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { describe, it, expect, vi } from 'vitest';
+import Vue3DraggableResizable from 'vue3-draggable-resizable';
+import Component from '@/components/Component.vue';
+
+describe('Component.vue', () => {
+  it('properly renders the htlm element of children', () => {
+    const wrapper = mount(Component);
+    expect(wrapper.find('h3').exists()).toBeTruthy();
+    expect(wrapper.find('h1').exists()).toBeFalsy();
+    expect(wrapper.find('div').exists()).toBeTruthy();
+    expect(wrapper.find('h5').exists()).toBeFalsy();
+  });
+});
+
+describe('Component.vue', () => {
+  it('properly imports Vue3Draggable and renders the component', () => {
+    const store = createStore({
+      state() {
+        return {
+          selectedElementList: [{ id: 1, name: 'Element 1' }],
+        };
+      },
+    });
+
+    const wrapper = mount(Component, {
+      components: {
+        Vue3DraggableResizable,
+      },
+      global: {
+        plugins: [store],
+      },
+    });
+    expect(
+      wrapper.findComponent({ name: 'Vue3DraggableResizable' }).exists()
+    ).toBeTruthy();
+    // expect(wrapper.findComponent({ name: 'HomeQueue' }).exists()).toBeTruthy();
+  });
+});

tests/unit/HomeSidebar.spec.js

@@ -1,55 +1,35 @@
-import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
-import Vuex from 'vuex';
+import { shallowMount, mount, createVuexStore } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import HomeSidebar from '@/components/HomeSidebar.vue';
 import Icons from '@/components/Icons.vue';
+import ChildrenMultiselect from '@/components/ChildrenMultiselect.vue';
 
-const localVue = createLocalVue();
 
-localVue.use(Vuex);
 describe('HomeSidebar.vue', () => {
-  let actions;
-  let store;
-  beforeEach(() => {
-    actions = {
-      handleClick: jest.fn()
-    };
-    store = new Vuex.Store({
-      actions
-    });
-  });
-  it('contains an input field', () => {
-    const onClose = jest.fn();
-    const wrapper = shallowMount(HomeSidebar, {
-      propsData: { onClose }
-    });
-    console.log(wrapper.html());
-    // expect(wrapper.contains('#input')).toBe(true);
-  }),
-    it('contains a button that clicks', () => {
-      const test = jest.fn();
-      const wrapper = shallowMount(HomeSidebar);
-      wrapper.setMethods({
-        test: test
-      });
-      wrapper.find('button').trigger('click');
-      expect(test).toBeCalled();
-      // expect(wrapper.contains('button')).toBe(true);
-    }),
-    it('contains Icons', () => {
-      const wrapper = shallowMount(HomeSidebar);
-      expect(wrapper.contains(Icons));
+  it('renders the ChildrenMultiselect component', () => {
+    const store = createStore({
+      state() {
+        return {
+          selectedElementList: [{ id: 1, name: 'Element 1' }],
+          componentNameInputValue: 'mock value',
+        };
+      },
     });
 
-  it('button click calls store action "registerComponent" when clicked', () => {
-    const wrapper = shallowMount(HomeSidebar, {
-      store,
-      localVue
+    const wrapper = mount(HomeSidebar, {
+      components: {
+        ChildrenMultiselect,
+      },
+      global: {
+        plugins: [store],
+      },
+      computed: {
+        validateInput() {
+          componentNameInputValue: "";
+        },
+      },
     });
-    // wrapper.find('[data-component-name]').setValue('Hubert');
-    // input.debug();
-    const button = wrapper.find('button');
-    button.trigger('click');
-    // expect(button).toHaveBeenClicked();
-    expect(actions.handleClick).toHaveBeenCalled();
+    expect(wrapper.findComponent({ name: 'ChildrenMultiselect' }).exists()).toBeTruthy();
   });
-});
+
+});