https://cristiansuarez.dev/categories/javascript/ Recent content in Javascript on The Flip Flop Developer Hugo -- gohugo.io es Sat, 23 Jan 2021 09:01:14 +0000 https://cristiansuarez.dev/javascript/testear-modulos/ Sat, 23 Jan 2021 09:01:14 +0000 https://cristiansuarez.dev/javascript/testear-modulos/ Vamos a probar el modulo que hemos sacado en la parte anterior del juego saberganar. const saberganarQuestionNavigator = require('../src/questionNavigator'); describe('question navigator', function () { let questions, navigator; beforeEach(function () { questions = [ { id: 1, question: "¿De que colo es el caballo blanco de santiago?", answers: [ {id: 0, answer: "Es un unicornio, no un caballo", isCorrect: false, idQuestion: 1}, {id: 1, answer: "Verde", isCorrect: false, idQuestion: 1}, {id: 2, answer: "Blanco", isCorrect: true, idQuestion: 1} ] }, { id: 2, question: "¿Como sale un perro de un tanque de agua? https://cristiansuarez.dev/javascript/poner-siempre-llaves-y-return-en-las-funciones/ Sat, 02 Jan 2021 18:24:26 +0000 https://cristiansuarez.dev/javascript/poner-siempre-llaves-y-return-en-las-funciones/ Ejemplo sobre porque es relevante poner las llaves y el return en javascript cuando definimos una función. // returns: undefined // explanation: an empty block with an implicit return ((name) => {})() // returns: 'Hi Jess' // explanation: no block means implicit return ((name) => 'Hi ' + name)('Jess') // returns: undefined // explanation: explicit return required inside block, but is missing. ((name) => {'Hi ' + name})('Jess') // returns: 'Hi Jess' // explanation: explicit return in block exists ((name) => {return 'Hi ' + name})('Jess') // returns: undefined // explanation: a block containing a single label. https://cristiansuarez.dev/javascript/extraer-objeto-en-javascript/ Sat, 30 Jun 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/extraer-objeto-en-javascript/ Vamos a ver como extraer un objeto en JavaScript en su versión de ECMAScript 5. Partimos de un fichero donde tenemos todas las funcionalidades y vemos que una de ellas es claramente un objeto que podemos extraer. // main.js function application(){ // {...} let actualQuestionIndex = 0; function isThereMoreQuestions() { return actualQuestionIndex < questions.length -1; } function getQuestion() { return questions[actualQuestionIndex]; } function goToNextQuestion() { if (isThereMoreQuestions()) { actualQuestionIndex++; } } function resetQuestions() { actualQuestionIndex = 0; } // {. https://cristiansuarez.dev/javascript/codigo-reutilizable/ Tue, 05 Jun 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/codigo-reutilizable/ El objetivo de un codigo es que sea mantenible, no reutilizable. Rara vez reutilizamos el codigo, este enfoque es muy de los años ochenta. Cuando trabajamos es mejor si lo hacemos con objetos propios de nuestro dominio. En vez de usar objetos del lenguaje, como arrays o strings. https://cristiansuarez.dev/javascript/value-object/ Mon, 04 Jun 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/value-object/ Cuando llamo al then devuelve una nueva promesa Patron value object, dos objetos que son el mismo tipo pero que varian en el contenido […] Si tenemos que modificar variables de estado del objeto esto no es un value object, cuando esto ocurre devolvemos un objeto nuevo. Esto son objetos inmutables como ejemplos tenemos los strigns En un value object un objeto es igual a otro si ambos tienen el mismo contenido. https://cristiansuarez.dev/javascript/promesas/ Wed, 30 May 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/promesas/ De donde vienen y porque surge la necesidad. The callback hell, callbacks anidados unos dentro de otros sin parar es algo comun en javaScript Es un objeto que se crea con el new que recibe como parametro un callback pero solo uno y este como parametros dos callbacks que son los casos de que la promesa termine bien y en caso de que ocurra un error. Tienen dos metodos principales then() y catch() los cuales se ejecutan cuando la promesa termina de manera correcta o erronea respectivamente. https://cristiansuarez.dev/javascript/asincronia/ Thu, 24 May 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/asincronia/ En algunas ocasiones tenemos que hacer un test y que este espere un tiempo hasta que una funcion termine, ya que esta es asincrona. Para ello tenemos la siguiente posible implementacion. function it (theSubject, funct){ function doneCallback() { console.log('done'); } try { if (funct.length >=1) { funct(doneCallback); } else { funct(); } console.log(theSubject); } catch (error) { throw theSubject + ':' + error; } } } it ('foo', function(doneCallback){ var x = 1; cosole. https://cristiansuarez.dev/javascript/extraer-un-modulo-testearlo-y-sustituirlo-por-el-anterior/ Mon, 21 May 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/extraer-un-modulo-testearlo-y-sustituirlo-por-el-anterior/ Duplicar el codigo en un nuevo objeto, exportar este si no lo estaba para que sea accesible desde fuera y comenzar el test. Una vez ya podemos testearlo hacer los test necesarios. Con ello podremos comenzar a cambiar el modulo y a hacer el refactor. Esto es como se hacía en ES5 let saberganar = saberganar || {}; (function(namespace) { namespace.questionNavigator = function (question) { // all implementation code here } })(saberganar); comprobamos si nuestro namespace saberganar existe, si no partimos de uno vacio, y le añadimos a este nuestro modulo nuevo questionNavigator. https://cristiansuarez.dev/javascript/test-con-un-explorador-de-verdad/ Sun, 20 May 2018 23:00:00 +0000 https://cristiansuarez.dev/javascript/test-con-un-explorador-de-verdad/ Puedes ver como el explorador se abre y va haciendo clicks en los enlaces, etc. Test end2end, estos test son buenos cuando la aplicación a probar no es testable, probamos directamente la interfaz como si fueramos un usuario final. Pero por otra parte si en el futuro la interfaz cambia ya sea porque tiene otro ID el botón o ya no existe, los test dejaran de funcionar. Estos test se deben de usar solo como andamio, debido a su fragilidad debemos usarlo cuando no sea posible hacer test de otra forma y durante la fase de refactor hasta que tengamos un aplicacion testable.