crated enzyme files for testing

package.json

@@ -6,6 +6,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
+    "snap.js": "^2.0.9",
     "tachyons": "^4.12.0"
   },
   "scripts": {
@@ -25,6 +26,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+    "jest": "^27.5.1"
   }
 }
-

src/actions.js

@@ -0,0 +1,16 @@
+import { apiCall } from './api/api'
+import {
+  CHANGE_SEARCHFIELD,
+  REQUEST_ROBOTS_PENDING,
+  REQUEST_ROBOTS_SUCCESS,
+  REQUEST_ROBOTS_FAILED
+ } from './constants'
+
+export const setSearchField = (text) => ({ type: CHANGE_SEARCHFIELD, payload: text })
+
+export const requestRobots = () => (dispatch) => {
+  dispatch({ type: REQUEST_ROBOTS_PENDING })
+  apiCall('https://jsonplaceholder.typicode.com/users')
+    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
+    .catch(error => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }))
+}

src/actions.test.js

@@ -0,0 +1,26 @@
+import * as actions from './actions'
+import * as types from './constants'
+import configureMockStore from 'redux-mock-store'
+import thunkMiddleware from 'redux-thunk'
+
+export const mockStore = configureMockStore([thunkMiddleware]);
+
+describe('actions', () => {
+  it('should create an action to search', () => {
+    const text = 'Finish docs'
+    const expectedAction = {
+      type: types.CHANGE_SEARCHFIELD,
+      payload: text
+    }
+    expect(actions.setSearchField(text)).toEqual(expectedAction)
+  })
+})
+
+describe("Fetch robots action PENDING", () => {
+  it("should creat a Pending action on request Robots", () => {
+    const store = mockStore();
+    store.dispatch(actions.requestRobots())
+    const action = store.getActions();
+    expect(action[0]).toEqual({type: "REQUEST_ROBOTS_PENDING"});
+  });
+});

src/api/api.js

@@ -0,0 +1,2 @@
+export const apiCall = (link) => 
+       fetch(link).then(response => response.json())

src/components/Card.test.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { shallow } from 'enzyme';
+import Card from './Card';
+
+it('renders without crashing', () => {
+       expect(shallow(<Card/>)).toMatchSnapshot();
+});

src/components/CardList.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { shallow } from 'enzyme';
+import CardList from "./CardList";
+
+const filteredRobots = [{
+       id: 1,
+       name: "Leanne Graham",
+       username: 'Bret',
+       email: 'Sincere@april.bz'
+}]
+
+it('renders without crashing', () => {
+       expect(shallow(<CardList robots={filteredRobots}/>)).toMatchSnapshot();
+});

src/components/CounterButton.js

@@ -0,0 +1,30 @@
+import React, {Component} from 'react';
+
+class CounterButton extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.state.count !== nextState.count) {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    return (
+      <button
+        id='counter'
+        color={this.props.color}
+        onClick={() => this.setState(state => ({count: state.count + 1}))}>
+        Count: {this.state.count}
+      </button>
+    );
+  }
+}
+
+export default CounterButton

src/components/CounterButton.text.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import CounterButton from './CounterButton';
+
+it('renders without crashing', () => {
+  expect(shallow(<CounterButton />)).toMatchSnapshot();
+});
+
+it('correnctly increments the counter', () => {
+  const wrapper = shallow(<CounterButton/>)
+  expect(wrapper).toMatchSnapshot();
+  wrapper.find('[id="counter"]').simulate('click');
+  expect((wrapper.state())).toEqual({count: 1})
+  wrapper.find('[id="counter"]').simulate('click');
+  wrapper.find('[id="counter"]').simulate('click');
+  expect((wrapper.state())).toEqual({count: 3})
+});

src/components/ErrorBoundry.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+
+class ErrorBoundary extends Component {
+  constructor (props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  componentDidCatch (error, info) {
+    this.setState({ hasError: true })
+  }
+
+  render () {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>
+    }
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/components/Header.js

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import CounterButton from './CounterButton';
+
+// In most cases, instead of writing shouldComponentUpdate()
+// by hand, you can inherit from React.PureComponent. It is
+// equivalent to implementing shouldComponentUpdate() with a
+// shallow comparison of current and previous props and state.
+
+class Header extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return false
+  }
+  render() {
+    return (
+      <div>
+        <h1 className='f1'>RoboFriends</h1>
+        <CounterButton />
+      </div>
+    );
+  }
+};
+
+export default Header;

src/components/MainPage.js

@@ -0,0 +1,40 @@
+import React, { Component } 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 {
+  componentDidMount() {
+    this.props.onRequestRobots();
+  }
+
+  filterRobots = () => {
+    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>
+      </div>
+    );
+  }
+}
+
+export default MainPage

src/components/MainPage.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { shallow } from 'enzyme';
+import MainPage from './MainPage';
+
+let wrapper;
+
+beforeEach(() => {
+  const mockProps = {
+    onRequestRobots: jest.fn(),
+    robots: [],
+    searchField: '',
+    isPending: false
+  }
+  wrapper = shallow(<MainPage {...mockProps}/>)
+ })
+
+it('renders without crashing', () => {
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('fileters Robots', () => {
+  const mockProps = {
+    onRequestRobots: jest.fn(),
+    robots: [],
+    searchField: 'a',
+    isPending: false
+  }
+  wrapper = shallow(<MainPage {...mockProps}/>)
+  expect(wrapper.instance().filterRobots()).toEqual([]);
+});
+
+it('fileters Robots correctly', () => {
+  const filteredRobots = [{
+    id: 1,
+    name: 'Leanne Graham',
+    username: 'Bret',
+    email: 'Sincere@april.biz'
+  }]
+  const mockProps = {
+    onRequestRobots: jest.fn(),
+    robots: [{
+      id: 1,
+      name: 'Leanne Graham',
+      username: 'Bret',
+      email: 'Sincere@april.biz'
+    }],
+    searchField: 'Leanne',
+    isPending: false
+  }
+  wrapper = shallow(<MainPage {...mockProps}/>)
+  expect(wrapper.instance().filterRobots()).toEqual(filteredRobots);
+});
+
+it('fileters Robots correctly 2', () => {
+  const filteredRobots = [{
+    id: 1,
+    name: 'Leanne Graham',
+    username: 'Bret',
+    email: 'Sincere@april.biz'
+  }]
+  const mockProps = {
+    onRequestRobots: jest.fn(),
+    robots: [{
+      id: 1,
+      name: 'Leanne Graham',
+      username: 'Bret',
+      email: 'Sincere@april.biz'
+    }],
+    searchField: 'Xavier',
+    isPending: false
+  }
+  wrapper = shallow(<MainPage {...mockProps}/>)
+  expect(wrapper.instance().filterRobots()).toEqual([]);
+});

src/components/__snapshots__/Card.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing 1`] = `
+<div
+  className="tc grow bg-light-green br3 pa3 ma2 dib bw2 shadow-5"
+>
+  <img
+    alt="robots"
+    src="https://robohash.org/undefined?size=200x200"
+  />
+  <div>
+    <h2 />
+    <p />
+  </div>
+</div>
+`;

src/components/__snapshots__/CardList.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing 1`] = `
+<div>
+  <Card
+    email="Sincere@april.biz"
+    id={1}
+    key="0"
+    name="Leanne Graham"
+  />
+</div>
+`;

src/components/__snapshots__/CounterButton.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`correnctly increments the counter 1`] = `
+<button
+  id="counter"
+  onClick={[Function]}
+>
+  Count: 
+  0
+</button>
+`;
+
+exports[`renders without crashing 1`] = `
+<button
+  id="counter"
+  onClick={[Function]}
+>
+  Count: 
+  0
+</button>
+`;

src/components/__snapshots__/MainPage.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing 1`] = `
+<div
+  className="tc"
+>
+  <Header />
+  <SearchBox />
+  <Scroll>
+    <ErrorBoundary>
+      <CardList
+        robots={Array []}
+      />
+    </ErrorBoundary>
+  </Scroll>
+</div>
+`;

src/constants.js

@@ -0,0 +1,5 @@
+export const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';
+
+export const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';
+export const REQUEST_ROBOTS_SUCCESS = 'REQUEST_ROBOTS_SUCCESS';
+export const REQUEST_ROBOTS_FAILED = 'REQUEST_ROBOTS_FAILED';