From baa75b5546f41424ed8295fefd5c7ccb11e43b17 Mon Sep 17 00:00:00 2001
From: WiktorSmura <wiktorsmura24@gmail.com>
Date: Wed, 13 Jul 2022 18:42:56 +0200
Subject: [PATCH] tests

---
 src/App.js                                    |  2 +-
 src/App.test.js                               | 40 +++++++++++++++++++
 src/components/Button/__test__/Button.test.js | 19 +++++++++
 .../Description/__test__/Description.test.js  | 16 ++++++++
 src/components/Header/__test__/Header.test.js | 19 +++++++++
 src/components/PreviewBox/PreviewBox.jsx      |  2 +-
 .../PreviewBox/__test__/PreviewBox.test.js    | 12 ++++++
 src/components/Textarea/Textarea.jsx          |  1 +
 .../Textarea/__test__/Textarea.test.js        | 22 ++++++++++
 src/setupTests.js                             |  1 +
 10 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 src/App.test.js
 create mode 100644 src/components/Button/__test__/Button.test.js
 create mode 100644 src/components/Description/__test__/Description.test.js
 create mode 100644 src/components/Header/__test__/Header.test.js
 create mode 100644 src/components/PreviewBox/__test__/PreviewBox.test.js
 create mode 100644 src/components/Textarea/__test__/Textarea.test.js
 create mode 100644 src/setupTests.js

diff --git a/src/App.js b/src/App.js
index ad4ecd2..c56cfd4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,7 @@ function App() {
   const { showPreview, markdown, setMarkdown } = useAppContext();
 
   return (
-    <div className="App">
+    <div className="App" data-testid="app">
       <Header title="markdown" />
       <div className={styles.editorBox}>
         <Textarea
diff --git a/src/App.test.js b/src/App.test.js
new file mode 100644
index 0000000..5a53725
--- /dev/null
+++ b/src/App.test.js
@@ -0,0 +1,40 @@
+import { screen, render, fireEvent } from "@testing-library/react";
+import App from "./App";
+import AppProvider from "./context/AppContext";
+
+const MockApp = () => {
+  return (
+    <AppProvider>
+      <App />
+    </AppProvider>
+  );
+};
+
+describe("App", () => {
+  it("should render without crashing", () => {
+    render(<MockApp />);
+    const appElement = screen.getByTestId("app");
+    expect(appElement).toBeInTheDocument();
+  });
+
+  it("should toggle preview on button click", () => {
+    render(<MockApp />);
+    const previewElement = screen.getByTestId("preview-box");
+    const buttonElement = screen.getByText(/show preview/i);
+    expect(previewElement).toBeVisible();
+    fireEvent.click(buttonElement);
+    expect(previewElement).not.toBeVisible();
+  });
+
+  it("should format markdown from textarea and display it in preview", () => {
+    render(<MockApp />);
+    const textareaElement = screen.getByPlaceholderText(
+      /your amazing markdown/i
+    );
+    fireEvent.change(textareaElement, {
+      target: { value: `<p data-testid="test-paragraph"></p>` },
+    });
+    const renderedParagraphElement = screen.getByTestId("test-paragraph");
+    expect(renderedParagraphElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Button/__test__/Button.test.js b/src/components/Button/__test__/Button.test.js
new file mode 100644
index 0000000..7463bcf
--- /dev/null
+++ b/src/components/Button/__test__/Button.test.js
@@ -0,0 +1,19 @@
+import { screen, render, fireEvent } from "@testing-library/react";
+import Button from "../Button";
+
+const handleClick = jest.fn();
+
+describe("Button", () => {
+  it("should render with text passed in prop", () => {
+    render(<Button text="click me" handleClick={handleClick} />);
+    const buttonElement = screen.getByText(/click me/i);
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  it("should call a function once after click", () => {
+    render(<Button text="click me" handleClick={handleClick} />);
+    const buttonElement = screen.getByText(/click me/i);
+    fireEvent.click(buttonElement);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/Description/__test__/Description.test.js b/src/components/Description/__test__/Description.test.js
new file mode 100644
index 0000000..2c26041
--- /dev/null
+++ b/src/components/Description/__test__/Description.test.js
@@ -0,0 +1,16 @@
+import { screen, render } from "@testing-library/react";
+import Description from "../Description";
+
+describe("Description", () => {
+  it("should render without crashing", () => {
+    render(<Description text="Description" />);
+    const descriptionElement = screen.getByRole("heading");
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
+  it("should render with uppercase text given in prop", () => {
+    render(<Description text="Description" />);
+    const descriptionElement = screen.getByText(/DESCRIPTION/i);
+    expect(descriptionElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Header/__test__/Header.test.js b/src/components/Header/__test__/Header.test.js
new file mode 100644
index 0000000..b220ab2
--- /dev/null
+++ b/src/components/Header/__test__/Header.test.js
@@ -0,0 +1,19 @@
+import { screen, render } from "@testing-library/react";
+import Header from "../Header";
+import AppProvider from "../../../context/AppContext";
+
+const MockHeader = () => {
+  return (
+    <AppProvider>
+      <Header />
+    </AppProvider>
+  );
+};
+
+describe("Header", () => {
+  it("should render with text given in prop", () => {
+    render(<MockHeader title="title" />);
+    const headingElement = screen.getByText(/title/i);
+    expect(headingElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/PreviewBox/PreviewBox.jsx b/src/components/PreviewBox/PreviewBox.jsx
index ebfbb9f..ff0e7bd 100644
--- a/src/components/PreviewBox/PreviewBox.jsx
+++ b/src/components/PreviewBox/PreviewBox.jsx
@@ -4,7 +4,7 @@ import Description from "../Description/Description";
 
 function PreviewBox({ dangerouslySetInnerHTML }) {
   return (
-    <div className={styles.container}>
+    <div className={styles.container} data-testid="preview-box">
       <Description text="preview" />
       <div
         className={styles.previewBox}
diff --git a/src/components/PreviewBox/__test__/PreviewBox.test.js b/src/components/PreviewBox/__test__/PreviewBox.test.js
new file mode 100644
index 0000000..324b4c3
--- /dev/null
+++ b/src/components/PreviewBox/__test__/PreviewBox.test.js
@@ -0,0 +1,12 @@
+import { screen, render } from "@testing-library/react";
+import PreviewBox from "../PreviewBox";
+
+const HTML = `<p>inner html</p>`;
+
+describe("PreviewBox", () => {
+  it("should render with inner html given in props", () => {
+    render(<PreviewBox dangerouslySetInnerHTML={{ __html: HTML }} />);
+    const paragraphElement = screen.getByText(/inner html/i);
+    expect(paragraphElement).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Textarea/Textarea.jsx b/src/components/Textarea/Textarea.jsx
index 3139df7..9ff575b 100644
--- a/src/components/Textarea/Textarea.jsx
+++ b/src/components/Textarea/Textarea.jsx
@@ -7,6 +7,7 @@ function textarea({ value, onChange }) {
     <div className={styles.container}>
       <Description text={"markdown"} />
       <textarea
+        placeholder="your amazing markdown"
         className={styles.textEditor}
         value={value}
         onChange={onChange}
diff --git a/src/components/Textarea/__test__/Textarea.test.js b/src/components/Textarea/__test__/Textarea.test.js
new file mode 100644
index 0000000..52dcb10
--- /dev/null
+++ b/src/components/Textarea/__test__/Textarea.test.js
@@ -0,0 +1,22 @@
+import { screen, render, fireEvent } from "@testing-library/react";
+import textarea from "../Textarea";
+import Textarea from "../Textarea";
+
+describe("Textarea", () => {
+  it("should render without crashing", () => {
+    render(<Textarea />);
+    const textareaElement = screen.getByPlaceholderText(
+      /your amazing markdown/i
+    );
+    expect(textareaElement).toBeInTheDocument();
+  });
+
+  it("should be able to type", () => {
+    render(<Textarea />);
+    const textareaElement = screen.getByPlaceholderText(
+      /your amazing markdown/i
+    );
+    fireEvent.change(textareaElement, { target: { value: "amazing value" } });
+    expect(textareaElement.value).toBe("amazing value");
+  });
+});
diff --git a/src/setupTests.js b/src/setupTests.js
new file mode 100644
index 0000000..d0de870
--- /dev/null
+++ b/src/setupTests.js
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";