ivanbtrujillo

import React from "react";
const Sum = () => <div />;
export default Sum;

ivanbtrujillo

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import Sum from "./Sum";

describe("Sum", () => {

   it('should have two inputs to add the numbers', () => {
    const { getByTestId } = render(<Sum />);
    
    const firstInput = getByTestId("value1");

ivanbtrujillo

import React from "react";

const Sum = () => (
  <div>
    <input data-testid="value1" />    
    <input data-testid="value2" />
  </div>
);
export default Sum;

ivanbtrujillo

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import Sum from "./Sum";
import "jest-dom/extend-expect";

describe("Sum", () => {
  it('should sum value1 and value2 and show the result', () => {
    const { getByTestId } = render(<Sum />);
    
    const firstInput= getByTestId("value1");

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 (

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

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

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

GIT USEFULL ALIASES

Remove last commit:

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

USAGE:

git rm-commit

ivanbtrujillo

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