created test actions

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/redux-mock-store": "^1.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
@@ -29,6 +30,8 @@
   },
   "devDependencies": {
     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-    "jest": "^27.5.1"
+    "jest": "^27.5.1",
+    "redux-mock-store": "^1.5.4",
+    "redux-thunk": "^3.1.0"
   }
 }

src/actions.test.js

@@ -0,0 +1,18 @@
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import * as actions from './actions';
+import { REQUEST_ROBOTS_PENDING } from './constants';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+describe("Fetch robots action PENDING", () => {
+  it("should create a Pending action on request Robots", () => {
+    const store = mockStore({});
+    return store.dispatch(actions.requestRobots())
+      .then(() => {
+        const action = store.getActions();
+        expect(action[0]).toEqual({ type: REQUEST_ROBOTS_PENDING });
+      });
+  });
+});

src/components/ErrorBoundry.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-class ErrorBoundary extends Component {
+class ErrorBoundry extends Component {
   constructor (props) {
     super(props)
     this.state = { hasError: false }
@@ -18,4 +18,4 @@ class ErrorBoundary extends Component {
   }
 }
 
-export default ErrorBoundary
+export default ErrorBoundry

src/components/MainPage.js

@@ -1,12 +1,8 @@
-import React, { Component } from 'react';
-
+import React from 'react';
 import CardList from './CardList';
 import SearchBox from './SearchBox';
-import Scroll from './Scroll';
-import ErrorBoundry from './ErrorBoundry';
-import Header from './Header';
 
-export class MainPage extends Component {
+class MainPage extends React.Component {
   componentDidMount() {
     this.props.onRequestRobots();
   }
@@ -15,26 +11,23 @@ export class MainPage extends Component {
     const { robots, searchField } = this.props;
     return robots.filter(robot => {
       return robot.name.toLowerCase().includes(searchField.toLowerCase());
-    })
+    });
   }
 
   render() {
     const { onSearchChange, isPending } = this.props;
 
     return (
       <div className='tc'>
-        <Header />
-        <SearchBox searchChange={onSearchChange}/>
-        <Scroll>
-          { isPending ? <h1>Loading</h1> :
-            <ErrorBoundry>
-              <CardList robots={this.filterRobots()} />
-            </ErrorBoundry>
-          }
-        </Scroll>
+        <h1 className='f1'>RoboFriends</h1>
+        <SearchBox searchChange={onSearchChange} />
+        { isPending ?
+          <h2>Loading...</h2> :
+          <CardList robots={this.filterRobots()} />
+        }
       </div>
     );
   }
 }
 
-export default MainPage
+export default MainPage;

src/components/MainPage.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import MainPage from './MainPage';
+
+describe('MainPage component', () => {
+  it('renders MainPage without crashing', () => {
+    const mockProps = {
+      onRequestRobots: jest.fn(),
+      robots: [],
+      searchField: '',
+      isPending: false
+    };
+    const wrapper = shallow(<MainPage {...mockProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('filters robots correctly', () => {
+    const mockProps = {
+      onRequestRobots: jest.fn(),
+      robots: [{
+        id: 3,
+        name: 'John',
+        email: '[email protected]'
+      }],
+      searchField: 'j',
+      isPending: false
+    };
+    const wrapper = shallow(<MainPage {...mockProps} />);
+    expect(wrapper.instance().filterRobots()).toEqual([{
+      id: 3,
+      name: 'John',
+      email: '[email protected]'
+    }]);
+  });
+
+  it('filters robots correctly with different search term', () => {
+    const mockProps = {
+      onRequestRobots: jest.fn(),
+      robots: [{
+        id: 3,
+        name: 'John',
+        email: '[email protected]'
+      }],
+      searchField: 'a',
+      isPending: false
+    };
+    const wrapper = shallow(<MainPage {...mockProps} />);
+    expect(wrapper.instance().filterRobots()).toEqual([]);
+  });
+});