- Board
+
+ );
}
}
Board.propTypes = {
-
+ // cards: PropTypes.array.isRequired,
+ updateStatusCallback: PropTypes.func.isRequired
};
export default Board;
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
index e69de29b..f6650a3c 100644
--- a/src/components/Board.test.js
+++ b/src/components/Board.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Board from './Board';
+import { mount, shallow } from 'enzyme';
+
+describe ('Board', () => {
+ test('deep mount', () => {
+ const boardComponent = mount(
+
{} } />
+ );
+
+ expect(boardComponent).toMatchSnapshot();
+
+ boardComponent.unmount();
+ });
+
+ test('shallow mount', () => {
+ const boardComponent = shallow(
+ {} } />
+ );
+
+ expect(boardComponent).toMatchSnapshot();
+
+ });
+});
diff --git a/src/components/Card.css b/src/components/Card.css
index e86d4329..5d1e2c3a 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -44,4 +44,12 @@
.card__delete {
align-self: start;
font-family: 'Permanent Marker', Helvetica, sans-serif;
+ background-color: inherit;
+ border: none;
+ font-size: 1em;
+}
+
+.card__delete:hover {
+ font-size: 2rem;
+ color: orange;
}
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..4f2df8ec 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,21 +1,40 @@
-import React, { Component } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import emoji from 'emoji-dictionary';
import './Card.css';
-class Card extends Component {
- render() {
- return (
-
- Card
-
- )
+const Card = (props) => {
+
+ let onClickHandler = () => {
+ props.deleteCallback(props.index, props.id);
}
+
+ return (
+
+
+
+
+
+ {props.text}
+
+
+
+ {emoji.getUnicode(`${props.emoji}`)}
+
+
+
+ )
}
Card.propTypes = {
-
+ text: PropTypes.string,
+ emoji: PropTypes.string,
+ index: PropTypes.number,
+ id: PropTypes.number,
+ deleteCallback: PropTypes.func
};
export default Card;
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
new file mode 100644
index 00000000..5496baaa
--- /dev/null
+++ b/src/components/Card.test.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+describe ('Card', () => {
+ test('shallow mount', () => {
+ const cardComponent = shallow(
+ {} } />
+ );
+
+ expect(cardComponent).toMatchSnapshot();
+ });
+});
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..eb023792 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -3,4 +3,88 @@ 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"]
+
+const EMOJI_LIST = ["", "heart_eyes", "grin", "joy", "star_struck", "nerd_face", "kissing_heart",
+"grinning", "thinking", "hugs", "grimacing", "beer", "clap", "sparkling_heart", "heart_eyes_cat",
+"joy_cat", "smile_cat", "kissing_cat", "star", "clinking_glasses", "dog", "octopus", "woman_technologist"]
+
+class NewCardForm extends Component {
+ static propTypes = {
+ addCardCallback: PropTypes.func.isRequired,
+ }
+
+ constructor() {
+ super();
+
+ this.state = {
+ text: '',
+ emoji: ''
+ };
+ }
+
+ onInputChange = (event) => {
+ console.log('form submitted');
+
+ let updatedInput = {};
+
+ updatedInput[event.target.name] = event.target.value;
+
+ this.setState(updatedInput);
+ }
+
+ onFormSubmit = (event) => {
+ event.preventDefault();
+
+ console.log(this.state);
+ this.props.addCardCallback(this.state);
+
+ this.setState({
+ text: '',
+ emoji: ''
+ });
+ }
+
+
+ render() {
+
+ const emojiList = EMOJI_LIST.map((name, index) => {
+ return
+ });
+
+ return (
+
+ )
+ }
+
+}
+
+export default NewCardForm;
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index e69de29b..c528dfe5 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { mount, shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+ test('that it matches an existing snapshot', () => {
+ // First Mount the Component in the testing DOM
+ // Arrange
+ const wrapper = mount(
+ {} } />
+ );
+
+ // Assert that it looks like the last snapshot
+ expect(wrapper).toMatchSnapshot();
+
+ // Remove the component from the DOM (save memory and prevent side effects).
+ wrapper.unmount();
+ });
+
+ test('keeps track of user input', () => {
+ const value = "new text value";
+ const cardForm = shallow(
+ {} } />
+ );
+
+ let textInput = cardForm.find('input[name="text"]');
+
+ textInput.simulate('change', {
+ target: {
+ name: 'text',
+ value: value
+ }
+ });
+
+ cardForm.update();
+
+ textInput = cardForm.find('input[name="text"]');
+
+ expect(textInput.getElement().props.value).toBe(value);
+ });
+});
diff --git a/src/components/Status.js b/src/components/Status.js
new file mode 100644
index 00000000..c8859e4b
--- /dev/null
+++ b/src/components/Status.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Status extends React.Component {
+ static propTypes = {
+ message: PropTypes.string,
+ type: PropTypes.string
+ }
+
+
+ render() {
+
+
+ return (
+
+ {this.props.type === 'error' ? "There was a problem: " : ""}
+ {this.props.message}
+
+ );
+ }
+}
+
+
+export default Status;
diff --git a/src/components/Status.test.js b/src/components/Status.test.js
new file mode 100644
index 00000000..7510adfb
--- /dev/null
+++ b/src/components/Status.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import Status from './Status';
+import { shallow } from 'enzyme';
+
+describe ('Status', () => {
+ test('matches snapshot with error type', () => {
+ const statusComponent = shallow(
+
+ );
+
+ expect(statusComponent).toMatchSnapshot();
+
+ statusComponent.unmount();
+ });
+
+ test('matches snapshot with non-error type', () => {
+ const statusComponent = shallow(
+
+ );
+
+ expect(statusComponent).toMatchSnapshot();
+
+ statusComponent.unmount();
+ });
+});
diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap
new file mode 100644
index 00000000..a45953b0
--- /dev/null
+++ b/src/components/__snapshots__/Board.test.js.snap
@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board deep mount 1`] = `
+
+
+
+
+
+ Create new 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..c7ca8cd3
--- /dev/null
+++ b/src/components/__snapshots__/Card.test.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card 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..3829d95a
--- /dev/null
+++ b/src/components/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `
+
+
+
+ Create new card
+
+
+
+
+`;
diff --git a/src/components/__snapshots__/Status.test.js.snap b/src/components/__snapshots__/Status.test.js.snap
new file mode 100644
index 00000000..18e57767
--- /dev/null
+++ b/src/components/__snapshots__/Status.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Status matches snapshot with error type 1`] = `
+
+ There was a problem:
+ test status
+
+`;
+
+exports[`Status matches snapshot with non-error type 1`] = `
+
+`;
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"
diff --git a/src/setupTests.js b/src/setupTests.js
index fc7b0dce..82edfc9e 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1,4 +1,4 @@
-import Enzyme from 'enzyme';
+import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
-Enzyme.configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter() });