Probar Reducers

Cursos Empresas Blog Live Conf Precios

Nikolas Santis

student•

Bueno el curso, pero hace falta hacerlo con Hooks! No todo es Redux. :)

silvana murgo

student•

AMEN!

Julián Peñaranda

student•

Totalmente de acuerdo.

Estaría bien añadir test de funciones que se ejecutan cuando se lanza un evento, como los eventHandlers.

Jose Enrique Marquez

student•

un ejemplo simple de como probrar REMOVE_FROM_CART action

test('REMOVE_FROM_CART', () => {
    const initialState = { cart: [ProductMock] };
    const action = { type: 'REMOVE_FROM_CART', payload: ProductMock };
    const expected = { cart: [] };

    expect(reducer(initialState, action)).toEqual(expected);
  });

Julián Peñaranda

student•

Bastante acertado y muy limpio. Creo que esta, es una mejor implementación 👌

Elioenai Garcia

student•

Se ve bien. Podrás explicar como funciona el flujo de datos en esta prueba, no me queda muy claro.

Jean Nuñez

student•

esta prueba es importante para una aplicacion que estoy desarrollando Gracias Oscar, Gracias Platzi

Oscar Barajas Tavares

Team Platzi•

Me da gusto escuchar que te ayudará en tu proyecto

Seba Cardoso

student•

A mi también me ayuda para mi trabajo

Alver Alexander Grisales Ortega

student•

una recomendación es crear los mocks de datos en tipo de archivo json, con eso garantizamos que al momento de revisar la cobertura va ignorar esos archivos

María Paz Muñoz Parra

student•

¿Alguien tiene un ejemplo de cómo testear el botón de Add to Cart pero hecho con Hooks? :)

Samuel Miranda Martínez

student•

Agradezco haber entendido Redux, antes de esta clase.

Hector F

student•

No estoy seguro de que sea necesario probar los reducers. Los que desarrollan Redux ya se encargaran de eso.

En todo caso sería probar que las actions que tenemos sean las correctas.

¿Qué opinan?

Pedro Muñoz Becerra

student•

Mi código del REMOVE_FROM_CART

test('REMOVE_FROM_CART', () => {
    const initialState = {
      cart: [
        ProductMock,
      ],
    };
    const payload = ProductMock;
    const action = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    const expected = {
      cart: [],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });

Mariano Villarreal

student•

Gracias por el curso sos d10s

Oscar Barajas Tavares

Team Platzi•

Me alegra saber que te gusto.

Carlos Jaime Yerena

student•

Así quedó mi prueba de 'REMOVE_FROM_CART':

  test('REMOVE_FROM_CART', () => {
    const payload = ProductMock;
    const initialState = {
      cart: [ProductMock],
    };
    const action = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    const expected = {
      cart: [],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });```

Manuel Rivera

student•

Ah estado algo pesado el curso, pero ahí vamos :D

Oscar Chavez

student•

@Oscar Barajas Tavares Cuando veremos la anexión de los hooks a este curso ?

Juan Camilo Lentino Villalba

student•

yo lo hice validando también en el initialState el arreglo de productos

test('Retornar initialState', ()=> {
        const initialState = { cart: [], products: [] }
        expect(reducers(initialState, '')).toEqual(initialState)
    })

test('ADD_TO_CART', ()=> {
        const initialState = { cart: [], products: [] }
        const payload = ProductMock
        const action = { type: 'ADD_TO_CART', payload }

        const expected = {
            cart:[ProductMock],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

adicionalmente añadí el REMOVE_FROM_CART

test('REMOVE_FROM_CART', ()=> {
        const initialState = { cart: [ProductMock], products: [] }
        const payload = ProductMock
        const action = { type: 'REMOVE_FROM_CART', payload }

        const expected = {
            cart: [],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

el código completo quedaría así src/tests/reducers/reducers.test.js:

import reducers from '../../reducers'
import ProductMock from '../../__mocks__/ProductMock'

describe('Reducers', ()=> {
    
    test('Retornar initialState', ()=> {
        const initialState = { cart: [], products: [] }
        expect(reducers(initialState, '')).toEqual(initialState)
    })

    test('ADD_TO_CART', ()=> {
        const initialState = { cart: [], products: [] }
        const payload = ProductMock
        const action = { type: 'ADD_TO_CART', payload }

        const expected = {
            cart:[ProductMock],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

    test('REMOVE_FROM_CART', ()=> {
        const initialState = { cart: [ProductMock], products: [] }
        const payload = ProductMock
        const action = { type: 'REMOVE_FROM_CART', payload }

        const expected = {
            cart: [],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })
})

Andrés Felipe Eslava Zuluaga

student•

El código de la clase con ambas acciones:

import reducer from '../../reducers';
import ProductMock from '../../__mocks__/ProductMock';

describe('Reducers', () => {
  test('Retornar Initial State', () => {
    expect(reducer({},'')).toEqual({});
  });

  test('ADD_TO_CART', () => {
    const initialState = {
      cart: [],
    };
    const action = {
      type: 'ADD_TO_CART',
      payload: ProviderMock,
    };
    const expected = {
      cart: [ ProductMock ],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });

  test('REMOVE_FROM_CART', () => {
    const initialState = {
      cart: []
    };
    const action = {
      type: 'REMOVE_FROM_CART',
      payload: ProductMock,
    };
    const expected = {
      cart: [],
    }
  });
});

Julian Estrada

student•

it('Prueba de reducers remove', () =&gt; {
  const initialState = {
    cart: [],
  };
  const payload = ProductMock;
  const action = {
    type: 'REMOVE_FROM_CART',
    payload,
  };
  const expected = {
    cart: [],
  };
  expect(reducers(initialState, action)).toEqual(expected);
});```

Jonathan Gonzalez Botero

student•

Acá mi implementación para REMOVE_FROM_CART como ejercicio complementario

  test('Remove from cart', () => {
    let payload = ProductMock;
    let initialState = {
      cart: []
    };
    let action = {
      type: 'REMOVE_FROM_CART',
      payload
    };
    let expected = {
      cart: []
    }
    expect(reducer(initialState, action)).toEqual(expected);
  });

Carlos Rosado

student•

Remover un Producto

test('REMOVE_TO_CART', () => {
        const initialState = {
            cart: [ProductMock]
        };
        const payload = ProductMock;
        const action = {
            type: 'REMOVE_FROM_CART',
            payload
        };
        const expected = {
            cart: [
            ]
        };
        expect(reducers(initialState, action)).toEqual(expected)
    })

test('REMOVE_FROM_CART', () => {
    const initialState = { cart: [ProductMock] };
    const action = { type: 'REMOVE_FROM_CART', payload: ProductMock };
    const expected = { cart: [] };

    expect(reducer(initialState, action)).toEqual(expected);
  });

test('REMOVE_FROM_CART', () => {
    const initialState = {
      cart: [
        ProductMock,
      ],
    };
    const payload = ProductMock;
    const action = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    const expected = {
      cart: [],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });

  test('REMOVE_FROM_CART', () => {
    const payload = ProductMock;
    const initialState = {
      cart: [ProductMock],
    };
    const action = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    const expected = {
      cart: [],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });```

test('ADD_TO_CART', ()=> {
        const initialState = { cart: [], products: [] }
        const payload = ProductMock
        const action = { type: 'ADD_TO_CART', payload }

        const expected = {
            cart:[ProductMock],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

test('REMOVE_FROM_CART', ()=> {
        const initialState = { cart: [ProductMock], products: [] }
        const payload = ProductMock
        const action = { type: 'REMOVE_FROM_CART', payload }

        const expected = {
            cart: [],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

import reducers from '../../reducers'
import ProductMock from '../../__mocks__/ProductMock'

describe('Reducers', ()=> {
    
    test('Retornar initialState', ()=> {
        const initialState = { cart: [], products: [] }
        expect(reducers(initialState, '')).toEqual(initialState)
    })

    test('ADD_TO_CART', ()=> {
        const initialState = { cart: [], products: [] }
        const payload = ProductMock
        const action = { type: 'ADD_TO_CART', payload }

        const expected = {
            cart:[ProductMock],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

    test('REMOVE_FROM_CART', ()=> {
        const initialState = { cart: [ProductMock], products: [] }
        const payload = ProductMock
        const action = { type: 'REMOVE_FROM_CART', payload }

        const expected = {
            cart: [],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })
})

import reducer from '../../reducers';
import ProductMock from '../../__mocks__/ProductMock';

describe('Reducers', () => {
  test('Retornar Initial State', () => {
    expect(reducer({},'')).toEqual({});
  });

  test('ADD_TO_CART', () => {
    const initialState = {
      cart: [],
    };
    const action = {
      type: 'ADD_TO_CART',
      payload: ProviderMock,
    };
    const expected = {
      cart: [ ProductMock ],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });

  test('REMOVE_FROM_CART', () => {
    const initialState = {
      cart: []
    };
    const action = {
      type: 'REMOVE_FROM_CART',
      payload: ProductMock,
    };
    const expected = {
      cart: [],
    }
  });
});

it('Prueba de reducers remove', () =&gt; {
  const initialState = {
    cart: [],
  };
  const payload = ProductMock;
  const action = {
    type: 'REMOVE_FROM_CART',
    payload,
  };
  const expected = {
    cart: [],
  };
  expect(reducers(initialState, action)).toEqual(expected);
});```

  test('Remove from cart', () => {
    let payload = ProductMock;
    let initialState = {
      cart: []
    };
    let action = {
      type: 'REMOVE_FROM_CART',
      payload
    };
    let expected = {
      cart: []
    }
    expect(reducer(initialState, action)).toEqual(expected);
  });

test('REMOVE_TO_CART', () => {
        const initialState = {
            cart: [ProductMock]
        };
        const payload = ProductMock;
        const action = {
            type: 'REMOVE_FROM_CART',
            payload
        };
        const expected = {
            cart: [
            ]
        };
        expect(reducers(initialState, action)).toEqual(expected)
    })

Probar Reducers

Bienvenida

Bienvenido al Curso de Jest

¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

Introducción a Jest

Preparación del entorno con Jest

Implementando pruebas para Boolean y Array

Implementando pruebas a promesas

Watch y Coverage

Usando Jest con React

Preparar proyecto

Crear mocks

Implementar provider mock

Snapshot

Probar Actions

Probar Reducers

Probar peticiones fetch

Deploy y CI con Travis

Jest + CI

Probando el proyecto antes de hacer deploy

Recapitulación y cierre