change quote references => affirmation and add unit tests

README.md

@@ -1,4 +1,5 @@
 ### affirmation generator
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/ec8dd57a-9951-4166-bba9-bb5f99354b29/deploy-status)](https://app.netlify.com/sites/affectionate-jackson-f15dd5/deploys)
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)
 
@@ -9,19 +10,20 @@ Users can visit this site to view the collection thus far - an affirmation is ra
 ![App Screenshot](public/app-screenshot.png)
 
 ## How to Add Affirmations
-Additional affirmations can be submitted by editing to the [quotes.js](src/quotes.js) file.
+
+Additional affirmations can be submitted by editing to the [affirmations.js](src/affirmations.js) file.
 
 The basic object structure of an affirmation in this project is:
 
 ```
 {
-  quote:
+  affirmation:
     "",
   author: ""
 }
 ```
 
-See the [quotesTemplate.js](src/quoteTemplate.js) file for a further example of what should be added to the `quotes` array in the [quotes.js](src/quotes.js) file.
+See the [affirmationsTemplate.js](src/affirmationTemplate.js) file for a further example of what should be added to the `affirmations` array in the [affirmations.js](src/affirmations.js) file.
 
 ## Available Scripts
 

src/AffirmationComponent.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+import "./App.css";
+
+import affirmations from "./affirmations";
+
+export function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+}
+
+export function getAffirmation(index) {
+  return {
+    author: affirmations[index].author,
+    affirmation: affirmations[index].affirmation
+  };
+}
+
+export function generateAffirmation() {
+  const index = getRandomInt(affirmations.length);
+  const affirmation = getAffirmation(index);
+
+  return affirmation;
+}
+
+class AffirmationComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      affirmation: generateAffirmation()
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    this.setState({ affirmation: generateAffirmation() });
+  }
+
+  render() {
+    const affirmation = this.state.affirmation;
+    return (
+      <div className="Affirmation">
+        <blockquote className="affirmation">
+          {affirmation.affirmation}
+        </blockquote>
+        <p className="author-citation">{affirmation.author}</p>
+        <button onClick={this.handleClick}>Next Affirmation</button>
+      </div>
+    );
+  }
+}
+
+export default AffirmationComponent;

src/AffirmationComponent.test.js

@@ -0,0 +1,83 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import AffirmationComponent, {
+  getRandomInt,
+  generateAffirmation,
+  getAffirmation
+} from "./AffirmationComponent";
+
+const MOCK_AFFIRMATIONS = [
+  {
+    affirmation:
+      "If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you.",
+    author: "Winnie The Pooh"
+  },
+  {
+    affirmation: "OK. I’m thinking of something orange, and it’s small...",
+    author: "Dory"
+  }
+];
+
+jest.mock("./affirmations", () => {
+  const affirmations = [
+    {
+      affirmation:
+        "If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you.",
+      author: "Winnie The Pooh"
+    },
+    {
+      affirmation: "OK. I’m thinking of something orange, and it’s small...",
+      author: "Dory"
+    }
+  ];
+
+  return affirmations;
+});
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<AffirmationComponent />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+describe("getRandomInt()", () => {
+  it("returns a random number less than max of 10", () => {
+    const integer = getRandomInt(10);
+    expect(integer).toBeLessThanOrEqual(9);
+  });
+
+  it("returns a random number less than max of 3", () => {
+    const integer = getRandomInt(3);
+    expect(integer).toBeLessThanOrEqual(3);
+  });
+});
+
+describe("generateAffirmation()", () => {
+  it("should return a affirmation with an author and affirmation", () => {
+    const affirmation = generateAffirmation();
+
+    expect(affirmation).toStrictEqual(
+      expect.objectContaining({
+        author: expect.any(String),
+        affirmation: expect.any(String)
+      })
+    );
+  });
+});
+
+describe("getAffirmation()", () => {
+  it("should return a specific affirmation based on index", () => {
+    const affirmation = getAffirmation(1);
+
+    expect(affirmation).toStrictEqual({
+      author: MOCK_AFFIRMATIONS[1].author,
+      affirmation: MOCK_AFFIRMATIONS[1].affirmation
+    });
+
+    const affirmationAlt = getAffirmation(0);
+    expect(affirmationAlt).toStrictEqual({
+      author: MOCK_AFFIRMATIONS[0].author,
+      affirmation: MOCK_AFFIRMATIONS[0].affirmation
+    });
+  });
+});

src/App.css

@@ -1,4 +1,5 @@
-#root, .App {
+#root,
+.App {
   height: 100%;
 }
 
@@ -24,29 +25,29 @@
   color: #3e3d56;
 }
 
-blockquote {
+blockaffirmation {
   font-size: 1.5em;
   text-align: center;
   margin: 0 auto;
 }
 
-blockquote:before {
+blockaffirmation:before {
   color: #bb8989;
-  content: open-quote;
+  content: open-affirmation;
   font-size: 2em;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
 }
-blockquote:after {
+blockaffirmation:after {
   color: #bb8989;
-  content: close-quote;
+  content: close-affirmation;
   font-size: 2em;
   line-height: 0.1em;
   margin-left: 0.25em;
   vertical-align: -0.4em;
 }
-blockquote p {
+blockaffirmation p {
   display: inline;
 }
 
@@ -68,4 +69,4 @@ button:hover {
 
 .Affirmation {
   flex: 1;
-}
+}