Merge pull request #45 from gbedardsiceupgrade/vite

Update dependencies and move to vite

README.md

@@ -3,7 +3,7 @@
 ## Prerequisites
 
 - Latest [Node.js LTS](https://nodejs.org/en/download/)
-- [yarn](https://yarnpkg.com/en/) or [npm](https://www.npmjs.com/)
+- [yarn](https://yarnpkg.com/en/)
 
 ## Goals
 
@@ -18,23 +18,19 @@ _If you have questions regarding the challenge or feel the instructions are uncl
 
 ## Implementing your solution
 
-This repository contains an empty project boilerplate created using [create-react-app](https://github.com/facebook/create-react-app). We ask that you please [fork](https://help.github.com/articles/fork-a-repo/) this repo and [clone](https://help.github.com/articles/cloning-a-repository/) this forked version to your local computer in order to start working on a solution. 
+This repository contains an empty project boilerplate created using [vite](https://vitejs.dev/). We ask that you please [fork](https://help.github.com/articles/fork-a-repo/) this repo and [clone](https://help.github.com/articles/cloning-a-repository/) this forked version to your local computer in order to start working on a solution.
 
 ### Quick start
 
 ```sh
 # with yarn
 yarn
 yarn start
-
-# with npm
-npm i
-npm start
 ```
 
 This will install all required dependencies and start a development server.
 
-> For more information on how to manage the development server and tooling, please consult the [create-react-app docs](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md).
+> For more information on how to manage the development server and tooling, please consult the [vite docs](https://vitejs.dev/guide).
 
 Once you're confident with your result, please submit your solution by contacting HR with a link to your working repository. Optionally, you may add a `INTRODUCTION.md` file to explain the different concepts explored within your implementation and why you decided to implement things the way they are, just keep in mind that the goal is to help guide the person that is going to be reviewing your code so try to make it clear and concise.
 
@@ -50,7 +46,7 @@ Your app should respond to the following 5 routes:
 
 `/` (root) The initial step should have 3 fields: first name, email and password and a next button.
 
-`/more-info` The second step should have 2 fields: a favorite color select field and an agreement checkbox. A back button allows going back to the initial step and a next button to the confirmation screen. 
+`/more-info` The second step should have 2 fields: a favorite color select field and an agreement checkbox. A back button allows going back to the initial step and a next button to the confirmation screen.
 
 `/confirmation`: The third step is a read-only confirmation screen displaying the data collected in the 2 previous steps and a button to submit the form. A back button allows going back to to the previous step.
 
@@ -66,21 +62,21 @@ The following wireframe represents how each of these pages should look and the e
 
 ### Specifications
 
-> **Note:** _There is no need to create any API endpoints_. The endpoints you need will be accessible on `http://localhost:3001` after you invoke `npm start` or `yarn start`.
+> **Note:** _There is no need to create any API endpoints_. The endpoints you need will be accessible on `http://localhost:3001` after you invoke `yarn start`.
 
 1. The list of colors to be displayed in the `/more-info` page should be built from the response to a `GET` request to `http://localhost:3001/api/colors`
 
 2. To submit the form data, use a `POST` request with an `application/json` content type to the `http://localhost:3001/api/submit` endpoint. The submitted data should look like:
 
-  ```json
-  {
-      "name": "",
-      "email": "",
-      "password": "",
-      "color": "",
-      "terms": false
-  }
-  ```
+```json
+{
+  "name": "",
+  "email": "",
+  "password": "",
+  "color": "",
+  "terms": false
+}
+```
 
 3. Show the success / error page according to the HTTP status returned from the submit request.
 

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    ["@babel/preset-react", { runtime: "automatic" }],
+  ],
+};

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <title>Upgrade challenge</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

package.json

@@ -3,20 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "express": "^4.17.1",
+    "express": "^4.18.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@vitejs/plugin-react": "^4.0.3",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "npm-run-all": "^4.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "5.0.0",
-    "supertest": "^4.0.2"
+    "supertest": "^6.3.3",
+    "vite": "^4.4.4"
   },
   "scripts": {
     "start:mocks": "node server/index.js",
-    "start:dev": "react-scripts start",
+    "start:dev": "vite",
     "start": "run-p start:*",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "build": "vite build",
+    "test": "jest --watch"
   },
   "browserslist": {
     "production": [
@@ -29,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
   }
 }

server/index.test.js

@@ -0,0 +1,68 @@
+const request = require("supertest");
+const app = require(".");
+
+const error = (err) => {
+  if (err) throw err;
+};
+
+it("returns colors", async () => {
+  const response = await request(app).get("/api/colors");
+
+  expect(response.headers["content-type"]).toEqual(
+    expect.stringContaining("json")
+  );
+  expect(response.statusCode).toBe(200);
+  expect(response.body).toEqual(["black", "blue", "green", "red", "white"]);
+});
+
+it("returns 404 when trying to GET the submit endpoint", async () => {
+  const response = await request(app).get("/api/submit");
+
+  expect(response.statusCode).toBe(404);
+});
+
+it("submits the user information", async () => {
+  const response = await request(app).post("/api/submit").send({
+    name: "Foo",
+    password: "foo",
+    email: "[email protected]",
+    color: "blue",
+    terms: true,
+  });
+
+  expect(response.statusCode).toBe(200);
+});
+
+it("returns 400 when submitting Error as the name", async () => {
+  const response = await request(app).post("/api/submit").send({
+    name: "Error",
+    password: "foo",
+    email: "[email protected]",
+    color: "blue",
+    terms: true,
+  });
+
+  expect(response.statusCode).toBe(400);
+});
+
+it("returns 400 when submitting with missing fields", async () => {
+  const response = await request(app).post("/api/submit").send({
+    name: "Error",
+    email: "[email protected]",
+    color: "blue",
+    terms: true,
+  });
+
+  expect(response.statusCode).toBe(400);
+});
+
+it("returns 400 when submitting with an empty field", async () => {
+  const response = await request(app).post("/api/submit").send({
+    name: "",
+    email: "[email protected]",
+    color: "blue",
+    terms: true,
+  });
+
+  expect(response.statusCode).toBe(400);
+});

src/App.jsx

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+
+const App = () => {
+  return (
+    <div>
+      <header>
+        <h1>Welcome to Upgrade challenge</h1>
+      </header>
+      <p>
+        To get started, edit <code>src/App.jsx</code> and save to reload.
+      </p>
+    </div>
+  );
+};
+
+export default App;

src/App.test.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  const root = createRoot(div);
+
+  root.render(<App />);
+  root.unmount(div);
+});

vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(() => {
+  return {
+    build: {
+      outDir: "build",
+    },
+    plugins: [react()],
+  };
+});