Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Vue fundamentasl with Testing and Vuex
1. VUE AND VUEXVUE AND VUEX
CHRIS NORINGCHRIS NORING
Google Developer Expert
@chris_noring
McKinsey
1
2. WHY SHOULD YOUWHY SHOULD YOU
CARE?CARE?
Vue.js 93000 stars on github, React 95000 stars on
github, Angular 36000 stars on github AngularJS
58000 stars on github
It's really easy, great documentation
The interest is there, now we are just waiting for
adoption
2 . 1
7. el - HTML element where the app is rendered
data - where the data is
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
otherMessage: 'other message'
}
})
3 . 5
10. What happened here?
We instantiated an App component to create our
Vue app new Vue({ ... definition })
We used interpolation {{}} - to show data
3 . 7
11. HOW DO WE RENDER A LIST?HOW DO WE RENDER A LIST?
3 . 8
12. Use the structural directive v-for
Add a list to our data property
3 . 9
13. var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
items: [{ id: 1, title: 'an item' }, { id: 2, title: 'a ne
}
})
3 . 10
29. v-on:event long name
@event short hand
this.newItem no need for this.data.newItem
data: {
newItem: ''
},
methods: {
save() {
console.log('value of input ' + this.newItem);
}
}
<button v-on:click="save">Save</button>
3 . 26
30. So we learned the Vue basics on creating an app,
structural directives and so on.
Am I a Vue ninja now?
3 . 27
31. Patience my young turtle, we need to learn about
components first
3 . 28
40. Component consists of the following:
template - tag , this is where your HTML markup
lives
script -tag, this is where the component JS lives
style - tag , this is where the styles are defined
4 . 9
56. default if prop is missing, this is what gets assigned
props : {
product : {
type: Object,
default: function() {
return {
name: 'Unknown product'
};
}
}
}
4 . 25
57. pro tip - use :product instead of v-bind:product
// product set, will use supplied value
<product-detail :product="product"></product-detail>>
// product NOT set, will use default value
<product-detail></product-detail>
4 . 26
102. The easiest way to get started with testing is using vue-
cli
6 . 2
103. Type of testing you can do
Unit testing, Karma, Mocha, Chai or Jest
E2E testing, Nightwatch
6 . 3
104. HOW DO WE CONSTRUCT A UNIT TEST?HOW DO WE CONSTRUCT A UNIT TEST?
Get a constructor reference
Instantiate constructor
Call mount
Find the element in question
Assert
6 . 4
105. import Vue from 'vue'
import Test from '@/components/Test'
describe('Test.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Test)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('.test h1').textContent)
.to.equal('Testing...')
})
})
6 . 5