Kumite (ko͞omiˌtā) is the practice of taking techniques learned from Kata and applying them through the act of freestyle sparring.
You can create a new kumite by providing some initial code and optionally some test cases. From there other warriors can spar with you, by enhancing, refactoring and translating your code. There is no limit to how many warriors you can spar with.
A great use for kumite is to begin an idea for a kata as one. You can collaborate with other code warriors until you have it right, then you can convert it to a kata.
Quando criamos um objeto a partir de outras variáveis/objetos as vezes acabamos repetindo o mesmo nome da propriedade com o nome da variável.
E se tivesse uma forma mais inteligente de fazer isso?
Exercício:
Converta o código para ES6 e acabe com a redundância de nomes.
var title = 'UOL - O melhor conteúdo';
var share = {
fb: {
title: title
},
twitter: {
tweet: title
}
};describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(share.fb.title == title, true, "Shorthand Ok");
Test.assertEquals(share.twitter.tweet == title, true, "Property Ok");
});
});Um dos recursos novos facilita a criação de variáveis a partir de um array ou de um objeto em objetos.
Exercício:
Use ES6 para simplificar a criação das variáveis uf, regiao e titulo.
var materia = {
conteudo: {
titulo: 'UOL',
},
tags: ['São Paulo', 'SP', 'Sudeste', 'Brasil', 'América Latina']
};
var uf = materia.tags[1];
var regiao = materia.tags[2];
var titulo = materia.conteudo.titulo;describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(uf == materia.tags[1], true, "Unidade federativa ok");
Test.assertEquals(regiao == materia.tags[2], true, "Região ok");
Test.assertEquals(titulo == materia.conteudo.titulo, true, "Título ok");
});
});Exercício:
Capture o reject da Promise em ES6.
function monteCarlo() {
return new Promise(function (resolve, reject) {
reject({server: 'down'});
});
}
async function main() {
// converter para ES6
const results = await monteCarlo();
return true;
}describe("Solution", function(){
it("should test for something", async function(){
Test.assertEquals(await main(), true, "This is just an example of how you can write your own TDD tests");
});
});Para definir variáveis no JS, opcionalmente, mas altamente recomendado usamos a keyword var. Var possui algumas particularidades, como içamento, que a princípio veio para otimizar nosso código mas causou alguns efeitos colaterais.
ES6 trouxe duas novas palavras-chaves para auxiliar na declaração de variáveis: let e const.
Exercício:
Substitua var por let ou const quando necessário.
// Exercício 1
var titulo = "UOL - O melhor conteúdo";
// Exercício 2
var tags = []
tags.push(...['A', 'B']);
// Exercício 3
var descricao = "Em 1999";
descricao += " em São Paulo";
// Exercício 4
var materia = {titulo: "Barão de Limeira"};
materia.titulo = "Alameda " + materia.titulo;
// Exercício 5
for (var i = 10; i--;) {
console.log(i);
}
// Exercício 6
for (var tag of ['A', 'B']) {
console.log(tag);
}
// Exercício 7
for (var j = [].length; j--;) {}
if (j === -1) {
console.log('Não encontrei');
}
// Exercício 8
var a = 123;
{
a *= 2;
}
console.log(a);
// Exercício 9
var state = 'active';
function stop() {
state = 'paused';
}
stop();
// Exercício 10
var TRUE = !0;describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(true, true, "This is just an example of how you can write your own TDD tests");
});
});Quando estamos criando uma lib em JS é comum colocarmos tudo dentro de uma função anônima. Mas porquê? Um dos motivos é garantir que as variáveis externas não vão conflitar com suas variáveis e que as variáveis que você está criando não vão conflitar com o resto do programa. Existem outros motivos, mas voltando a raiz esse é o principal.
Exercício:
ES6 trouxe um novo recurso que veio para substituir funções anônimas quando queremos criar um escopo/contexto. Substitua a função anônima por esse recurso.
function todo() {
return 'Walk';
}
// reescrever em ES6
(function() {
function todo() {
return 'Run';
}
})();describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(todo(), 'Walk', "This is just an example of how you can write your own TDD tests");
});
});Exercício:
Troque os valores de A por B e B por A sem criar uma nova variável.
let a = 5, b = 10;
// reescreva
// resolva sem precisar de uma nova variável
let c = a;
a = b;
b = c;describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(a == 10 && b == 5, true, "This is just an example of how you can write your own TDD tests");
});
});Com destructuring e deep matching conseguimos navegar por um objeto até chegar no valor da propriedade.
Exercício:
Navague até o título nos array resultados e imprima no console o valor. Assuma "Brasil" como valor padrão quando "titulo" não existir.
let results = [
{materia: {conteudo: {titulo: 'São Paulo'}}, tags: [1, 2, 3]},
{materia: {conteudo: {}}, tags: [3, 2]},
{materia: {conteudo: {titulo: 'Rio de Janeiro'}}, tags: [3, 2]},
];
for (const result of results) {
let titulo = result.materia.conteudo.titulo || 'Brasil';
console.log(titulo);
}describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(1, 1, "This is just an example of how you can write your own TDD tests");
});
});Exercício:
Use os novos recursos do ES6 para resolver os problemas do dia a dia.
// 1 - Criar um separador de 20 hífens
var separador = '';
for (var i = 20; i--;)
separador += '-';
// 2 - Completar com espaços à esquerda para formar uma string de 20 caracteres
var titulo = 'UOL';
titulo = new Array(20 - titulo.length + 1).fill('').join(' ') + titulo;
// 3 - Completar com espaços à direita para formar uma string de 20 caracteres
var titulo = 'UOL';
for (var i = 20 - titulo.length; i--; titulo += ' ');
// 4 - Verificar se a string contém outra string em boolean
var titulo = 'UOL - O melhor conteúdo';
var resp = titulo.indexOf('melhor') !== -1;
// 5 - Verificar se a string começa com outra string em boolean
var titulo = 'UOL - O melhor conteúdo';
var resp = titulo.indexOf('UOL') == 0;
// 6 - Verificar se a string termina com outra string em boolean
var titulo = 'UOL - O melhor conteúdo';
var resp = new RegExp('melhor$').test(titulo);describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(1, 1, "This is just an example of how you can write your own TDD tests");
});
});Exercício:
Crie a classe Title, herde Component e sobrescreva o método onCreate para retornar a string "super!", mas que também execute o método onCreate da classe base.
class Component {
constructor(dom) {
this.dom = dom;
}
onCreate() {
console.log('onCreate from parent class');
return 'missing';
}
static on(event, callback) {
callback();
}
async emit(event, data) {}
}describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(new Title().onCreate(), "super!", "This is just an example of how you can write your own TDD tests");
});
});Exercício:
Crie um construtor para classe Collection onde receba 2 parâmetros. Não esqueça de iniciar o construtor da classe base.
new Collection('#body', true);
class Component {
constructor(dom) {
console.log('Parent class constructor executed!');
this.dom = dom;
}
onCreate() {
return true;
}
}
class Collection {
//
}describe("Solution", function(){
it("should test for something", function(){
Test.assertEquals(new Collection('#body', true).onCreate(), true, "This is just an example of how you can write your own TDD tests");
});
});