Merge branch 'webpack-experiments' into 'develop'

Switch to vue-cli to have a saner and lighter front-end configuration

See merge request funkwhale/funkwhale!375

.env.dev

@@ -7,7 +7,7 @@ C_FORCE_ROOT=true
 FUNKWHALE_HOSTNAME=localhost
 FUNKWHALE_PROTOCOL=http
 PYTHONDONTWRITEBYTECODE=true
-WEBPACK_DEVSERVER_PORT=8080
+VUE_PORT=8080
 MUSIC_DIRECTORY_PATH=/music
 BROWSABLE_API_ENABLED=True
 FORWARDED_PROTO=http

.gitignore

@@ -74,14 +74,15 @@ api/static
 api/.pytest_cache
 
 # Front
+oldfront/node_modules/
 front/static/translations
 front/node_modules/
 front/dist/
 front/npm-debug.log*
 front/yarn-debug.log*
 front/yarn-error.log*
-front/test/unit/coverage
+front/tests/unit/coverage
-front/test/e2e/reports
+front/tests/e2e/reports
 front/selenium-debug.log
 docs/_build
 

.gitlab-ci.yml

@@ -156,7 +156,6 @@ test_api:
   tags:
     - docker
 
-
 test_front:
   stage: test
   image: node:9
@@ -166,7 +165,7 @@ test_front:
     - branches
   script:
     - yarn install
-    - yarn run unit
+    - yarn test:unit
   cache:
     key: "funkwhale__front_dependencies"
     paths:
@@ -179,7 +178,6 @@ test_front:
   tags:
     - docker
 
-
 build_front:
   stage: build
   image: node:9
@@ -192,7 +190,7 @@ build_front:
     - yarn run i18n-compile
     # this is to ensure we don't have any errors in the output,
     # cf https://code.eliotberriot.com/funkwhale/funkwhale/issues/169
-    - yarn run build | tee /dev/stderr | (! grep -i 'ERROR in')
+    - yarn build | tee /dev/stderr | (! grep -i 'ERROR in')
     - chmod -R 750 dist
   cache:
     key: "funkwhale__front_dependencies"
@@ -210,7 +208,6 @@ build_front:
   tags:
     - docker
 
-
 pages:
   stage: test
   image: python:3.6

CONTRIBUTING.rst

@@ -43,7 +43,7 @@ Setup front-end only development environment
 4. Launch the development server::
 
     # this will serve the front-end on http://localhost:8000
-    WEBPACK_DEVSERVER_PORT=8000 yarn dev
+    VUE_PORT=8000 yarn serve
 
 5. Make the front-end talk with an existing server (like https://demo.funkwhale.audio),
    by clicking on the corresponding link in the footer
@@ -264,7 +264,7 @@ When working on federation with traefik, ensure you have this in your ``env``::
 
     # This will ensure we don't bind any port on the host, and thus enable
     # multiple instances of funkwhale to be spawned concurrently.
-    WEBPACK_DEVSERVER_PORT_BINDING=
+    VUE_PORT_BINDING=
     # This disable certificate verification
     EXTERNAL_REQUESTS_VERIFY_SSL=false
     # this ensure you don't have incorrect urls pointing to http resources
@@ -466,12 +466,12 @@ Running tests
 
 To run the front-end test suite, use the following command::
 
-    docker-compose -f dev.yml run --rm front yarn run unit
+    docker-compose -f dev.yml run --rm front yarn test:unit
 
 We also support a "watch and test" mode were we continually relaunch
 tests when changes are recorded on the file system::
 
-    docker-compose -f dev.yml run --rm front yarn run unit-watch
+    docker-compose -f dev.yml run --rm front yarn test:unit -w
 
 The latter is especially useful when you are debugging failing tests.
 

changes/changelog.d/webpack.enhancement

@@ -0,0 +1 @@
+Simpler configuration and toolchain for the front-end using vue-cli (!375)

dev.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   front:
@@ -8,22 +8,22 @@ services:
       - .env
     environment:
       - "HOST=0.0.0.0"
-      - "WEBPACK_DEVSERVER_PORT=${WEBPACK_DEVSERVER_PORT-8080}"
+      - "VUE_PORT=${VUE_PORT-8080}"
     ports:
-      - "${WEBPACK_DEVSERVER_PORT_BINDING-8080:}${WEBPACK_DEVSERVER_PORT-8080}"
+      - "${VUE_PORT_BINDING-8080:}${VUE_PORT-8080}"
     volumes:
-      - './front:/app'
+      - "./front:/app"
-      - '/app/node_modules'
+      - "/app/node_modules"
-      - './po:/po'
+      - "./po:/po"
     networks:
       - federation
       - internal
     labels:
       traefik.backend: "${COMPOSE_PROJECT_NAME-node1}"
       traefik.frontend.rule: "Host:${COMPOSE_PROJECT_NAME-node1}.funkwhale.test,${NODE_IP-127.0.0.1}"
-      traefik.enable: 'true'
+      traefik.enable: "true"
-      traefik.federation.protocol: 'http'
+      traefik.federation.protocol: "http"
-      traefik.federation.port: "${WEBPACK_DEVSERVER_PORT-8080}"
+      traefik.federation.port: "${VUE_PORT-8080}"
 
   postgres:
     env_file:
@@ -53,8 +53,8 @@ services:
       context: ./api
       dockerfile: docker/Dockerfile.test
     links:
-     - postgres
+      - postgres
-     - redis
+      - redis
     command: celery -A funkwhale_api.taskapp worker -l debug
     environment:
       - "FUNKWHALE_HOSTNAME=${FUNKWHALE_HOSTNAME-localhost}"
@@ -98,7 +98,7 @@ services:
       - .env
     image: nginx
     environment:
-      - "WEBPACK_DEVSERVER_PORT=${WEBPACK_DEVSERVER_PORT-8080}"
+      - "VUE_PORT=${VUE_PORT-8080}"
       - "COMPOSE_PROJECT_NAME=${COMPOSE_PROJECT_NAME- }"
       - "FUNKWHALE_HOSTNAME=${FUNKWHALE_HOSTNAME-localhost}"
     links:
@@ -120,20 +120,20 @@ services:
     volumes:
       - ".:/app/"
     ports:
-      - '35730:35730'
+      - "35730:35730"
-      - '8001:8001'
+      - "8001:8001"
 
   api-docs:
     image: swaggerapi/swagger-ui
     environment:
       - "API_URL=/swagger.yml"
     ports:
-      - '8002:8080'
+      - "8002:8080"
     volumes:
       - "./docs/swagger.yml:/usr/share/nginx/html/swagger.yml"
 
 networks:
-  internal:
+  ? internal
   federation:
     external:
       name: federation

docker/nginx/entrypoint.sh

@@ -1,6 +1,6 @@
 #!/bin/bash -eux
 
-FORWARDED_PORT="$WEBPACK_DEVSERVER_PORT"
+FORWARDED_PORT="$VUE_PORT"
 COMPOSE_PROJECT_NAME="${COMPOSE_PROJECT_NAME// /}"
 if [ -n "$COMPOSE_PROJECT_NAME" ]; then
   echo

front/.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-2"
-  ],
-  "plugins": ["transform-runtime"],
-  "comments": false,
-  "env": {
-    "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": [ "istanbul" ]
-    }
-  }
-}

front/.eslintignore

@@ -1,2 +0,0 @@
-build/*.js
-config/*.js

front/.eslintrc.js

@@ -1,27 +0,0 @@
-// http://eslint.org/docs/user-guide/configuring
-
-module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
-  env: {
-    browser: true,
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // add your custom rules here
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-  }
-}

front/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

front/.postcssrc.js

@@ -1,8 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    // to edit target browsers: use "browserlist" field in package.json
-    "autoprefixer": {}
-  }
-}

front/Dockerfile

@@ -5,9 +5,9 @@ RUN curl -L -o /usr/local/bin/jq https://github.com/stedolan/jq/releases/downloa
 
 EXPOSE 8080
 WORKDIR /app/
-ADD package.json .
+ADD package.json yarn.lock ./
 RUN yarn install
 
 COPY . .
 
-CMD ["npm", "run", "dev"]
+CMD ["yarn", "serve"]

front/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

front/build/build.js

@@ -1,35 +0,0 @@
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
-
-var spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false,
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
-
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})

front/build/check-versions.js

@@ -1,48 +0,0 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-var shell = require('shelljs')
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-var versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  },
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
-    }
-    console.log()
-    process.exit(1)
-  }
-}

front/build/dev-client.js

@@ -1,9 +0,0 @@
-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

front/build/dev-server.js

@@ -1,92 +0,0 @@
-require('./check-versions')()
-
-var config = require('../config')
-if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-var opn = require('opn')
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-var host = process.env.HOST || config.dev.host
-// automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  quiet: true
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-  log: () => {}
-})
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(options.filter || context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-var uri = 'http://' + host + ':' + port
-
-var _resolve
-var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
-})
-
-var server = app.listen(port, host)
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}

front/build/utils.js

@@ -1,71 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  var cssLoader = {
-    loader: 'css-loader',
-    options: {
-      minimize: process.env.NODE_ENV === 'production',
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader]
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-  return output
-}

front/build/vue-loader.conf.js

@@ -1,12 +0,0 @@
-var utils = require('./utils')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: isProduction
-      ? config.build.productionSourceMap
-      : config.dev.cssSourceMap,
-    extract: isProduction
-  })
-}

front/build/webpack.base.conf.js

@@ -1,67 +0,0 @@
-var path = require('path')
-var utils = require('./utils')
-var config = require('../config')
-var vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-module.exports = {
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
-    }
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
-        options: {
-          formatter: require('eslint-friendly-formatter')
-        }
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  }
-}

front/build/webpack.dev.conf.js

@@ -1,35 +0,0 @@
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-module.exports = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: '#cheap-module-eval-source-map',
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': config.dev.env
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true
-    }),
-    new FriendlyErrorsPlugin()
-  ]
-})

front/build/webpack.prod.conf.js

@@ -1,124 +0,0 @@
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-
-var env = process.env.NODE_ENV === 'testing'
-  ? require('../config/test.env')
-  : config.build.env
-
-var webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      sourceMap: true
-    }),
-    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: {
-        safe: true
-      }
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: process.env.NODE_ENV === 'testing'
-        ? 'index.html'
-        : config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-if (config.build.productionGzip) {
-  var CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.bundleAnalyzerReport) {
-  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig

front/build/webpack.test.conf.js

@@ -1,31 +0,0 @@
-// This is the webpack config used for unit tests.
-
-var utils = require('./utils')
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var baseConfig = require('./webpack.base.conf')
-
-var webpackConfig = merge(baseConfig, {
-  // use inline sourcemap for karma-sourcemap-loader
-  module: {
-    rules: utils.styleLoaders()
-  },
-  devtool: '#inline-source-map',
-  resolveLoader: {
-    alias: {
-      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 
-      // see discussion at https://github.com/vuejs/vue-loader/issues/724
-      'scss-loader': 'sass-loader'
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/test.env')
-    })
-  ]
-})
-
-// no need for app entry during tests
-delete webpackConfig.entry
-
-module.exports = webpackConfig

front/config/dev.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})

front/config/index.js

@@ -1,68 +0,0 @@
-// see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
-
-module.exports = {
-  build: {
-    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    productionSourceMap: false,
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: parseInt(process.env.WEBPACK_DEVSERVER_PORT),
-    host: '127.0.0.1',
-    autoOpenBrowser: true,
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {
-      '/settings.json': {
-        target: 'http://127.0.0.1:8000/static/',
-      },
-      '**': {
-        target: 'http://nginx:6001',
-        changeOrigin: true,
-        ws: true,
-        filter: function (pathname, req) {
-          let proxified = ['rest', '.well-known', 'staticfiles', 'media', 'federation', 'api']
-          let matches = proxified.filter(e => {
-            return pathname.match(`^/${e}`)
-          })
-          return matches.length > 0
-        }
-      },
-      // '/.well-known': {
-      //   target: 'http://nginx:6001',
-      //   changeOrigin: true
-      // },
-      // '/media': {
-      //   target: 'http://nginx:6001',
-      //   changeOrigin: true,
-      // },
-      // '/staticfiles': {
-      //   target: 'http://nginx:6001',
-      //   changeOrigin: true,
-      // },
-
-    },
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
-  }
-}

front/config/prod.env.js

@@ -1,5 +0,0 @@
-let url = process.env.INSTANCE_URL || '/'
-module.exports = {
-  NODE_ENV: '"production"',
-  INSTANCE_URL: `"${url}"`
-}

front/config/test.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var devEnv = require('./dev.env')
-
-module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
-})

front/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Funkwhale</title>
-    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

front/package.json

@@ -1,125 +1,92 @@
 {
   "name": "front",
-  "version": "1.0.0",
+  "version": "0.1.0",
-  "description": "Funkwhale front-end",
-  "author": "Eliot Berriot <contact@eliotberriot.com>",
   "private": true,
   "scripts": {
-    "dev": "scripts/i18n-compile.sh && node build/dev-server.js",
+    "serve": "scripts/i18n-compile.sh && vue-cli-service serve --port ${VUE_PORT:-8000} --host ${VUE_HOST:-0.0.0.0}",
-    "start": "scripts/i18n-compile.sh && node build/dev-server.js",
+    "build": "scripts/i18n-compile.sh && vue-cli-service build",
-    "build": "node build/build.js",
+    "lint": "vue-cli-service lint",
     "i18n-extract": "scripts/i18n-extract.sh",
     "i18n-compile": "scripts/i18n-compile.sh",
-    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "test:unit": "vue-cli-service test:unit"
-    "unit-watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
-    "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit && npm run e2e",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@panter/vue-i18next": "^0.9.1",
+    "axios": "^0.18.0",
-    "axios": "^0.17.1",
+    "dateformat": "^3.0.3",
-    "dateformat": "^2.0.0",
     "django-channels": "^1.1.6",
     "howler": "^2.0.14",
-    "js-logger": "^1.3.0",
+    "js-logger": "^1.4.1",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.10",
-    "masonry-layout": "^4.2.1",
+    "masonry-layout": "^4.2.2",
-    "moment": "^2.20.1",
+    "moment": "^2.22.2",
-    "moxios": "^0.4.0",
+    "raven-js": "^3.26.4",
-    "raven-js": "^3.22.3",
+    "semantic-ui-css": "^2.3.3",
-    "semantic-ui-css": "^2.2.10",
     "showdown": "^1.8.6",
-    "vue": "^2.5.16",
+    "vue": "^2.5.17",
     "vue-gettext": "^2.1.0",
-    "vue-lazyload": "^1.1.4",
+    "vue-lazyload": "^1.2.6",
-    "vue-masonry": "^0.10.16",
+    "vue-masonry": "^0.11.5",
-    "vue-router": "^2.3.1",
+    "vue-router": "^3.0.1",
-    "vue-upload-component": "^2.7.4",
+    "vue-upload-component": "^2.8.11",
-    "vuedraggable": "^2.14.1",
+    "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1",
-    "vuex-persistedstate": "^2.5.2",
+    "vuex-persistedstate": "^2.5.4",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.7.2",
+    "@vue/cli-plugin-babel": "^3.0.0",
-    "babel-core": "^6.22.1",
+    "@vue/cli-plugin-eslint": "^3.0.0",
-    "babel-eslint": "^7.1.1",
+    "@vue/cli-plugin-unit-mocha": "^3.0.0",
-    "babel-loader": "7",
+    "@vue/cli-service": "^3.0.0",
-    "babel-plugin-istanbul": "^4.1.1",
+    "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-plugin-transform-runtime": "^6.22.0",
+    "chai": "^4.1.2",
-    "babel-preset-env": "^1.3.2",
+    "easygettext": "^2.6.3",
-    "babel-preset-stage-2": "^6.22.0",
+    "eslint-plugin-html": "^4.0.5",
-    "babel-register": "^6.22.0",
+    "mocha": "^5.2.0",
-    "chai": "^3.5.0",
+    "moxios": "^0.4.0",
-    "chalk": "^1.1.3",
+    "node-sass": "^4.9.3",
-    "chromedriver": "^2.27.2",
+    "sass-loader": "^7.1.0",
-    "connect-history-api-fallback": "^1.3.0",
+    "sinon": "^6.1.5",
-    "copy-webpack-plugin": "^4.0.1",
+    "vue-template-compiler": "^2.5.17"
-    "cross-env": "^4.0.0",
-    "cross-spawn": "^5.0.1",
-    "css-loader": "^0.28.0",
-    "easygettext": "^2.5.0",
-    "es6-promise": "^4.2.2",
-    "eslint": "^3.19.0",
-    "eslint-config-standard": "^6.2.1",
-    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-html": "^2.0.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.11.1",
-    "friendly-errors-webpack-plugin": "^1.1.3",
-    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.3",
-    "inject-loader": "^3.0.0",
-    "karma": "^1.4.1",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.1",
-    "karma-sinon-stub-promise": "^1.0.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.30",
-    "karma-webpack": "^2.0.2",
-    "lolex": "^1.5.2",
-    "mocha": "^3.2.0",
-    "nightwatch": "^0.9.12",
-    "node-sass": "^4.5.3",
-    "opn": "^4.0.2",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
-    "ora": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.14",
-    "rimraf": "^2.6.0",
-    "sass-loader": "^6.0.5",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "sinon-stub-promise": "^4.0.0",
-    "url-loader": "^0.5.8",
-    "vue-loader": "^12.1.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.3.3",
-    "webpack": "3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.18.0",
-    "webpack-merge": "^4.1.0"
   },
-  "engines": {
+  "eslintConfig": {
-    "node": ">= 4.0.0",
+    "root": true,
-    "npm": ">= 3.0.0"
+    "env": {
+      "browser": true,
+      "node": true
+    },
+    "plugins": [
+      "html"
+    ],
+    "rules": {
+      "no-console": 0,
+      "no-unused-vars": [
+        2,
+        {
+          "vars": "all",
+          "args": "none"
+        }
+      ]
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "author": "Eliot Berriot <contact@eliotberriot.com>",
+  "description": "Funkwhale front-end"
 }

front/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.png">
+  <title>Funkwhale</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

front/public/settings.json

@@ -0,0 +1,3 @@
+{
+  "additionalStylesheets": ["/custom.css"]
+}

front/static/settings.json

@@ -1,3 +0,0 @@
-{
-  "additionalStylesheets": ["/static/custom.css"]
-}

front/test/e2e/custom-assertions/elementCount.js

@@ -1,26 +0,0 @@
-// A custom Nightwatch assertion.
-// the name of the method is the filename.
-// can be used in tests like this:
-//
-//   browser.assert.elementCount(selector, count)
-//
-// for how to write custom assertions see
-// http://nightwatchjs.org/guide#writing-custom-assertions
-exports.assertion = function (selector, count) {
-  this.message = 'Testing if element <' + selector + '> has count: ' + count
-  this.expected = count
-  this.pass = function (val) {
-    return val === this.expected
-  }
-  this.value = function (res) {
-    return res.value
-  }
-  this.command = function (cb) {
-    var self = this
-    return this.api.execute(function (selector) {
-      return document.querySelectorAll(selector).length
-    }, [selector], function (res) {
-      cb.call(self, res)
-    })
-  }
-}

front/test/e2e/nightwatch.conf.js

@@ -1,46 +0,0 @@
-require('babel-register')
-var config = require('../../config')
-
-// http://nightwatchjs.org/gettingstarted#settings-file
-module.exports = {
-  src_folders: ['test/e2e/specs'],
-  output_folder: 'test/e2e/reports',
-  custom_assertions_path: ['test/e2e/custom-assertions'],
-
-  selenium: {
-    start_process: true,
-    server_path: require('selenium-server').path,
-    host: '127.0.0.1',
-    port: 4444,
-    cli_args: {
-      'webdriver.chrome.driver': require('chromedriver').path
-    }
-  },
-
-  test_settings: {
-    default: {
-      selenium_port: 4444,
-      selenium_host: 'localhost',
-      silent: true,
-      globals: {
-        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
-      }
-    },
-
-    chrome: {
-      desiredCapabilities: {
-        browserName: 'chrome',
-        javascriptEnabled: true,
-        acceptSslCerts: true
-      }
-    },
-
-    firefox: {
-      desiredCapabilities: {
-        browserName: 'firefox',
-        javascriptEnabled: true,
-        acceptSslCerts: true
-      }
-    }
-  }
-}

front/test/e2e/runner.js

@@ -1,33 +0,0 @@
-// 1. start the dev server using production config
-process.env.NODE_ENV = 'testing'
-var server = require('../../build/dev-server.js')
-
-server.ready.then(() => {
-  // 2. run the nightwatch test suite against it
-  // to run in additional browsers:
-  //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
-  //    2. add it to the --env flag below
-  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
-  // For more information on Nightwatch's config file, see
-  // http://nightwatchjs.org/guide#settings-file
-  var opts = process.argv.slice(2)
-  if (opts.indexOf('--config') === -1) {
-    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
-  }
-  if (opts.indexOf('--env') === -1) {
-    opts = opts.concat(['--env', 'chrome'])
-  }
-
-  var spawn = require('cross-spawn')
-  var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
-
-  runner.on('exit', function (code) {
-    server.close()
-    process.exit(code)
-  })
-
-  runner.on('error', function (err) {
-    server.close()
-    throw err
-  })
-})

front/test/e2e/specs/test.js

@@ -1,19 +0,0 @@
-// For authoring Nightwatch tests, see
-// http://nightwatchjs.org/guide#usage
-
-module.exports = {
-  'default e2e tests': function (browser) {
-    // automatically uses dev Server port from /config.index.js
-    // default: http://localhost:8080
-    // see nightwatch.conf.js
-    const devServer = browser.globals.devServerURL
-
-    browser
-      .url(devServer)
-      .waitForElementVisible('#app', 5000)
-      .assert.elementPresent('.hello')
-      .assert.containsText('h1', 'Welcome to Your Vue.js App')
-      .assert.elementCount('img', 1)
-      .end()
-  }
-}

front/test/unit/index.js

@@ -1,13 +0,0 @@
-import Vue from 'vue'
-
-Vue.config.productionTip = false
-
-// require all test files (files that ends with .spec.js)
-const testsContext = require.context('./specs', true, /\.spec$/)
-testsContext.keys().forEach(testsContext)
-
-// require all src files except main.js for coverage.
-// you can also change this to match only the subset of files that
-// you want coverage for.
-const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
-srcContext.keys().forEach(srcContext)

front/test/unit/karma.conf.js

@@ -1,38 +0,0 @@
-// This is a karma config file. For more details see
-//   http://karma-runner.github.io/0.13/config/configuration-file.html
-// we are also using it with karma-webpack
-//   https://github.com/webpack/karma-webpack
-
-var webpackConfig = require('../../build/webpack.test.conf')
-
-module.exports = function (config) {
-  config.set({
-    // to run in additional browsers:
-    // 1. install corresponding karma launcher
-    //    http://karma-runner.github.io/0.13/config/browsers.html
-    // 2. add it to the `browsers` array below.
-    browsers: ['PhantomJS'],
-    frameworks: ['mocha', 'sinon-stub-promise', 'sinon-chai', 'phantomjs-shim'],
-    reporters: ['spec', 'coverage'],
-    files: [
-      '../../node_modules/es6-promise/dist/es6-promise.auto.js',
-      './index.js'
-    ],
-    preprocessors: {
-      './index.js': ['webpack', 'sourcemap']
-    },
-    captureTimeout: 15000,
-    retryLimit: 1,
-    webpack: webpackConfig,
-    webpackMiddleware: {
-      noInfo: true
-    },
-    coverageReporter: {
-      dir: './coverage',
-      reporters: [
-        { type: 'lcov', subdir: '.' },
-        { type: 'text-summary' }
-      ]
-    }
-  })
-}

front/tests/unit/specs/components/common.spec.js

@@ -1,3 +1,5 @@
+import {expect} from 'chai'
+
 import Username from '@/components/common/Username.vue'
 
 import { render } from '../../utils'

front/tests/unit/specs/filters/filters.spec.js

@@ -1,3 +1,5 @@
+import {expect} from 'chai'
+
 import {truncate, markdown, ago, capitalize, year} from '@/filters'
 
 describe('filters', () => {

front/tests/unit/specs/store/auth.spec.js

@@ -1,4 +1,6 @@
 var sinon = require('sinon')
+import {expect} from 'chai'
+
 import moxios from 'moxios'
 import store from '@/store/auth'
 
@@ -8,7 +10,7 @@ describe('store/auth', () => {
   var sandbox
 
   beforeEach(function () {
-    sandbox = sinon.sandbox.create()
+    sandbox = sinon.createSandbox()
     moxios.install()
   })
   afterEach(function () {
@@ -84,7 +86,7 @@ describe('store/auth', () => {
     })
   })
   describe('actions', () => {
-    it('logout', (done) => {
+    it('logout', () => {
       testAction({
         action: store.actions.logout,
         params: {state: {}},
@@ -96,18 +98,18 @@ describe('store/auth', () => {
           { type: 'queue/reset', payload: null, options: {root: true} },
           { type: 'radios/reset', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('check jwt null', (done) => {
+    it('check jwt null', () => {
       testAction({
         action: store.actions.check,
         params: {state: {}},
         expectedMutations: [
           { type: 'authenticated', payload: false }
         ]
-      }, done)
+      })
     })
-    it('check jwt set', (done) => {
+    it('check jwt set', () => {
       testAction({
         action: store.actions.check,
         params: {state: {token: 'test', username: 'user'}},
@@ -118,9 +120,9 @@ describe('store/auth', () => {
           { type: 'fetchProfile' },
           { type: 'refreshToken' }
         ]
-      }, done)
+      })
     })
-    it('login success', (done) => {
+    it('login success', () => {
       moxios.stubRequest('token/', {
         status: 200,
         response: {
@@ -139,9 +141,9 @@ describe('store/auth', () => {
         expectedActions: [
           { type: 'fetchProfile' }
         ]
-      }, done)
+      })
     })
-    it('login error', (done) => {
+    it('login error', () => {
       moxios.stubRequest('token/', {
         status: 500,
         response: {
@@ -160,7 +162,7 @@ describe('store/auth', () => {
         done()
       })
     })
-    it('fetchProfile', (done) => {
+    it('fetchProfile', () => {
       const profile = {
         username: 'bob',
         permissions: {
@@ -183,9 +185,9 @@ describe('store/auth', () => {
           { type: 'favorites/fetch', payload: null, options: {root: true} },
           { type: 'playlists/fetchOwn', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('refreshToken', (done) => {
+    it('refreshToken', () => {
       moxios.stubRequest('token/refresh/', {
         status: 200,
         response: {token: 'newtoken'}
@@ -196,7 +198,7 @@ describe('store/auth', () => {
         expectedMutations: [
           { type: 'token', payload: 'newtoken' }
         ]
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/favorites.spec.js

@@ -1,3 +1,5 @@
+import {expect} from 'chai'
+
 import store from '@/store/favorites'
 
 import { testAction } from '../../utils'
@@ -28,7 +30,7 @@ describe('store/favorites', () => {
     })
   })
   describe('actions', () => {
-    it('toggle true', (done) => {
+    it('toggle true', () => {
       testAction({
         action: store.actions.toggle,
         payload: 1,
@@ -36,9 +38,9 @@ describe('store/favorites', () => {
         expectedActions: [
           { type: 'set', payload: {id: 1, value: true} }
         ]
-      }, done)
+      })
     })
-    it('toggle true', (done) => {
+    it('toggle true', () => {
       testAction({
         action: store.actions.toggle,
         payload: 1,
@@ -46,7 +48,7 @@ describe('store/favorites', () => {
         expectedActions: [
           { type: 'set', payload: {id: 1, value: false} }
         ]
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/instance.spec.js

@@ -1,3 +1,4 @@
+import {expect} from 'chai'
 var sinon = require('sinon')
 import moxios from 'moxios'
 import store from '@/store/instance'
@@ -7,7 +8,7 @@ describe('store/instance', () => {
   var sandbox
 
   beforeEach(function () {
-    sandbox = sinon.sandbox.create()
+    sandbox = sinon.createSandbox()
     moxios.install()
   })
   afterEach(function () {
@@ -26,7 +27,7 @@ describe('store/instance', () => {
     })
   })
   describe('actions', () => {
-    it('fetchSettings', (done) => {
+    it('fetchSettings', () => {
       moxios.stubRequest('instance/settings/', {
         status: 200,
         response: [
@@ -64,7 +65,7 @@ describe('store/instance', () => {
             }
           }
         ]
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/player.spec.js

@@ -1,3 +1,5 @@
+import {expect} from 'chai'
+
 import store from '@/store/player'
 
 import { testAction } from '../../utils'
@@ -100,7 +102,7 @@ describe('store/player', () => {
     })
   })
   describe('actions', () => {
-    it('incrementVolume', (done) => {
+    it('incrementVolume', () => {
       testAction({
         action: store.actions.incrementVolume,
         payload: 0.2,
@@ -108,27 +110,27 @@ describe('store/player', () => {
         expectedMutations: [
           { type: 'volume', payload: 0.7 + 0.2 }
         ]
-      }, done)
+      })
     })
-    it('toggle play false', (done) => {
+    it('toggle play false', () => {
       testAction({
         action: store.actions.togglePlay,
         params: {state: {playing: false}},
         expectedMutations: [
           { type: 'playing', payload: true }
         ]
-      }, done)
+      })
     })
-    it('toggle play true', (done) => {
+    it('toggle play true', () => {
       testAction({
         action: store.actions.togglePlay,
         params: {state: {playing: true}},
         expectedMutations: [
           { type: 'playing', payload: false }
         ]
-      }, done)
+      })
     })
-    it('trackEnded', (done) => {
+    it('trackEnded', () => {
       testAction({
         action: store.actions.trackEnded,
         payload: {test: 'track'},
@@ -137,9 +139,9 @@ describe('store/player', () => {
           { type: 'trackListened', payload: {test: 'track'} },
           { type: 'queue/next', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('trackEnded calls populateQueue if last', (done) => {
+    it('trackEnded calls populateQueue if last', () => {
       testAction({
         action: store.actions.trackEnded,
         payload: {test: 'track'},
@@ -149,9 +151,9 @@ describe('store/player', () => {
           { type: 'radios/populateQueue', payload: null, options: {root: true} },
           { type: 'queue/next', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('trackErrored', (done) => {
+    it('trackErrored', () => {
       testAction({
         action: store.actions.trackErrored,
         payload: {test: 'track'},
@@ -163,16 +165,16 @@ describe('store/player', () => {
         expectedActions: [
           { type: 'queue/next', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('updateProgress', (done) => {
+    it('updateProgress', () => {
       testAction({
         action: store.actions.updateProgress,
         payload: 1,
         expectedMutations: [
           { type: 'currentTime', payload: 1 }
         ]
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/playlists.spec.js

@@ -1,3 +1,4 @@
+import {expect} from 'chai'
 var sinon = require('sinon')
 import moxios from 'moxios'
 import store from '@/store/playlists'
@@ -8,7 +9,7 @@ describe('store/playlists', () => {
   var sandbox
 
   beforeEach(function () {
-    sandbox = sinon.sandbox.create()
+    sandbox = sinon.createSandbox()
     moxios.install()
   })
   afterEach(function () {
@@ -24,13 +25,13 @@ describe('store/playlists', () => {
     })
   })
   describe('actions', () => {
-    it('fetchOwn does nothing with no user', (done) => {
+    it('fetchOwn does nothing with no user', () => {
       testAction({
         action: store.actions.fetchOwn,
         payload: null,
         params: {state: { playlists: [] }, rootState: {auth: {profile: {}}}},
         expectedMutations: []
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/queue.spec.js

@@ -1,4 +1,6 @@
 var sinon = require('sinon')
+import {expect} from 'chai'
+
 import _ from 'lodash'
 
 import store from '@/store/queue'
@@ -9,7 +11,7 @@ describe('store/queue', () => {
 
   beforeEach(function () {
     // Create a sandbox for the test
-    sandbox = sinon.sandbox.create()
+    sandbox = sinon.createSandbox()
   })
 
   afterEach(function () {
@@ -83,7 +85,7 @@ describe('store/queue', () => {
     })
   })
   describe('actions', () => {
-    it('append at end', (done) => {
+    it('append at end', () => {
       testAction({
         action: store.actions.append,
         payload: {track: 4, skipPlay: true},
@@ -91,9 +93,9 @@ describe('store/queue', () => {
         expectedMutations: [
           { type: 'insert', payload: {track: 4, index: 3} }
         ]
-      }, done)
+      })
     })
-    it('append at index', (done) => {
+    it('append at index', () => {
       testAction({
         action: store.actions.append,
         payload: {track: 2, index: 1, skipPlay: true},
@@ -101,9 +103,9 @@ describe('store/queue', () => {
         expectedMutations: [
           { type: 'insert', payload: {track: 2, index: 1} }
         ]
-      }, done)
+      })
     })
-    it('append and play', (done) => {
+    it('append and play', () => {
       testAction({
         action: store.actions.append,
         payload: {track: 3},
@@ -114,9 +116,9 @@ describe('store/queue', () => {
         expectedActions: [
           { type: 'resume' }
         ]
-      }, done)
+      })
     })
-    it('appendMany', (done) => {
+    it('appendMany', () => {
       const tracks = [{title: 1}, {title: 2}]
       testAction({
         action: store.actions.appendMany,
@@ -127,9 +129,9 @@ describe('store/queue', () => {
           { type: 'append', payload: {track: tracks[1], index: 1, skipPlay: true} },
           { type: 'resume' }
         ]
-      }, done)
+      })
     })
-    it('appendMany at index', (done) => {
+    it('appendMany at index', () => {
       const tracks = [{title: 1}, {title: 2}]
       testAction({
         action: store.actions.appendMany,
@@ -140,34 +142,34 @@ describe('store/queue', () => {
           { type: 'append', payload: {track: tracks[1], index: 2, skipPlay: true} },
           { type: 'resume' }
         ]
-      }, done)
+      })
     })
-    it('cleanTrack after current', (done) => {
+    it('cleanTrack after current', () => {
       testAction({
         action: store.actions.cleanTrack,
         payload: 3,
-        params: {state: {currentIndex: 2}},
+        params: {state: {currentIndex: 2, tracks: []}},
         expectedMutations: [
           { type: 'splice', payload: {start: 3, size: 1} }
         ]
-      }, done)
+      })
     })
-    it('cleanTrack before current', (done) => {
+    it('cleanTrack before current', () => {
       testAction({
         action: store.actions.cleanTrack,
         payload: 1,
-        params: {state: {currentIndex: 2}},
+        params: {state: {currentIndex: 2, tracks: []}},
         expectedMutations: [
           { type: 'splice', payload: {start: 1, size: 1} },
           { type: 'currentIndex', payload: 1 }
         ]
-      }, done)
+      })
     })
-    it('cleanTrack current', (done) => {
+    it('cleanTrack current', () => {
       testAction({
         action: store.actions.cleanTrack,
         payload: 2,
-        params: {state: {currentIndex: 2}},
+        params: {state: {currentIndex: 2, tracks: []}},
         expectedMutations: [
           { type: 'splice', payload: {start: 2, size: 1} },
           { type: 'currentIndex', payload: 2 }
@@ -175,88 +177,88 @@ describe('store/queue', () => {
         expectedActions: [
           { type: 'player/stop', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('resume when ended', (done) => {
+    it('resume when ended', () => {
       testAction({
         action: store.actions.resume,
         params: {state: {ended: true}, rootState: {player: {errored: false}}},
         expectedActions: [
           { type: 'next' }
         ]
-      }, done)
+      })
     })
-    it('resume when errored', (done) => {
+    it('resume when errored', () => {
       testAction({
         action: store.actions.resume,
         params: {state: {ended: false}, rootState: {player: {errored: true}}},
         expectedActions: [
           { type: 'next' }
         ]
-      }, done)
+      })
     })
-    it('skip resume when not ended or not error', (done) => {
+    it('skip resume when not ended or not error', () => {
       testAction({
         action: store.actions.resume,
         params: {state: {ended: false}, rootState: {player: {errored: false}}},
         expectedActions: []
-      }, done)
+      })
     })
-    it('previous when at beginning', (done) => {
+    it('previous when at beginning', () => {
       testAction({
         action: store.actions.previous,
         params: {state: {currentIndex: 0}},
         expectedActions: [
           { type: 'currentIndex', payload: 0 }
         ]
-      }, done)
+      })
     })
-    it('previous after less than 3 seconds of playback', (done) => {
+    it('previous after less than 3 seconds of playback', () => {
       testAction({
         action: store.actions.previous,
         params: {state: {currentIndex: 1}, rootState: {player: {currentTime: 1}}},
         expectedActions: [
           { type: 'currentIndex', payload: 0 }
         ]
-      }, done)
+      })
     })
-    it('previous after more than 3 seconds of playback', (done) => {
+    it('previous after more than 3 seconds of playback', () => {
       testAction({
         action: store.actions.previous,
         params: {state: {currentIndex: 1}, rootState: {player: {currentTime: 3}}},
         expectedActions: [
           { type: 'currentIndex', payload: 1 }
         ]
-      }, done)
+      })
     })
-    it('next on last track when looping on queue', (done) => {
+    it('next on last track when looping on queue', () => {
       testAction({
         action: store.actions.next,
         params: {state: {tracks: [1, 2], currentIndex: 1}, rootState: {player: {looping: 2}}},
         expectedActions: [
           { type: 'currentIndex', payload: 0 }
         ]
-      }, done)
+      })
     })
-    it('next track when last track', (done) => {
+    it('next track when last track', () => {
       testAction({
         action: store.actions.next,
         params: {state: {tracks: [1, 2], currentIndex: 1}, rootState: {player: {looping: 0}}},
         expectedMutations: [
           { type: 'ended', payload: true }
         ]
-      }, done)
+      })
     })
-    it('next track when not last track', (done) => {
+    it('next track when not last track', () => {
       testAction({
         action: store.actions.next,
         params: {state: {tracks: [1, 2], currentIndex: 0}, rootState: {player: {looping: 0}}},
         expectedActions: [
           { type: 'currentIndex', payload: 1 }
         ]
-      }, done)
+      })
     })
-    it('currentIndex', (done) => {
+    it('currentIndex', () => {
       testAction({
         action: store.actions.currentIndex,
         payload: 1,
@@ -268,9 +270,9 @@ describe('store/queue', () => {
           { type: 'player/errored', payload: false, options: {root: true} },
           { type: 'currentIndex', payload: 1 }
         ]
-      }, done)
+      })
     })
-    it('currentIndex with radio and many tracks remaining', (done) => {
+    it('currentIndex with radio and many tracks remaining', () => {
       testAction({
         action: store.actions.currentIndex,
         payload: 1,
@@ -282,9 +284,9 @@ describe('store/queue', () => {
           { type: 'player/errored', payload: false, options: {root: true} },
           { type: 'currentIndex', payload: 1 }
         ]
-      }, done)
+      })
     })
-    it('currentIndex with radio and less than two tracks remaining', (done) => {
+    it('currentIndex with radio and less than two tracks remaining', () => {
       testAction({
         action: store.actions.currentIndex,
         payload: 1,
@@ -299,9 +301,9 @@ describe('store/queue', () => {
         expectedActions: [
           { type: 'radios/populateQueue', payload: null, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('clean', (done) => {
+    it('clean', () => {
       testAction({
         action: store.actions.clean,
         expectedMutations: [
@@ -313,9 +315,9 @@ describe('store/queue', () => {
           { type: 'player/stop', payload: null, options: {root: true} },
           { type: 'currentIndex', payload: -1 }
         ]
-      }, done)
+      })
     })
-    it('shuffle', (done) => {
+    it('shuffle', () => {
       let _shuffle = sandbox.stub(_, 'shuffle')
       let tracks = ['a', 'b', 'c', 'd', 'e']
       let shuffledTracks = ['e', 'd', 'c']
@@ -329,7 +331,7 @@ describe('store/queue', () => {
         expectedActions: [
           { type: 'appendMany', payload: {tracks: ['a', 'b'].concat(shuffledTracks)} }
         ]
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/radios.spec.js

@@ -1,4 +1,6 @@
 var sinon = require('sinon')
+import {expect} from 'chai'
+
 import moxios from 'moxios'
 import store from '@/store/radios'
 import { testAction } from '../../utils'
@@ -7,7 +9,7 @@ describe('store/radios', () => {
   var sandbox
 
   beforeEach(function () {
-    sandbox = sinon.sandbox.create()
+    sandbox = sinon.createSandbox()
     moxios.install()
   })
   afterEach(function () {
@@ -28,7 +30,7 @@ describe('store/radios', () => {
     })
   })
   describe('actions', () => {
-    it('start', (done) => {
+    it('start', () => {
       moxios.stubRequest('radios/sessions/', {
         status: 200,
         response: {id: 2}
@@ -51,23 +53,23 @@ describe('store/radios', () => {
         expectedActions: [
           { type: 'populateQueue' }
         ]
-      }, done)
+      })
     })
-    it('stop', (done) => {
+    it('stop', () => {
-      testAction({
+      return testAction({
         action: store.actions.stop,
         expectedMutations: [
           { type: 'current', payload: null },
           { type: 'running', payload: false }
         ]
-      }, done)
+      })
     })
-    it('populateQueue', (done) => {
+    it('populateQueue', () => {
       moxios.stubRequest('radios/tracks/', {
         status: 201,
         response: {track: {id: 1}}
       })
-      testAction({
+      return testAction({
         action: store.actions.populateQueue,
         params: {
           state: {running: true, current: {session: 1}},
@@ -77,17 +79,17 @@ describe('store/radios', () => {
         expectedActions: [
           { type: 'queue/append', payload: {track: {id: 1}}, options: {root: true} }
         ]
-      }, done)
+      })
     })
-    it('populateQueue does nothing when not running', (done) => {
+    it('populateQueue does nothing when not running', () => {
       testAction({
         action: store.actions.populateQueue,
         params: {state: {running: false}},
         expectedActions: []
-      }, done)
+      })
     })
-    it('populateQueue does nothing when too much errors', (done) => {
+    it('populateQueue does nothing when too much errors', () => {
-      testAction({
+      return testAction({
         action: store.actions.populateQueue,
         payload: {test: 'track'},
         params: {
@@ -95,7 +97,7 @@ describe('store/radios', () => {
           state: {running: true}
         },
         expectedActions: []
-      }, done)
+      })
     })
   })
 })

front/tests/unit/specs/store/ui.spec.js

@@ -1,3 +1,4 @@
+import {expect} from 'chai'
 import store from '@/store/ui'
 
 describe('store/ui', () => {

front/tests/unit/utils.js

@@ -1,5 +1,7 @@
 // helper for testing action with expected mutations
 import Vue from 'vue'
+import {expect} from 'chai'
+
 
 export const render = (Component, propsData) => {
   const Constructor = Vue.extend(Component)
@@ -23,38 +25,32 @@ export const testAction = ({action, payload, params, expectedMutations, expected
   const commit = (type, payload) => {
     const mutation = expectedMutations[mutationsCount]
 
-    try {
+    expect(mutation.type).to.equal(type)
-      expect(mutation.type).to.equal(type)
+    if (payload) {
-      if (payload) {
+      expect(mutation.payload).to.deep.equal(payload)
-        expect(mutation.payload).to.deep.equal(payload)
-      }
-    } catch (error) {
-      done(error)
     }
 
     mutationsCount++
     if (isOver()) {
-      done()
+      return
     }
   }
   // mock dispatch
   const dispatch = (type, payload, options) => {
     const a = expectedActions[actionsCount]
-    try {
+    if (!a) {
-      expect(a.type).to.equal(type)
+      throw Error(`Unexecpted action ${type}`)
-      if (payload) {
+    }
-        expect(a.payload).to.deep.equal(payload)
+    expect(a.type).to.equal(type)
-      }
+    if (payload) {
-      if (a.options) {
+      expect(a.payload).to.deep.equal(payload)
-        expect(options).to.deep.equal(a.options)
+    }
-      }
+    if (a.options) {
-    } catch (error) {
+      expect(options).to.deep.equal(a.options)
-      done(error)
     }
-
     actionsCount++
     if (isOver()) {
-      done()
+      return
     }
   }
 
@@ -67,13 +63,14 @@ export const testAction = ({action, payload, params, expectedMutations, expected
       expect(actionsCount).to.equal(0)
     }
     if (isOver()) {
-      done()
+      return
     }
   }
   // call the action with mocked store and arguments
   let promise = action({ commit, dispatch, ...params }, payload)
   if (promise) {
-    return promise.then(end)
+    promise.then(end)
+    return promise
   } else {
     return end()
   }

front/vue.config.js

@@ -0,0 +1,41 @@
+
+module.exports = {
+  configureWebpack: {
+    resolve: {
+      alias: {
+        'vue$': 'vue/dist/vue.esm.js'
+      }
+    }
+  },
+  devServer: {
+    disableHostCheck: true,
+    proxy: {
+      '^/rest': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '^/staticfiles': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '^/.well-known': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '^/media': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '^/federation': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+        ws: true,
+      },
+      '^/api': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+        ws: true,
+      },
+    }
+  }
+}