fixed style-loaders, fixed launch of tests, added yarn

.eslintignore

@@ -3,3 +3,4 @@ app/dist/**
 test/unit/coverage/**
 test/unit/*.js
 test/e2e/*.js
+webpack.**

app/src/renderer/App.vue

@@ -32,6 +32,8 @@
 </script>
 
 <style lang="scss">
+    @import './styles/milligram';
+
     main {
         padding: 20px 20px 20px 20px;
     }

app/src/renderer/components/Game/Game.vue

@@ -166,8 +166,6 @@
 </script>
 
 <style lang="scss">
-    @import '../../styles/style';
-
     .game {
         position: relative;
 

app/src/renderer/components/Leaderboard/Leaderboard.vue

@@ -44,8 +44,6 @@
 </script>
 
 <style scoped lang="scss">
-    @import '../../styles/style';
-
     .leaderboard {
         overflow: scroll;
         max-height: 550px;

app/src/renderer/components/Topbar/Topbar.vue

@@ -22,8 +22,6 @@
 </script>
 
 <style scoped lang="scss">
-    @import '../../styles/style';
-
     #topbar {
         background-color: #fff;
         padding: 20px;

app/src/renderer/main.js

@@ -1,17 +1,17 @@
 import Vue from 'vue';
 import Electron from 'vue-electron';
 import Resource from 'vue-resource';
-import Router from 'vue-router';
+import VueRouter from 'vue-router';
 
 import App from './App';
 import routes from './routes';
 
 Vue.use(Electron);
 Vue.use(Resource);
-Vue.use(Router);
+Vue.use(VueRouter);
 Vue.config.debug = true;
 
-const router = new Router({
+const router = new VueRouter({
     scrollBehavior: () => ({ y: 0 }),
     routes
 });

app/src/renderer/styles/style.scss

@@ -1,4 +1,3 @@
 @import 'variables';
 @import 'mixins';
 @import 'helpers';
-@import 'milligram';

test/unit/karma.conf.js

@@ -29,10 +29,6 @@ webpackConfig.module.rules.some(rule => {
   }
 })
 
-// apply vue option to apply isparta-loader on js
-webpackConfig.module.rules
-  .find(rule => rule.use.loader === 'vue-loader').use.options.loaders.js = 'babel-loader'
-
 module.exports = config => {
   config.set({
     browsers: ['visibleElectron'],

test/unit/specs/Topbar.spec.js

@@ -1,13 +1,22 @@
 import Vue from 'vue';
+import VueRouter from 'vue-router';
+
 import Topbar from 'renderer/components/Topbar';
 
 describe('Topbar.vue', () => {
-    it('should render correct contents', () => {
+    it('should render', () => {
+        Vue.use(VueRouter);
+        const router = new VueRouter({
+            routes: []
+        });
+
         const vm = new Vue({
+            router,
             el: document.createElement('div'),
             render: h => h(Topbar)
         }).$mount();
 
-        expect(vm.$el.querySelector('.logo').textContent).to.contain('Space Snake');
+        expect(vm.$el !== null).to.be.true;
+        expect(vm.$el.querySelector('.logo') !== null).to.be.true;
     });
 });

webpack.renderer.config.js

@@ -21,19 +21,16 @@ let rendererConfig = {
     rules: [
       {
         test: /\.s[a|c]ss$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            'css-loader',
-            'sass-loader',
-            {
-              loader: 'sass-resources-loader',
-              options: {
-                resources: path.resolve(__dirname, 'app/src/renderer/styles/style.scss')
-              }
-            }
-          ]
-        })
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader',
+          {
+          loader: 'sass-resources-loader',
+          options: {
+            resources: path.join(__dirname, 'app/src/renderer/styles/style.scss')
+          }
+        }]
       },
       {
         test: /\.html$/,
@@ -55,13 +52,20 @@ let rendererConfig = {
       },
       {
         test: /\.vue$/,
-        use: {
-          loader: 'vue-loader',
-          options: {
-            loaders: {
-              scss: 'vue-style-loader!css-loader!sass-loader',
-              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
-            }
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            scss: [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader',
+              {
+                loader: 'sass-resources-loader',
+                options: {
+                  resources: path.join(__dirname, 'app/src/renderer/styles/style.scss')
+                }
+              }
+            ],
           }
         }
       },