TodoForm.spec.jsx

TodoForm.spec.jsx

import React from 'react';
import { shallow } from 'enzyme';
import TodoForm from './TodoForm';

it('should not call onSubmit callback when the input less than 5 characters', () => {
  const onSubmitSpy = jest.fn();
  const preventDefaultSpy = jest.fn();
  const resetSpy = jest.fn();

  const subject = shallow(
    <TodoForm onSubmit={onSubmitSpy} />
  );

  subject.find('.todo-form').simulate('submit', {
    preventDefault: preventDefaultSpy,
    target: {
      todo: {
        value: 'some' // simulasi input hanya 4 karakter
      },
      reset: resetSpy,
    }
  });

  // ketika di submit: 
  // - preventDefault harus terpanggil
  // - onSubmit tidak boleh terpanggil
  // - reset tidak boleh terpanggil
  expect(preventDefaultSpy).toHaveBeenCalled();
  expect(onSubmitSpy).not.toHaveBeenCalled();
  expect(resetSpy).not.toHaveBeenCalled();
});

it('should call onSubmit callback when the input equals or more than 5 characters', () => {
  const onSubmitSpy = jest.fn();
  const preventDefaultSpy = jest.fn();
  const resetSpy = jest.fn();

  const subject = shallow(
    <TodoForm onSubmit={onSubmitSpy} />
  );

  subject.find('.todo-form').simulate('submit', {
    preventDefault: preventDefaultSpy,
    target: {
      todo: {
        value: 'somes'
      },
      reset: resetSpy,
    }
  });

  
  // ketika di submit: 
  // - preventDefault harus terpanggil
  // - onSubmit harus terpanggil dengan argument 'somes'
  // - reset harus terpanggil
  expect(preventDefaultSpy).toHaveBeenCalled();
  expect(onSubmitSpy).toHaveBeenCalledWith('somes');
  expect(resetSpy).toHaveBeenCalled();
});