cristoferdomingues

Configuração de testes unitários (unit)

Será usado o jest para testes unitários de frontend. É uma lib bem documentada, completa e existem diversos exemplos na internet para facilitar no aprendizado.

Para isso, instalaremos o Jest e mais algumas libs extras para permitir testes com o Vue, além de alguns extras para melhorar a experiência durante o desenvolvimento.

# Libs necessárias para rodar testes unitários com Vue e Jest
npm install --save-dev jest jest-serializer-vue babel-jest @babel/core @babel/preset-env vue-jest babel-core@bridge jest-watch-typeahead identity-obj-proxy

cristoferdomingues

Lint durante o desenvolvimento

Para uma melhor experiência em desenvolvimento com Vue, Prettier e Eslint foi proposta essa configuração

# Instalar as dependencias necessárias
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

Para uma melhor experiência com o VSCode instale as extensões: Prettier, Eslint e Vetur. Adicione no settings.json do VSCode:

cristoferdomingues

/**
 * Filters an array of objects with multiple criteria.
 *
 * @param  {Array}  array: the array to filter
 * @param  {Object} filters: an object with the filter criteria as the property names
 * @return {Array}
 */
function multiFilter(array, filters) {
  const filterKeys = Object.keys(filters);
  // filters all elements passing the criteria

cristoferdomingues

import * as React from 'react';
import * as hash from 'object-hash';
import { 
    TableProps, 
    Table,
    TableBody,
    TableCell, 
    TableFooter,
    TableHeaderCell,

cristoferdomingues

/*

For more detailed instructions on how to use this script, sign up with your email here:
http://adamloving.com/internet-programming/how-toexport-facebook-page-fans

DISCLOSURE: This javascript runs in your browser pretending to be you 
looking through your page fans. Facebook should have no problem with this, 
but who knows if they will think it is strange to see you looking through 
all your fans so quickly (the script waits 3s before requesting each page). 
I've had no problem running this so far for 1000s of page fans, but I 

cristoferdomingues

<template>
  <div>
    <input v-validate data-rules="required" :class="{'has-error': errors.has("textInput")}" id="textInput" name="textInput" type="text">
    <span class="error" v-show="errors.has("textInput")">{{ errors.first("textInput") }}</span>
  </div>
</template>

<script>
  import { find, propEq } from 'ramda'
  import bus from './bus'

cristoferdomingues

Para CPF

/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/


Para CNPJ
/^\d{2}\.\d{3}\.\d{3}\/\d{4}\-\d{2}$/

Para ambos ao mesmo tempo

cristoferdomingues

<template>
  <div id="app">
		<p>
			Pending: {{ $store.state.getInfoPending }}
		</p>
		<p>
			{{ $store.state.getInfoData }}
		</p>
  </div>
</template>

cristoferdomingues

module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    files: ['test/**/*.js'],
    reporters: ['spec'],
    preprocessors: {
      'test/*.js': ['webpack']
    },
    singleRun: true,

cristoferdomingues

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VeeValidator, { Validator } from 'vee-validate'
import CpfValidator from './components/validators/cpf.validator'
import Dictionary from './components/validators/dictionary'
import Produto from './components/produtos.vue'

Validator.extend('cpf', CpfValidator)