Vue fundamentasl with Testing and Vuex

VUE AND VUEXVUE AND VUEX
CHRIS NORINGCHRIS NORING
Google Developer Expert
@chris_noring
McKinsey
1

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

Let's start with the DOM
3 . 2

<html>
<body>
<div id="app">
{{ message }} {{ other message }}
</div>
<!-- development version, includes helpful console warning
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
<script src="app.js"></script>
</body>
</html>
3 . 3

Now let's create our Vue app !
3 . 4

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

What happened here?
We instantiated an App component to create our
Vue app new Vue({ ... definition })
We used interpolation {{}} - to show data
3 . 7

HOW DO WE RENDER A LIST?HOW DO WE RENDER A LIST?
3 . 8

Use the structural directive v-for
Add a list to our data property
3 . 9

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
items: [{ id: 1, title: 'an item' }, { id: 2, title: 'a ne
}
})
3 . 10

v-for renders list
<div v-for="item in items">
{{item.title}}
</div>
3 . 11

How do we do Conditional rendering?
3 . 12

Should I v-if it or v-else it?
v-if render if true
v-else render if false
3 . 13

<div v-if="hasError">
{{ error }}
</div>
<div v-else>
All good here
</div>
3 . 14

WORKING WITH FORMWORKING WITH FORM
CONTROLSCONTROLS
3 . 15

v-model two-way binding
data: {
newItem: ''
}
<input v-model="newItem" />
3 . 17

Checkbox element
<input type="checkbox" id="checkbox" v-model="checked">
3 . 18

You can bind a list of checkboxes to an array
3 . 19

['Donatello', 'Michelangelo', 'Rafael']
<div id='example-3'>
<input type="checkbox" id="Donatello" value="Donatello"
v-model="checkedTurtles">
<label for="Donatello">Donatello</label>
<input type="checkbox" id="Michelangelo" value="Michelangelo
<label for="Michelangelo">Michelangelo</label>
<input type="checkbox" id="Rafael" value="Rafael"
<label for="Rafael">Rafael</label>
<br>
<span>Checked turtles: {{ checkedTurtles }}</span>
</div>
3 . 20

You can bind a list of radio buttons to the same v-
model
3 . 21

side = Shredder or Splinter
<input type="radio" id="Shredder" value="Shredder"
v-model="side">
<label for="Shredder">Bad guys</label>
<br>
<input type="radio" id="Splinter" value="Splinter"
v-model="side">
<label for="Splinter">Good guys</label>
3 . 22

we can easily capture the selected value in a Select
with v-model
3 . 23

<select v-model="selectedTeam">
<option v-for="option in teams" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
3 . 24

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

So we learned the Vue basics on creating an app,
structural directives and so on.
Am I a Vue ninja now?
3 . 27

Patience my young turtle, we need to learn about
components first
3 . 28

Vue.component()
Vue.component('componentName', {
... object definition
})
4 . 2

COMPONENT EXAMPLECOMPONENT EXAMPLE
4 . 3

template, methods ...
Vue.component('product', {
template: `
<div>
<input v-model="product" />
<button v-on:click="save">Save</button>
</div>
`,
data() { return { product: void 0 } },
methods: {
async save() {
await api.createProduct(this.product);
this.product = '';
}
}
})
4 . 4

COMPONENT WITH A CHILDCOMPONENT WITH A CHILD
COMPONENTCOMPONENT
4 . 5

Vue.component('parent', {
template: `
<div>
Parent: <child />
</div>
`
})
Vue.component('child', {
template: `
<div>
<strong>Child</strong>
</div>
`
})
4 . 6

CREATING COMPONENTS WITHCREATING COMPONENTS WITH
ES6 MODULE/ VUE-CLIES6 MODULE/ VUE-CLI
APPROACHAPPROACH
4 . 7

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

<template>
<div class="hello"><h1>{{ msg }}</h1></div>
</template>
<script>
export default {
name: 'HelloWorld',
data () { return { msg: 'Welcome to Vue' } }
}
</script>
<style scoped>
.hello {
padding: 10px;
}
</style>
4 . 10

No CSS leakage with scoped styles
WINNING
4 . 11

What about child components?
4 . 12

To be able to use child component we need to:
import the child component
register it with its parent component
4 . 13

import - import module
components - place child component here
import Test from './Test.vue'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Vue'
}
},
components: {
Test
}
}
4 . 14

Then we are free to use it in our template, like so
4 . 15

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<test></test>
</div>
</template>
4 . 16

COMPONENT INPUT/OUTPUTCOMPONENT INPUT/OUTPUT
4 . 17

props: ['input1', 'input2']
v-bind:propName or :propName
v-bind - bind input
props - declare input name
template : `
<div>
Product name {{ item.name }}
</div>
`,
props: ['item']
})
// usage
<product v-bind:item="product"></product>
4 . 18

COMPONENT INPUT VALIDATIONCOMPONENT INPUT VALIDATION
Gives oﬀ warning in the console if validation fails
4 . 19

props propName: dataType
props: {
year: Number,
title: String
...
}
4 . 21

object type, required
props : {
title : {
type: String,
required: true
}
}
4 . 23

Specify a default object, if input is missing
4 . 24

default if prop is missing, this is what gets assigned
props : {
product : {
type: Object,
default: function() {
return {
name: 'Unknown product'
};
}
}
}
4 . 25

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

validator must return true/false
props : {
age : {
type: Number,
validator: function(value){
return value >=18;
}
}
}
4 . 28

data: {
age: 11
}
// validation kicks in, reports error
<product-detail :age="age"></product-detail>
data: {
age: 19
}
// everything is good
<product-detail></product-detail>
4 . 29

let's start with the parent
4 . 31

template: `
<product-detail :product="product" @save="handleSave" />
`,
data() {
return {
product: { name: 'something' }
}
},
methods: {
handleSave(payload) {
console.log('called from child', payload)
}
}
4 . 32

now for the child component
4 . 33

$emit('eventName', payload)
Vue.component('product-detail', {
template : `
<div>
Product name {{ item }}
<button v-on:click="$emit('save', someData)">Save</button>
</div>
`,
props: ['item'],
data() {
return {
someData: Object.assign({}, this.item);
}
}
})
4 . 34

SCENARIOSCENARIO
We want to change a product locally and save it when
we are done editing
4 . 35

We call select() when we select an item in a list
Vue.component('parent', {
template: `
<div v-for="product in products">
{{ product.title }}
<button v-on:click="select(product)">Select</button>
</div>
<product-detail v-on:save="save" :product="selectedProduct
`,
methods : {
select(product) { this.selectedProduct = product; },
save(p) { this.product = p; }
},
data: { selectedProduct: void 0, products: [...] }
})
4 . 36

We copy our input to a local object p
template: `
<div>
<input v-model="p.title" />
<button v-on:click="$emit('save',p)">Save changes</butto
</div>
`,
data() {
return {
p: { ...this.product };
}
},
props: ['product']
})
4 . 37

It doesn't update when I do a new selection :(
4 . 38

Let's look at the parent template again
The input :product doesn't seem to listen to changes
template: `
<div v-for="product in products">
{{ product.title }}
<button v-on:click="select(product)"></button>
</div>
<product-detail v-on:save="save" :product="selectedProduct"
`
4 . 39

Solution: use a watch property to fix that
4 . 40

Our p property is reset on change
...
watch: {
p(newVal, oldVal) {
this.p = { ...this.product };
}
}
props: ['product']
})
4 . 41

Everything works now, yeah :)
4 . 42

Alright I'm ready. Let's do this
4 . 43

Wait, your app is going to need more than one page,
it's time to learn about routing
4 . 44

ROUTINGROUTING
We need multiple pages in our app right?
5 . 1

SET UP THE ROUTESSET UP THE ROUTES
5 . 2

path - is the url
component - is the component that should respond
const routes = [
{ path: '/products', component: Products },
{ path: '/treasure', component: Treasure }
]
5 . 4

const router = new VueRouter({
routes // short for `routes: routes`
})
5 . 5

DEFINE A VIEWPORTDEFINE A VIEWPORT
Use router-outlet element
5 . 6

<div id="app">
<div>Menu</div>
<router-outlet /> 
<div>Footer</div>
</div>
5 . 7

How to navigate?
Answer: Define a link
5 . 8

<router-link to="/products">Products</router-link>
5 . 9

What about routing with params in them, aka wildcard
routing ?
5 . 10

const routes = [
{ path: '/products', component: Products },
{ path: '/products/:id', component: ProductDetail }
]
5 . 11

Ok so we can now match /products/11 or
/products/114
How do we dig out the parameter?
5 . 12

this.$route.params.id gives us the parameter
const ProductDetail = {
template: `
<div>
Product {{ product.name }}
</div>
`,
data() {
let product = products.find(p => this.$route.params.id);
return {
product
};
}
}
5 . 13

What about query params?
/products?pageSize=10&page=2
$route.query.queryParam
5 . 14

this.$route.query.queryParam gives us the parameter
const ProductDetail = {
template: `
<div>
Product {{ product.name }}
</div>
`,
async data() {
let product = await getProducts($route.query.page, $route.
return {
product
};
}
}
5 . 15

Let's face it, our user will mistype the url at some
point, we need a 'Catch all route'
5 . 16

const routes = [
{ path: '/products', component: Products, name: 'products' }
{ path: '/products/:id', name: 'product', component: Product
{ path: '/**', component: NotFound }
]
5 . 17

Programmatic routing, we can navigate by url as well
as name
5 . 18

methods: {
back() {
this.$router.push('/products?a=1&b=2');
},
backName() {
this.$router.push({ name: 'products' });
}
}
5 . 19

You can have Multiple view ports
5 . 20

<div>
<router-view class="header" name="header"></router-view>
</div>
<div>
<router-view class="body"></router-view>
</div>
<div>
<router-view class="footer" name="footer"></router-view>
</div>
5 . 21

Give router-view a name and we can route to it
5 . 22

default - refers to an unnamed router-view
footer - is our named router-view
const routes = [
{ path: '/products',
components: {
default: Products,
footer: Footer
},
},
]
5 . 23

Don't tell me, there is more right?
5 . 24

Well yes, we need to learn how test our app...
5 . 25

The easiest way to get started with testing is using vue-
cli
6 . 2

Type of testing you can do
Unit testing, Karma, Mocha, Chai or Jest
E2E testing, Nightwatch
6 . 3

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

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

Scenario: we have a component with input props
6 . 6

<template>
<div class="about">
<h1>{{msg}}</h1>
<h2>{{title}}</h2>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return { msg: 'about page of the app' }
},
props: ['title']
}
</script>
6 . 7

propsData needs to be set
describe('About.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(About)
const vm = new Constructor({
propsData: { title: 'abc' }
}).$mount()
expect(vm.$el.querySelector('.about h2').textContent)
.to.equal('abc')
})
})
6 . 9

How do we deal with events?
6 . 10

<template>
<div class="test">
<h1>{{msg}}</h1>
<button class="change-button" @click="change">Change</butt
</div>
</template>
<script>
export default {
name: 'Test',
data () { return { msg: 'Testing...' } },
methods: { change () { this.msg = 'clicked' } }
}
</script>
6 . 11

Now for the test - we need to trigger a click event:
6 . 12

it('should render clicked if button is clicked', () => {
const Constructor = Vue.extend(Test)
const vm = new Constructor().$mount()
const button = vm.$el.querySelector('.test .change-button')
const clickEvent = new window.Event('click')
button.dispatchEvent(clickEvent)
vm._watcher.run()
expect(vm.$el.querySelector('.test h1').textContent)
.to.equal('clicked')
})
6 . 13

e2e test - Nightwatch enables us to spin up a browser.
Interact with our app and assert on the result
6 . 14

Scenario: take our test component, click the button
and assert it shows 'clicked'
6 . 15

browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.assert.elementPresent('.test')
.assert.containsText('.test h1', 'Testing...')
.assert.elementPresent('.change-button')
.click('.change-button')
.assert.containsText('.test h1', 'clicked')
.end()
6 . 16

Scenario: take our test component, write in the input
field, assert our component shows that data
6 . 17

browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.assert.elementPresent('.test')
.setValue('.test-input', 'abc')
.assert.containsText('.test h1', 'abc')
.end()
6 . 18

Core team member, @eddyerburgh Edd Yerburgh,
https://www.manning.com/books/testing-vuejs-
applications

Just one more thing, state management with VUEX
6 . 22

VUEXVUEX
CENTRALIZED STATE MANAGEMENT FOR VUE.JSCENTRALIZED STATE MANAGEMENT FOR VUE.JS
7 . 1

All of our application state live in a store
7 . 2

<html>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/
<script src="https://unpkg.com/vuex"></script>
<script src="app.js"></script>
<script src="//0.0.0.0:35729/livereload.js?snipver=1" async=
</html>
7 . 4

const store = new Vuex.Store({
state: {
count: 0,
},
})
7 . 6

In a component
set up a computed property
show through interpolation {{}}
7 . 8

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
count: function() {
return this.$store.count;
}
},
store
})
7 . 9

state: {
count: 0,
},
mutations: {
increment (state) {
state.count++; // mutating state
},
decrement (state) {
state.count--; // mutating state
}
}
})
7 . 14

this.$store.commit('mutationName')
Vue.component('Counter', {
template: `
<div>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>>
`,
methods: {
increment() {
this.$store.commit('increment');
},
decrement() {
this.$store.commit('decrement');
}
}
7 . 16

We can also commit() with a payload
7 . 17

increment() {
this.$store.commit('addProduct', this.newProduct);
}
7 . 18

How do we access the payload in the store?
7 . 19

mutations: {
addProduct(state, payload) {
this.products = [ ...this.state.products, { ...payload }]
}
}
7 . 20

Does NOT mutate state
Calls .commit() when done
Can be asynchronous
we dispatch() actions
7 . 22

state: {
count: 0
},
mutations: {
// called 2nd
increment() {
this.state.count++;
}
},
actions: {
// called 1st on dispatch()
increment(context) {
context.commit('increment')
}
7 . 24

Calling an action from a component
7 . 25

template: `
<div>
{{ count }}
<button v-on:click="increment">Increment</button>
</div>
`,
methods: {
increment() {
this.$store.dispatch('increment'); // calling action
}
}
})
7 . 26

set loading state to true ( e.g show spinner )
fetch our data
set data or error
set loading to false
7 . 28

actions: {
loadProducts({ commit, state }) {
commit('loading');
try{
const products = await api.getProducts();
commit('products', products);
} catch (err) {
commit('error', err);
}
}
}
7 . 29

our state can be over crowded
7 . 30

SOLUTION: store modules
7 . 31

We go from having all the state in one store to having
many stores
7 . 32

modules
state: {
count: 0
},
modules : {
moduleA,
moduleB
}
})
7 . 33

We define a store module, just like a normal store
7 . 34

We had a look at Vue and we tried to cover
Components
Routing
Testing
Vuex
8 . 2

Vue fundamentasl with Testing and Vuex

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Vue fundamentasl with Testing and Vuex

Semelhante a Vue fundamentasl with Testing and Vuex (20)

Mais de Christoffer Noring

Mais de Christoffer Noring (20)

Último

Último (20)

Vue fundamentasl with Testing and Vuex