Start our app

First steps

Modeling the app

Inititialize app

Cleaning the project

• src/store.js
• src/assets/logo.png
• src/components/HelloWorld.vue
• src/views/About.vue
• src/views/Home.vue
• tests/unit/example.spec.js

Clean App.vue

Clean router.js

Start creating our Store

We also create these files in src/store

Each file with this code

Add the npm scripts in package.json

Install dependencies to use

Time to create our first test!

Creating tests for the UserView

Run the test

The right one

mount

shallowMount

Run the test

We create UserView.vue

Run the test

Snapshots

Change UserView.vue

Run the test

Pressing u to update

Testing the UserView

Showing off how fun is testing

Rendering the right thing

Run the test

RED

Create components

Create components

Update Snapshot

Html has changed

GREEN

Test passed

Refactor

GREEN

Testing binding

RED

Adding data to pass the prop

Adding prop in the component

Testing our store

Adding vuex

Creating our store

Creating a fixture

Create the test to integrate

Create the test to integrate

Create the test to integrate

RED

Passing state as prop

GREEN

Mocking actions

Mocking actions

Mocking actions

RED

Creating the mock

Adding the event to the component

Adding the event to the component

GREEN

Do the same for VUserProfile and VUserSearchForm

Following TDD

Testing the action

Mocking the API

Creating the API

RED

Creating actions  implementation

GREEN

Testing the mutation

RED

Implementing the mutation

GREEN

What the Frog

Testing our API

Request service

Creating the test

RED

Solving the API

GREEN

Running the app

We don't have routing

Creating routing

That's it!

Testing 3rd parties

Improvements

Adding Element UI

Add it in the project

Insert the markup base

GREEN

Layout changes in VUSForm.vue

RED

Updating test

Snapshot Update

RED

Updating with Mount

RED

Updating to mount again

GREEN

Adding style

All Tests Passed