Commit 68784c23 authored by Taylor Hanayik's avatar Taylor Hanayik
Browse files

update bet ui and tests

parent 569014ba
.DS_Store
node_modules
dist
coverage
# local env files
......
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
testMatch: ["**/tests/**/*.test.js"],
setupFiles: ['./tests/setup.js']
}
\ No newline at end of file
This diff is collapsed.
......@@ -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",
......
<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}`)
......
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')
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
// tests/setup.js
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
\ No newline at end of file
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)
})
})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment