Workintech · CeylinYasar · Jan 26, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -15,10 +15,10 @@ Bu modülde react-testing kütüphanesi temeli ile entegrasyon testi metodolojis
 
 Bu projede React ile oluşturulmuş bir İletişim Formuna testler yazacaksınız.
 
-Bir geliştirici olarak, her bileşen için testler yazacaksınız. Öğrendiğimiz gibi, testler yazılımların çok önemli bir parçasıdır. 
+Bir geliştirici olarak, her bileşen için testler yazacaksınız. Öğrendiğimiz gibi, testler yazılımların çok önemli bir parçasıdır.
 Yazacağınız testler, productiona pushladığınız koda güvenmenize yardımcı olacaktır!
 
-***Görevlerinizi birer birer tamamladığınızdan ve ilerlemeden önce her bir görevi test ettiğinizden emin olun.***
+**_Görevlerinizi birer birer tamamladığınızdan ve ilerlemeden önce her bir görevi test ettiğinizden emin olun._**
 
 ## Talimatlar
 
@@ -34,21 +34,21 @@ Yazacağınız testler, productiona pushladığınız koda güvenmenize yardımc
 
 ### Görev 2: Proje Gereksinimleri
 
-> *Bugünkü tüm işiniz IletisimFormu.test.js dosyası içinde. IletisimFormu bileşeni üzerinde farklı parçalar üzerine 9 adet test kodu yazmayla görevlendirildiniz. Tüm testler için talimatları dikkatlice okuyunuz.*
+> _Bugünkü tüm işiniz IletisimFormu.test.js dosyası içinde. IletisimFormu bileşeni üzerinde farklı parçalar üzerine 9 adet test kodu yazmayla görevlendirildiniz. Tüm testler için talimatları dikkatlice okuyunuz._
 
 #### Test Beyin Fırtınası
 
-* [ ] Form arayüzünü çalıştırın ve kurcalayın.
-* [ ] Test-Senaryoları.md adında bir dosyaya bu uygulama için yazılabilecek tüm test senaryolarını yazın.
+- [ ] Form arayüzünü çalıştırın ve kurcalayın.
+- [ ] Test-Senaryoları.md adında bir dosyaya bu uygulama için yazılabilecek tüm test senaryolarını yazın.
 
 #### Test Caseleri oluşturun, Eğer;
 
-* [ ] iletişim formu hatasız yükleniyorsa.
-* [ ] başlıkta h1 elemanı bulunuyorsa. 2 tane assert ekleyin, eğer header dökümanda bulunuyorsa, başlık doğru test içeriğine sahipse.
-* [ ] kullanıcı Ad bölümüne 5 karakterden az bir şey yazarsa bileşen `1` hata mesajı içeriyorsa. async/await ve state değişimini gözlemlemek için doğru girdileri kullandığınıza emin olun.
-* [ ] kullanıcı hiçbir inputu doldurmadıysa ÜÇ hata mesajı render edildiğinde.
-* [ ] kullanıcı email bölümünü doldurmadığında bileşen BİR hata mesajı render ettiğinde.
-* [ ] eğer kullanıcı geçersiz bir mail girerse *"email geçerli bir email adresi olmalıdır."* hata mesajı render edildiğinde.
-* [ ] form soyad girilmeden gönderilirse *"soyad gereklidir."* hata mesajı render edildiğinde.
-* [ ] mesaj inputu girilmediğinde ama ad,soyad ve email geçerli değerlerle form gönderildiğinde hata mesajı gösterilmiyorsa.
-* [ ] kullanıcı tüm inputları geçerli bir şekilde doldurup gönderdiğinde tüm değerler görüntüleniyor.
+- [x] iletişim formu hatasız yükleniyorsa.
+- [x] başlıkta h1 elemanı bulunuyorsa. 2 tane assert ekleyin, eğer header dökümanda bulunuyorsa, başlık doğru test içeriğine sahipse.
+- [x] kullanıcı Ad bölümüne 5 karakterden az bir şey yazarsa bileşen `1` hata mesajı içeriyorsa. async/await ve state değişimini gözlemlemek için doğru girdileri kullandığınıza emin olun.
+- [x] kullanıcı hiçbir inputu doldurmadıysa ÜÇ hata mesajı render edildiğinde.
+- [x] kullanıcı email bölümünü doldurmadığında bileşen BİR hata mesajı render ettiğinde.
+- [x] eğer kullanıcı geçersiz bir mail girerse _"email geçerli bir email adresi olmalıdır."_ hata mesajı render edildiğinde.
+- [x] form soyad girilmeden gönderilirse _"soyad gereklidir."_ hata mesajı render edildiğinde.
+- [x] mesaj inputu girilmediğinde ama ad,soyad ve email geçerli değerlerle form gönderildiğinde hata mesajı gösterilmiyorsa.
+- [x] kullanıcı tüm inputları geçerli bir şekilde doldurup gönderdiğinde tüm değerler görüntüleniyor.
diff --git a/frontend/components/Goruntule.js b/frontend/components/Goruntule.js
@@ -1,16 +1,39 @@
-import React from 'react';
+import React from "react";
 
 const Goruntule = (props) => {
-    const { ad, soyad, email, mesaj } = props.form;
+  const { ad, soyad, email, mesaj } = props.form;
 
-    return(<div id="displayContainer">
-        <h1>Gönderilen:</h1>
+  return (
+    <div id="displayContainer" data-testid="gönderilen">
+      <h1>Gönderilen:</h1>
 
-        { ad && <p data-testid="firstnameDisplay"><strong>Ad: </strong>{ad}</p> }
-        { soyad && <p data-testid="lastnameDisplay"> <strong>Soyad: </strong>{soyad}</p> }
-        { email && <p data-testid="emailDisplay"><strong>Email: </strong>{email}</p> }
-        { mesaj && <p data-testid="messageDisplay"><strong>Mesaj: </strong>{mesaj}</p> }
-    </div>);
+      {ad && (
+        <p data-testid="firstnameDisplay">
+          <strong>Ad: </strong>
+          {ad}
+        </p>
+      )}
+      {soyad && (
+        <p data-testid="lastnameDisplay">
+          {" "}
+          <strong>Soyad: </strong>
+          {soyad}
+        </p>
+      )}
+      {email && (
+        <p data-testid="emailDisplay">
+          <strong>Email: </strong>
+          {email}
+        </p>
+      )}
+      {mesaj && (
+        <p data-testid="messageDisplay">
+          <strong>Mesaj: </strong>
+          {mesaj}
+        </p>
+      )}
+    </div>
+  );
 };
 
 export default Goruntule;
diff --git a/frontend/components/IletisimFormu.js b/frontend/components/IletisimFormu.js
@@ -1,18 +1,18 @@
 import React, { useState } from "react";
-import Goruntule from './Goruntule';
+import Goruntule from "./Goruntule";
 
 const formData = {
   ad: "",
   soyad: "",
   email: "",
-  mesaj: ""
+  mesaj: "",
 };
 
 const errorData = {
   ad: "",
   soyad: "",
   email: "",
-  mesaj: ""
+  mesaj: "",
 };
 
 const IletisimFormu = () => {
@@ -34,20 +34,22 @@ const IletisimFormu = () => {
     return "";
   };
 
-
   const handleSubmit = (e) => {
     e.preventDefault();
 
     const submitErrors = {};
-    Object.keys(errors).forEach(field => {
+    Object.keys(errors).forEach((field) => {
       submitErrors[field] = errorHandling(field, form[field]);
     });
 
     setErrors(submitErrors);
 
-    const hasErrors = (submitErrors.ad === "" && submitErrors.soyad === "" && submitErrors.email === "" && submitErrors.mesaj === "");
+    const hasErrors =
+      submitErrors.ad === "" &&
+      submitErrors.soyad === "" &&
+      submitErrors.email === "" &&
+      submitErrors.mesaj === "";
     setDisplayData(hasErrors);
-
   };
 
   const handleChange = (e) => {
@@ -59,18 +61,18 @@ const IletisimFormu = () => {
 
     setErrors({
       ...errors,
-      [e.target.name]: errorMessage
+      [e.target.name]: errorMessage,
     });
 
     setForm({
       ...form,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     });
   };
 
   return (
     <div className="App">
-      <h1>İletişim Formu</h1>
+      <h1 data-testid="header">İletişim Formu</h1>
       <form onSubmit={handleSubmit}>
         <div>
           <label htmlFor="ad">Ad*</label>
@@ -80,8 +82,9 @@ const IletisimFormu = () => {
             value={form.ad}
             id="ad"
             placeholder="İlhan"
+            data-testid="name"
           />
-          {(errors.ad) && <p data-testid="error">Hata: {errors.ad}</p>}
+          {errors.ad && <p data-testid="error">Hata: {errors.ad}</p>}
         </div>
 
         <div>
@@ -92,8 +95,9 @@ const IletisimFormu = () => {
             name="soyad"
             value={form.soyad}
             placeholder="Mansız"
+            data-testid="surname"
           />
-          {(errors.soyad) && <p data-testid="error">Hata: {errors.soyad}</p>}
+          {errors.soyad && <p data-testid="error">Hata: {errors.soyad}</p>}
         </div>
 
         <div>
@@ -104,8 +108,9 @@ const IletisimFormu = () => {
             name="email"
             value={form.email}
             placeholder="yüzyılıngolcüsü@hotmail.com"
+            data-testid="emailDegeri"
           />
-          {(errors.email) && <p data-testid="error">Hata: {errors.email}</p>}
+          {errors.email && <p data-testid="error">Hata: {errors.email}</p>}
         </div>
 
         <div>
@@ -116,12 +121,12 @@ const IletisimFormu = () => {
             id="mesaj"
             value={form.mesaj}
           />
-          {(errors.mesaj) && <p data-testid="error">Error: {errors.mesaj}</p>}
+          {errors.mesaj && <p data-testid="error">Error: {errors.mesaj}</p>}
         </div>
 
-        {displayData && <Goruntule form={form}/>}
+        {displayData && <Goruntule form={form} />}
 
-        <button>Gönder</button>
+        <button data-testid="button">Gönder</button>
       </form>
     </div>
   );

diff --git a/frontend/components/IletisimFormu.test.js b/frontend/components/IletisimFormu.test.js
@@ -1,41 +1,124 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
-import IletisimFormu from './IletisimFormu';
-
-test('hata olmadan render ediliyor', () => {
-
+import React from "react";
+import {
+  findByLabelText,
+  findByTestId,
+  fireEvent,
+  getByAltText,
+  getByTestId,
+  getByText,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import userEvent from "@testing-library/user-event";
+import IletisimFormu from "./IletisimFormu";
+import App from "../App";
+
+test("hata olmadan render ediliyor", () => {
+  // Arrange
+  render(<IletisimFormu />);
+  //Act
+  const iletisimFormu = screen.getByText(/gönder/i);
+  // Assert
+  expect(iletisimFormu).toBeInTheDocument();
 });
 
-test('iletişim formu headerı render ediliyor', () => {
-
+test("iletişim formu headerı render ediliyor", () => {
+  render(<IletisimFormu />);
+  const title = screen.getByTestId("header");
+  expect(title).toBeTruthy(); //döndürülen değer header mı?
+  expect(title).toHaveTextContent(/İletişim Formu/i); // başlık doğru test içeriğine sahip mi?
 });
 
-test('kullanıcı adını 5 karakterden az girdiğinde BİR hata mesajı render ediyor.', async () => {
-
+test("kullanıcı adını 5 karakterden az girdiğinde BİR hata mesajı render ediyor.", async () => {
+  render(<IletisimFormu />);
+  const isim = await screen.findByTestId("name");
+  fireEvent.change(isim, {
+    target: { value: "ce" },
+  });
+  await waitFor(() => {
+    expect(isim.value).toBe("ce");
+  });
+
+  //screen.debug();
+  expect(screen.getByTestId("error")).toHaveTextContent(
+    /Hata: ad en az 5 karakter olmalıdır./i
+  );
 });
 
-test('kullanıcı inputları doldurmadığında ÜÇ hata mesajı render ediliyor.', async () => {
-
+test("kullanıcı inputları doldurmadığında ÜÇ hata mesajı render ediliyor.", async () => {
+  render(<IletisimFormu />);
+  const clickButton = await screen.findByTestId("button");
+  fireEvent.click(clickButton);
+  //screen.debug();
+  expect(
+    screen.getAllByText(
+      /Hata: ad en az 5 karakter olmalıdır./i,
+      /Hata: soyad gereklidir./i,
+      /Hata: email geçerli bir email adresi olmalıdır./i
+    )
+  );
 });
 
-test('kullanıcı doğru ad ve soyad girdiğinde ama email girmediğinde BİR hata mesajı render ediliyor.', async () => {
-
+test("kullanıcı doğru ad ve soyad girdiğinde ama email girmediğinde BİR hata mesajı render ediliyor.", async () => {
+  render(<IletisimFormu />);
+  const isim = await screen.findByTestId("name");
+  userEvent.type(isim, "Ceylin");
+  const soyad = await screen.findByTestId("surname");
+  userEvent.type(soyad, "Yaşar");
+  const clickButton = await screen.findByTestId("button");
+  fireEvent.click(clickButton);
+  expect(screen.getByText(/Hata: email geçerli bir email adresi olmalıdır./i));
+  //screen.debug(
+  // screen.getByText(/Hata: email geçerli bir email adresi olmalıdır./i)
+  //);
 });
 
 test('geçersiz bir mail girildiğinde "email geçerli bir email adresi olmalıdır." hata mesajı render ediliyor', async () => {
-
+  render(<IletisimFormu />);
+  const email = await screen.findByTestId("emailDegeri");
+  userEvent.type(email, "ceylin@ceylin");
+  //screen.debug();
+  expect(screen.getByText(/Hata: email geçerli bir email adresi olmalıdır./i));
 });
 
 test('soyad girilmeden gönderilirse "soyad gereklidir." mesajı render ediliyor', async () => {
-
+  render(<IletisimFormu />);
+  const isim = await screen.findByTestId("name");
+  userEvent.type(isim, "Ceylin");
+  const email = await screen.findByTestId("emailDegeri");
+  userEvent.type(email, "[email protected]");
+  const clickButton = await screen.findByTestId("button");
+  fireEvent.click(clickButton);
+  expect(screen.getByText(/Hata: soyad gereklidir./i));
+  //   screen.debug(screen.getByText(/Hata: soyad gereklidir./i));
 });
 
-test('ad,soyad, email render ediliyor. mesaj bölümü doldurulmadığında hata mesajı render edilmiyor.', async () => {
-
+test("ad,soyad, email render ediliyor. mesaj bölümü doldurulmadığında hata mesajı render edilmiyor.", async () => {
+  render(<IletisimFormu />);
+  const isim = await screen.findByTestId("name");
+  userEvent.type(isim, "Ceylin");
+  const soyad = await screen.findByTestId("surname");
+  userEvent.type(soyad, "Yaşar");
+  const email = await screen.findByTestId("emailDegeri");
+  userEvent.type(email, "[email protected]");
+  const clickButton = await screen.findByTestId("button");
+  fireEvent.click(clickButton);
+  const hata = screen.queryByTestId("error");
+  expect(hata).not.toBeInTheDocument();
 });
 
-test('form gönderildiğinde girilen tüm değerler render ediliyor.', async () => {
-
+test("form gönderildiğinde girilen tüm değerler render ediliyor.", async () => {
+  render(<App />);
+  const isim = await screen.findByTestId("name");
+  userEvent.type(isim, "Ceylin");
+  const soyad = await screen.findByTestId("surname");
+  userEvent.type(soyad, "Yaşar");
+  const email = await screen.findByTestId("emailDegeri");
+  userEvent.type(email, "[email protected]");
+  const clickButton = await screen.findByTestId("button");
+  fireEvent.click(clickButton);
+  const displayer = screen.getByTestId("gönderilen");
+  expect(displayer).toBeInTheDocument();
 });