commit inicial

package.json

@@ -6,7 +6,6 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -39,5 +38,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "description": "`npm install` ou `yarn install`",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "jest": "^27.5.1"
   }
 }

src/components/Post/__test__/Post.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import Post from ".."; // Importa o componente
+
+describe("Teste para o componente Post", () => {
+  test("Deve renderizar corretamente", () => {
+    // Aqui renderizo o componente com os dados necessários
+    render(<Post imageUrl="https://via.placeholder.com/250x250">Teste</Post>);
+
+    // Verifica se o texto do post está presente
+    expect(screen.getByText("Teste")).toBeInTheDocument();
+
+    // Verifica se a imagem do post está presente e possui o atributo src correto
+    const postImage = screen.getByAltText("Post");
+    expect(postImage).toBeInTheDocument();
+    expect(postImage).toHaveAttribute(
+      "src",
+      "https://via.placeholder.com/250x250"
+    );
+
+    // Verifica se o componente PostComments está presente
+    expect(screen.getByTestId("post-comments")).toBeInTheDocument();
+  });
+});

src/components/Post/index.tsx

@@ -1,19 +1,21 @@
-import styles from './Post.module.css';
-
-import PostComments from '../PostComments';
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
+import PostComments from "../PostComments";
+import styles from "./Post.module.css";
 
 type Props = {
-    children: ReactNode;
-    imageUrl: string;
-}
+  children: ReactNode;
+  imageUrl: string;
+};
 
 const Post = ({ children, imageUrl }: Props) => (
-    <div className={styles.post}>
-        <img className={styles['post-image']} src={imageUrl} />
-        <p className={styles['post-text']}> {children} </p>
-        <PostComments />
+  <div className={styles.post}>
+    <img className={styles["post-image"]} src={imageUrl} alt="Post" />
+    <p className={styles["post-text"]}> {children} </p>
+    <div data-testid="post-comments-wrapper">
+      <PostComments />
     </div>
+  </div>
 );
 
-export default Post;
+export default Post;
+

src/components/PostComments/__test__/PostComments.test.tsx

@@ -0,0 +1,47 @@
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import PostComments from ".."; // Importo o componente
+
+describe("Teste para o componente PostComments", () => {
+  test("Deve adicionar dois comentários corretamente", () => {
+    render(<PostComments />);
+
+    // Encontro o textarea para comentários
+    const commentTextarea = screen.getByRole("textbox");
+
+    // Digitando o primeiro comentário
+    fireEvent.change(commentTextarea, {
+      target: { value: "Primeiro comentário" },
+    });
+
+    // Verifica se o texto foi digitado corretamente
+    expect(commentTextarea).toHaveValue("Primeiro comentário");
+
+    // Encontra o botão de enviar comentário
+    const submitButton = screen.getByRole("button", { name: /comentar/i });
+
+    // Clica no botão de enviar comentário
+    fireEvent.click(submitButton);
+
+    // Verifica se o comentário foi adicionado à lista
+    expect(screen.getByText("Primeiro comentário")).toBeInTheDocument();
+
+    // Digita agora o segundo comentário
+    fireEvent.change(commentTextarea, {
+      target: { value: "Segundo comentário" },
+    });
+
+    // Verifica se o texto foi digitado corretamente
+    expect(commentTextarea).toHaveValue("Segundo comentário");
+
+    // Clica novamente no botão de enviar comentário
+    fireEvent.click(submitButton);
+
+    // Verifica se o segundo comentário foi adicionado à lista
+    expect(screen.getByText("Segundo comentário")).toBeInTheDocument();
+
+    // Verifica se ambos os comentários estão presentes
+    expect(screen.getAllByTestId("post-comment")).toHaveLength(2);
+  });
+});

src/components/PostComments/index.tsx

@@ -1,38 +1,47 @@
-import { FormEvent, useState } from 'react';
-import styles from './PostComments.module.css';
+import { FormEvent, useState } from "react";
+import Comment from "../../models/Comment";
+import styles from "./PostComments.module.css";
 
-import Comment from '../../models/Comment';
+const PostComments = () => {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [tempComment, setTempComment] = useState("");
 
-const Post = () => {
-    const [comments, setComments] = useState<Comment[]>([]);
-    const [tempComment, setTempComment] = useState('');
+  function handleAddComment(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const newComment = new Comment(comments.length, tempComment);
+    setTempComment("");
+    setComments([...comments, newComment]);
+  }
 
-    function handleAddComment(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        const newComment = new Comment(comments.length, tempComment);
-        setTempComment('');
-        setComments([...comments, newComment]);
-    }
+  return (
+    <div>
+      <ul className={styles["post-comments"]} data-testid="post-comments">
+        {comments.map(({ comment, id }) => (
+          <li
+            className={styles["post-comment"]}
+            key={id}
+            data-testid="post-comment"
+          >
+            <p className={styles["post-comment-content"]}>{comment}</p>
+          </li>
+        ))}
+      </ul>
+      <form
+        onSubmit={handleAddComment}
+        className={styles["post-comments-form"]}
+      >
+        <textarea
+          value={tempComment}
+          onChange={(e) => setTempComment(e.target.value)}
+          required
+          className={styles["post-comments-form-textarea"]}
+        />
+        <button type="submit" className={styles["post-comments-form-button"]}>
+          Comentar
+        </button>
+      </form>
+    </div>
+  );
+};
 
-    return (
-        <div>
-            <ul className={styles['post-comments']}>
-                {comments.map(({ comment, id }) => (
-                    <li className={styles['post-comment']} key={id}>
-                        <p className={styles['post-comment-content']}>
-                            {comment}
-                        </p>
-                    </li>
-                ))}
-            </ul>
-            <form onSubmit={handleAddComment} className={styles['post-comments-form']}>
-                <textarea value={tempComment} onChange={e => setTempComment(e.target.value)} required className={styles['post-comments-form-textarea']} />
-                <button type="submit" className={styles['post-comments-form-button']}>
-                    Comentar
-                </button>
-            </form>
-        </div>
-    );
-}
-
-export default Post;
+export default PostComments;