tests

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

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();
+  });
+});

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);
+  });
+});

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();
+  });
+});

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();
+  });
+});

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}

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();
+  });
+});

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}

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");
+  });
+});

src/setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";