reinitialize lootalot_front to add unit testing

lootalot_front/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

lootalot_front/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
+}

lootalot_front/babel.config.js

@@ -1,10 +1,5 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ],
+  ]
-  "env": {
-    "test": {
-      "presets": [["env", { "targets": { "node": "current" } }]]
-    }
-  }
 }

lootalot_front/package.json

@@ -3,12 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "css-build": "node-sass --omit-source-map-url sass/scroll.scss public/css/scroll.css",
-    "css-watch": "npm run css-build -- --watch",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "test": "jest"
+    "test:unit": "vue-cli-service test:unit"
   },
   "main": "sass/scroll.scss",
   "dependencies": {
@@ -17,56 +15,15 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-service": "^3.8.0",
+    "@vue/cli-plugin-unit-mocha": "^3.11.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@vue/cli-service": "^3.11.0",
-    "babel-core": "^6.26.3",
+    "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.8.0",
+    "chai": "^4.1.2",
-    "babel-preset-env": "^1.7.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "jest": "^24.8.0",
-    "node-sass": "^4.12.0",
-    "vue-jest": "^3.0.4",
     "vue-template-compiler": "^2.6.10"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "vue"
-    ],
-    "transform": {
-      "^.*\\.(vue)$": "vue-jest",
-      "^.+\\.js$": "babel-jest"
-    },
-    "moduleNameMapper": {
-        "^@/(.*)$": "<rootDir>/src/$1"
-    }
   }
 }

lootalot_front/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

lootalot_front/src/components/ItemInput.vue

@@ -7,6 +7,7 @@
             <div class="field">
                 <div class="control is-expanded">
                     <input type="text"
+                        name="name"
                         placeholder="Nom de l'objet"
                         v-model="item.name"
                         @input="autoCompletion"
@@ -30,6 +31,7 @@
                 <p class="control"><a class="button is-static">PO</a></p>
                 <p class="control">
                     <input type="text"
+                        name="base_price"
                         placeholder="Prix"
                         class="input"
                         :class="{'is-danger': item.base_price == ''}"

lootalot_front/tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    mocha: true
+  }
+}

lootalot_front/tests/unit/ItemInput.spec.js

@@ -0,0 +1,94 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import ItemInput from '@/components/ItemInput.vue'
+
+const MOCK_SOURCE = [
+    { id: 1, name: "Épée", base_price: 20 },
+    { id: 2, name: "Arc", base_price: 30 },
+]
+
+const withItemFactory = function (item) {
+    const wrapper = mount(ItemInput, {
+        propsData: {
+            source: MOCK_SOURCE,
+        }
+    })
+    wrapper.setData({ item })
+    return wrapper
+}
+
+describe('ItemInput.vue', () => {
+
+    // Tests on validation of the item data
+    it('item with name and price is valid', () => {
+        const localItem = {
+            item: {
+                id: 0,
+                name: 'Epee',
+                base_price: 200
+            }
+        }
+        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(true)
+    })
+
+    it('item without data is not valid', () => {
+        const localItem = {
+            item: {
+                id: 0,
+                name: '',
+                base_price: ''
+            }
+        }
+        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
+    })
+
+    it('item without price is not valid', () => {
+        const localItem = {
+            item: {
+                id: 0,
+                name: 'Epee',
+                base_price: ''
+            }
+        }
+        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
+    })
+
+    it('item without name is not valid', () => {
+        const localItem = {
+            item: {
+                id: 0,
+                name: '',
+                base_price: 200
+            }
+        }
+        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
+    })
+
+    it('item price must be a number', () => {
+        const localItem = {
+            item: {
+                id: 0,
+                name: 'Epee',
+                base_price: 'cheap'
+            }
+        }
+        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
+    })
+
+    // Test on auto-completion
+    it('show completion suggestions on input', () => {
+        const wrapper = withItemFactory({ id: 0, name: '', base_price: '' })
+        const input = wrapper.find({ name: "name" })
+        const suggestionBox = wrapper.find('.dropdown')
+        console.log(input)
+        expect(suggestionBox.classes('is-active')).to.equal(true)
+    })
+
+    it('hides suggestion box when no suggestions are available', () => {
+
+    })
+
+    it('click on suggestion sets the item', () => {
+
+    })
+})

lootalot_front/tests/unit/Wealth.spec.js

@@ -0,0 +1,14 @@
+import { expect } from 'chai'
+import { shallowMount  } from '@vue/test-utils'
+import Wealth from '@/components/Wealth.vue'
+
+describe('Wealth.vue', () => {
+    it('renders wealth when passed', () => {
+        const wealth = [1, 2, 3, 4]
+        const wrapper = shallowMount(Wealth, {
+            propsData: { wealth }
+        })
+        var divs = wrapper.findAll('div')
+        expect(wrapper.text()).to.include(wealth)
+    })
+})