update bet ui and tests

.gitignore

 .DS_Store
 node_modules
 dist
+coverage
 
 
 # local env files

javascript/jest.config.js

+module.exports = {
+    preset: '@vue/cli-plugin-unit-jest',
+    testMatch: ["**/tests/**/*.test.js"],
+    setupFiles: ['./tests/setup.js']
+  }
\ No newline at end of file

javascript/package.json

@@ -12,7 +12,7 @@
     "devinstall": "FSLGUIDIR=$FSLDIR/gui; mkdir -p $FSLGUIDIR/bet && cp -r ./dist/* $FSLGUIDIR/bet/",
     "lint": "vue-cli-service lint",
     "docs": "./node_modules/.bin/jsdoc -c jsdoc.json --readme ./README.md",
-    "test": "vue-cli-service test:unit --require mocha tests/ui/**/*.js"
+    "test": "jest --verbose --coverage=true ./tests"
   },
   "main": "app.js",
   "devDependencies": {
@@ -20,21 +20,18 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-unit-mocha": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
     "@vue/cli-service": "~4.5.0",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
-    "chai": "^4.1.2",
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "jsdoc": "^3.6.6",
     "jsdoc-vuejs": "^3.0.9",
     "material-design-icons-iconfont": "^6.1.0",
-    "mocha": "^8.3.1",
     "sass": "^1.32.0",
     "sass-loader": "^10.0.0",
-    "socket.io-client": "^3.1.1",
     "typeface-roboto": "^1.1.13",
     "vue": "^2.6.11",
     "vue-cli-plugin-vuetify": "~2.1.0",

javascript/src/Bet.vue

 <template>
 <v-app>
   <v-container>
-    <v-row>
-      <v-col>
+    <!-- input text field and choose button -->
+    <v-row justify="center">
+      <h2>{{ title }}</h2>
+    </v-row>
+    <v-row align="center">
+      <v-col cols="12" lg="9" md="9">
+        <v-text-field
+          label="input">
+        </v-text-field>
+      </v-col>
+      <v-col cols="3">
+        <v-btn>
+          Choose
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- output text field and choose button -->
+    <v-row align="center">
+      <v-col cols="12" lg="9" md="9">
         <v-text-field
-        dense
-        label="input image"
-        v-model="data.input">
+          label="output">
         </v-text-field>
       </v-col>
-      <v-col sm=3 md=3 lg=3>
-        <v-btn
-        @click="onChooseInput">
+      <v-col cols="3">
+        <v-btn>
           Choose
         </v-btn>
       </v-col>
     </v-row>
+
+    <!-- slider for fractional intensity -->
+    <v-row align="center">
+      <v-col cols="12">
+        <v-slider
+          v-model="localOpts.f"
+          label="threshold"
+          hint="smaller values give larger brain outline estimates"
+          persistent-hint
+          min="0"
+          max="1"
+          step="0.001">
+          <template v-slot:append>
+            <v-text-field
+            v-model="localOpts.f"
+            type="number"
+            min="0"
+            max="1"
+            step="0.001"
+            class="mt-0 pt-0">
+            </v-text-field>
+          </template>
+        </v-slider>
+      </v-col>
+    </v-row>
+
+    <!-- bet running mode -->
+    <v-row>
+      <v-col>
+        <v-select
+          :items='betModes'
+          label="bet mode">
+        </v-select>
+      </v-col>
+    </v-row>
+    
  </v-container>
 </v-app>
 </template>
 
 <script>
 export default {
-  name: "Bet",
+  name: "bet",
   props:{
+      title: {
+        type: String,
+        default: () => {
+          return "BET"
+        }
+      },
+      opts: {
+        type: Object,
+        default: () => {
+          return {
+            input: '',
+            output: '',
+            f: 0.5
+          }
+        }
+      }
+
   },
   components: {
-    // be sure to list imported local components here
   },
   created () {
       
     },
   data: function() {
     return {
-      title: 'FSL',
-      data: {
-        input: '',
-        output: ''
-      }
+      localOpts: this.opts,
+      betModes: [
+        {text: 'a', value:'aa'}
+      ]
     }
   },
   computed: {
-    // app_host() {
-    //   return this.$route.query.app_host === undefined ? 'localhost' : this.$route.query.app_host
-    // },
-    // app_port() {
-    //   return this.$route.query.app_port === undefined ? '5000' : this.$route.query.app_port
-    // },
-    // task_host() {
-    //   return this.$route.query.task_host
-    // },
-    // task_port() {
-    //   return this.$route.query.task_port
-    // },
   },
   watch: {
 
   },
   methods:{
-    // setup socket callbacks here
-    // onTaskSuccess: function(data) {
-    //   console.log(data) // do something with the data
-    // }, 
-
-    // onTaskError: function(data) {
-    //   console.log(data) // do something with the data
-    // },
-
-    // onTaskStdout: function(data) {
-    //   console.log(data) // do something with the data
-    // },
-
-    // onTaskStderr: function(data) {
-    //   console.log(data) // do something with the data
-    // },
-
-    // onFileReturn: function(data){
-    //   console.log(data) // do something with the data
-    //   this.data.input = data[0]
-    // },
-
-    // onDirReturn: function(data){
-    //   console.log(data) // do something with the data
-    // },
-
-    // onChooseInput: function() {
-    //   this.app_server.emit('file-request')
-    // }
     
   },
   // runs when the component is ready and rendered
   mounted () {
+    let theme = this.$route.query.theme
+    if (theme === 'dark') {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+    }
     // try {
     //   // establish socket connection to electron app
     //   this.app_server = io(`ws://${this.app_host}:${this.app_port}`)

javascript/src/main.js

 import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import Vue from 'vue'
 import Router from "vue-router"
-import Bet from './Bet.vue'
+import bet from './bet.vue'
 import vuetify from './plugins/vuetify'
 import 'typeface-roboto/index.css'
 
@@ -10,12 +10,16 @@ Vue.use(Router)
 Vue.config.productionTip = false
 
 const router = new Router({
-  routes: [],
+  routes: [
+    {
+      path: '/', component: bet
+    }
+  ],
   mode: 'history'
 })
 
 new Vue({
   vuetify,
   router,
-  render: h => h(Bet)
+  render: h => h(bet)
 }).$mount('#app')

javascript/tests/bet.test.js

+import { mount, createLocalVue } from '@vue/test-utils'
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import bet from '../src/Bet.vue'
+
+describe('bet', () => {
+  const localVue = createLocalVue()
+  let vuetify
+
+  beforeEach( () => {
+    vuetify = new Vuetify()
+  })
+  it('sets title to given value', () => {
+    const wrapper = mount(bet, {
+      localVue,
+      vuetify,
+      propsData: {
+        title: 'BET'
+      }
+    })
+    expect(wrapper.props('title')).toBe('BET')
+  })
+
+  it('sets betOpts from opts props', () => {
+    const wrapper = mount(bet, {
+      localVue,
+      vuetify, 
+      propsData: {
+        opts: {
+          input: 'file.nii.gz'
+        }
+      }
+    })
+    expect(wrapper.props('opts').input).toBe('file.nii.gz')
+  })
+})
\ No newline at end of file

javascript/tests/setup.js

+// tests/setup.js
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+Vue.use(Vuetify)
\ No newline at end of file

javascript/tests/ui/example.js

-import { assert } from 'chai'
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import VueRouter from 'vue-router'
-import App from '../../src/App.vue'
-
-describe('App.vue', () => {
- it('renders props.title', async () => {
-   const localVue = createLocalVue()
-   localVue.use(VueRouter)
-   const router = new VueRouter()
-   const title = 'FSL'
-   const wrapper = shallowMount(App, {
-     propsData: { title: title},
-     localVue,
-     router
-   })
-   assert.equal(wrapper.props().title, title)
- })
-})