From d7f796b7905b860669ce8fd1856c94b5bec4c4be Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Mon, 11 Jun 2018 15:53:31 -0700 Subject: [PATCH 01/19] cards and emojis appear from hard-coded data --- src/App.js | 38 +++++++++++++++++++++++++++++++------- src/components/Board.js | 20 ++++++++++++++++---- src/components/Card.js | 9 +++++++-- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index c4854e15..cb83fe94 100644 --- a/src/App.js +++ b/src/App.js @@ -4,15 +4,39 @@ import Board from './components/Board'; class App extends Component { render() { + const boardData = [ + { + "card": { + "id": 93, + "text": "Go Get'em!", + "emoji": "beer" + } + }, + { + "card": { + "id": 58, + "text": "asdf", + "emoji": "beer" + } + }, + { + "card": { + "id": 57, + "text": "asdf", + "emoji": "heart_eyes_cat" + } + } + ]; return (
-
-

Inspiration Board

-
- +
+

Inspiration Board

+
+
); } diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..a06372bc 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,18 +8,30 @@ import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; class Board extends Component { - constructor() { + + constructor(props) { super(); this.state = { - cards: [], + cards: props.data, }; } render() { + const cards = this.state.cards.map((card, index) => { + return ( + + ); + }); + return (
- Board + { cards }
) } @@ -27,7 +39,7 @@ class Board extends Component { } Board.propTypes = { - + data: PropTypes.array.isRequired }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..d6897576 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,17 +5,22 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + render() { return (
- Card + {this.props.text} +
+ {emoji.getUnicode(`${this.props.emoji}`)}
) } } Card.propTypes = { - + id: PropTypes.number.isRequired, + text: PropTypes.string.isRequired, + emoji: PropTypes.string.isRequired }; export default Card; From d64e51be84825b0cc6f0a9658a7dbf785b1931ad Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Mon, 11 Jun 2018 17:02:08 -0700 Subject: [PATCH 02/19] remove hard-coded data and add status component --- src/App.js | 39 ++++++++------------------------------- src/components/Board.js | 32 +++++++++++++++++++++++++++++--- src/components/Status.js | 19 +++++++++++++++++++ 3 files changed, 56 insertions(+), 34 deletions(-) create mode 100644 src/components/Status.js diff --git a/src/App.js b/src/App.js index cb83fe94..b021af85 100644 --- a/src/App.js +++ b/src/App.js @@ -4,39 +4,16 @@ import Board from './components/Board'; class App extends Component { render() { - const boardData = [ - { - "card": { - "id": 93, - "text": "Go Get'em!", - "emoji": "beer" - } - }, - { - "card": { - "id": 58, - "text": "asdf", - "emoji": "beer" - } - }, - { - "card": { - "id": 57, - "text": "asdf", - "emoji": "heart_eyes_cat" - } - } - ]; + return (
-
-

Inspiration Board

-
- +
+

Inspiration Board

+
+
); } diff --git a/src/components/Board.js b/src/components/Board.js index a06372bc..2925a4ee 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -6,17 +6,38 @@ import './Board.css'; import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; +import Status from './Status'; class Board extends Component { - constructor(props) { + constructor() { super(); this.state = { - cards: props.data, + cards: [], + status: { + message: '', + type: '' + } }; } + componentDidMount() { + axios.get(`${this.props.url}${this.props.boardname}/cards`) + .then((response) => { + this.setState({ cards: response.data }); + }) + + .catch((error) => { + this.setState({ + status: { + message: `Failed to load messages: ${error.message}`, + type: 'error' + } + }) + }); + } + render() { const cards = this.state.cards.map((card, index) => { return ( @@ -31,6 +52,10 @@ class Board extends Component { return (
+ { cards }
) @@ -39,7 +64,8 @@ class Board extends Component { } Board.propTypes = { - data: PropTypes.array.isRequired + url: PropTypes.string.isRequired, + boardName: PropTypes.string.isRequired }; export default Board; diff --git a/src/components/Status.js b/src/components/Status.js new file mode 100644 index 00000000..05ea6aa1 --- /dev/null +++ b/src/components/Status.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class Status extends React.Component { + static propTypes = { + message: PropTypes.string, + type: PropTypes.string + } + + render() { + return( +
+ {this.props.message} +
+ ); + } +} + +export default Status; From fc0c895fc0b0784e54b84653b47b71b07b7fa612 Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Tue, 12 Jun 2018 11:16:43 -0700 Subject: [PATCH 03/19] Add statusCallback function and move status logic to App.js, fix url to display all cards --- src/App.js | 26 ++++++++++++++++++++++++++ src/components/Board.js | 24 ++++++------------------ 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index b021af85..11c4c53a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,29 @@ 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 ( @@ -10,9 +31,14 @@ class App extends Component {

Inspiration Board

+ ); diff --git a/src/components/Board.js b/src/components/Board.js index 2925a4ee..eec8cd4c 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -6,35 +6,26 @@ import './Board.css'; import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -import Status from './Status'; class Board extends Component { - constructor() { super(); this.state = { cards: [], - status: { - message: '', - type: '' - } }; } componentDidMount() { - axios.get(`${this.props.url}${this.props.boardname}/cards`) + this.props.updateStatusCallback('Loading the board...', 'success'); + axios.get(`${this.props.url}${this.props.boardName}/cards`) .then((response) => { + this.props.updateStatusCallback('Board successfully loaded', 'success'); this.setState({ cards: response.data }); }) .catch((error) => { - this.setState({ - status: { - message: `Failed to load messages: ${error.message}`, - type: 'error' - } - }) + this.props.updateStatusCallback(error.message, 'error'); }); } @@ -52,10 +43,6 @@ class Board extends Component { return (
- { cards }
) @@ -65,7 +52,8 @@ class Board extends Component { Board.propTypes = { url: PropTypes.string.isRequired, - boardName: PropTypes.string.isRequired + boardName: PropTypes.string.isRequired, + updateStatusCallback: PropTypes.func.isRequired }; export default Board; From 44cc23bb94355d4399ea0ba422fa449d77c0b26a Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Tue, 12 Jun 2018 21:08:21 -0700 Subject: [PATCH 04/19] add and delete cards --- src/App.js | 2 +- src/components/Board.js | 43 ++++++++++++++++++++-- src/components/Card.js | 23 ++++++++++-- src/components/NewCardForm.js | 69 ++++++++++++++++++++++++++++++++++- src/components/Status.js | 2 +- 5 files changed, 129 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index 11c4c53a..0ea1a255 100644 --- a/src/App.js +++ b/src/App.js @@ -37,7 +37,7 @@ class App extends Component { /> diff --git a/src/components/Board.js b/src/components/Board.js index eec8cd4c..be866039 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -17,11 +17,13 @@ class Board extends Component { } componentDidMount() { - this.props.updateStatusCallback('Loading the board...', 'success'); + this.props.updateStatusCallback(`Loading board: ${this.props.boardName}`, 'success'); axios.get(`${this.props.url}${this.props.boardName}/cards`) .then((response) => { this.props.updateStatusCallback('Board successfully loaded', 'success'); - this.setState({ cards: response.data }); + this.setState({ + cards: response.data + }); }) .catch((error) => { @@ -29,6 +31,39 @@ class Board extends Component { }); } + addCard = (newCard) => { + axios.post(`${this.props.url}${this.props.boardName}/cards`, newCard) + .then((response) => { + this.props.updateStatusCallback('New card successfully added', 'success'); + + let updatedCards = this.state.cards; + updatedCards.push({ + card: response.data.card + }); + + this.setState({ + cards: updatedCards + }); + }) + .catch((error) => { + this.props.updateStatusCallback('Card could not be added', 'error'); + }); + } + + deleteCard = (id) => { + axios.delete(`${this.props.url}${this.props.boardName}/cards/${id}`) + .then(() => { + let updatedCards = this.state.cards; + updatedCards.splice(id, 1); + this.setState({ + cards: updatedCards + }); + }) + .catch((error) => { + this.props.updateStatusCallback(`Card could not be deleted: ${error.message}`, 'error'); + }); + } + render() { const cards = this.state.cards.map((card, index) => { return ( @@ -37,12 +72,14 @@ class Board extends Component { id={card.card.id} text={card.card.text} emoji={card.card.emoji} + deleteCardCallback={this.deleteCard} /> ); }); return ( -
+
+ { cards }
) diff --git a/src/components/Card.js b/src/components/Card.js index d6897576..da5727a9 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -6,12 +6,26 @@ import './Card.css'; class Card extends Component { + deleteCard = () => { + this.props.deleteCardCallback(this.props.id); + } + render() { return (
- {this.props.text} -
- {emoji.getUnicode(`${this.props.emoji}`)} +
+
+ {this.props.text} +
+
+ {emoji.getUnicode(`${this.props.emoji}`)} +
+
+ +
+
) } @@ -20,7 +34,8 @@ class Card extends Component { Card.propTypes = { id: PropTypes.number.isRequired, text: PropTypes.string.isRequired, - emoji: PropTypes.string.isRequired + emoji: PropTypes.string.isRequired, + deleteCardCallback: PropTypes.func.isRequired }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..eb940c73 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,4 +3,71 @@ import PropTypes from 'prop-types'; 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 { + + constructor() { + super(); + + this.state = { + text: '', + emoji: '' + }; + } + + onInputChange = (event) => { + const key = event.target.name; + let value = event.target.value; + + let updatedInput = {}; + updatedInput[key] = value; + this.setState(updatedInput); + } + + onFormSubmit = (event) => { + this.props.addCardCallback(this.state); + this.setState({ + text: '', + emoji: '' + }); + } + + getEmojis = () => { + const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] + + const emojis = EMOJI_LIST.map((emojiText) => { + let emojiPicture = emoji.getUnicode(emojiText); + return ( + + ); + }); + return emojis + } + + render() { + return ( +
+

Compose a message:

+
+ + + + + + + + + +
+
+ ); + } + +} + +NewCardForm.propTypes = { + addCardCallback: PropTypes.func.isRequired, +} + +export default NewCardForm; diff --git a/src/components/Status.js b/src/components/Status.js index 05ea6aa1..f1a6e8bb 100644 --- a/src/components/Status.js +++ b/src/components/Status.js @@ -5,7 +5,7 @@ class Status extends React.Component { static propTypes = { message: PropTypes.string, type: PropTypes.string - } + }; render() { return( From eb211b9da6fcb45b5374a781fd376b6c02625c26 Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 13:41:52 -0700 Subject: [PATCH 05/19] Add preventDefault function to form submit --- src/components/Board.js | 4 ++-- src/components/NewCardForm.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index be866039..f8f54a53 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -20,7 +20,7 @@ class Board extends Component { this.props.updateStatusCallback(`Loading board: ${this.props.boardName}`, 'success'); axios.get(`${this.props.url}${this.props.boardName}/cards`) .then((response) => { - this.props.updateStatusCallback('Board successfully loaded', 'success'); + this.props.updateStatusCallback(`Board "${this.props.boardName}" successfully loaded` , 'success'); this.setState({ cards: response.data }); @@ -79,8 +79,8 @@ class Board extends Component { return (
- { cards } +
) } diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index eb940c73..84852cf5 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -24,6 +24,7 @@ class NewCardForm extends Component { } onFormSubmit = (event) => { + event.preventDefault(); this.props.addCardCallback(this.state); this.setState({ text: '', From 2da0790bdba978e3953068526a4109a93462b3b4 Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 13:58:41 -0700 Subject: [PATCH 06/19] add popup to confirm delete on card --- package-lock.json | 5 +++++ package.json | 1 + src/components/Card.js | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 0d789ea1..d5e2969b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8963,6 +8963,11 @@ "prop-types": "15.6.1" } }, + "react-confirm-alert": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-confirm-alert/-/react-confirm-alert-2.0.2.tgz", + "integrity": "sha1-hpHU8bEJ4LdAIv5NQs4Lf5hdGaU=" + }, "react-dev-utils": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz", diff --git a/package.json b/package.json index ba61363d..53c529fb 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "axios": "^0.18.0", "emoji-dictionary": "^1.0.9", "react": "^16.4.0", + "react-confirm-alert": "^2.0.2", "react-dom": "^16.4.0", "react-scripts": "1.1.4" }, diff --git a/src/components/Card.js b/src/components/Card.js index da5727a9..0dfc3906 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -21,7 +21,7 @@ class Card extends Component { {emoji.getUnicode(`${this.props.emoji}`)}
-
From d03cde8d36158349ac1998b7d284b4c3f2ba60dc Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 14:04:38 -0700 Subject: [PATCH 07/19] reload page after deleting card --- src/components/Board.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Board.js b/src/components/Board.js index f8f54a53..0d2b0f13 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -58,6 +58,7 @@ class Board extends Component { this.setState({ cards: updatedCards }); + window.location.reload(); }) .catch((error) => { this.props.updateStatusCallback(`Card could not be deleted: ${error.message}`, 'error'); From 6c1266ef15c814ae541b24b469f74d1d056946dc Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 14:10:53 -0700 Subject: [PATCH 08/19] add jest to package.json --- package-lock.json | 33 +++++++++++++++++++++------------ package.json | 4 ++++ src/components/Board.test.js | 8 ++++++++ 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index d5e2969b..c76a4564 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": { @@ -9010,9 +9019,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": { @@ -9213,15 +9222,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 53c529fb..483d105b 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,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/components/Board.test.js b/src/components/Board.test.js index e69de29b..5f30a289 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { shallow } from 'enzyme'; +import Board from './Board'; + +describe('Board', () => { + +}); From ea9e54e4ea983352abbb93a7f362ab0c29556a20 Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 14:23:08 -0700 Subject: [PATCH 09/19] Board.test.js --- src/components/Board.js | 2 +- src/components/Board.test.js | 7 +++++++ src/components/__snapshots__/Board.test.js.snap | 11 +++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/components/__snapshots__/Board.test.js.snap diff --git a/src/components/Board.js b/src/components/Board.js index 0d2b0f13..5892e4f6 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -58,7 +58,7 @@ class Board extends Component { this.setState({ cards: updatedCards }); - window.location.reload(); + window.location.reload(); }) .catch((error) => { this.props.updateStatusCallback(`Card could not be deleted: ${error.message}`, 'error'); diff --git a/src/components/Board.test.js b/src/components/Board.test.js index 5f30a289..b6644679 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -4,5 +4,12 @@ import { shallow } from 'enzyme'; import Board from './Board'; describe('Board', () => { + test('it will match the last snapshot', () => { + const board = shallow( + {}}/> + ); + expect(board).toMatchSnapshot(); + + }); }); diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..42dbc221 --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Board it will match the last snapshot 1`] = ` +
+ +
+`; From ef274df9ddcd24af87f0a1fdc8e6f5fea4f8507c Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 14:42:07 -0700 Subject: [PATCH 10/19] styling to status classes --- src/components/Status.css | 13 +++++++++++++ src/components/Status.js | 3 ++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/components/Status.css diff --git a/src/components/Status.css b/src/components/Status.css new file mode 100644 index 00000000..e5050cd4 --- /dev/null +++ b/src/components/Status.css @@ -0,0 +1,13 @@ +.success { + background-color: #98FB98; + padding: 1em; + border: 1px solid #006400; + color: #006400; +} + +.error { + background-color: #FF6347; + padding: 1em; + border: 1px solid #800000; + color: #800000; +} diff --git a/src/components/Status.js b/src/components/Status.js index f1a6e8bb..9c4c5d6b 100644 --- a/src/components/Status.js +++ b/src/components/Status.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import './Status.css'; class Status extends React.Component { static propTypes = { @@ -9,7 +10,7 @@ class Status extends React.Component { render() { return( -
+
{this.props.message}
); From 58adc5864ed03fb2da16784f9ad34ea6cea8c12c Mon Sep 17 00:00:00 2001 From: Samantha Berk Date: Wed, 13 Jun 2018 14:54:02 -0700 Subject: [PATCH 11/19] NewCardForm snapshot tests --- src/components/NewCardForm.test.js | 33 +++++++ .../__snapshots__/NewCardForm.test.js.snap | 88 +++++++++++++++++++ 2 files changed, 121 insertions(+) create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..f0256926 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,33 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { shallow } from 'enzyme'; +import NewCardForm from './NewCardForm'; + +describe('NewCardForm', () => { + test('it will match the last snapshot', () => { + const newCardForm = shallow( + {}}/> + ); + + expect(newCardForm).toMatchSnapshot(); + + }); + + test('it invokes a callback when form is submitted', () => { + const callback = jest.fn(); + const newCardForm = shallow( + + ); + + newCardForm.find('form').simulate('submit', { + preventDefault: () => {} + }); + + expect(callback).toHaveBeenCalled(); + expect(callback.mock.calls[0][0]).toEqual({ + text: '', + emoji: '' + }); + + }); +}); diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..74878cfa --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,88 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm it will match the last snapshot 1`] = ` +
+

+ Compose a message: +

+
+ +