Setup template

alanpazetto · Apr 5, 2020 · a76358d · a76358d
commit a76358d
Show file tree

Hide file tree

Showing 12 changed files with 11,060 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "~/*": ["*"]
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.19.2",
+    "axios-mock-adapter": "^1.18.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --watchAll=false",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.3.0",
+    "@testing-library/react": "^10.0.2",
+    "@testing-library/user-event": "^7.1.2"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+import "./styles.css";
+
+function App() {
+  async function handleAddRepository() {
+    // TODO
+  }
+
+  async function handleRemoveRepository(id) {
+    // TODO
+  }
+
+  return (
+    <div>
+      <ul data-testid="repository-list">
+        <li>
+          Repositório 1
+
+          <button onClick={() => handleRemoveRepository(1)}>
+            Remover
+          </button>
+        </li>
+      </ul>
+
+      <button onClick={handleAddRepository}>Adicionar</button>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js
@@ -0,0 +1,66 @@
+import React from "react";
+import { render, fireEvent, act } from "@testing-library/react";
+import MockAdapter from "axios-mock-adapter";
+import api from "../services/api";
+
+const apiMock = new MockAdapter(api);
+
+import App from "../App";
+
+const wait = (amount = 0) => {
+  return new Promise((resolve) => setTimeout(resolve, amount));
+};
+
+const actWait = async (amount = 0) => {
+  await act(async () => {
+    await wait(amount);
+  });
+};
+
+describe("App component", () => {
+  it("should be able to add new repository", async () => {
+    const { getByText, getByTestId } = render(<App />);
+
+    apiMock.onGet("repositories").reply(200, []);
+
+    apiMock.onPost("repositories").reply(200, {
+      id: "123",
+      url: "https://github.com/josepholiveira",
+      title: "Desafio ReactJS",
+      techs: ["React", "Node.js"],
+    });
+
+    await actWait();
+
+    fireEvent.click(getByText("Adicionar"));
+
+    await actWait();
+
+    expect(getByTestId("repository-list")).toContainElement(
+      getByText("Desafio ReactJS")
+    );
+  });
+
+  it("should be able to remove repository", async () => {
+    const { getByText, getByTestId } = render(<App />);
+
+    apiMock.onGet("repositories").reply(200, [
+      {
+        id: "123",
+        url: "https://github.com/josepholiveira",
+        title: "Desafio ReactJS",
+        techs: ["React", "Node.js"],
+      },
+    ]);
+
+    apiMock.onDelete("repositories/123").reply(204);
+
+    await actWait();
+
+    fireEvent.click(getByText("Remover"));
+
+    await actWait();
+
+    expect(getByTestId("repository-list")).toBeEmpty();
+  });
+});
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/src/services/api.js b/src/services/api.js
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:3333",
+});
+
+export default api;
diff --git a/src/setupTests.js b/src/setupTests.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,39 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 14px;
+}
+
+div {
+  width: 100%;
+  margin: 20px;
+}
+
+div li {
+  display: flex;
+  align-items: center;
+}
+
+div li + li {
+  margin-top: 15px;
+}
+
+button {
+  background: #7159c1;
+  color: #fff;
+  border: 0;
+  padding: 10px 15px;
+  cursor: pointer;
+  margin-top: 15px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+div li button {
+  margin: 0 15px;
+  background: #ca4949;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import '@testing-library/jest-dom/extend-expect';