diff --git a/package.json b/package.json index b6a401a..8dc20b4 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", "bootstrap": "^4.4.1", "bootstrap-react": "^0.3.1", "json-server": "^0.15.1", diff --git a/src/App.js b/src/App.js index cef5534..75bcfb1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import axios from 'axios'; import PetList from './components/PetList'; import PetDetails from './components/PetDetails'; import SearchBar from './components/SearchBar'; @@ -14,12 +15,25 @@ class App extends Component { super(props); this.state = { - petList: pets, + petList: [], currentPet: undefined, searchTerm: '', + error: '', }; } + componentDidMount () { + axios.get('http://localhost:3000/pets') + .then((response) => { + this.setState({ + petList: response.data, + }); + }) + .catch((error) => { + // TODO + }); + } + filteredList = () => { return this.state.petList.filter((pet) => { const text = (`${ pet.name } ${ pet.about } ${ pet.location } ${ pet.species }`).toUpperCase(); @@ -40,27 +54,39 @@ class App extends Component { } deletePet = (petId) => { - const petList = this.state.petList.filter((pet) => { - return pet.id !== petId; - }); - - this.setState({ - petList, - fullList: petList, - }); - } + axios.delete(`http://localhost:3000/pets/${ petId }`) + .then((response) => { + const petList = this.state.petList.filter((pet) => pet.id !== petId); + + this.setState({ + petList, + fullList: petList + }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + }; addPet = (pet) => { - - const { petList } = this.state; - const petIds = petList.map((pet) => pet.id); - const maxId = Math.max(...petIds); - pet.id = maxId + 1; - petList.push(pet); - - this.setState(petList); + console.log('pet = ', pet); + axios.post('http://localhost:3000/pets', pet) + .then((response) => { + // We can update the state so we don't need to make another GET request + const updatedData = this.state.petList; + updatedData.push(response.data); + this.setState({ + petList: updatedData, + error: '' + }); + }) + .catch((error) => { + // Use the same idea we had in our GET request + this.setState({ error: error.message }); + }); } + filterPets = (searchTerm) => { this.setState({ searchTerm, @@ -75,6 +101,7 @@ class App extends Component {

Ada Pets

+

{this.state.error ? `Error: ${ this.state.error }` : ''}

{ /* Wave 4: Place to add the SearchBar component */} diff --git a/src/components/test/NewPetForm.test.js b/src/components/test/NewPetForm.test.js new file mode 100644 index 0000000..d20cf6a --- /dev/null +++ b/src/components/test/NewPetForm.test.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { render, cleanup } from '@testing-library/react' +import NewPetForm from '../NewPetForm'; + +describe('NewPetForm', () => { + test('that it matches the existing snapshot', () => { + // Arrange-Act + const container = render( + { }} + /> + ); + + // Assert + expect(container.asFragment()).toMatchSnapshot(); + cleanup(); + }); +}); diff --git a/src/components/test/PetCard.test.js b/src/components/test/PetCard.test.js new file mode 100644 index 0000000..51ae4a1 --- /dev/null +++ b/src/components/test/PetCard.test.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { render, cleanup } from '@testing-library/react' +import PetCard from '../PetCard'; + +describe('PetCard', () => { + afterEach(cleanup); + + test('that it matches the existing snapshot', () => { + // Arrange-Act + const { asFragment } = render( { }} + selectPetCallback={() => { }} + />); + + // Assert + expect(asFragment()).toMatchSnapshot(); + }); + + test('The "selectPetCallback" function is called when the `select` button is clicked on', () => { + + // Arrange + // Create a mock callback function + const selectPet = jest.fn(); + + // Render a PetCard + const container = render( { }} + selectPetCallback={selectPet} + />); + + // Act + // Find the "Select" button + const selectButton = container.getByText(/Select/); + // Trigger a 'click' event + selectButton.click(); + + // Assert + // Verify that the callback function was called. + expect(selectPet).toHaveBeenCalled(); + }); +}); \ No newline at end of file diff --git a/src/components/test/__snapshots__/NewPetForm.test.js.snap b/src/components/test/__snapshots__/NewPetForm.test.js.snap new file mode 100644 index 0000000..3439733 --- /dev/null +++ b/src/components/test/__snapshots__/NewPetForm.test.js.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewPetForm that it matches the existing snapshot 1`] = ` + +
+

+ Add a Pet +

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+