aneagoie / robofriends-testing Goto Github PK

import React, { useEffect } from 'react';
import CardList from '../components/cards/CardList';
import SearchBox from '../components/SearchBox';
import Spinner from '../components/Spinner';
import Header from '../components/Header'
import { Suspense } from 'react';
import './MainPage.css';

const MainPage = ({ robots, fetchRobotsList, isPending, search, onSearchChange }) => {
  
  useEffect(() => {
    fetchRobotsList()
  }, []);
  
  const filteredRobots = robots.filter(({ name }) =>
      name.toLowerCase().includes(search))
  
  return (
    <Suspense fallback={Spinner}>
      <div className="tc">
        <Header />
        <SearchBox search={onSearchChange} />
        { isPending ? <Spinner /> : <CardList robots={filteredRobots} /> }
      </div>
    </Suspense>
  );
};
export default MainPage;

import { shallow, mount } from 'enzyme';
import React from 'react';
import MainPage from './MainPage';

let wrapper;

it('filters robots correctly', () => {
   const mockedProps = {
    robots: [
      {
        id: 1,
        name: 'Leanne Graham',
        username: 'Bret',
        email: '[email protected]'
      },
    ], 
    fetchRobotsList: jest.fn(), 
    isPending: false, 
    search: '', 
    onSearchChange: jest.fn(),
  }
  
  wrapper = shallow(<MainPage { ...mockedProps } />);
  wrapper.find('input[type="search"]').simulate('input', {target: { value: 'Leanne'}})
  expect(wrapper.props().search).toEqual('Leanne')
})