diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..4d29575de8 --- /dev/null +++ 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/README.md b/README.md index 7826510179..58beeaccd8 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,70 @@ -# Module Project: Advanced Form Management - User Onboarding +# Getting Started with Create React App -## Project Description +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). -We've seen many different styles of form management by now -- simple to complex. Today we are going to unleash your inner form-wizard! 🧙 +## Available Scripts -## Instructions +In the project directory, you can run: -### Task 1: Set Up The Project +### `npm start` -- [ ] Start off by installing a blank React app by running `npx create-react-app --use-npm`. -- [ ] Run `cd ` to cd into the `` directory. -- [ ] Using `npm`, add the following as dependencies inside your React app: - - `yup` - - `axios` -- [ ] Create a component file called `Form.js`, import it into your `App.js` file, and place the component in your JSX there. +Runs the app in the development mode.\ +Open [http://localhost:3000](http://localhost:3000) to view it in your browser. -### Task 2: MVP +The page will reload when you make changes.\ +You may also see any lint errors in the console. -#### Create Your Advanced Form +### `npm test` -We want to create a form to onboard a new user to our system. We need _at least_ the following pieces of information about our new user: +Launches the test runner in the interactive watch mode.\ +See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. -- [ ] Name -- [ ] Email -- [ ] Password -- [ ] Terms of Service (checkbox) -- [ ] A Submit button to send our form data to the server. +### `npm run build` -#### Implement Form Validation and Error Messaging +Builds the app for production to the `build` folder.\ +It correctly bundles React in production mode and optimizes the build for the best performance. -Form validation is one of the facets of an application that makes it feel polished and controlled from a user perspective. With that in mind, implement the following: +The build is minified and the filenames include the hashes.\ +Your app is ready to be deployed! -- [ ] Using Yup, set up _at least_ two different validations along with custom error messages that will display on screen when validation fails. +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. -#### Make a POST Request +### `npm run eject` -Being able to `POST` data is a key skill of any developer, no matter your skill level. +**Note: this is a one-way operation. Once you `eject`, you can't go back!** -- [ ] Craft a `POST` request using `axios` that sends your form data to the following endpoint: _`https://reqres.in/api/users`_ -- [ ] Verify using a `console.log()` that you are receiving a successful response back +If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. -(Note: For those that are curious, we're using [reqres.in](https://reqres.in/) for this assignment's API. It's a free API that allows us to simulate a `POST` request for any data that we send it. Pretty awesome!) +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. -#### Display Returned Data to Screen +You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. -When you get your data back, you will want to do something with it, right? Let's display a list of users in our app. +## Learn More -- [ ] Set up a state property called `users` that is initialized with an empty array -- [ ] Every time you make a `POST` request, and get that new user data back, update your `users` state with the new user added to the array -- [ ] Render `users` in your app. You can use the html pre tag and JSON.stringify() method to display your post request. +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). -### Task 3: Stretch Goals +To learn React, check out the [React documentation](https://reactjs.org/). -The following are stretch goals that you should attempt _after_ you meet MVP for your project: +### Code Splitting -- [ ] Add basic styling to your form in your app. Make it look pretty with any styling method you choose. -- [ ] Implement a dropdown menu in your form. Add a `role` value to your state and add a dropdown with different roles for your users. -- [ ] Create 3 new inputs inside your form of your choice along with corresponding validation and error messaging -- [ ] Add to your existing handling so that, if a user inputs their email as `waffle@syrup.com`, they receive an error message in their form that says _"That email is already taken."_ +This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) -## Submission Format +### Analyzing the Bundle Size -* [ ] Submit a link to your github repository in canvas. +This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) + +### Making a Progressive Web App + +This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) + +### Advanced Configuration + +This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) + +### Deployment + +This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) + +### `npm run build` fails to minify + +This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) diff --git a/README.old.md b/README.old.md new file mode 100644 index 0000000000..7826510179 --- /dev/null +++ b/README.old.md @@ -0,0 +1,64 @@ +# Module Project: Advanced Form Management - User Onboarding + +## Project Description + +We've seen many different styles of form management by now -- simple to complex. Today we are going to unleash your inner form-wizard! 🧙 + +## Instructions + +### Task 1: Set Up The Project + +- [ ] Start off by installing a blank React app by running `npx create-react-app --use-npm`. +- [ ] Run `cd ` to cd into the `` directory. +- [ ] Using `npm`, add the following as dependencies inside your React app: + - `yup` + - `axios` +- [ ] Create a component file called `Form.js`, import it into your `App.js` file, and place the component in your JSX there. + +### Task 2: MVP + +#### Create Your Advanced Form + +We want to create a form to onboard a new user to our system. We need _at least_ the following pieces of information about our new user: + +- [ ] Name +- [ ] Email +- [ ] Password +- [ ] Terms of Service (checkbox) +- [ ] A Submit button to send our form data to the server. + +#### Implement Form Validation and Error Messaging + +Form validation is one of the facets of an application that makes it feel polished and controlled from a user perspective. With that in mind, implement the following: + +- [ ] Using Yup, set up _at least_ two different validations along with custom error messages that will display on screen when validation fails. + +#### Make a POST Request + +Being able to `POST` data is a key skill of any developer, no matter your skill level. + +- [ ] Craft a `POST` request using `axios` that sends your form data to the following endpoint: _`https://reqres.in/api/users`_ +- [ ] Verify using a `console.log()` that you are receiving a successful response back + +(Note: For those that are curious, we're using [reqres.in](https://reqres.in/) for this assignment's API. It's a free API that allows us to simulate a `POST` request for any data that we send it. Pretty awesome!) + +#### Display Returned Data to Screen + +When you get your data back, you will want to do something with it, right? Let's display a list of users in our app. + +- [ ] Set up a state property called `users` that is initialized with an empty array +- [ ] Every time you make a `POST` request, and get that new user data back, update your `users` state with the new user added to the array +- [ ] Render `users` in your app. You can use the html pre tag and JSON.stringify() method to display your post request. + +### Task 3: Stretch Goals + +The following are stretch goals that you should attempt _after_ you meet MVP for your project: + +- [ ] Add basic styling to your form in your app. Make it look pretty with any styling method you choose. +- [ ] Implement a dropdown menu in your form. Add a `role` value to your state and add a dropdown with different roles for your users. +- [ ] Create 3 new inputs inside your form of your choice along with corresponding validation and error messaging +- [ ] Add to your existing handling so that, if a user inputs their email as `waffle@syrup.com`, they receive an error message in their form that says _"That email is already taken."_ + +## Submission Format + +* [ ] Submit a link to your github repository in canvas. diff --git a/cypress.json b/cypress.json new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/cypress.json @@ -0,0 +1 @@ +{} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000000..02e4254378 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/fixtures/profile.json b/cypress/fixtures/profile.json new file mode 100644 index 0000000000..b6c355ca5c --- /dev/null +++ b/cypress/fixtures/profile.json @@ -0,0 +1,5 @@ +{ + "id": 8739, + "name": "Jane", + "email": "jane@example.com" +} \ No newline at end of file diff --git a/cypress/fixtures/users.json b/cypress/fixtures/users.json new file mode 100644 index 0000000000..79b699aa77 --- /dev/null +++ b/cypress/fixtures/users.json @@ -0,0 +1,232 @@ +[ + { + "id": 1, + "name": "Leanne Graham", + "username": "Bret", + "email": "Sincere@april.biz", + "address": { + "street": "Kulas Light", + "suite": "Apt. 556", + "city": "Gwenborough", + "zipcode": "92998-3874", + "geo": { + "lat": "-37.3159", + "lng": "81.1496" + } + }, + "phone": "1-770-736-8031 x56442", + "website": "hildegard.org", + "company": { + "name": "Romaguera-Crona", + "catchPhrase": "Multi-layered client-server neural-net", + "bs": "harness real-time e-markets" + } + }, + { + "id": 2, + "name": "Ervin Howell", + "username": "Antonette", + "email": "Shanna@melissa.tv", + "address": { + "street": "Victor Plains", + "suite": "Suite 879", + "city": "Wisokyburgh", + "zipcode": "90566-7771", + "geo": { + "lat": "-43.9509", + "lng": "-34.4618" + } + }, + "phone": "010-692-6593 x09125", + "website": "anastasia.net", + "company": { + "name": "Deckow-Crist", + "catchPhrase": "Proactive didactic contingency", + "bs": "synergize scalable supply-chains" + } + }, + { + "id": 3, + "name": "Clementine Bauch", + "username": "Samantha", + "email": "Nathan@yesenia.net", + "address": { + "street": "Douglas Extension", + "suite": "Suite 847", + "city": "McKenziehaven", + "zipcode": "59590-4157", + "geo": { + "lat": "-68.6102", + "lng": "-47.0653" + } + }, + "phone": "1-463-123-4447", + "website": "ramiro.info", + "company": { + "name": "Romaguera-Jacobson", + "catchPhrase": "Face to face bifurcated interface", + "bs": "e-enable strategic applications" + } + }, + { + "id": 4, + "name": "Patricia Lebsack", + "username": "Karianne", + "email": "Julianne.OConner@kory.org", + "address": { + "street": "Hoeger Mall", + "suite": "Apt. 692", + "city": "South Elvis", + "zipcode": "53919-4257", + "geo": { + "lat": "29.4572", + "lng": "-164.2990" + } + }, + "phone": "493-170-9623 x156", + "website": "kale.biz", + "company": { + "name": "Robel-Corkery", + "catchPhrase": "Multi-tiered zero tolerance productivity", + "bs": "transition cutting-edge web services" + } + }, + { + "id": 5, + "name": "Chelsey Dietrich", + "username": "Kamren", + "email": "Lucio_Hettinger@annie.ca", + "address": { + "street": "Skiles Walks", + "suite": "Suite 351", + "city": "Roscoeview", + "zipcode": "33263", + "geo": { + "lat": "-31.8129", + "lng": "62.5342" + } + }, + "phone": "(254)954-1289", + "website": "demarco.info", + "company": { + "name": "Keebler LLC", + "catchPhrase": "User-centric fault-tolerant solution", + "bs": "revolutionize end-to-end systems" + } + }, + { + "id": 6, + "name": "Mrs. Dennis Schulist", + "username": "Leopoldo_Corkery", + "email": "Karley_Dach@jasper.info", + "address": { + "street": "Norberto Crossing", + "suite": "Apt. 950", + "city": "South Christy", + "zipcode": "23505-1337", + "geo": { + "lat": "-71.4197", + "lng": "71.7478" + } + }, + "phone": "1-477-935-8478 x6430", + "website": "ola.org", + "company": { + "name": "Considine-Lockman", + "catchPhrase": "Synchronised bottom-line interface", + "bs": "e-enable innovative applications" + } + }, + { + "id": 7, + "name": "Kurtis Weissnat", + "username": "Elwyn.Skiles", + "email": "Telly.Hoeger@billy.biz", + "address": { + "street": "Rex Trail", + "suite": "Suite 280", + "city": "Howemouth", + "zipcode": "58804-1099", + "geo": { + "lat": "24.8918", + "lng": "21.8984" + } + }, + "phone": "210.067.6132", + "website": "elvis.io", + "company": { + "name": "Johns Group", + "catchPhrase": "Configurable multimedia task-force", + "bs": "generate enterprise e-tailers" + } + }, + { + "id": 8, + "name": "Nicholas Runolfsdottir V", + "username": "Maxime_Nienow", + "email": "Sherwood@rosamond.me", + "address": { + "street": "Ellsworth Summit", + "suite": "Suite 729", + "city": "Aliyaview", + "zipcode": "45169", + "geo": { + "lat": "-14.3990", + "lng": "-120.7677" + } + }, + "phone": "586.493.6943 x140", + "website": "jacynthe.com", + "company": { + "name": "Abernathy Group", + "catchPhrase": "Implemented secondary concept", + "bs": "e-enable extensible e-tailers" + } + }, + { + "id": 9, + "name": "Glenna Reichert", + "username": "Delphine", + "email": "Chaim_McDermott@dana.io", + "address": { + "street": "Dayna Park", + "suite": "Suite 449", + "city": "Bartholomebury", + "zipcode": "76495-3109", + "geo": { + "lat": "24.6463", + "lng": "-168.8889" + } + }, + "phone": "(775)976-6794 x41206", + "website": "conrad.com", + "company": { + "name": "Yost and Sons", + "catchPhrase": "Switchable contextually-based project", + "bs": "aggregate real-time technologies" + } + }, + { + "id": 10, + "name": "Clementina DuBuque", + "username": "Moriah.Stanton", + "email": "Rey.Padberg@karina.biz", + "address": { + "street": "Kattie Turnpike", + "suite": "Suite 198", + "city": "Lebsackbury", + "zipcode": "31428-2261", + "geo": { + "lat": "-38.2386", + "lng": "57.2232" + } + }, + "phone": "024-648-3804", + "website": "ambrose.net", + "company": { + "name": "Hoeger LLC", + "catchPhrase": "Centralized empowering task-force", + "bs": "target end-to-end models" + } + } +] \ No newline at end of file diff --git a/cypress/integration/1-getting-started/todo.spec.js b/cypress/integration/1-getting-started/todo.spec.js new file mode 100644 index 0000000000..4768ff923e --- /dev/null +++ b/cypress/integration/1-getting-started/todo.spec.js @@ -0,0 +1,143 @@ +/// + +// Welcome to Cypress! +// +// This spec file contains a variety of sample tests +// for a todo list app that are designed to demonstrate +// the power of writing tests in Cypress. +// +// To learn more about how Cypress works and +// what makes it such an awesome testing tool, +// please read our getting started guide: +// https://on.cypress.io/introduction-to-cypress + +describe('example to-do app', () => { + beforeEach(() => { + // Cypress starts out with a blank slate for each test + // so we must tell it to visit our website with the `cy.visit()` command. + // Since we want to visit the same URL at the start of all our tests, + // we include it in our beforeEach function so that it runs before each test + cy.visit('https://example.cypress.io/todo') + }) + + it('displays two todo items by default', () => { + // We use the `cy.get()` command to get all elements that match the selector. + // Then, we use `should` to assert that there are two matched items, + // which are the two default items. + cy.get('.todo-list li').should('have.length', 2) + + // We can go even further and check that the default todos each contain + // the correct text. We use the `first` and `last` functions + // to get just the first and last matched elements individually, + // and then perform an assertion with `should`. + cy.get('.todo-list li').first().should('have.text', 'Pay electric bill') + cy.get('.todo-list li').last().should('have.text', 'Walk the dog') + }) + + it('can add new todo items', () => { + // We'll store our item text in a variable so we can reuse it + const newItem = 'Feed the cat' + + // Let's get the input element and use the `type` command to + // input our new list item. After typing the content of our item, + // we need to type the enter key as well in order to submit the input. + // This input has a data-test attribute so we'll use that to select the + // element in accordance with best practices: + // https://on.cypress.io/selecting-elements + cy.get('[data-test=new-todo]').type(`${newItem}{enter}`) + + // Now that we've typed our new item, let's check that it actually was added to the list. + // Since it's the newest item, it should exist as the last element in the list. + // In addition, with the two default items, we should have a total of 3 elements in the list. + // Since assertions yield the element that was asserted on, + // we can chain both of these assertions together into a single statement. + cy.get('.todo-list li') + .should('have.length', 3) + .last() + .should('have.text', newItem) + }) + + it('can check off an item as completed', () => { + // In addition to using the `get` command to get an element by selector, + // we can also use the `contains` command to get an element by its contents. + // However, this will yield the