From 96eed84cd0800e7dd04027b5d72ce8064a4236a0 Mon Sep 17 00:00:00 2001 From: William Wu <74469686+wllmwu@users.noreply.github.com> Date: Mon, 29 Jan 2024 09:53:23 -0800 Subject: [PATCH] Update guide (#39) * Add instructions for updating TaskForm test * Add note about Jest * Increase upper time estimates --- writeup/Introduction.md | 8 +++++++- writeup/part-0/README.md | 2 +- writeup/part-1/README.md | 2 +- writeup/part-2/2-3-Task-assignment.md | 5 +++++ writeup/part-2/README.md | 4 ++-- 5 files changed, 16 insertions(+), 5 deletions(-) diff --git a/writeup/Introduction.md b/writeup/Introduction.md index e752b4f..897af29 100644 --- a/writeup/Introduction.md +++ b/writeup/Introduction.md @@ -25,7 +25,7 @@ In TSE, your team's product manager and designers will plan out most of the proj ## Tools and technologies -The engineering manager on each TSE project chooses its tech stack (programming languages and frameworks) before development starts. The **MERN stack** (MongoDB, Express, React, Node) is very popular in the industry, so it's been our most common stack historically and we'll use it for this todo list app too. Beyond that, we'll use **TypeScript** to write our actual code and **Git** to manage version history. Expand the sections below to learn more about each piece of this tech stack. +The engineering manager on each TSE project chooses its tech stack (programming languages and frameworks) before development starts. The **MERN stack** (MongoDB, Express, React, Node) is very popular in the industry, so it's been our most common stack historically and we'll use it for this todo list app too. Beyond that, we'll use **TypeScript** to write our actual code, **Jest** to test it, and **Git** to manage version history. Expand the sections below to learn more about each piece of this tech stack.
ℹ️ Definition: Frontend vs. backend @@ -130,6 +130,12 @@ _…we recommend checking out the official [React quick start guide](https://rea
+### Jest + +[Jest](https://jestjs.io) is an **automated testing framework for JavaScript projects** that can work with many other specialized technologies, including React. We won't actually do much regarding testing in this guide because our focus is on core web development skills, but your engineering manager may place more emphasis on testing for your project. + +We also use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for extra powerful integration between Jest and React. RTL essentially simulates a browser, including the ability to render React components and trigger user interaction events. + ### Git and GitHub
diff --git a/writeup/part-0/README.md b/writeup/part-0/README.md index 9b42249..e0a7200 100644 --- a/writeup/part-0/README.md +++ b/writeup/part-0/README.md @@ -2,7 +2,7 @@ **Project setup and introduction to the code** -Estimated time: 1 to 2 hours +Estimated time: 1 to 4 hours ## Table of contents diff --git a/writeup/part-1/README.md b/writeup/part-1/README.md index a7c2e18..bfa2a45 100644 --- a/writeup/part-1/README.md +++ b/writeup/part-1/README.md @@ -2,7 +2,7 @@ **Minimum viable product** -Estimated time: 2 to 4 hours +Estimated time: 2 to 8 hours In Part 1, we'll implement the MVP of this application with the following features: diff --git a/writeup/part-2/2-3-Task-assignment.md b/writeup/part-2/2-3-Task-assignment.md index 352b54a..37c23c9 100644 --- a/writeup/part-2/2-3-Task-assignment.md +++ b/writeup/part-2/2-3-Task-assignment.md @@ -61,6 +61,11 @@ Finally, we'll add the ability to assign users to tasks and see who is the assig 1. In the `TaskForm` component, add a `TextField` for the assignee and move the Save button next to it. You'll have to add a new row for these components in the JSX and another state variable like `title` and `description`. 2. Update the `handleSubmit` function to call `createTask` if `mode` is `"create"` and `updateTask` if `mode` is `"edit"`. For `updateTask`, make sure you include all Task fields, not just those visible in the form. Remember to call `onSubmit` as well if the request succeeds. +3. Since we're changing the functionality of this component, we should update its tests too. Skim through `TaskForm.test.tsx` if you haven't already to see how we use Jest and React Testing Library to test a frontend component. It's okay if you don't understand everything, because the main focus in software development is getting the actual features done—but it's useful to write tests when you can. + + For this guide, you don't need to add any new tests. However, an existing test will now fail because we added a call to a new function, `updateTask`, without providing a "mock" version of that function to Jest. Write a new mock for `updateTask` at the top of the test file and add it to the `jest.mock()` call (you can basically just copy the code for `mockCreateTask`). Then, update the third test (`"calls submit handler with edited fields"`) to use the correct mock, since we now expect the component to call `updateTask` instead of `createTask` when it's in `"edit"` mode. + + You can run the tests locally with the terminal command `npm run tests` or by using the [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) extension for VS Code. You should also be able to see the test results on GitHub when you commit and push your changes. ## Update to page: `TaskDetail` diff --git a/writeup/part-2/README.md b/writeup/part-2/README.md index 21c6126..6bc3d69 100644 --- a/writeup/part-2/README.md +++ b/writeup/part-2/README.md @@ -2,7 +2,7 @@ **More features** -Estimated time: 2 to 6 hours +Estimated time: 2 to 12 hours Now that we've implemented an MVP, it's time to start thinking about v2. For v2, we'd like to add these additional features: @@ -10,7 +10,7 @@ Now that we've implemented an MVP, it's time to start thinking about v2. For v2, - Task detail page that displays more information about a task - Ability to edit a task's title, description, and assignee -You can find the designs for these features on the "Part 2" page in Figma. The walkthrough sections in this part of the guide are less detailed than those in Part 1. We hope you feel confident enough to work mostly on your own by this point, but you can absolutely still reach out to **#onboarding** if you get stuck! +You can find the designs for these features on the "Part 2" page in Figma. _Note that the walkthrough sections in this part of the guide are intentionally less detailed than those in Part 1._ We hope you feel confident enough to work mostly on your own by this point, but you can absolutely still reach out to **#onboarding** if you get stuck! ## Table of contents