ivanbtrujillo

/**
* This is a wrap for React.Lazy based on Christoph Nakazawa solution (https://gist.github.com/cpojer/c50a742ec943d95c3c72a41ac1c06f03) for the issue that happens when using React.Lazy and we deploy a new version of a module, changing the hash (automatically managed by bundlers).
*
* THE PROBLEM:
* When our React application is compiled for production, packaging tools (Vite in this case) often add hashes to the filename to handle caching. 
* These hashes change whenever the content of the file changes. This ensures that users get the most recent version of the file, since a change in the hash will force the browser to download the new file instead of serving a cached version.
* 
* If a user has your application open and you make a new deployment, the file names of the dynamically loaded modules may change (due to the new hashes). 
* And then, if the user navigates to a part of your application that requires loading a new module, their browser will attempt to load the module using the old file name (which i

ivanbtrujillo

If you want to test a single file using jest, and get the coverage of that single file 
instead of the coverage of the whole project, you can use this command:


npx jest [file_name] --coverage --collectCoverageFrom=[path_to_file.extension] --watch

Example:

npx jest logout --coverage --collectCoverageFrom=./src/modules/logout/logout.tsx --watch

ivanbtrujillo

  const lightMachine = Machine({
    id: 'light',          
    initial: 'off',                 
    states: {                       
      off: { on: { TOGGLE: 'on' } }, 
      on: { on: { TOGGLE: 'off' } }
    }
  });
  

ivanbtrujillo

GIT USEFULL ALIASES

Remove last commit:

git config --global alias.rm-commit 'reset --hard HEAD~1'  

USAGE:

git rm-commit

ivanbtrujillo

import { useEffect, useRef } from 'react';

type GenericProps = { [key: string]: any };

export const useWhyDidYouUpdate = (componentName: string, props: GenericProps) => {

  console.warn(`Remove useWhyDidYouUpdate from component ${componentName} before commit your changes`);
  /*
   * Get a mutable ref object where we can store props
   * for comparison next time this hook runs.

ivanbtrujillo

import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";

export default class App extends React.Component {
  state = {
    texto: ""
  };
  saludar = () => this.setState({ texto: "Hola, ¿cómo estás?" });
  despedirse = () => this.setState({ texto: "¡Nos vemos!" });

ivanbtrujillo

interface User {
  id: number;
  name: string;
}


// Objects

We are going to change the name of the user. We will have three functions:
- changeName1 : mutates the object. Bad practice because mutations are a source of bugs hard to find.

ivanbtrujillo

Angular2 Testing using AngularCli, Jasmine, Karma, Chai and PhantomJS

Tools

For unit testing in Angular2 we can configure a good environment using:

• Jasmine: a framework to write test
• karma: a test runner
• chai: a bdd assertions library
• Protractor: used to write end-to-end test. It explore the app as users experience it simulating user behaviour.
• PhantomJS: a script browser to run the angular code and check if it works properly.

ivanbtrujillo

import Sum from './Sum';
describe('Sum', () => {
  it('should render', () => (
  ));
  it('should have two inputs to add the numbers', () => (
  ));
  it('should have a button to fire the sum action', () => (
  ));
  it('should have text to show the result', () => (
  ));

ivanbtrujillo

import React, { useState } from "react";
const Sum = () => {
  
  const [value1, setValue1] = useState();
  const [value2, setValue2] = useState();
  const [result, setResult] = useState();
  
  const calculateSum = () => setResult(value1 + value2);
  
  return (