From 1f523d190f3de953505728ba1d42ec6aac7552a4 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Mon, 11 Jun 2018 15:00:28 -0700 Subject: [PATCH 01/10] Setting upstream and json file correction --- src/data/card-data.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/card-data.json b/src/data/card-data.json index 1f9793ec..068e019d 100644 --- a/src/data/card-data.json +++ b/src/data/card-data.json @@ -6,7 +6,7 @@ }, { "text": "", - "Emoji": "heart_eyes" + "emoji": "heart_eyes" }, { "text": "REST is part of work" From 7dac465575e56cbde7dfb97a30eddfeca6a964f4 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Mon, 11 Jun 2018 16:58:32 -0700 Subject: [PATCH 02/10] Manually added cards in board --- src/components/Board.js | 20 ++++++++++++++++++-- src/components/Card.js | 11 ++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..ef869304 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -12,14 +12,30 @@ class Board extends Component { super(); this.state = { - cards: [], + cards: [{ + "text": "Make sure you pet a dog this week!" + }], }; } render() { + console.log("I'm inside!"); + + const attr_cards = this.state.cards + + const cards = attr_cards.map((card, index) => { + console.log("inside cards"); + return + }); + return (
- Board + Board + + + { cards } + +
) } diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..126f9f23 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -6,16 +6,25 @@ import './Card.css'; class Card extends Component { render() { + console.log("HIIIII"); return (
Card + + + {this.props.text} + {this.props.emoji} + + +
) } } Card.propTypes = { - + text: PropTypes.string.isRequired, + emoji: PropTypes.string.isRequired }; export default Card; From 59a52aad4146e3e2fd0a2cf87d1b57bce706c623 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Tue, 12 Jun 2018 07:30:18 -0700 Subject: [PATCH 03/10] emojis and individual cards showing --- src/components/Board.js | 37 +++++++++++++++++++++++++------------ src/components/Card.js | 15 ++++++--------- 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index ef869304..d4e78606 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,35 +7,48 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; +const BOARDS_URL = 'https://inspiration-board.herokuapp.com/boards/Ada-Lovelace/cards'; + class Board extends Component { constructor() { super(); this.state = { - cards: [{ - "text": "Make sure you pet a dog this week!" - }], + cards: [], }; } + componentDidMount() { + axios.get(BOARDS_URL) + .then((response)=> { + console.log("waz happnin"); + console.log(response); + + const data = response.data.slice(0,100); + this.setState({cards: data}) + }) + .catch((error) => { + this.setState({ error: error.message}) + }) + } + render() { console.log("I'm inside!"); - const attr_cards = this.state.cards + const attrCards = this.state.cards + // const attr_cards = CARD_DATA["cards"] - const cards = attr_cards.map((card, index) => { - console.log("inside cards"); - return + const cards = attrCards.map((cardInfo, index) => { + console.log("inside card mapping"); + return }); return (
Board - - - { cards } - -
+ + { cards } +
) } diff --git a/src/components/Card.js b/src/components/Card.js index 126f9f23..45b00698 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -6,17 +6,14 @@ import './Card.css'; class Card extends Component { render() { - console.log("HIIIII"); + const emojis = this.props.emoji + return (
- Card - - - {this.props.text} - {this.props.emoji} - - + Card + {this.props.text} + {emoji.getUnicode(`${emojis}`)}
) } @@ -24,7 +21,7 @@ class Card extends Component { Card.propTypes = { text: PropTypes.string.isRequired, - emoji: PropTypes.string.isRequired + emoji: PropTypes.string }; export default Card; From 7a14b8e8cd471dd9845b1e17b3a3065e075aa556 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Wed, 13 Jun 2018 14:24:55 -0700 Subject: [PATCH 04/10] Don't know last time I pushed --- src/App.js | 4 ++++ src/components/Board.js | 34 +++++++++++++++++++++++++++++++--- src/components/Card.js | 12 ++++++++++++ src/components/NewCardForm.js | 17 +++++++++++++++++ 4 files changed, 64 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index c4854e15..d4c2e0f2 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,10 @@ class App extends Component {

Inspiration Board

+
+ +
{ + // console.log(card.id); + axios.delete(`${DELETE_URL}${cardId}`) + .then((response) => { + console.log(response); + for (let i = 0; i < this.state.cards.length; i++) { + if (this.state.cards[i].card.id === cardId) { + this.state.cards.splice(i, 1); + this.setState({cards: this.state.cards}); + break; + } + } + + }) + .catch((error) => { + this.setState({ error: error.message }) + }) + } + componentDidMount() { axios.get(BOARDS_URL) .then((response)=> { @@ -32,6 +55,7 @@ class Board extends Component { }) } + render() { console.log("I'm inside!"); @@ -40,7 +64,11 @@ class Board extends Component { const cards = attrCards.map((cardInfo, index) => { console.log("inside card mapping"); - return + return }); return ( @@ -56,7 +84,7 @@ class Board extends Component { } Board.propTypes = { - + deleteCard: PropTypes.func.isRequired }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 45b00698..1d464d15 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,6 +5,12 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + + deleteOnSubmit = (event) => { + // console.log(this.props.id); + this.props.onDeleteCard(this.props.id); + } + render() { const emojis = this.props.emoji @@ -12,8 +18,14 @@ class Card extends Component {
Card + {this.props.id} {this.props.text} {emoji.getUnicode(`${emojis}`)} + + +
) } diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..063b6a71 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,20 @@ import emoji from 'emoji-dictionary'; import './NewCardForm.css'; const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] + +class NewCardForm extends Component { + static propTypes = { + + }; + + constructor() { + super(); + + this.state = { + text: '', + emoji: '' + } + + + } +} From 3366c979236e8c524c9f334fba486fa18ef27425 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Thu, 14 Jun 2018 00:03:42 -0700 Subject: [PATCH 05/10] Form message input up but not adding to collection --- src/App.js | 7 ++---- src/components/Board.js | 37 +++++++++++++++++++++++++------- src/components/NewCardForm.js | 40 ++++++++++++++++++++++++++++++++++- 3 files changed, 70 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index d4c2e0f2..fa1bab7b 100644 --- a/src/App.js +++ b/src/App.js @@ -9,13 +9,10 @@ class App extends Component {

Inspiration Board

-
- -
+ ); diff --git a/src/components/Board.js b/src/components/Board.js index efed1c7a..70bda6cb 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,11 +7,11 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const BOARDS_URL = 'https://inspiration-board.herokuapp.com/boards/marylamkin/cards'; +const BOARDS_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards'; -const DELETE_URL = 'https://inspiration-board.herokuapp.com/boards/Ada-Lovelace/cards/'; +const DELETE_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards/'; -const CARD_URL = 'https://inspiration-board.herokuapp.com/boards/:board_name/cards'; +const CARD_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards'; class Board extends Component { constructor() { @@ -25,7 +25,7 @@ class Board extends Component { deleteCard = (cardId) => { // console.log(card.id); axios.delete(`${DELETE_URL}${cardId}`) - .then((response) => { + .then((response) => { console.log(response); for (let i = 0; i < this.state.cards.length; i++) { if (this.state.cards[i].card.id === cardId) { @@ -35,9 +35,22 @@ class Board extends Component { } } - }) - .catch((error) => { - this.setState({ error: error.message }) + }) + .catch((error) => { + this.setState({ error: error.message }) + }) + } + + addCard = (card) => { + console.log("adding card"); + axios.post(CARD_URL, card) + .then((response) => { + console.log(response); + + let updatedCards = this.state.cards; + updatedCards.push(card); + + this.setState({ cards: updatedCards }); }) } @@ -72,12 +85,20 @@ class Board extends Component { }); return ( + +
+ +
+ +
+
Board { cards } -
+ +
) } diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 063b6a71..808f4347 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -7,7 +7,7 @@ const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_ class NewCardForm extends Component { static propTypes = { - + addCardCallback: PropTypes.func.isRequired }; constructor() { @@ -17,7 +17,45 @@ class NewCardForm extends Component { text: '', emoji: '' } + } + + onInputChange = (event) => { + let updatedInput = {}; + updatedInput[event.target.text] = event.target.value; + + this.setState(updatedInput) +; } + + onFormSubmit = (event) => { + event.preventDefault(); + console.log("on form submit"); + this.props.addCardCallback(this.state); + console.log(this.state); + this.setState({ + text: '', + emoji: '' + }); + console.log(this.state); + } + + render() { + return ( +
+
+ + +
+
+
+
+ ); } } + +export default NewCardForm; From 2352bb7729032c73da8ac8e8f07bde9709e7fafd Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Thu, 14 Jun 2018 13:28:27 -0700 Subject: [PATCH 06/10] Adding card to board --- src/components/NewCardForm.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 808f4347..74b62ec3 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -20,10 +20,10 @@ class NewCardForm extends Component { } onInputChange = (event) => { - let updatedInput = {}; - updatedInput[event.target.text] = event.target.value; + // let updatedInput = {}; + // updatedInput["text"] = event.target.value; - this.setState(updatedInput) + this.setState({text: event.target.value}) ; } onFormSubmit = (event) => { From dc00b8a6d75f5898f7fbfc114e132fe311a87ef5 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Thu, 14 Jun 2018 14:46:30 -0700 Subject: [PATCH 07/10] Adding and deleting correctly --- src/components/Board.js | 17 ++++++++++------- src/components/NewCardForm.js | 3 +++ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 70bda6cb..8be49fb3 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -11,6 +11,8 @@ const BOARDS_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards' const DELETE_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards/'; + // https://inspiration-board.herokuapp.com/boards/:board_name/cards/:card_id + const CARD_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards'; class Board extends Component { @@ -23,7 +25,8 @@ class Board extends Component { } deleteCard = (cardId) => { - // console.log(card.id); + console.log( "This is card:"+ cardId); + console.log(`${DELETE_URL}${cardId}`); axios.delete(`${DELETE_URL}${cardId}`) .then((response) => { console.log(response); @@ -31,6 +34,8 @@ class Board extends Component { if (this.state.cards[i].card.id === cardId) { this.state.cards.splice(i, 1); this.setState({cards: this.state.cards}); + + console.log(`deleting card ${this.state.cards[i].card.id}`); break; } } @@ -45,10 +50,10 @@ class Board extends Component { console.log("adding card"); axios.post(CARD_URL, card) .then((response) => { - console.log(response); + console.log("THIS IS RESPONSE",response); let updatedCards = this.state.cards; - updatedCards.push(card); + updatedCards.push(response.data); this.setState({ cards: updatedCards }); }) @@ -57,7 +62,7 @@ class Board extends Component { componentDidMount() { axios.get(BOARDS_URL) .then((response)=> { - console.log("waz happnin"); + console.log("getting board data"); console.log(response); const data = response.data.slice(0,100); @@ -70,10 +75,8 @@ class Board extends Component { render() { - console.log("I'm inside!"); - const attrCards = this.state.cards - // const attr_cards = CARD_DATA["cards"] + console.log("attr cards: ", attrCards); const cards = attrCards.map((cardInfo, index) => { console.log("inside card mapping"); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 74b62ec3..152ce3c6 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -51,6 +51,9 @@ class NewCardForm extends Component { value={this.state.text} onChange={this.onInputChange}/> + + +
From 72cdcb25f6bebcf57a8e06c445597a327a095f93 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Thu, 14 Jun 2018 16:20:44 -0700 Subject: [PATCH 08/10] Completed dropdown for emoji form --- src/components/NewCardForm.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 152ce3c6..012bf808 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -40,7 +40,16 @@ class NewCardForm extends Component { console.log(this.state); } + // {EMOJI_LIST.map(function(emoji, index){ + // return + // })} + + // + render() { + const emojiList = EMOJI_LIST.map((emojiWord, index) => { + return }) + return (
@@ -52,10 +61,21 @@ class NewCardForm extends Component { onChange={this.onInputChange}/>
- - +
+ + +
+

+

); } From 40702b631cc4779f553b246074b42ae35547f33a Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Fri, 15 Jun 2018 17:27:56 -0700 Subject: [PATCH 09/10] Added status messages --- package-lock.json | 33 ++++--- package.json | 4 + src/App.js | 28 +++++- src/components/Board.css | 1 + src/components/Board.js | 16 +-- src/components/Board.test.js | 23 +++++ src/components/NewCardForm.css | 1 + src/components/NewCardForm.js | 58 ++++++----- src/components/NewCardForm.test.js | 15 +++ src/components/Status.js | 23 +++++ .../__snapshots__/Board.test.js.snap | 14 +++ .../__snapshots__/NewCardForm.test.js.snap | 97 +++++++++++++++++++ 12 files changed, 263 insertions(+), 50 deletions(-) create mode 100644 src/components/Status.js create mode 100644 src/components/__snapshots__/Board.test.js.snap create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/package-lock.json b/package-lock.json index 0d789ea1..dbb0a44c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@types/node": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.0.tgz", - "integrity": "sha512-hWzNviaVFIr1TqcRA8ou49JaSHp+Rfabmnqg2kNvusKqLhPU0rIsGPUj5WJJ7ld4Bb7qdgLmIhLfCD1qS08IVA==", + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz", + "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ==", "dev": true }, "abab": { @@ -2961,7 +2961,7 @@ "object.values": "1.0.4", "prop-types": "15.6.1", "react-reconciler": "0.7.0", - "react-test-renderer": "16.4.0" + "react-test-renderer": "16.4.1" } }, "enzyme-adapter-utils": { @@ -2975,6 +2975,15 @@ "prop-types": "15.6.1" } }, + "enzyme-to-json": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz", + "integrity": "sha1-Z8YEDpMRgvGDQYry659DIyWKp38=", + "dev": true, + "requires": { + "lodash": "4.17.10" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -7399,7 +7408,7 @@ "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", "dev": true, "requires": { - "@types/node": "10.3.0" + "@types/node": "10.3.3" } }, "parseurl": { @@ -9005,9 +9014,9 @@ "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, "react-is": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.0.tgz", - "integrity": "sha512-8ADZg/mBw+t2Fbr5Hm1K64v8q8Q6E+DprV5wQ5A8PSLW6XP0XJFMdUskVEW8efQ5oUgWHn8EYdHEPAMF0Co6hA==", + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.1.tgz", + "integrity": "sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==", "dev": true }, "react-reconciler": { @@ -9208,15 +9217,15 @@ } }, "react-test-renderer": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.0.tgz", - "integrity": "sha512-Seh1t9xFY6TKiV/hRlPzUkqX1xHOiKIMsctfU0cggo1ajsLjoIJFL520LlrxV+4/VIj+clrCeH6s/aVv/vTStg==", + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz", + "integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==", "dev": true, "requires": { "fbjs": "0.8.16", "object-assign": "4.1.1", "prop-types": "15.6.1", - "react-is": "16.4.0" + "react-is": "16.4.1" } }, "read-pkg": { diff --git a/package.json b/package.json index ba61363d..8c570fd7 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,11 @@ "devDependencies": { "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", + "enzyme-to-json": "^3.3.4", "gh-pages": "^1.2.0" }, + "jest": { + "snapshotSerializers": ["enzyme-to-json/serializer"] + }, "homepage": "http://adagold.github.io/inspiration-board" } diff --git a/src/App.js b/src/App.js index fa1bab7b..00a7ab52 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,42 @@ import React, { Component } from 'react'; import './App.css'; import Board from './components/Board'; +import Status from './components/Status'; class App extends Component { + constructor() { + super(); + + this.state= { + status: { + message: 'Loaded the page', + type: 'success' + } + } + } + + updateStatus = (message, type) => { + this.setState({ + status: { + message: message, + type: type + } + }) + } + render() { return (
+ +

Inspiration Board

- diff --git a/src/components/Board.css b/src/components/Board.css index ba21589d..6a1e81bb 100644 --- a/src/components/Board.css +++ b/src/components/Board.css @@ -1,6 +1,7 @@ .board { display: flex; flex-wrap: wrap; + justify-content: center; } .validation-errors-display { diff --git a/src/components/Board.js b/src/components/Board.js index 8be49fb3..4eaf5f87 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -11,8 +11,6 @@ const BOARDS_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards' const DELETE_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards/'; - // https://inspiration-board.herokuapp.com/boards/:board_name/cards/:card_id - const CARD_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards'; class Board extends Component { @@ -60,16 +58,22 @@ class Board extends Component { } componentDidMount() { + this.props.updateStatusCallback('Loading cards...', 'success'); + axios.get(BOARDS_URL) .then((response)=> { console.log("getting board data"); console.log(response); + this.props.updateStatusCallback('Successfully loaded cards!', 'success'); + const data = response.data.slice(0,100); this.setState({cards: data}) }) .catch((error) => { - this.setState({ error: error.message}) + console.log(error); + // this.setState({ error: error.message}) + this.props.updateStatusCallback(error.message, 'error'); }) } @@ -95,8 +99,7 @@ class Board extends Component { -
- Board +
{ cards }
@@ -108,7 +111,8 @@ class Board extends Component { } Board.propTypes = { - deleteCard: PropTypes.func.isRequired + deleteCard: PropTypes.func.isRequired, + updateStatusCallback: PropTypes.func.isRequired }; export default Board; diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..e73ab7e8 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import Board from './Board'; +import { mount, shallow } from 'enzyme'; + +describe('Board', () => { + test('deep mount', () => { + const petCollection = mount( + {}} /> + ); + + expect(board).toMatchSnapshot(); + + board.unmount(); + }); + + test('shallow mount', () => { + const board = shallow( + {}} /> + ); + + expect(board).toMatchSnapshot(); + }); +}); diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index d11b9ad4..d277b5e5 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -4,6 +4,7 @@ width: 50%; margin: auto; padding-bottom: 4rem; + background-color: lightblue; } .new-card-form__header { diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 012bf808..802a09df 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -20,9 +20,6 @@ class NewCardForm extends Component { } onInputChange = (event) => { - // let updatedInput = {}; - // updatedInput["text"] = event.target.value; - this.setState({text: event.target.value}) ; } @@ -40,42 +37,41 @@ class NewCardForm extends Component { console.log(this.state); } - // {EMOJI_LIST.map(function(emoji, index){ - // return - // })} - - // - render() { const emojiList = EMOJI_LIST.map((emojiWord, index) => { return }) return ( -
-
- - -
+ -
- - +
Add a card
-

-
+ +
+ + +
+ +
+ + +
+ +
-

); } diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..9a38a6b0 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,15 @@ +import React from 'react'; +import NewCardForm from './NewCardForm'; +import { mount } from 'enzyme'; + +describe('NewCardForm', () => { + test('that it matches an existing snapshot', () => { + // Arrange: First Mount the Component in the testing DOM + const wrapper = mount( {} } />); + + // Asserts that looks like last snapshot + expect(wrapper).toMatchSnapshot(); + + wrapper.unmount(); + }); +}); diff --git a/src/components/Status.js b/src/components/Status.js new file mode 100644 index 00000000..cc8a0afe --- /dev/null +++ b/src/components/Status.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +class Status extends React.Component { + static propTypes = { + message: PropTypes.string, + type: PropTypes.string + } + render() { + let prefix = ''; + if (this.props.type === 'error') { + prefix = "There was a problem: "; + } + return ( +
+ {prefix} + {this.props.message} +
+ ); + } +} + +export default Status; diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..6e782b5e --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Board shallow mount 1`] = ` +
+
+ +
+
+
+`; diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..75e6637e --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,97 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm that it matches an existing snapshot 1`] = ` + +
+
+ Add a card +
+
+ + +
+
+ + +
+
+ +
+
+ +`; From 2f315fb4484b0549dcb909e126bc0e89ddd08e43 Mon Sep 17 00:00:00 2001 From: emilcecarlisa Date: Sat, 16 Jun 2018 20:00:24 -0700 Subject: [PATCH 10/10] Added tests to Card, Board, and App components --- src/components/Board.test.js | 24 ++- src/components/Card.test.js | 17 ++ src/components/NewCardForm.js | 37 ++-- .../__snapshots__/Board.test.js.snap | 178 ++++++++++++++++++ .../__snapshots__/Card.test.js.snap | 8 + 5 files changed, 244 insertions(+), 20 deletions(-) create mode 100644 src/components/Card.test.js create mode 100644 src/components/__snapshots__/Card.test.js.snap diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e73ab7e8..dfd269bc 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -2,9 +2,11 @@ import React from 'react'; import Board from './Board'; import { mount, shallow } from 'enzyme'; +import NewCardForm from './NewCardForm'; + describe('Board', () => { - test('deep mount', () => { - const petCollection = mount( + test('shallow mount', () => { + const board = shallow( {}} /> ); @@ -13,11 +15,21 @@ describe('Board', () => { board.unmount(); }); - test('shallow mount', () => { - const board = shallow( - {}} /> + test('render a new card form', () =>{ + const form = shallow( + ); + expect(form).toMatchSnapshot(); + }); - expect(board).toMatchSnapshot(); + test('render a new card form', () =>{ + const form = shallow( + {}} /> + ); + + expect(form).toMatchSnapshot(); + + form.unmount(); }); + }); diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..de8c69f2 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,17 @@ +import React from 'react'; +import Card from './Card'; +import { mount, shallow } from 'enzyme'; + +describe('Card', () => { + test('onClick handler working', () => { + // const textValue = 'Encouraging message'; + const onClick = jest.fn(); + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + + wrapper.find('button').simulate('click'); + }) +}) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 802a09df..f34f6890 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -20,8 +20,17 @@ class NewCardForm extends Component { } onInputChange = (event) => { - this.setState({text: event.target.value}) -; } + // this doesn't work for multiple keys + // this.setState({ + // text: event.target.value, + // emoji: event.target.value}); + const key = event.target.name; + let value = event.target.value; + + const updatedInput= {}; + updatedInput[key] = value; + this.setState(updatedInput); + } onFormSubmit = (event) => { event.preventDefault(); @@ -39,7 +48,7 @@ class NewCardForm extends Component { render() { const emojiList = EMOJI_LIST.map((emojiWord, index) => { - return }) + return }) return (
@@ -47,28 +56,28 @@ class NewCardForm extends Component {
Add a card
-
-
+
-
-
+ +
diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap index 6e782b5e..eb5a2ace 100644 --- a/src/components/__snapshots__/Board.test.js.snap +++ b/src/components/__snapshots__/Board.test.js.snap @@ -1,5 +1,183 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Board render a new card form 1`] = ` + +
+ Add a card +
+
+ + +
+
+ + +
+
+ +
+ +`; + +exports[`Board render a new card form 2`] = ` +
+
+ Add a card +
+
+ + +
+
+ + +
+
+ +
+
+`; + exports[`Board shallow mount 1`] = `
diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..ed74262c --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card onClick handler working 1`] = ` +