setup: useState message

ShMcK · ShMcK · commit 38ee2a3de362 · 2019-12-24T09:58:38.000-08:00
diff --git a/src/components/Message/useState.js b/src/components/Message/useState.js
@@ -16,6 +16,8 @@ export const Message = props => {
     text
   } = props;
 
+  /* TODO: toggle retweet & favorite status & count on click */
+
   return (
     <Card
       className="Message"
@@ -37,7 +39,7 @@ export const Message = props => {
             <IconButton
               role="retweet"
               onClick={() => {
-                /* toggle retweet */
+                /* toggle retweet locally */
               }}
             >
               <Icon
@@ -51,7 +53,7 @@ export const Message = props => {
             <IconButton
               role="favorite"
               onClick={() => {
-                /* toggle favorite */
+                /* toggle favorite locally */
               }}
             >
               <Icon
diff --git a/src/stories/2-Message.stories.js b/src/stories/2-Message.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Message } from "../components/Message";
+import { Message } from "../components/Message/useState";
 import { USER } from "../config";
 
 export default {
@@ -8,17 +8,22 @@ export default {
 
 const now = new Date();
 
-export const message = () => {
-  const post = {
-    id: "1",
-    created_at: now.setMinutes(now.getMinutes() - 20),
-    text:
-      "A bunch of text here filling out the body of the tweet, might be really really long. Maybe even spans a few lines because its so long.",
-    user: USER,
-    retweeted: false,
-    retweet_count: 52,
-    favorited: false,
-    favorite_count: 101
-  };
+const post = {
+  id: "1",
+  created_at: now.setMinutes(now.getMinutes() - 20),
+  text:
+    "A bunch of text here filling out the body of the tweet, might be really really long. Maybe even spans a few lines because its so long.",
+  user: USER,
+  retweeted: false,
+  retweet_count: 52,
+  favorited: false,
+  favorite_count: 101
+};
+
+export const useStateMessage = () => {
   return <Message {...post} />;
 };
+
+useStateMessage.story = {
+  name: "useState example"
+};
diff --git a/src/tests/components/Message.test.js b/src/tests/components/Message.test.js
@@ -0,0 +1,62 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { Message } from "../../components/Message/useState";
+import { USER } from "../../config";
+
+const mockProps = {
+  user: USER,
+  text: "Some text",
+  created_at: new Date().toISOString(),
+  retweeted: false,
+  retweet_count: 12,
+  favorited: false,
+  favorite_count: 22
+};
+
+describe("Message", () => {
+  test("should display the initial favorite count", () => {
+    const utils = render(<Message {...mockProps} />);
+    const count = utils.getByTitle("favorite_count");
+    expect(count.textContent).toBe("22");
+  });
+
+  test("should increment the favorite count on click", () => {
+    const utils = render(<Message {...mockProps} />);
+    const button = utils.getByRole("favorite");
+    fireEvent.click(button);
+    const count = utils.getByTitle("favorite_count");
+    expect(count.textContent).toBe("23");
+  });
+
+  test("favoriting should return to initial count on second click", () => {
+    const utils = render(<Message {...mockProps} />);
+    const button = utils.getByRole("favorite");
+    fireEvent.click(button);
+    fireEvent.click(button);
+    const count = utils.getByTitle("favorite_count");
+    expect(count.textContent).toBe("22");
+  });
+
+  test("should display the initial retweet count", () => {
+    const utils = render(<Message {...mockProps} />);
+    const count = utils.getByTitle("retweet_count");
+    expect(count.textContent).toBe("12");
+  });
+
+  test("should increment the retweet count on click", () => {
+    const utils = render(<Message {...mockProps} />);
+    const button = utils.getByRole("retweet");
+    fireEvent.click(button);
+    const count = utils.getByTitle("retweet_count");
+    expect(count.textContent).toBe("13");
+  });
+
+  test("retweeting should return to initial count on second click", () => {
+    const utils = render(<Message {...mockProps} />);
+    const button = utils.getByRole("retweet");
+    fireEvent.click(button);
+    fireEvent.click(button);
+    const count = utils.getByTitle("retweet_count");
+    expect(count.textContent).toBe("12");
+  });
+});
